feat: titel en dropdowns layout aangemaakt
This commit is contained in:
Joyelle Ndagijimana
parent
9029d93e30
commit
501ea6259c
8 changed files with 2814 additions and 473 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue