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

refactor: Linting

Browse source
This commit is contained in:
Tibo De Peuter 2025-03-23 14:32:27 +01:00
parent 2490e61a78
commit 437c7c62de
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
11 changed files with 219 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { useThemeQuery } from "@/queries/themes.ts";
const props = defineProps({ const props = defineProps({
selectedTheme: { type: String, required: true }, selectedTheme: { type: String, required: true },
selectedAge: { type: String, required: true } selectedAge: { type: String, required: true },
}); });
const { locale } = useI18n(); const { locale } = useI18n();
@ -23,9 +23,10 @@ watchEffect(() => {
allCards.value = themes; allCards.value = themes;
if (props.selectedTheme) { if (props.selectedTheme) {
cards.value = themes.filter((theme) => cards.value = themes.filter(
(theme) =>
THEMESITEMS[props.selectedTheme]?.includes(theme.key) && THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
AGE_TO_THEMES[props.selectedAge]?.includes(theme.key) AGE_TO_THEMES[props.selectedAge]?.includes(theme.key),
); );
} else { } else {
cards.value = themes; cards.value = themes;
@ -33,15 +34,23 @@ watchEffect(() => {
}); });
</script> </script>
<template> <template>
<v-container> <v-container>
<div v-if="isLoading" class="text-center py-10"> <div
<v-progress-circular indeterminate color="primary" /> v-if="isLoading"
class="text-center py-10"
>
<v-progress-circular
indeterminate
color="primary"
/>
<p>Loading...</p> <p>Loading...</p>
</div> </div>
<div v-else-if="error" class="text-center py-10 text-error"> <div
v-else-if="error"
class="text-center py-10 text-error"
>
<v-icon large>mdi-alert-circle</v-icon> <v-icon large>mdi-alert-circle</v-icon>
<p>Error loading: {{ error.message }}</p> <p>Error loading: {{ error.message }}</p>
</div> </div>

2
frontend/src/components/MenuBar.vue
View file

@ -22,7 +22,7 @@
{ name: "English", code: "en" }, { name: "English", code: "en" },
{ name: "Nederlands", code: "nl" }, { name: "Nederlands", code: "nl" },
{ name: "Français", code: "fr" }, { name: "Français", code: "fr" },
{ name: "Deutsch", code: "de" } { name: "Deutsch", code: "de" },
]); ]);
// Logic to change the language of the website to the selected language // Logic to change the language of the website to the selected language

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

