Extend AttendanceStatus component with date functionality

client/src/components/dueDates/dueDatesUtils.ts

@@ -59,3 +59,12 @@ export const getWeekday = (date: Dayjs) => {
   }
   return "";
 };
+
+export const isInFuture = (date: string) => {
+  // is today before the prop date?
+  return dayjs().isBefore(date, "day");
+};
+
+export const howManyDaysInFuture = (date: string) => {
+  return dayjs(date).diff(dayjs().startOf("day"), "day");
+};

client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue

@@ -1,16 +1,31 @@
 <script setup lang="ts">
+import { howManyDaysInFuture, isInFuture } from "@/components/dueDates/dueDatesUtils";
+import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 
 export type Status = "done" | "soon" | "now"; // todo: define this
 
 export interface Props {
-  status: Status;
+  done: boolean;
+  date: string;
 }
 
+const { t } = useTranslation();
+
 const props = defineProps<Props>();
 
+const status = computed(() => {
+  if (props.done) {
+    return "done";
+  }
+  if (isInFuture(props.date)) {
+    return "soon";
+  }
+  return "now";
+});
+
 const style = computed(() => {
-  switch (props.status) {
+  switch (status.value) {
     case "done":
       return "bg-green-200";
     case "soon":
@@ -22,7 +37,7 @@ const style = computed(() => {
 });
 
 const icon = computed(() => {
-  switch (props.status) {
+  switch (status.value) {
     case "done":
       return "it-icon-check";
     case "soon":
@@ -31,13 +46,32 @@ const icon = computed(() => {
       return "it-icon-info";
   }
 });
+
+const days = computed(() => {
+  return howManyDaysInFuture(props.date);
+});
+
+const text = computed(() => {
+  switch (status.value) {
+    case "done":
+      return t("a.Du hast die Anwesenheit bestätigt.");
+    case "soon":
+      return t("a.Der Präsenzkurs findet in {{days}} Tagen statt.", {
+        days: days.value,
+      });
+    case "now":
+    default:
+      return t("a.Überprüfe jetzt die Anwesenheit.");
+  }
+});
 </script>
+
 <template>
   <div
     class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
     :class="style"
   >
     <component :is="icon" class="h-7 w-7" />
-    <p>Du hast die Anwesenheit bestätigt.</p>
+    <p>{{ text }}</p>
   </div>
 </template>