100 lines
2.7 KiB
Vue
100 lines
2.7 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 {onMounted, reactive} from 'vue'
|
|
import {useCircleStore} from '@/stores/circle';
|
|
|
|
const props = defineProps<{
|
|
circleSlug: string
|
|
}>()
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const state = reactive({
|
|
showOverview: false,
|
|
});
|
|
|
|
onMounted(() => {
|
|
log.info('CircleView.vue mounted');
|
|
circleStore.loadCircle(props.circleSlug);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Transition>
|
|
<div v-if="state.showOverview">
|
|
<CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
|
|
</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-8 lg:px-8">
|
|
<h1 class="text-blue-dark text-7xl">
|
|
{{ circleStore.circleData.title }}
|
|
</h1>
|
|
|
|
<div class="mt-8">
|
|
<img src="@/assets/circle-analyse.svg" alt="">
|
|
</div>
|
|
|
|
<div class="outcome 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="state.showOverview = true">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 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" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
|
|
: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>
|