@ -31,7 +31,10 @@ defineProps<{
</v-card-title> </v-card-title>
<v-card-text class="description flex-grow-1">{{ 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") }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>

2
frontend/src/controllers/base-controller.ts
View file

@ -7,7 +7,7 @@ export class BaseController {
this.baseUrl = `${apiConfig.baseUrl}/${basePath}`; this.baseUrl = `${apiConfig.baseUrl}/${basePath}`;
} }
protected async get<T>(path: string, queryParams?: Record<string, any>): Promise<T> { protected async get<T>(path: string, queryParams?: Record<string, string | number | boolean>): Promise<T> {
let url = `${this.baseUrl}${path}`; let url = `${this.baseUrl}${path}`;
if (queryParams) { if (queryParams) {
const query = new URLSearchParams(); const query = new URLSearchParams();

4
frontend/src/controllers/controllers.ts
View file

@ -1,11 +1,11 @@
import { ThemeController } from "@/controllers/themes.ts"; import { ThemeController } from "@/controllers/themes.ts";
export function controllerGetter<T>(Factory: new () => T): () => T { export function controllerGetter<T>(factory: new () => T): () => T {
let instance: T | undefined; let instance: T | undefined;
return (): T => { return (): T => {
if (!instance) { if (!instance) {
instance = new Factory(); instance = new factory();
} }
return instance; return instance;
}; };

6
frontend/src/controllers/themes.ts
View file

@ -5,12 +5,12 @@ export class ThemeController extends BaseController {
super("theme"); super("theme");
} }
getAll(language: string | null = null) { async getAll(language: string | null = null): Promise<unknown> {
const query = language ? { language } : undefined; const query = language ? { language } : undefined;
return this.get<any[]>("/", query); return this.get("/", query);
} }
getHruidsByKey(themeKey: string) { async getHruidsByKey(themeKey: string): Promise<string[]> {
return this.get<string[]>(`/${encodeURIComponent(themeKey)}`); return this.get<string[]>(`/${encodeURIComponent(themeKey)}`);
} }
} }

2
frontend/src/main.ts
View file

@ -10,7 +10,7 @@ import i18n from "./i18n/i18n.ts";
// Components // Components
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
const app = createApp(App); const app = createApp(App);

25
frontend/src/queries/themes.ts
View file

@ -1,25 +1,24 @@
import { useQuery } from '@tanstack/vue-query'; import { useQuery, UseQueryReturnType } from "@tanstack/vue-query";
import { getThemeController } from '@/controllers/controllers'; import { getThemeController } from "@/controllers/controllers";
import { type MaybeRefOrGetter, toValue } from "vue"; import { type MaybeRefOrGetter, toValue } from "vue";
const themeController = getThemeController(); const themeController = getThemeController();
export const useThemeQuery = (language: MaybeRefOrGetter<string>) => { export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<never, Error> {
return useQuery({ return useQuery({
queryKey: ['themes', language], queryKey: ["themes", language],
queryFn: () => { queryFn: async () => {
const lang = toValue(language); const lang = toValue(language);
return themeController.getAll(lang); return themeController.getAll(lang);
}, },
enabled: () => !!toValue(language), enabled: () => Boolean(toValue(language)),
}); });
}; }
export const useThemeHruidsQuery = (themeKey: string | null) => { export function useThemeHruidsQuery(themeKey: string | null): UseQueryReturnType<never, Error> {
return useQuery({ return useQuery({
queryKey: ['theme-hruids', themeKey], queryKey: ["theme-hruids", themeKey],
queryFn: () => themeController.getHruidsByKey(themeKey!), queryFn: async () => themeController.getHruidsByKey(themeKey!),
enabled: !!themeKey, enabled: Boolean(themeKey),
}); });
}; }

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

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

8
frontend/src/views/SingleTheme.vue
View file

@ -1,11 +1,7 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<template> <template>
<main></main> <main></main>
</template> </template>
<style scoped> <style scoped></style>
</style>

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

@ -6,8 +6,8 @@ import {ref, watch} from "vue";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const selectedThemeKey = ref<string>('all'); const selectedThemeKey = ref<string>("all");
const selectedAgeKey = ref<string>('all'); const selectedAgeKey = ref<string>("all");
const allThemes = ref(Object.keys(THEMESITEMS)); const allThemes = ref(Object.keys(THEMESITEMS));
const availableThemes = ref([...allThemes.value]); const availableThemes = ref([...allThemes.value]);
@ -17,18 +17,17 @@ import {ref, watch} from "vue";
// Reset selection when language changes // Reset selection when language changes
watch(locale, () => { watch(locale, () => {
selectedThemeKey.value = 'all'; selectedThemeKey.value = "all";
selectedAgeKey.value = 'all'; selectedAgeKey.value = "all";
}); });
watch(selectedThemeKey, () => { watch(selectedThemeKey, () => {
if (selectedThemeKey.value === "all") { if (selectedThemeKey.value === "all") {
availableAges.value = [...allAges.value]; // Reset to all ages availableAges.value = [...allAges.value]; // Reset to all ages
} else { } else {
const themes = THEMESITEMS[selectedThemeKey.value]; const themes = THEMESITEMS[selectedThemeKey.value];
availableAges.value = allAges.value.filter(age => availableAges.value = allAges.value.filter((age) =>
AGE_TO_THEMES[age]?.some(theme => themes.includes(theme)) AGE_TO_THEMES[age]?.some((theme) => themes.includes(theme)),
); );
} }
}); });
@ -38,32 +37,31 @@ import {ref, watch} from "vue";
availableThemes.value = [...allThemes.value]; // Reset to all themes availableThemes.value = [...allThemes.value]; // Reset to all themes
} else { } else {
const themes = AGE_TO_THEMES[selectedAgeKey.value]; const themes = AGE_TO_THEMES[selectedAgeKey.value];
availableThemes.value = allThemes.value.filter(theme => availableThemes.value = allThemes.value.filter((theme) =>
THEMESITEMS[theme]?.some(theme => themes.includes(theme)) THEMESITEMS[theme]?.some((theme) => themes.includes(theme)),
); );
} }
}); });
</script> </script>
<template> <template>
<div class="main-container"> <div class="main-container">
<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="availableThemes.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))" :items="availableThemes.map((theme) => ({ title: t(`theme-options.${theme}`), value: theme }))"
v-model="selectedThemeKey" v-model="selectedThemeKey"
item-title="title" item-title="title"
item-value="value" item-value="value"
variant="outlined" variant="outlined"
/> />
<v-select <v-select
class="v-select" class="v-select"
:label="t('choose-age')" :label="t('choose-age')"
:items="availableAges.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))" :items="availableAges.map((age) => ({ key: age, label: t(`age-options.${age}`), value: age }))"
v-model="selectedAgeKey" v-model="selectedAgeKey"
item-title="label" item-title="label"
item-value="key" item-value="key"
@ -71,7 +69,10 @@ import {ref, watch} from "vue";
></v-select> ></v-select>
</v-container> </v-container>
<BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/> <BrowseThemes
:selectedTheme="selectedThemeKey ?? ''"
:selectedAge="selectedAgeKey ?? ''"
/>
</div> </div>
</template> </template>
@ -94,7 +95,6 @@ import {ref, watch} from "vue";
justify-content: center; justify-content: center;
} }
.dropdowns { .dropdowns {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -107,7 +107,6 @@ import {ref, watch} from "vue";
min-width: 100px; min-width: 100px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.main-container { .main-container {
padding: 1rem; padding: 1rem;
@ -121,5 +120,4 @@ import {ref, watch} from "vue";
width: 80%; width: 80%;
} }
} }
</style> </style>