Add translations, clean up code

client/src/components/__tests__/AttendanceStatus.spec.ts

@@ -36,6 +36,17 @@ describe("AttendanceStatus.vue", async () => {
     expect(wrapper.text()).toContain("Der Präsenzkurs findet in 2 Tagen statt.");
   });
 
+  test("Attendance check future", () => {
+    const future = "1999-04-01T06:30:00+00:00";
+    const wrapper = mount(AttendanceStatus, {
+      props: {
+        done: false,
+        date: future,
+      },
+    });
+    expect(wrapper.text()).toContain("Der Präsenzkurs findet in einem Tag statt.");
+  });
+
   test("Attendance check now", () => {
     const yesterday = "1999-03-30T06:30:00+00:00";
     const wrapper = mount(AttendanceStatus, {

client/src/locales/de/translation.json

@@ -85,7 +85,8 @@
   "a.Deine Änderungen wurden gespeichert": "Deine Änderungen wurden gespeichert",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Der Preis für den Lehrgang {course} beträgt {price} exkl. MWSt.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Der Präsenzkurs findet in {{days}} Tagen statt.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Der Präsenzkurs findet in einem Tag statt.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Der Präsenzkurs findet in {{count}} Tagen statt.",
   "a.Details anschauen": "Details anschauen",
   "a.Details anzeigen": "Details anzeigen",
   "a.Deutsch": "Deutsch",

client/src/locales/fr/translation.json

@@ -85,7 +85,8 @@
   "a.Deine Änderungen wurden gespeichert": "Tes modifications ont été enregistrées",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Le cours et l'examen pour obtenir le certificat d'association comme courtier/agent d'assurance.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Le prix de la formation {course} est de {price} hors TVA.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Le cours de présence se déroule en {{days}} jours.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Le cours de présence se déroule en une jour.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Le cours de présence se déroule en {{count}} jours.",
   "a.Details anschauen": "Voir les détails",
   "a.Details anzeigen": "Afficher les détails",
   "a.Deutsch": "Allemand",

client/src/locales/it/translation.json

@@ -83,7 +83,8 @@
   "a.Deine Änderungen wurden gespeichert": "Le tue modifiche sono state salvate",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Il corso e l'esame per ottenere il certificato di associazione come intermediario/agente di assicurazione.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Il prezzo del {corso} è {prezzo} IVA esclusa.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Il corso di presenza si svolge in {{days}} giorni.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Il corso di presenza si svolge in un giorno.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Il corso di presenza si svolge in {{count}} giorni.",
   "a.Details anschauen": "Visualizza dettagli",
   "a.Details anzeigen": "Mostrare i dettagli",
   "a.Deutsch": "Tedesco",

client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue

@@ -14,6 +14,7 @@ import { useUserStore } from "@/stores/user";
 import { openDataAsXls } from "@/utils/export";
 import { useMutation, useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
+import { useTranslation } from "i18next-vue";
 import log from "loglevel";
 import { computed, onMounted, ref } from "vue";
 import AttendanceCheck from "../cockpitPage/AttendanceCheck.vue";
@@ -39,6 +40,8 @@ const userPresence = ref(new Map<string, boolean>());
 const disclaimerConfirmed = ref(false);
 const attendanceSaved = ref(false);
 
+const { t } = useTranslation();
+
 function resetState() {
   userPresence.value = new Map<string, boolean>();
   disclaimerConfirmed.value = false;
@@ -152,7 +155,9 @@ const formattedCourseDueDate = computed(() => {
         <div class="grid grid-cols-[2fr_1fr] justify-between gap-8 bg-white py-6">
           <div class="col-span-1 flex flex-col gap-2 px-6">
             <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
-            <h5>Circle «{{ currentCourse?.learning_content.circle?.title }}»</h5>
+            <h5>
+              {{ t("a.Circle") }} «{{ currentCourse?.learning_content.circle?.title }}»
+            </h5>
             <h5>{{ formattedCourseDueDate }}</h5>
           </div>
           <button

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

@@ -5,6 +5,7 @@ import { ATTENDANCE_ROUTE } from "@/router/names";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
+import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 import AttendanceStatus from "./AttendanceStatus.vue";
 
@@ -12,6 +13,8 @@ const attendanceRoute = {
   name: ATTENDANCE_ROUTE,
 };
 
+const { t } = useTranslation();
+
 const expertCockpitStore = useExpertCockpitStore();
 const currentCourse = computed(() => expertCockpitStore.currentCourse);
 
@@ -55,7 +58,7 @@ const formattedCourseDueDate = computed(() => {
     class="my-4 flex flex-col items-start justify-between gap-4 bg-white p-6 lg:my-0 lg:flex-row lg:items-center lg:gap-0"
   >
     <div>
-      <h2 class="text-base font-bold">Präsenzkurs</h2>
+      <h2 class="text-base font-bold">{{ t("a.Präsenzkurs") }}</h2>
       <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
     <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />

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

@@ -14,7 +14,7 @@ const { t } = useTranslation();
 
 const props = defineProps<Props>();
 
-const status = computed(() => {
+const status = computed<Status>(() => {
   if (props.done) {
     return "done";
   }
@@ -57,7 +57,7 @@ const text = computed(() => {
       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,
+        count: days.value,
       });
     case "now":
     default:

client/src/stores/expertCockpit.ts

@@ -39,12 +39,6 @@ async function courseCircles(
   return [];
 }
 
-export type ExpertCockpitStoreState = {
-  courseSessionMembers: CourseSessionUser[] | undefined;
-  circles: CircleExpertCockpit[] | undefined;
-  currentCircle: CircleExpertCockpit | undefined;
-};
-
 export const useExpertCockpitStore = defineStore("expertCockpit", () => {
   const courseSessionMembers = ref<CourseSessionUser[] | undefined>(undefined);
   const circles = ref<CircleExpertCockpit[] | undefined>([]);