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

feat: selecteren van thema's in dropdown werkt

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-20 22:10:59 +01:00
parent 9547c76e80
commit d4e0dc2703
7 changed files with 107 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,29 +1,50 @@
<script setup lang="ts"> <script setup lang="ts">
import ThemeCard from "@/components/ThemeCard.vue"; import ThemeCard from "@/components/ThemeCard.vue";
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import {THEMESITEMS} from "@/utils/constants.ts";
const { locale } = useI18n(); // Receive the selectedTheme from the parent component
const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]); const props = defineProps<{ selectedTheme: string }>();
// Fetch themes based on the current language const {locale} = useI18n();
const fetchThemes = async () => {
try { const allCards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
const language = localStorage.getItem("user-lang") || locale.value; const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
cards.value = await response.json(); // Fetch all themes based on the current language
console.log(cards.value); async function fetchThemes() {
} catch (error) { try {
console.error("Error fetching themes:", error); // Get the current selected language
const language = locale.value;
const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
// Update the cards value with the fetched themes
allCards.value = await response.json();
cards.value = allCards.value;
//console.log(allCards.value);
} catch (error) {
console.error("Error fetching themes:", error);
}
} }
};
onMounted(fetchThemes); // Fetch on mount
onMounted(fetchThemes);
// Re-fetch themes when language changes
watch(locale, () => {
fetchThemes();
});
// Watch for selectedTheme change and filter themes
watch(() => props.selectedTheme, (newTheme) => {
if (newTheme && newTheme !== "all") {
cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key));
} else {
cards.value = allCards.value;
}
});
// Refetch themes when language changes
watch(locale, () => {
fetchThemes();
});
</script> </script>

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

@ -10,26 +10,24 @@
"themes": "Themen", "themes": "Themen",
"choose-theme": "Wähle ein thema", "choose-theme": "Wähle ein thema",
"choose-age": "Alter auswählen", "choose-age": "Alter auswählen",
"themes-options": { "theme-options": {
"all-themes": "Alle themen", "all": "Alle themen",
"culture": "culture", "culture": "Kultur",
"electricity-and-mechanics": "Electricity and mechanics", "electricity-and-mechanics": "Elektrizität und Mechanik",
"nature-and-climate": "Nature and climate", "nature-and-climate": "Natur und Klima",
"agriculture": "agriculture", "agriculture": "Landwirtschaft",
"society": "society", "society": "society",
"math": "math", "math": "Mathematik",
"technology": "technology", "technology": "Technologie",
"algorithms": "algorithms" "algorithms": "Algorithmisches Denken"
}, },
"age-options": { "age-options": {
"all-ages": "Alle altersgruppen", "all": "Alle altersgruppen",
"primary-school": "Grundschule", "primary-school": "Grundschule",
"lower-secondary": "12-14 jahre alt", "lower-secondary": "12-14 jahre alt",
"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": { "read-more": "Mehr lesen"
"title": "Grundlegende Prinzipien der AI"
}
} }

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

@ -11,7 +11,7 @@
"choose-theme": "Select a theme", "choose-theme": "Select a theme",
"choose-age": "Select age", "choose-age": "Select age",
"theme-options": { "theme-options": {
"all-themes": "All themes", "all": "All themes",
"culture": "culture", "culture": "culture",
"electricity-and-mechanics": "Electricity and mechanics", "electricity-and-mechanics": "Electricity and mechanics",
"nature-and-climate": "Nature and climate", "nature-and-climate": "Nature and climate",
@ -22,16 +22,12 @@
"algorithms": "Algorithms" "algorithms": "Algorithms"
}, },
"age-options": { "age-options": {
"all-ages": "All ages", "all": "All ages",
"primary-school": "Primary school", "primary-school": "Primary school",
"lower-secondary": "12-14 years old", "lower-secondary": "12-14 years old",
"upper-secondary": "14-16 years old", "upper-secondary": "14-16 years old",
"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."
}
} }

7
frontend/src/i18n/locale/fr.json
View file

@ -11,7 +11,7 @@
"choose-theme": "Choisis un thème", "choose-theme": "Choisis un thème",
"choose-age": "Choisis un âge", "choose-age": "Choisis un âge",
"theme-options": { "theme-options": {
"all-themes": "Tous les thèmes", "all": "Tous les thèmes",
"culture": "Culture", "culture": "Culture",
"electricity-and-mechanics": "Electricité et méchanique", "electricity-and-mechanics": "Electricité et méchanique",
"nature-and-climate": "Nature et climat", "nature-and-climate": "Nature et climat",
@ -22,11 +22,12 @@
"algorithms": "Algorithmes" "algorithms": "Algorithmes"
}, },
"age-options": { "age-options": {
"all-ages": "Tous les âges", "all": "Tous les âges",
"primary-school": "Ecole primaire", "primary-school": "Ecole primaire",
"lower-secondary": "12-14 ans", "lower-secondary": "12-14 ans",
"upper-secondary": "14-16 ans", "upper-secondary": "14-16 ans",
"high-school": "16-18 ans", "high-school": "16-18 ans",
"older": "18 et plus" "older": "18 et plus"
} },
"read-more": "En savoir plus"
} }

