99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import type { LearningContent } from "@/types";
|
|
import * as log from "loglevel";
|
|
import { computed } from "vue";
|
|
|
|
log.debug("LearningContent.vue setup");
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const props = defineProps<{
|
|
learningContent: LearningContent;
|
|
}>();
|
|
|
|
const block = computed(() => {
|
|
if (props.learningContent?.contents?.length) {
|
|
return props.learningContent.contents[0];
|
|
}
|
|
|
|
return undefined;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="block">
|
|
<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-learning-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" data-cy="ln-title">
|
|
{{ learningContent.title }}
|
|
</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-blue"
|
|
data-cy="complete-and-continue"
|
|
@click="circleStore.continueFromLearningContent(props.learningContent)"
|
|
>
|
|
Abschliessen und weiter
|
|
</button>
|
|
</nav>
|
|
|
|
<div v-if="block.type === 'exercise' || block.type === 'test'" class="h-screen">
|
|
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
|
|
</div>
|
|
|
|
<div v-else class="container-medium">
|
|
<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-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
|
|
<h1>{{ learningContent.title }}</h1>
|
|
|
|
<p class="text-xl my-4 lg:my-8">{{ block.value.description }}</p>
|
|
<a :href="block.value.url" target="_blank" class="button btn-primary">
|
|
Mediathek öffnen
|
|
</a>
|
|
</div>
|
|
|
|
<div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
|
|
<p class="text-xl my-4">{{ block.value.description }}</p>
|
|
<h1>{{ learningContent.title }}</h1>
|
|
</div>
|
|
|
|
<div v-else class="text-xl my-4">{{ block.value.description }}</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>
|