feat: thema's worden gerefetched van de api als de taal veranderd

frontend/src/components/BrowseThemes.vue

@@ -1,18 +1,30 @@
 <script setup lang="ts">
-    import ThemeCard from "@/components/ThemeCard.vue";
-    import {onMounted, ref} from "vue";
-    const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+import ThemeCard from "@/components/ThemeCard.vue";
+import { ref, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-    const fetchThemes = async () => {
-        try {
-            const response = await fetch("http://localhost:3000/api/theme");
-            cards.value = await response.json();
-        } catch (error) {
-            console.error("Error fetching themes:", error);
-        }
-    };
+const { locale } = useI18n();
+const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+
+// Fetch themes based on the current language
+const fetchThemes = async () => {
+    try {
+        const language = localStorage.getItem("user-lang") || locale.value;
+        const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
+        cards.value = await response.json();
+        console.log(cards.value);
+    } catch (error) {
+        console.error("Error fetching themes:", error);
+    }
+};
+
+onMounted(fetchThemes);
+
+// Refetch themes when language changes
+watch(locale, () => {
+    fetchThemes();
+});
 
-    onMounted(fetchThemes);
 </script>
 
 <template>
@@ -25,15 +37,15 @@
                 sm="6"
                 md="4"
                 lg="4"
-            class="d-flex"
+                class="d-flex"
             >
-            <ThemeCard
-                :path="card.key"
-                :title="card.title"
-                :description="card.description"
-                :image="card.image"
-                class="fill-height"
-            />
+                <ThemeCard
+                    :path="card.key"
+                    :title="card.title"
+                    :description="card.description"
+                    :image="card.image"
+                    class="fill-height"
+                />
             </v-col>
         </v-row>
     </v-container>

frontend/src/components/ThemeCard.vue

@@ -22,9 +22,9 @@
                 contain
                 class="title-image"
             ></v-img>
-            <span class="title">{{ t(title) }}</span>
+            <span class="title">{{ title }}</span>
         </v-card-title>
-        <v-card-text class="description flex-grow-1">{{ t(description) }}</v-card-text>
+        <v-card-text class="description flex-grow-1">{{ description }}</v-card-text>
         <v-card-actions>
             <v-btn :to="`theme/${path}`" variant="text">
                 {{ t("read-more") }}

frontend/src/i18n/locale/de.json

@@ -28,5 +28,8 @@
         "upper-secondary": "14-16 jahre alt",
         "high-school": "16-18 jahre alt",
         "older": "18 und älter"
+    },
+    "basics-ai": {
+        "title": "Grundlegende Prinzipien der AI"
     }
 }

frontend/src/i18n/locale/en.json

@@ -29,5 +29,9 @@
         "high-school": "16-18 years old",
         "older": "18 and older"
     },
-    "read-more": "read-more"
+    "read-more": "read-more",
+    "basics-ai": {
+        "title": "Basic principles of AI",
+        "description": "Under this teaching theme, we combine several activities that cover the basics of artificial intelligence (AI). Students learn what AI is, how it works and how it can be applied in different domains."
+    }
 }