7
frontend/src/i18n/locale/nl.json
View file

@ -11,7 +11,7 @@
"choose-theme": "Kies een thema", "choose-theme": "Kies een thema",
"choose-age": "Kies een leeftijd", "choose-age": "Kies een leeftijd",
"theme-options": { "theme-options": {
"all-themes": "Alle thema's", "all": "Alle thema's",
"culture": "Taal en kunst", "culture": "Taal en kunst",
"electricity-and-mechanics": "Elektriciteit en mechanica", "electricity-and-mechanics": "Elektriciteit en mechanica",
"nature-and-climate": "Natuur en klimaat", "nature-and-climate": "Natuur en klimaat",
@ -22,11 +22,12 @@
"algorithms": "Algoritmes" "algorithms": "Algoritmes"
}, },
"age-options": { "age-options": {
"all-ages": "Alle leeftijden", "all": "Alle leeftijden",
"primary": "Lagere school", "primary": "Lagere school",
"lower-secondary": "1e graad secundair", "lower-secondary": "1e graad secundair",
"upper-secondary": "2e graad secundair", "upper-secondary": "2e graad secundair",
"high-school": "3e graad secundair", "high-school": "3e graad secundair",
"older": "Hoger onderwijs" "older": "Hoger onderwijs"
} },
"read-more": "Lees meer"
} }

35
frontend/src/utils/constants.ts
View file

@ -1,22 +1,27 @@
import { ref } from "vue"; export const THEMES_KEYS = [
"kiks", "art", "socialrobot", "agriculture", "wegostem",
"computational_thinking", "math_with_python", "python_programming",
"stem", "care", "chatbot", "physical_computing", "algorithms", "basics_ai"
];
export const THEMESITEMS = ref([ export const THEMESITEMS: Record<string, string[]> = {
"all-themes", "all": THEMES_KEYS,
"culture", "culture": ["art", "wegostem", "chatbot"],
"electricity-and-mechanics", "electricity-and-mechanics": ["socialrobot", "wegostem", "stem", "physical_computing"],
"nature-and-climate", "nature-and-climate": ["kiks", "agriculture"],
"agriculture", "agriculture": ["agriculture"],
"society", "society": ["kiks", "socialrobot", "care", "chatbot"],
"math", "math": ["kiks", "math_with_python", "python_programming", "stem", "care", "basics_ai"],
"technology", "technology": ["socialrobot", "wegostem", "computational_thinking", "stem", "physical_computing", "basics_ai"],
"algorithms", "algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
]); };
export const AGEITEMS = ref([
"all-ages", export const AGEITEMS = [
"all",
"primary-school", "primary-school",
"lower-secondary", "lower-secondary",
"upper-secondary", "upper-secondary",
"high-school", "high-school",
"older", "older",
]); ];

43
frontend/src/views/homepage/UserHomePage.vue
View file

@ -1,22 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch} from "vue"; import { ref, watch } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import {AGEITEMS, THEMESITEMS} from "@/utils/constants.ts"; import { THEMESITEMS, AGEITEMS } from "@/utils/constants.ts";
import BrowseThemes from "@/components/BrowseThemes.vue"; import BrowseThemes from "@/components/BrowseThemes.vue";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const selectedThemeKey = ref<string | null>(null);
const selectedAgeKey = ref<string | null>(null);
const selectedTheme = ref(t('choose-theme')); // Reset selection when language changes
const selectedAge = ref(t('choose-age'));
// Watch for language change and update the labels accordingly
watch(locale, () => { watch(locale, () => {
// Make sure that when the language is changed the selectedThemeKey.value = null;
selectedTheme.value = t('choose-theme'); selectedAgeKey.value = null;
selectedAge.value = t('choose-age');
}); });
</script> </script>
<template> <template>
@ -24,19 +21,27 @@
<h1 class="title">{{ t("themes") }}</h1> <h1 class="title">{{ t("themes") }}</h1>
<v-container class="dropdowns"> <v-container class="dropdowns">
<v-select class="v-select" <v-select class="v-select"
:label="t('choose-theme')" :label="t('choose-theme')"
:items="THEMESITEMS.map(theme => t(`theme-options.${theme}`))" :items="Object.keys(THEMESITEMS).map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
v-model="selectedTheme" v-model="selectedThemeKey"
item-title="title"
item-value="value"
variant="outlined" variant="outlined"
></v-select> />
<v-select class="v-select"
<v-select
class="v-select"
:label="t('choose-age')" :label="t('choose-age')"
:items="AGEITEMS.map(age => t(`age-options.${age}`))" :items="AGEITEMS.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))"
v-model="selectedAge" v-model="selectedAgeKey"
variant="outlined" item-title="label"
item-value="key"
variant="outlined"
></v-select> ></v-select>
</v-container> </v-container>
<BrowseThemes/>
<BrowseThemes :selectedTheme="selectedThemeKey ?? ''" />
</div> </div>
</template> </template>