tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

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

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-20 11:59:42 +01:00
parent 0d1ed55001
commit 9547c76e80
4 changed files with 42 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/components/BrowseThemes.vue
View file

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

4
frontend/src/components/ThemeCard.vue
View file

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

3
frontend/src/i18n/locale/de.json
View file

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

6
frontend/src/i18n/locale/en.json
View file

@ -29,5 +29,9 @@
"high-school": "16-18 years old", "high-school": "16-18 years old",
"older": "18 and older" "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."
}
} }