103 lines
3.4 KiB
Vue
103 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useUserStore } from "@/stores/user";
|
|
import type { CourseSession } from "@/types";
|
|
import log from "loglevel";
|
|
import { computed, onMounted } from "vue";
|
|
|
|
log.debug("DashboardPage created");
|
|
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
|
|
onMounted(async () => {
|
|
log.debug("DashboardPage mounted");
|
|
});
|
|
|
|
const getNextStepLink = (courseSession: CourseSession) => {
|
|
return computed(() => {
|
|
if (courseSessionsStore.hasCockpit(courseSession)) {
|
|
return courseSession.cockpit_url;
|
|
}
|
|
return courseSession.learning_path_url;
|
|
});
|
|
};
|
|
</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.uniqueCourseSessionsByCourse.length > 0"
|
|
class="mb-14"
|
|
>
|
|
<h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>
|
|
|
|
<div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div
|
|
v-for="courseSession in courseSessionsStore.uniqueCourseSessionsByCourse"
|
|
: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="getNextStepLink(courseSession).value"
|
|
:data-cy="`continue-course-${courseSession.course.id}`"
|
|
>
|
|
{{ $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 py-4">
|
|
{{ $t("Zur Zeit sind keine Termine vorhanden") }}
|
|
</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 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>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|