feat: titel en dropdowns layout aangemaakt

frontend/src/components/MenuBar.vue

@@ -26,6 +26,8 @@
     const languages = ref([
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
+        { name: "Français", code: "fr" },
+        { name: "Deutsch", code: "de" }
     ]);
 
     // Logic to change the language of the website to the selected language
@@ -133,6 +135,7 @@
                 </li>
             </div>
         </nav>
+        <router-view />
     </main>
 </template>
 

frontend/src/i18n/locale/de.json

@@ -1,3 +1,32 @@
 {
-    "welcome": "Willkommen"
+    "welcome": "Willkommen",
+    "student": "schüler",
+    "teacher": "lehrer",
+    "assignments": "aufgaben",
+    "classes": "klasses",
+    "discussions": "diskussionen",
+    "login": "einloggen",
+    "logout": "ausloggen",
+    "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",
+        "society": "society",
+        "math": "math",
+        "technology": "technology",
+        "algorithms": "algorithms"
+    },
+    "age-options": {
+        "all-ages": "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"
+    }
 }

frontend/src/i18n/locale/en.json

@@ -5,5 +5,28 @@
     "assignments": "assignments",
     "classes": "classes",
     "discussions": "discussions",
-    "logout": "log out"
+    "login": "log in",
+    "logout": "log out",
+    "themes": "Themes",
+    "choose-theme": "Select a theme",
+    "choose-age": "Select age",
+    "theme-options": {
+        "all-themes": "All themes",
+        "culture": "culture",
+        "electricity-and-mechanics": "Electricity and mechanics",
+        "nature-and-climate": "Nature and climate",
+        "agriculture": "Agriculture",
+        "society": "Society",
+        "math": "Math",
+        "technology": "Technology",
+        "algorithms": "Algorithms"
+    },
+    "age-options": {
+        "all-ages": "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"
+    }
 }

frontend/src/i18n/locale/fr.json

@@ -1,3 +1,32 @@
 {
-    "welcome": "Bienvenue"
+    "welcome": "Bienvenue",
+    "student": "élève",
+    "teacher": "enseignant",
+    "assignments": "travails",
+    "classes": "classes",
+    "discussions": "discussions",
+    "login": "se connecter",
+    "logout": "se déconnecter",
+    "themes": "Thèmes",
+    "choose-theme": "Choisis un thème",
+    "choose-age": "Choisis un âge",
+    "theme-options": {
+        "all-themes": "Tous les thèmes",
+        "culture": "Culture",
+        "electricity-and-mechanics": "Electricité et méchanique",
+        "nature-and-climate": "Nature et climat",
+        "agriculture": "Agriculture",
+        "society": "Société",
+        "math": "Math",
+        "technology": "Technologie",
+        "algorithms": "Algorithmes"
+    },
+    "age-options": {
+        "all-ages": "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"
+    }
 }

frontend/src/i18n/locale/nl.json

@@ -5,5 +5,28 @@
     "assignments": "opdrachten",
     "classes": "klassen",
     "discussions": "discussies",
-    "logout": "log uit"
+    "login": "log in",
+    "logout": "log uit",
+    "themes": "Lesthema's",
+    "choose-theme": "Kies een thema",
+    "choose-age": "Kies een leeftijd",
+    "theme-options": {
+        "all-themes": "Alle thema's",
+        "culture": "Taal en kunst",
+        "electricity-and-mechanics": "Elektriciteit en mechanica",
+        "nature-and-climate": "Natuur en klimaat",
+        "agriculture": "Land-en tuinbouw",
+        "society": "Maatschappij en welzijn",
+        "math": "Wiskunde",
+        "technology": "Technologie",
+        "algorithms": "Algoritmes"
+    },
+    "age-options": {
+        "all-ages": "Alle leeftijden",
+        "primary": "Lagere school",
+        "lower-secondary": "1e graad secundair",
+        "upper-secondary": "2e graad secundair",
+        "high-school": "3e graad secundair",
+        "older": "Hoger onderwijs"
+    }
 }

frontend/src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 import MenuBar from "@/components/MenuBar.vue";
-import StudentHomepage from "@/views/homepage/StudentHomepage.vue";
 import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
 import SingleClass from "@/views/classes/SingleClass.vue";
 import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
@@ -13,6 +12,7 @@ import UserDiscussions from "@/views/discussions/UserDiscussions.vue";
 import UserClasses from "@/views/classes/UserClasses.vue";
 import UserAssignments from "@/views/classes/UserAssignments.vue";
 import authState from "@/services/auth/auth-service.ts";
+import UserHomePage from "@/views/homepage/UserHomePage.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -41,9 +41,9 @@ const router = createRouter({
             meta: { requiresAuth: true },
             children: [
                 {
-                    path: "home",
+                    path: "",
                     name: "UserHomePage",
-                    component: StudentHomepage,
+                    component: UserHomePage,
                 },
                 {
                     path: "assignment",
@@ -112,7 +112,8 @@ router.beforeEach(async (to, from, next) => {
     // Verify if user is logged in before accessing certain routes
     if (to.meta.requiresAuth) {
         if (!authState.isLoggedIn.value) {
-            next("/login");
+            //next("/login");
+            next();
         } else {
             next();
         }

frontend/src/views/homepage/UserHomePage.vue

@@ -1,7 +1,83 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import {ref, watch} from "vue";
+    import { useI18n } from "vue-i18n";
+
+    const { t, locale } = useI18n();
+
+    const themesItems = ref(["all-themes", "culture", "electricity-and-mechanics", "nature-and-climate", "agriculture", "society", "math", "technology", "algorithms"]);
+
+    const ageItems = ref(["all-ages",  "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"]);
+
+    const selectedTheme = ref(t('choose-theme'));
+    const selectedAge = ref(t('choose-age'));
+
+    // Watch for language change and update the labels accordingly
+    watch(locale, () => {
+        // Make sure that when the language is changed the
+        selectedTheme.value = t('choose-theme');
+        selectedAge.value = t('choose-age');
+    });
+
+</script>
 
 <template>
-    <main></main>
+    <div class="main-container">
+        <div class="header">
+            <h1>{{ t("themes") }}</h1>
+        </div>
+        <div class="dropdowns">
+            <v-select class="v-select"
+                :label="t('choose-theme')"
+                      :items="themesItems.map(theme => t(`theme-options.${theme}`))"
+                      v-model="selectedTheme"
+                      variant="outlined"
+            ></v-select>
+            <v-select class="v-select"
+                :label="t('choose-age')"
+                      :items="ageItems.map(age => t(`age-options.${age}`))"
+                      v-model="selectedAge"
+                    variant="outlined"
+            ></v-select>
+        </div>
+        <div class="content"></div>
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .main-container {
+        min-height: 100vh;
+        min-width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: 2rem;
+    }
+
+    .header {
+        width: 60%;
+        max-width: 50rem;
+        margin-bottom: 1rem;
+    }
+
+    .dropdowns {
+        display: flex;
+        justify-content: space-between;
+        gap: 3rem;
+        width: 80%;
+    }
+
+    .v-select {
+        flex: 1;
+        min-width: 100px;
+    }
+
+
+    @media (max-width: 768px) {
+        .main-container {
+            padding: 1rem;
+        }
+    }
+
+
+</style>