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">
import ThemeCard from "@/components/ThemeCard.vue";
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import ThemeCard from "@/components/ThemeCard.vue";
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import {THEMESITEMS} from "@/utils/constants.ts";
const { locale } = useI18n();
const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
// Receive the selectedTheme from the parent component
const props = defineProps<{ selectedTheme: 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);
const {locale} = useI18n();
const allCards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
// Fetch all themes based on the current language
async function fetchThemes() {
try {
// 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>

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

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

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

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

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

@ -11,7 +11,7 @@
"choose-theme": "Choisis un thème",
"choose-age": "Choisis un âge",
"theme-options": {
"all-themes": "Tous les thèmes",
"all": "Tous les thèmes",
"culture": "Culture",
"electricity-and-mechanics": "Electricité et méchanique",
"nature-and-climate": "Nature et climat",
@ -22,11 +22,12 @@
"algorithms": "Algorithmes"
},
"age-options": {
"all-ages": "Tous les âges",
"all": "Tous les âges",
"primary-school": "Ecole primaire",
"lower-secondary": "12-14 ans",
"upper-secondary": "14-16 ans",
"high-school": "16-18 ans",
"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-age": "Kies een leeftijd",
"theme-options": {
"all-themes": "Alle thema's",
"all": "Alle thema's",
"culture": "Taal en kunst",
"electricity-and-mechanics": "Elektriciteit en mechanica",
"nature-and-climate": "Natuur en klimaat",
@ -22,11 +22,12 @@
"algorithms": "Algoritmes"
},
"age-options": {
"all-ages": "Alle leeftijden",
"all": "Alle leeftijden",
"primary": "Lagere school",
"lower-secondary": "1e graad secundair",
"upper-secondary": "2e graad secundair",
"high-school": "3e graad secundair",
"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([
"all-themes",
"culture",
"electricity-and-mechanics",
"nature-and-climate",
"agriculture",
"society",
"math",
"technology",
"algorithms",
]);
export const THEMESITEMS: Record<string, string[]> = {
"all": THEMES_KEYS,
"culture": ["art", "wegostem", "chatbot"],
"electricity-and-mechanics": ["socialrobot", "wegostem", "stem", "physical_computing"],
"nature-and-climate": ["kiks", "agriculture"],
"agriculture": ["agriculture"],
"society": ["kiks", "socialrobot", "care", "chatbot"],
"math": ["kiks", "math_with_python", "python_programming", "stem", "care", "basics_ai"],
"technology": ["socialrobot", "wegostem", "computational_thinking", "stem", "physical_computing", "basics_ai"],
"algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
};
export const AGEITEMS = ref([
"all-ages",
export const AGEITEMS = [
"all",
"primary-school",
"lower-secondary",
"upper-secondary",
"high-school",
"older",
]);
];

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

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