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">
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>