123 lines
3.8 KiB
Vue
123 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import * as log from 'loglevel';
|
|
|
|
import MainNavigationBar from '@/components/MainNavigationBar.vue';
|
|
import LearningSequence from '@/components/circle/LearningSequence.vue';
|
|
import CircleOverview from '@/components/circle/CircleOverview.vue';
|
|
import LearningContent from '@/components/circle/LearningContent.vue';
|
|
|
|
import {onMounted} from 'vue'
|
|
import {useCircleStore} from '@/stores/circle';
|
|
import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';
|
|
import CircleDiagram from '@/components/circle/CircleDiagram.vue';
|
|
|
|
log.debug('CircleView.vue created');
|
|
|
|
const props = defineProps<{
|
|
circleSlug: string
|
|
}>()
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
onMounted(async () => {
|
|
log.info('CircleView.vue mounted');
|
|
await circleStore.loadCircle(props.circleSlug);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Transition>
|
|
<div v-if="circleStore.page === 'OVERVIEW'">
|
|
<CircleOverview :circle-data="circleStore.circleData" @close="circleStore.page = 'INDEX'"/>
|
|
</div>
|
|
<div v-else-if="circleStore.page === 'LEARNING_CONTENT'">
|
|
<LearningContent :key="circleStore.currentLearningContent.translation_key"/>
|
|
</div>
|
|
<div v-else-if="circleStore.page === 'SELF_EVALUATION'">
|
|
<SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
|
|
</div>
|
|
<div v-else>
|
|
<MainNavigationBar/>
|
|
|
|
<div class="circle">
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
|
|
<h1 class="text-blue-dark text-7xl">
|
|
{{ circleStore.circleData.title }}
|
|
</h1>
|
|
|
|
<div v-if="circleStore.circleData.learningSequences && circleStore.flatChildren" class="w-full mt-8">
|
|
<CircleDiagram :circle-store="circleStore"></CircleDiagram>
|
|
</div>
|
|
|
|
<div class="border-t-2 border-gray-500 mt-4 lg:hidden">
|
|
<div
|
|
class="mt-4 inline-flex items-center"
|
|
@click="circleStore.page = 'OVERVIEW'"
|
|
>
|
|
<it-icon-info class="mr-2"/>
|
|
Das lernst du in diesem Circle
|
|
</div>
|
|
<div class="inline-flex items-center">
|
|
<it-icon-message class="mr-2"/>
|
|
Fachexpertin kontaktieren
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden lg:block">
|
|
<div class="block border border-gray-500 mt-8 p-6">
|
|
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
|
|
<div class="prose mt-4">
|
|
{{ circleStore.circleData.description }}
|
|
</div>
|
|
|
|
<button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
|
|
</div>
|
|
|
|
<div class="expert border border-gray-500 mt-8 p-6">
|
|
<h3 class="text-blue-dark">Hast du Fragen?</h3>
|
|
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
|
|
<button class="btn-secondary mt-4">
|
|
Fachexpertin kontaktieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
|
|
<div
|
|
v-for="learningSequence in circleStore.circleData.learningSequences"
|
|
:key="learningSequence.translation_key"
|
|
>
|
|
<LearningSequence
|
|
:learning-sequence="learningSequence"
|
|
:completion-data="circleStore.completionData"
|
|
></LearningSequence>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-enter-active {
|
|
transition-delay: 0.3s;
|
|
}
|
|
</style>
|