Merge remote-tracking branch 'origin/dev' into feat/pagina-om-leerpaden-te-bekijken-#41
# Conflicts: # frontend/src/components/MenuBar.vue # frontend/src/i18n/locale/de.json # frontend/src/i18n/locale/en.json # frontend/src/i18n/locale/fr.json # frontend/src/i18n/locale/nl.json # frontend/src/main.ts # frontend/src/router/index.ts # frontend/src/views/HomePage.vue
This commit is contained in:
Gerald Schmittinger
commit
7c55c3a081
27 changed files with 1718 additions and 170 deletions
|
|
@ -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>
|
||||
<v-app-bar>
|
||||
<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,7 +296,8 @@
|
|||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
</v-app-bar>
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -189,7 +353,15 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
@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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue