Merge branch 'dev' into chore/development-workflow
This commit is contained in:
commit
8389414ea4
GPG key ID:
38297DE43F75FFE2
31 changed files with 1907 additions and 124 deletions
|
|
@ -16,12 +16,14 @@
|
|||
"test:e2e": "playwright test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/vue-query": "^5.69.0",
|
||||
"axios": "^1.8.2",
|
||||
"oidc-client-ts": "^3.1.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.2",
|
||||
"vue-router": "^4.5.0",
|
||||
"vuetify": "^3.7.12",
|
||||
"oidc-client-ts": "^3.1.0",
|
||||
"axios": "^1.8.2"
|
||||
"vuetify": "^3.7.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.50.1",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,71 @@
|
|||
<script setup lang="ts">
|
||||
// This component contains a list with all themes and will be shown on a student's and teacher's homepage.
|
||||
import ThemeCard from "@/components/ThemeCard.vue";
|
||||
import { ref, watchEffect, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
|
||||
import { useThemeQuery } from "@/queries/themes.ts";
|
||||
|
||||
const props = defineProps({
|
||||
selectedTheme: { type: String, required: true },
|
||||
selectedAge: { type: String, required: true }
|
||||
});
|
||||
|
||||
const { locale } = useI18n();
|
||||
const language = computed(() => locale.value);
|
||||
|
||||
const { data: allThemes, isLoading, error } = useThemeQuery(language);
|
||||
|
||||
const allCards = ref([]);
|
||||
const cards = ref([]);
|
||||
|
||||
watchEffect(() => {
|
||||
const themes = allThemes.value ?? [];
|
||||
allCards.value = themes;
|
||||
|
||||
if (props.selectedTheme) {
|
||||
cards.value = themes.filter((theme) =>
|
||||
THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
|
||||
AGE_TO_THEMES[props.selectedAge]?.includes(theme.key)
|
||||
);
|
||||
} else {
|
||||
cards.value = themes;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
<v-container>
|
||||
<div v-if="isLoading" class="text-center py-10">
|
||||
<v-progress-circular indeterminate color="primary" />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="text-center py-10 text-error">
|
||||
<v-icon large>mdi-alert-circle</v-icon>
|
||||
<p>Error loading: {{ error.message }}</p>
|
||||
</div>
|
||||
|
||||
<v-row v-else>
|
||||
<v-col
|
||||
v-for="card in cards"
|
||||
:key="card.key"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="4"
|
||||
class="d-flex"
|
||||
>
|
||||
<ThemeCard
|
||||
:path="card.key"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:image="card.image"
|
||||
class="fill-height"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,10 @@
|
|||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
// Instantiate variables to use in html to render right
|
||||
// Links and content dependent on the role (student or teacher)
|
||||
const path = "/user";
|
||||
|
||||
const role = auth.authState.activeRole;
|
||||
|
||||
//TODO: use authState form services map to get user token
|
||||
const name = "Kurt Cobain";
|
||||
const initials = name
|
||||
const name: string = auth.authState.user!.profile.name!;
|
||||
const initials: string = name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("");
|
||||
|
|
@ -26,24 +21,147 @@
|
|||
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
|
||||
const changeLanguage = (langCode: string) => {
|
||||
locale.value = langCode;
|
||||
localStorage.setItem("user-lang", langCode);
|
||||
console.log(langCode);
|
||||
};
|
||||
|
||||
// contains functionality to let the collapsed menu appear and disappear
|
||||
// when the screen size varies
|
||||
const drawer = ref(false);
|
||||
|
||||
// when the user wants to logout, a popup is shown to verify this
|
||||
// if verified, the user should be logged out
|
||||
const performLogout = () => {
|
||||
auth.logout();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<v-app class="menu_collapsed">
|
||||
<v-app-bar
|
||||
app
|
||||
style="background-color: #f6faf2"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer" />
|
||||
</template>
|
||||
|
||||
<v-app-bar-title>
|
||||
<router-link
|
||||
to="/user"
|
||||
class="dwengo_home"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
class="dwengo_logo"
|
||||
:src="dwengoLogo"
|
||||
style="width: 100px"
|
||||
/>
|
||||
<p
|
||||
class="caption"
|
||||
style="font-size: smaller"
|
||||
>
|
||||
{{ t(`${role}`) }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</v-app-bar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu open-on-hover>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
icon
|
||||
variant="text"
|
||||
>
|
||||
<v-icon
|
||||
icon="mdi-translate"
|
||||
size="small"
|
||||
color="#0e6942"
|
||||
></v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(language, index) in languages"
|
||||
:key="index"
|
||||
@click="changeLanguage(language.code)"
|
||||
>
|
||||
<v-list-item-title>{{ language.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<v-btn
|
||||
@click="performLogout"
|
||||
text
|
||||
>
|
||||
<v-tooltip
|
||||
:text="t('logout')"
|
||||
location="bottom"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon
|
||||
v-bind="props"
|
||||
icon="mdi-logout"
|
||||
size="x-large"
|
||||
color="#0e6942"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
app
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
to="/user/assignment"
|
||||
link
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
to="/user/class"
|
||||
link
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
to="/user/discussion"
|
||||
link
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-app>
|
||||
|
||||
<nav class="menu">
|
||||
<div class="left">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`${path}`"
|
||||
to="/user"
|
||||
class="dwengo_home"
|
||||
>
|
||||
<img
|
||||
|
|
@ -65,14 +183,14 @@
|
|||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`${path}/class`"
|
||||
to="/user/class"
|
||||
class="menu_item"
|
||||
>{{ t("classes") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`${path}/discussion`"
|
||||
to="/user/discussion"
|
||||
class="menu_item"
|
||||
>{{ t("discussions") }}
|
||||
</router-link>
|
||||
|
|
@ -107,7 +225,11 @@
|
|||
</div>
|
||||
<div class="right">
|
||||
<li>
|
||||
<router-link :to="`/login`">
|
||||
<!-- <v-btn
|
||||
@click="performLogout"
|
||||
to="/login"
|
||||
style="background-color: transparent; box-shadow: none !important"
|
||||
>
|
||||
<v-tooltip
|
||||
:text="t('logout')"
|
||||
location="bottom"
|
||||
|
|
@ -121,7 +243,48 @@
|
|||
></v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</router-link>
|
||||
</v-btn> -->
|
||||
<v-dialog max-width="500">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn
|
||||
v-bind="activatorProps"
|
||||
style="background-color: transparent; box-shadow: none !important"
|
||||
>
|
||||
<v-tooltip
|
||||
:text="t('logout')"
|
||||
location="bottom"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-icon
|
||||
v-bind="props"
|
||||
icon="mdi-logout"
|
||||
size="x-large"
|
||||
color="#0e6942"
|
||||
>
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card :title="t('logoutVerification')">
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
:text="t('cancel')"
|
||||
@click="isActive.value = false"
|
||||
></v-btn>
|
||||
<v-btn
|
||||
:text="t('logout')"
|
||||
@click="performLogout"
|
||||
to="/login"
|
||||
></v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</li>
|
||||
<li>
|
||||
<v-avatar
|
||||
|
|
@ -133,6 +296,7 @@
|
|||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -188,4 +352,16 @@
|
|||
nav a.router-link-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
.menu_collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
74
frontend/src/components/ThemeCard.vue
Normal file
74
frontend/src/components/ThemeCard.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
defineProps<{
|
||||
path: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card
|
||||
variant="outlined"
|
||||
class="theme-card d-flex flex-column"
|
||||
:to="`theme/${path}`"
|
||||
link
|
||||
>
|
||||
<v-card-title class="title-container">
|
||||
<v-img
|
||||
v-if="image"
|
||||
:src="image"
|
||||
height="40px"
|
||||
width="40px"
|
||||
contain
|
||||
class="title-image"
|
||||
></v-img>
|
||||
<span class="title">{{ title }}</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="description flex-grow-1">{{ description }}</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn :to="`theme/${path}`" variant="text">
|
||||
{{ t("read-more") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-card:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
73
frontend/src/controllers/base-controller.ts
Normal file
73
frontend/src/controllers/base-controller.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import {apiConfig} from "@/config.ts";
|
||||
|
||||
export class BaseController {
|
||||
protected baseUrl: string;
|
||||
|
||||
constructor(basePath: string) {
|
||||
this.baseUrl = `${apiConfig.baseUrl}/${basePath}`;
|
||||
}
|
||||
|
||||
protected async get<T>(path: string, queryParams?: Record<string, any>): Promise<T> {
|
||||
let url = `${this.baseUrl}${path}`;
|
||||
if (queryParams) {
|
||||
const query = new URLSearchParams();
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== null) {
|
||||
query.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
url += `?${query.toString()}`;
|
||||
}
|
||||
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
protected async post<T>(path: string, body: unknown): Promise<T> {
|
||||
const res = await fetch(`${this.baseUrl}${path}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
protected async delete<T>(path: string): Promise<T> {
|
||||
const res = await fetch(`${this.baseUrl}${path}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
protected async put<T>(path: string, body: unknown): Promise<T> {
|
||||
const res = await fetch(`${this.baseUrl}${path}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
}
|
||||
14
frontend/src/controllers/controllers.ts
Normal file
14
frontend/src/controllers/controllers.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import {ThemeController} from "@/controllers/themes.ts";
|
||||
|
||||
export function controllerGetter<T>(Factory: new () => T): () => T {
|
||||
let instance: T | undefined;
|
||||
|
||||
return (): T => {
|
||||
if (!instance) {
|
||||
instance = new Factory();
|
||||
}
|
||||
return instance;
|
||||
};
|
||||
}
|
||||
|
||||
export const getThemeController = controllerGetter(ThemeController);
|
||||
16
frontend/src/controllers/themes.ts
Normal file
16
frontend/src/controllers/themes.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import {BaseController} from "@/controllers/base-controller.ts";
|
||||
|
||||
export class ThemeController extends BaseController {
|
||||
constructor() {
|
||||
super("theme");
|
||||
}
|
||||
|
||||
getAll(language: string | null = null) {
|
||||
const query = language ? { language } : undefined;
|
||||
return this.get<any[]>("/", query);
|
||||
}
|
||||
|
||||
getHruidsByKey(themeKey: string) {
|
||||
return this.get<string[]>(`/${encodeURIComponent(themeKey)}`);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,43 @@
|
|||
{
|
||||
"welcome": "Willkommen"
|
||||
"welcome": "Willkommen",
|
||||
"student": "schüler",
|
||||
"teacher": "lehrer",
|
||||
"assignments": "Aufgaben",
|
||||
"classes": "Klasses",
|
||||
"discussions": "Diskussionen",
|
||||
"login": "einloggen",
|
||||
"logout": "ausloggen",
|
||||
"cancel": "kündigen",
|
||||
"logoutVerification": "Sind Sie sicher, dass Sie sich abmelden wollen?",
|
||||
"homeTitle": "Unsere Stärken",
|
||||
"homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
|
||||
"homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
|
||||
"innovative": "Innovativ",
|
||||
"researchBased": "Forschungsbasiert",
|
||||
"inclusive": "Inclusiv",
|
||||
"sociallyRelevant": "Gesellschaftlich relevant",
|
||||
"translate": "übersetzen",
|
||||
"themes": "Themen",
|
||||
"choose-theme": "Wähle ein thema",
|
||||
"choose-age": "Alter auswählen",
|
||||
"theme-options": {
|
||||
"all": "Alle themen",
|
||||
"culture": "Kultur",
|
||||
"electricity-and-mechanics": "Elektrizität und Mechanik",
|
||||
"nature-and-climate": "Natur und Klima",
|
||||
"agriculture": "Landwirtschaft",
|
||||
"society": "Gesellschaft",
|
||||
"math": "Mathematik",
|
||||
"technology": "Technologie",
|
||||
"algorithms": "Algorithmisches Denken"
|
||||
},
|
||||
"age-options": {
|
||||
"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"
|
||||
},
|
||||
"read-more": "Mehr lesen"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,42 @@
|
|||
"welcome": "Welcome",
|
||||
"student": "student",
|
||||
"teacher": "teacher",
|
||||
"assignments": "assignments",
|
||||
"classes": "classes",
|
||||
"discussions": "discussions",
|
||||
"logout": "log out"
|
||||
"assignments": "Assignments",
|
||||
"classes": "Classes",
|
||||
"discussions": "Discussions",
|
||||
"logout": "log out",
|
||||
"cancel": "cancel",
|
||||
"logoutVerification": "Are you sure you want to log out?",
|
||||
"homeTitle": "Our strengths",
|
||||
"homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
|
||||
"homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
|
||||
"innovative": "Innovative",
|
||||
"researchBased": "Research-based",
|
||||
"inclusive": "Inclusive",
|
||||
"sociallyRelevant": "Socially relevant",
|
||||
"login": "log in",
|
||||
"translate": "translate",
|
||||
"themes": "Themes",
|
||||
"choose-theme": "Select a theme",
|
||||
"choose-age": "Select age",
|
||||
"theme-options": {
|
||||
"all": "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": "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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,43 @@
|
|||
{
|
||||
"welcome": "Bienvenue"
|
||||
"welcome": "Bienvenue",
|
||||
"student": "élève",
|
||||
"teacher": "enseignant",
|
||||
"assignments": "Travails",
|
||||
"classes": "Classes",
|
||||
"discussions": "Discussions",
|
||||
"login": "se connecter",
|
||||
"logout": "se déconnecter",
|
||||
"cancel": "annuler",
|
||||
"logoutVerification": "Êtes-vous sûr de vouloir vous déconnecter ?",
|
||||
"homeTitle": "Nos atouts",
|
||||
"homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
|
||||
"homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
|
||||
"innovative": "Innovatif",
|
||||
"researchBased": "Fondé sur la recherche",
|
||||
"inclusive": "Inclusif",
|
||||
"sociallyRelevant": "Socialement pertinent",
|
||||
"translate": "traduire",
|
||||
"themes": "Thèmes",
|
||||
"choose-theme": "Choisis un thème",
|
||||
"choose-age": "Choisis un âge",
|
||||
"theme-options": {
|
||||
"all": "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": "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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,42 @@
|
|||
"welcome": "Welkom",
|
||||
"student": "leerling",
|
||||
"teacher": "leerkracht",
|
||||
"assignments": "opdrachten",
|
||||
"classes": "klassen",
|
||||
"discussions": "discussies",
|
||||
"logout": "log uit"
|
||||
"assignments": "Opdrachten",
|
||||
"classes": "Klassen",
|
||||
"discussions": "Discussies",
|
||||
"logout": "log uit",
|
||||
"cancel": "annuleren",
|
||||
"logoutVerification": "Bent u zeker dat u wilt uitloggen?",
|
||||
"homeTitle": "Onze sterke punten",
|
||||
"homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
|
||||
"homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",
|
||||
"innovative": "Innovatief",
|
||||
"researchBased": "Onderzoeksgedreven",
|
||||
"inclusive": "Inclusief",
|
||||
"sociallyRelevant": "Maatschappelijk relevant",
|
||||
"login": "log in",
|
||||
"translate": "vertalen",
|
||||
"themes": "Lesthema's",
|
||||
"choose-theme": "Kies een thema",
|
||||
"choose-age": "Kies een leeftijd",
|
||||
"theme-options": {
|
||||
"all": "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": "Alle leeftijden",
|
||||
"primary-school": "Lagere school",
|
||||
"lower-secondary": "1e graad secundair",
|
||||
"upper-secondary": "2e graad secundair",
|
||||
"high-school": "3e graad secundair",
|
||||
"older": "Hoger onderwijs"
|
||||
},
|
||||
"read-more": "Lees meer"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import i18n from "./i18n/i18n.ts";
|
|||
// Components
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
|
@ -24,6 +25,18 @@ const vuetify = createVuetify({
|
|||
components,
|
||||
directives,
|
||||
});
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
app.use(vuetify);
|
||||
app.use(i18n);
|
||||
app.use(VueQueryPlugin, { queryClient });
|
||||
|
||||
app.mount("#app");
|
||||
|
|
|
|||
25
frontend/src/queries/themes.ts
Normal file
25
frontend/src/queries/themes.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { getThemeController } from '@/controllers/controllers';
|
||||
import {type MaybeRefOrGetter, toValue} from "vue";
|
||||
|
||||
const themeController = getThemeController();
|
||||
|
||||
export const useThemeQuery = (language: MaybeRefOrGetter<string>) => {
|
||||
return useQuery({
|
||||
queryKey: ['themes', language],
|
||||
queryFn: () => {
|
||||
const lang = toValue(language);
|
||||
return themeController.getAll(lang);
|
||||
},
|
||||
enabled: () => !!toValue(language),
|
||||
});
|
||||
};
|
||||
|
||||
export const useThemeHruidsQuery = (themeKey: string | null) => {
|
||||
return useQuery({
|
||||
queryKey: ['theme-hruids', themeKey],
|
||||
queryFn: () => themeController.getHruidsByKey(themeKey!),
|
||||
enabled: !!themeKey,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -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,8 @@ 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";
|
||||
import SingleTheme from "@/views/SingleTheme.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -41,9 +42,9 @@ const router = createRouter({
|
|||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: "home",
|
||||
path: "",
|
||||
name: "UserHomePage",
|
||||
component: StudentHomepage,
|
||||
component: UserHomePage,
|
||||
},
|
||||
{
|
||||
path: "assignment",
|
||||
|
|
@ -63,6 +64,12 @@ const router = createRouter({
|
|||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/theme/:id",
|
||||
name: "Theme",
|
||||
component: SingleTheme,
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: "/assignment/create",
|
||||
name: "CreateAssigment",
|
||||
|
|
@ -112,7 +119,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();
|
||||
}
|
||||
|
|
|
|||
37
frontend/src/utils/constants.ts
Normal file
37
frontend/src/utils/constants.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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: 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 = [
|
||||
"all", "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"
|
||||
];
|
||||
|
||||
export const AGE_TO_THEMES: Record<string, string[]> = {
|
||||
"all": THEMES_KEYS,
|
||||
"primary-school": ["wegostem", "computational_thinking", "physical_computing"],
|
||||
"lower-secondary": ["socialrobot", "art", "wegostem", "computational_thinking", "physical_computing"],
|
||||
"upper-secondary": ["kiks", "art", "socialrobot", "agriculture",
|
||||
"computational_thinking", "math_with_python", "python_programming",
|
||||
"stem", "care", "chatbot", "algorithms", "basics_ai"],
|
||||
"high-school": [
|
||||
"kiks", "art", "agriculture", "computational_thinking", "math_with_python", "python_programming",
|
||||
"stem", "care", "chatbot", "algorithms", "basics_ai"
|
||||
],
|
||||
"older": [
|
||||
"kiks", "computational_thinking", "algorithms", "basics_ai"
|
||||
]
|
||||
};
|
||||
|
|
@ -1,28 +1,196 @@
|
|||
<script setup lang="ts">
|
||||
import auth from "@/services/auth/auth-service.ts";
|
||||
import apiClient from "@/services/api-client.ts";
|
||||
import { ref } from "vue";
|
||||
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const testResponse = ref(null);
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
async function testAuthenticated() {
|
||||
testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly");
|
||||
}
|
||||
const languages = ref([
|
||||
{ name: "English", code: "en" },
|
||||
{ name: "Nederlands", code: "nl" },
|
||||
{ name: "Deutsch", code: "de" },
|
||||
{ name: "français", code: "fr" },
|
||||
]);
|
||||
|
||||
// Logic to change the language of the website to the selected language
|
||||
const changeLanguage = (langCode: string) => {
|
||||
locale.value = langCode;
|
||||
localStorage.setItem("user-lang", langCode);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
|
||||
<b>Welcome to the dwengo homepage</b>
|
||||
<div v-if="auth.isLoggedIn.value">
|
||||
<p>Hello {{ auth.authState.user?.profile.name }}!</p>
|
||||
<p>
|
||||
Your access token for the backend is: <code>{{ auth.authState.user?.access_token }}</code>
|
||||
</p>
|
||||
<div class="layout">
|
||||
<div class="container_left">
|
||||
<img
|
||||
:src="dwengoLogo"
|
||||
style="align-self: center"
|
||||
/>
|
||||
<h> {{ t("homeTitle") }}</h>
|
||||
<p class="info">
|
||||
{{ t("homeIntroduction1") }}
|
||||
</p>
|
||||
<p class="info">{{ t("homeIntroduction2") }}</p>
|
||||
<v-btn
|
||||
size="large"
|
||||
density="comfortable"
|
||||
style="font-weight: bolder; color: white; align-self: center"
|
||||
color="#88BD28"
|
||||
to="/login"
|
||||
>
|
||||
{{ t("login") }}
|
||||
<v-icon
|
||||
end
|
||||
size="x-large"
|
||||
>
|
||||
mdi-menu-right
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="container_middle">
|
||||
<div class="img_small">
|
||||
<v-img
|
||||
height="125"
|
||||
width="125"
|
||||
src="/assets/home/innovative.png"
|
||||
></v-img>
|
||||
<h class="big">{{ t("innovative") }}</h>
|
||||
</div>
|
||||
<div class="img_small">
|
||||
<v-img
|
||||
height="125"
|
||||
width="125"
|
||||
src="/assets/home/research_based.png"
|
||||
></v-img>
|
||||
<h class="big">{{ t("researchBased") }}</h>
|
||||
</div>
|
||||
<div class="img_small">
|
||||
<v-img
|
||||
height="125"
|
||||
width="125"
|
||||
src="/assets/home/inclusive.png"
|
||||
></v-img>
|
||||
<h class="big">{{ t("sociallyRelevant") }}</h>
|
||||
</div>
|
||||
<div class="img_small">
|
||||
<v-img
|
||||
height="125"
|
||||
width="125"
|
||||
src="/assets/home/socially_relevant.png"
|
||||
></v-img>
|
||||
<h class="big">{{ t("inclusive") }}</h>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container_right">
|
||||
<v-menu open-on-hover>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
icon
|
||||
variant="text"
|
||||
>
|
||||
{{ t("translate") }}
|
||||
<v-icon
|
||||
end
|
||||
icon="mdi-translate"
|
||||
size="small"
|
||||
color="#0e6942"
|
||||
></v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(language, index) in languages"
|
||||
:key="index"
|
||||
@click="changeLanguage(language.code)"
|
||||
>
|
||||
<v-list-item-title>{{ language.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn @click="testAuthenticated">Send test request</v-btn>
|
||||
<p v-if="testResponse">Response from the test request: {{ testResponse }}</p>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container_left {
|
||||
width: 600px;
|
||||
background-color: #f6faf2;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container_middle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container_right {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
.img_small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
align-self: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container_left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container_right {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})
|
||||
</p>
|
||||
<v-btn @click="performLogout">Logout</v-btn>
|
||||
<v-btn to="/user">home</v-btn>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
11
frontend/src/views/SingleTheme.vue
Normal file
11
frontend/src/views/SingleTheme.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,7 +1,125 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="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 selectedThemeKey = ref<string>('all');
|
||||
const selectedAgeKey = ref<string>('all');
|
||||
|
||||
const allThemes = ref(Object.keys(THEMESITEMS));
|
||||
const availableThemes = ref([...allThemes.value]);
|
||||
|
||||
const allAges = ref(Object.keys(AGE_TO_THEMES));
|
||||
const availableAges = ref([...allAges.value]);
|
||||
|
||||
// Reset selection when language changes
|
||||
watch(locale, () => {
|
||||
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))
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
watch(selectedAgeKey, () => {
|
||||
if (selectedAgeKey.value === "all") {
|
||||
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))
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
<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-age')"
|
||||
:items="availableAges.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 :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue