137 lines
4.5 KiB
Vue
137 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useUserStore } from "@/stores/user";
|
|
import log from "loglevel";
|
|
import { onMounted } from "vue";
|
|
|
|
log.debug("DashboardPage created");
|
|
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
|
|
function employer() {
|
|
return userStore.email.indexOf("eiger-versicherungen.ch") > -1
|
|
? "Eiger Versicherungen, Niederlassung Bern"
|
|
: "VBV";
|
|
}
|
|
|
|
onMounted(async () => {
|
|
log.debug("DashboardPage mounted");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col lg:flex-row">
|
|
<main class="grow bg-gray-200 lg:order-2">
|
|
<div class="container-medium mt-14">
|
|
<h1 data-cy="welcome-message">
|
|
{{ $t("dashboard.welcome", { name: userStore.first_name }) }}
|
|
</h1>
|
|
<div v-if="courseSessionsStore.courseSessions.length > 0" class="mb-14">
|
|
<h2 class="mt-12 mb-3">Kurse</h2>
|
|
|
|
<div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div
|
|
v-for="courseSession in courseSessionsStore.coursesFromCourseSessions"
|
|
:key="courseSession.id"
|
|
>
|
|
<div class="bg-white p-6 md:h-full">
|
|
<h3 class="mb-4">{{ courseSession.course.title }}</h3>
|
|
<div>
|
|
<LearningPathDiagramSmall
|
|
class="mb-4"
|
|
:course-slug="courseSession.course.slug"
|
|
></LearningPathDiagramSmall>
|
|
</div>
|
|
<div>
|
|
<router-link class="btn-blue" :to="courseSession.learning_path_url">
|
|
{{ $t("general.nextStep") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-6">Termine</h3>
|
|
<ul class="bg-white p-4">
|
|
<li class="flex flex-row border-b py-4">
|
|
<p class="text-bold w-60">Prüfung</p>
|
|
<p class="grow">Mo, 14. November 2022, 18 Uhr</p>
|
|
<p class="underline">Details anschauen</p>
|
|
</li>
|
|
<li class="flex flex-row border-b py-4">
|
|
<p class="text-bold w-60">Austausch mit Trainer</p>
|
|
<p class="grow">Fr, 24. November 2022, 11 Uhr</p>
|
|
<p class="underline">Details anschauen</p>
|
|
</li>
|
|
<li class="flex flex-row py-4">
|
|
<p class="text-bold w-60">Vernetzen - Live Session</p>
|
|
<p class="grow">Di, 4. Dezember 2022, 10.30 Uhr</p>
|
|
<p class="underline">Details anschauen</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<aside class="m-8 lg:order-1 lg:w-[343px]">
|
|
<div class="mx-auto mb-6 border-b pb-6 text-center">
|
|
<img
|
|
class="mb-4 inline-block max-w-[150px] rounded-full"
|
|
:src="userStore.avatar_url"
|
|
/>
|
|
<div>
|
|
<p class="text-bold">{{ userStore.first_name }} {{ userStore.last_name }}</p>
|
|
<p>{{ userStore.email }}</p>
|
|
<p class="mb-4">{{ employer() }}</p>
|
|
<p>
|
|
Profil bearbeiten
|
|
<it-icon-pen class="h-4 w-4"></it-icon-pen>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="mb-4 flex flex-row items-center justify-start">
|
|
<div class="w-20">
|
|
<div class="h-12 w-12 rounded-full bg-sky-200">
|
|
<it-icon-certificate
|
|
class="mx-auto block h-6 w-6 pt-2"
|
|
></it-icon-certificate>
|
|
</div>
|
|
</div>
|
|
<h4 class="text-bold">Zertifikate</h4>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div class="mb-4 flex flex-row justify-start">
|
|
<p class="text-bold w-20">2024</p>
|
|
<div>
|
|
<p class="text-bold">Check-up</p>
|
|
<p>Vermittler/-in VBV</p>
|
|
<p>
|
|
Gültig bis:
|
|
<span class="text-bold text-green-500">31.12.2026</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row justify-start">
|
|
<p class="text-bold w-20">2022</p>
|
|
<div>
|
|
<p class="text-bold">Zulassungsprüfung</p>
|
|
<p>Vermittler/-in VBV</p>
|
|
<p>
|
|
Bestanden:
|
|
<span class="text-bold">14.11.2022</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|