Add CircleOverview component
This commit is contained in:
Daniel Egger
parent
1483ec8be0
commit
fef31bf189
|
|
@ -0,0 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import type {Circle} from '@/types';
|
||||
|
||||
const props = defineProps<{
|
||||
circleData: Circle
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="circle-overview px-16 py-24 relative">
|
||||
<div
|
||||
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<it-icon-close class="h-8 w-8"></it-icon-close>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="">Überblick: Circle "{{ circleData.title }}"</h1>
|
||||
|
||||
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
|
||||
|
||||
<div class="mt-8 p-4 border border-gray-500">
|
||||
<h3>Du wirst in der Lage sein, ... </h3>
|
||||
|
||||
<ul class="mt-4">
|
||||
<li class="text-xl flex items-center h-12" v-for="goal in circleData.goals" :key="goal.id">
|
||||
<it-icon-check class="w-12 h-12 text-sky-500"></it-icon-check>
|
||||
<div>{{ goal.value }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-16">
|
||||
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
|
||||
</h3>
|
||||
|
||||
<ul class="grid grid-cols-3 auto-rows-fr gap-6 mt-8">
|
||||
<li
|
||||
v-for="jobSituation in circleData.job_situations"
|
||||
:key="jobSituation.id"
|
||||
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
||||
>
|
||||
{{jobSituation.value}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel';
|
||||
|
||||
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
||||
import LearningSequence from '../components/circle/LearningSequence.vue';
|
||||
import MainNavigationBar from '@/components/MainNavigationBar.vue';
|
||||
import LearningSequence from '@/components/circle/LearningSequence.vue';
|
||||
import CircleOverview from '@/components/circle/CircleOverview.vue';
|
||||
|
||||
import {onMounted} from 'vue'
|
||||
import {onMounted, reactive} from 'vue'
|
||||
import {useCircleStore} from '@/stores/circle';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -13,6 +14,10 @@ const props = defineProps<{
|
|||
|
||||
const circleStore = useCircleStore();
|
||||
|
||||
const state = reactive({
|
||||
showOverview: false,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
log.info('CircleView.vue mounted');
|
||||
circleStore.loadCircle(props.circleSlug);
|
||||
|
|
@ -21,51 +26,56 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<MainNavigationBar/>
|
||||
<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="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 class="mt-8">
|
||||
<img src="@/assets/circle-analyse.svg" alt="">
|
||||
</div>
|
||||
|
||||
<button class="btn-primary mt-4">Erfahre mehr dazu</button>
|
||||
<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="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 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 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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue