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

Merging origin/dev into feat/assignment-page

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-04-07 18:11:13 +02:00
commit 2868435c62
87 changed files with 989 additions and 1002 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/views/CallbackPage.vue
View file

@ -8,7 +8,7 @@
onMounted(async () => {
try {
await auth.handleLoginCallback();
await router.replace("/"); // Redirect to home (or dashboard)
await router.replace("/user"); // Redirect to theme page
} catch (error) {
console.error("OIDC callback error:", error);
}

13
frontend/src/views/HomePage.vue
View file

@ -25,9 +25,10 @@
<div class="container_left">
<img
:src="dwengoLogo"
alt="Dwengo logo"
style="align-self: center"
/>
<h> {{ t("homeTitle") }}</h>
<h1>{{ t("homeTitle") }}</h1>
<p class="info">
{{ t("homeIntroduction1") }}
</p>
@ -55,7 +56,7 @@
width="125"
src="/assets/home/innovative.png"
></v-img>
<h class="big">{{ t("innovative") }}</h>
<h2 class="big">{{ t("innovative") }}</h2>
</div>
<div class="img_small">
<v-img
@ -63,7 +64,7 @@
width="125"
src="/assets/home/research_based.png"
></v-img>
<h class="big">{{ t("researchBased") }}</h>
<h2 class="big">{{ t("researchBased") }}</h2>
</div>
<div class="img_small">
<v-img
@ -71,7 +72,7 @@
width="125"
src="/assets/home/inclusive.png"
></v-img>
<h class="big">{{ t("sociallyRelevant") }}</h>
<h2 class="big">{{ t("sociallyRelevant") }}</h2>
</div>
<div class="img_small">
<v-img
@ -79,7 +80,7 @@
width="125"
src="/assets/home/socially_relevant.png"
></v-img>
<h class="big">{{ t("inclusive") }}</h>
<h2 class="big">{{ t("inclusive") }}</h2>
</div>
</div>
<div class="container_right">
@ -158,7 +159,7 @@
margin-bottom: 10px;
}
h {
h2 {
font-size: large;
font-weight: bold;
align-self: center;

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

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

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

@ -1,13 +1,13 @@
<script setup lang="ts">
import {ref, watch} from "vue";
import {useI18n} from "vue-i18n";
import {THEMESITEMS, AGE_TO_THEMES} from "@/utils/constants.ts";
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { THEMESITEMS, AGE_TO_THEMES } from "@/utils/constants.ts";
import BrowseThemes from "@/components/BrowseThemes.vue";
const {t, locale} = useI18n();
const { t, locale } = useI18n();
const selectedThemeKey = ref<string>('all');
const selectedAgeKey = ref<string>('all');
const selectedThemeKey = ref<string>("all");
const selectedAgeKey = ref<string>("all");
const allThemes = ref(Object.keys(THEMESITEMS));
const availableThemes = ref([...allThemes.value]);
@ -17,18 +17,17 @@ import {ref, watch} from "vue";
// Reset selection when language changes
watch(locale, () => {
selectedThemeKey.value = 'all';
selectedAgeKey.value = 'all';
selectedThemeKey.value = "all";
selectedAgeKey.value = "all";
});
watch(selectedThemeKey, () => {
if (selectedThemeKey.value === "all") {
availableAges.value = [...allAges.value]; // Reset to all ages
} else {
const themes = THEMESITEMS[selectedThemeKey.value];
availableAges.value = allAges.value.filter(age =>
AGE_TO_THEMES[age]?.some(theme => themes.includes(theme))
availableAges.value = allAges.value.filter((age) =>
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
} else {
const themes = AGE_TO_THEMES[selectedAgeKey.value];
availableThemes.value = allThemes.value.filter(theme =>
THEMESITEMS[theme]?.some(theme => themes.includes(theme))
availableThemes.value = allThemes.value.filter((theme) =>
THEMESITEMS[theme]?.some((theme) => themes.includes(theme)),
);
}
});
</script>
<template>
<div class="main-container">
<h1 class="title">{{ t("themes") }}</h1>
<v-container class="dropdowns">
<v-select class="v-select"
:label="t('choose-theme')"
:items="availableThemes.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
v-model="selectedThemeKey"
item-title="title"
item-value="value"
variant="outlined"
<v-select
class="v-select"
:label="t('choose-theme')"
:items="availableThemes.map((theme) => ({ title: t(`theme-options.${theme}`), value: theme }))"
v-model="selectedThemeKey"
item-title="title"
item-value="value"
variant="outlined"
/>
<v-select
class="v-select"
: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"
item-title="label"
item-value="key"
@ -71,55 +69,55 @@ import {ref, watch} from "vue";
></v-select>
</v-container>
<BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
<BrowseThemes
:selectedTheme="selectedThemeKey ?? ''"
:selectedAge="selectedAgeKey ?? ''"
/>
</div>
</template>
<style scoped>
.main-container {
min-height: 100vh;
min-width: 100vw;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.title {
max-width: 50rem;
margin-left: 1rem;
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
}
.dropdowns {
display: flex;
justify-content: space-between;
gap: 5rem;
width: 80%;
}
.v-select {
flex: 1;
min-width: 100px;
}
@media (max-width: 768px) {
.main-container {
padding: 1rem;
}
}
@media (max-width: 700px) {
.dropdowns {
min-height: 100vh;
min-width: 100vw;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
justify-content: flex-start;
}
.title {
max-width: 50rem;
margin-left: 1rem;
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
}
.dropdowns {
display: flex;
justify-content: space-between;
gap: 5rem;
width: 80%;
}
}
.v-select {
flex: 1;
min-width: 100px;
}
@media (max-width: 768px) {
.main-container {
padding: 1rem;
}
}
@media (max-width: 700px) {
.dropdowns {
flex-direction: column;
gap: 1rem;
width: 80%;
}
}
</style>