114 lines
2.7 KiB
Vue
114 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import type { LearningContent } from "@/types";
|
|
import log from "loglevel";
|
|
import { computed } from "vue";
|
|
|
|
import DescriptionBlock from "@/components/learningPath/blocks/DescriptionBlock.vue";
|
|
import DescriptionTextBlock from "@/components/learningPath/blocks/DescriptionTextBlock.vue";
|
|
import FeedbackBlock from "@/components/learningPath/blocks/FeedbackBlock.vue";
|
|
import IframeBlock from "@/components/learningPath/blocks/IframeBlock.vue";
|
|
import PlaceholderBlock from "@/components/learningPath/blocks/PlaceholderBlock.vue";
|
|
import VideoBlock from "@/components/learningPath/blocks/VideoBlock.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;
|
|
});
|
|
|
|
// can't use the type as component name, as some are reserved HTML components, e.g. video
|
|
const COMPONENTS: Record<string, any> = {
|
|
// todo: can we find a better type here than any? ^
|
|
placeholder: PlaceholderBlock,
|
|
video: VideoBlock,
|
|
assignment: DescriptionTextBlock,
|
|
resource: DescriptionTextBlock,
|
|
exercise: IframeBlock,
|
|
test: IframeBlock,
|
|
learningmodule: IframeBlock,
|
|
feedback: FeedbackBlock,
|
|
};
|
|
const DEFAULT_BLOCK = DescriptionBlock;
|
|
|
|
const component = computed(() => {
|
|
if (block.value) {
|
|
return COMPONENTS[block.value.type] || DEFAULT_BLOCK;
|
|
}
|
|
return DEFAULT_BLOCK;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<LearningContentContainer
|
|
v-if="block"
|
|
:title="learningContent.title"
|
|
:next-button-text="$t('learningContent.completeAndContinue')"
|
|
@exit="circleStore.closeLearningContent(props.learningContent)"
|
|
@next="circleStore.continueFromLearningContent(props.learningContent)"
|
|
>
|
|
<div class="content">
|
|
<component
|
|
:is="component"
|
|
:value="block.value"
|
|
:content="learningContent"
|
|
></component>
|
|
</div>
|
|
</LearningContentContainer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$header-height: 77px;
|
|
|
|
.content {
|
|
padding-top: $header-height;
|
|
}
|
|
|
|
.resource-text {
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
|
|
.resource-text {
|
|
p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
margin-bottom: 1.5rem;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|