99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import * as log from 'loglevel';
|
|
import {computed} from 'vue';
|
|
import {useCircleStore} from '@/stores/circle';
|
|
|
|
log.debug('LearningContent.vue setup');
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const learningContent = computed(() => circleStore.currentLearningContent);
|
|
|
|
const block = computed(() => {
|
|
if (learningContent.value) {
|
|
return learningContent.value.contents[0];
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<nav
|
|
class="
|
|
px-4 lg:px-8
|
|
py-4
|
|
flex justify-between items-center
|
|
border-b border-gray-500
|
|
"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn-text inline-flex items-center px-3 py-2 font-normal"
|
|
data-cy="close-learnng-content"
|
|
@click="circleStore.closeLearningContent()"
|
|
>
|
|
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
|
<span class="hidden lg:inline">zurück zum Circle</span>
|
|
</button>
|
|
|
|
<h1 class="text-xl hidden lg:block">{{ learningContent.title }}</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-blue"
|
|
data-cy="complete-and-continue"
|
|
@click="circleStore.continueFromLearningContent()"
|
|
>
|
|
Abschliessen und weiter
|
|
</button>
|
|
</nav>
|
|
|
|
<div v-if="block.type === 'exercise'" class="h-screen">
|
|
<iframe
|
|
width="100%"
|
|
height="100%"
|
|
scrolling="no"
|
|
:src="block.value.url"
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div v-else class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
|
|
<p>{{ block.value.description }}</p>
|
|
|
|
<div v-if="block.type === 'video'">
|
|
<iframe
|
|
class="mt-8 w-full aspect-video"
|
|
:src="block.value.url"
|
|
:title="learningContent.title"
|
|
frameborder="0"
|
|
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
|
|
<div
|
|
v-if="block.type === 'podcast'"
|
|
>
|
|
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="" :src="block.value.url"></iframe>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
$header-height: 77px;
|
|
$footer-height: 57px;
|
|
|
|
$content-height: $header-height + $footer-height;
|
|
|
|
.h-screen {
|
|
height: calc(100vh - $content-height);
|
|
}
|
|
</style>
|