Merge branch 'feature/vbv-88-learning-path-vertical' into develop
This commit is contained in:
Daniel Egger
commit
da13345511
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ const pieData = computed(() => {
|
|||
pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
|
||||
pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
|
||||
pie.translation_key = thisLearningSequence.translation_key
|
||||
pie.slug = thisLearningSequence.slug
|
||||
pie.someFinished = someFinished(thisLearningSequence)
|
||||
pie.allFinished = allFinished(thisLearningSequence)
|
||||
})
|
||||
|
|
@ -146,7 +147,7 @@ function render() {
|
|||
})
|
||||
.on('click', function (d, elm) {
|
||||
console.log('clicked on ', d, elm)
|
||||
document.getElementById(elm.translation_key)?.scrollIntoView({behavior: 'smooth'})
|
||||
document.getElementById(elm.slug)?.scrollIntoView({behavior: 'smooth'})
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -164,7 +165,7 @@ function render() {
|
|||
const learningSequenceText = learningSequences
|
||||
.append('text')
|
||||
.attr('fill', colors.blue[900])
|
||||
.style('font-size', 15)
|
||||
.style('font-size', '15px')
|
||||
.text((d) => {
|
||||
return d.title
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,32 +12,36 @@ const props = defineProps<{
|
|||
|
||||
<template>
|
||||
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
|
||||
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
||||
<div class="container-medium">
|
||||
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
||||
|
||||
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
|
||||
<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>
|
||||
<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" v-for="goal in circle.goals" :key="goal.id">
|
||||
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
|
||||
<div class="mt-4">{{ goal.value }}</div>
|
||||
<ul class="mt-4">
|
||||
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
|
||||
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
|
||||
<div class="mt-4">{{ 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-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
|
||||
<li
|
||||
v-for="jobSituation in circle.job_situations"
|
||||
:key="jobSituation.id"
|
||||
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
||||
>
|
||||
{{ jobSituation.value }}
|
||||
</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-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
|
||||
<li
|
||||
v-for="jobSituation in circle.job_situations"
|
||||
:key="jobSituation.id"
|
||||
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
||||
>
|
||||
{{ jobSituation.value }}
|
||||
</li>
|
||||
</ul>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,20 +27,20 @@ const block = computed(() => {
|
|||
<button
|
||||
type="button"
|
||||
class="btn-text inline-flex items-center px-3 py-2 font-normal"
|
||||
data-cy="close-learnng-content"
|
||||
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">{{ learningContent?.title }}</h1>
|
||||
<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(this.learningContent)"
|
||||
@click="circleStore.continueFromLearningContent(props.learningContent)"
|
||||
>
|
||||
Abschliessen und weiter
|
||||
</button>
|
||||
|
|
@ -50,7 +50,7 @@ const block = computed(() => {
|
|||
<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">
|
||||
<div v-else class="container-medium">
|
||||
<p>{{ block.value.description }}</p>
|
||||
|
||||
<div v-if="block.type === 'video'">
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
<script>
|
||||
import * as d3 from 'd3'
|
||||
import { useLearningPathStore } from '../../stores/learningPath'
|
||||
import { useLearningPathStore } from '@/stores/learningPath'
|
||||
import colors from '@/colors.json'
|
||||
import * as log from 'loglevel'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
width: {
|
||||
default: 1640,
|
||||
type: Number,
|
||||
},
|
||||
height: {
|
||||
default: 256,
|
||||
type: Number,
|
||||
},
|
||||
vertical: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
|
|
@ -22,14 +15,19 @@ export default {
|
|||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: 1640,
|
||||
height: 384,
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore()
|
||||
return { learningPathStore }
|
||||
},
|
||||
|
||||
computed: {
|
||||
viewBox() {
|
||||
return `0 0 ${this.width} ${this.height * 1.5}`
|
||||
return `0 0 ${this.width} ${this.height}`
|
||||
},
|
||||
circles() {
|
||||
function someFinished(circle, learningSequence) {
|
||||
|
|
@ -81,6 +79,13 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
log.debug('LearningPathDiagram mounted')
|
||||
|
||||
if (this.vertical) {
|
||||
this.width = Math.min(960, window.innerWidth - 32)
|
||||
this.height = 860
|
||||
}
|
||||
|
||||
const circleWidth = this.vertical ? 60 : 200
|
||||
const radius = (circleWidth * 0.8) / 2
|
||||
|
||||
|
|
@ -177,8 +182,14 @@ export default {
|
|||
const circlesText = circle_groups
|
||||
.append('text')
|
||||
.attr('fill', colors.blue[900])
|
||||
.style('font-size', 19)
|
||||
.text((d) => d.title)
|
||||
.style('font-size', '18px')
|
||||
.style('overflow-wrap', 'break-word')
|
||||
.text((d) => {
|
||||
if (!this.vertical) {
|
||||
return d.title.replace('Prüfungsvorbereitung', 'Prüfungs- vorbereitung')
|
||||
}
|
||||
return d.title
|
||||
})
|
||||
|
||||
const topicHeightOffset = 20
|
||||
const topicHeight = 50
|
||||
|
|
@ -229,13 +240,13 @@ export default {
|
|||
const topicTitles = topicGroups
|
||||
.append('text')
|
||||
.attr('fill', colors.blue[900])
|
||||
.style('font-size', 16)
|
||||
.style('font-size', '16px')
|
||||
.text((d) => d.title)
|
||||
|
||||
// Calculate positions of objects
|
||||
|
||||
if (this.vertical) {
|
||||
const Circles_X = 60
|
||||
const Circles_X = radius
|
||||
const Topics_X = Circles_X - radius
|
||||
|
||||
circle_groups.attr('transform', (d, i) => {
|
||||
|
|
@ -255,10 +266,7 @@ export default {
|
|||
return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
|
||||
})
|
||||
|
||||
topicLines
|
||||
.transition()
|
||||
.duration('1000')
|
||||
.attr('x2', this.width * 0.8)
|
||||
topicLines.transition().duration('1000').attr('x2', this.width)
|
||||
|
||||
topicTitles.attr('y', 30)
|
||||
} else {
|
||||
|
|
@ -292,7 +300,7 @@ export default {
|
|||
|
||||
topicTitles
|
||||
.attr('y', 20)
|
||||
.style('font-size', 19)
|
||||
.style('font-size', '18px')
|
||||
.call(wrap, circleWidth * 0.8)
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import ItCheckbox from '@/components/ui/ItCheckbox.vue'
|
|||
import type { LearningContent, LearningSequence } from '@/types'
|
||||
import { useCircleStore } from '@/stores/circle'
|
||||
import { computed } from 'vue'
|
||||
import _ from 'lodash'
|
||||
|
||||
const props = defineProps<{
|
||||
learningSequence: LearningSequence
|
||||
|
|
@ -30,20 +31,19 @@ const allFinished = computed(() => {
|
|||
return false
|
||||
})
|
||||
|
||||
const continueTranslationKey = computed(() => {
|
||||
const continueTranslationKeyTuple = computed(() => {
|
||||
if (props.learningSequence && circleStore.circle) {
|
||||
const childrenReversed = [...circleStore.circle.flatLearningContents].reverse()
|
||||
const lastFinished = childrenReversed.find((learningContent) => {
|
||||
const lastFinished = _.findLast(circleStore.circle.flatLearningContents, (learningContent) => {
|
||||
return learningContent.completed
|
||||
})
|
||||
|
||||
if (!lastFinished) {
|
||||
// must be the first
|
||||
return circleStore.circle.flatLearningContents[0].translation_key
|
||||
return [circleStore.circle.flatLearningContents[0].translation_key, true]
|
||||
}
|
||||
|
||||
if (lastFinished && lastFinished.nextLearningContent) {
|
||||
return lastFinished.nextLearningContent.translation_key
|
||||
return [lastFinished.nextLearningContent.translation_key, false]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ const learningSequenceBorderClass = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
|
||||
<div class="mb-8 learning-sequence" :id="learningSequence.slug">
|
||||
<div class="flex items-center gap-4 mb-2 text-blue-900">
|
||||
<component :is="learningSequence.icon" />
|
||||
<h3 class="text-xl font-semibold">
|
||||
|
|
@ -99,11 +99,13 @@ const learningSequenceBorderClass = computed(() => {
|
|||
</ItCheckbox>
|
||||
|
||||
<button
|
||||
v-if="learningContent.translation_key === continueTranslationKey"
|
||||
v-if="learningContent.translation_key === continueTranslationKeyTuple[0]"
|
||||
class="btn-blue -my-4"
|
||||
data-cy="ls-continue-button"
|
||||
@click.stop="circleStore.openLearningContent(learningContent)"
|
||||
>
|
||||
Weiter gehts
|
||||
<span v-if="continueTranslationKeyTuple[1]"> Los geht's </span>
|
||||
<span v-else> Weiter geht's </span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,15 @@ import CircleOverview from '@/components/circle/CircleOverview.vue'
|
|||
import CircleDiagram from '@/components/circle/CircleDiagram.vue'
|
||||
import LearningContent from '@/components/circle/LearningContent.vue'
|
||||
|
||||
import { onMounted } from 'vue'
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useCircleStore } from '@/stores/circle'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useRoute } from 'vue-router'
|
||||
import _ from 'lodash'
|
||||
|
||||
log.debug('CircleView.vue created')
|
||||
const route = useRoute()
|
||||
|
||||
log.debug('CircleView.vue created', route)
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathSlug: string
|
||||
|
|
@ -21,11 +25,29 @@ appStore.showMainNavigationBar = true
|
|||
|
||||
const circleStore = useCircleStore()
|
||||
|
||||
const duration = computed(() => {
|
||||
if (circleStore.circle) {
|
||||
const minutes = _.sumBy(circleStore.circle.learningSequences, 'minutes')
|
||||
return `${minutes} Minuten`
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
log.debug('CircleView.vue mounted', props.learningPathSlug, props.circleSlug)
|
||||
|
||||
try {
|
||||
await circleStore.loadCircle(props.learningPathSlug, props.circleSlug)
|
||||
|
||||
if (route.hash.startsWith('#ls-')) {
|
||||
const hashLearningSequence = circleStore.circle?.learningSequences.find((ls) => {
|
||||
return ls.slug.endsWith(route.hash.replace('#', ''))
|
||||
})
|
||||
if (hashLearningSequence) {
|
||||
document.getElementById(hashLearningSequence.slug)?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
log.error(error)
|
||||
}
|
||||
|
|
@ -46,8 +68,8 @@ onMounted(async () => {
|
|||
<LearningContent :key="circleStore.currentLearningContent.translation_key" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="circle-container">
|
||||
<div class="circle">
|
||||
<div class="circle-container bg-gray-200">
|
||||
<div class="circle max-w-9xl">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
|
||||
<router-link
|
||||
|
|
@ -59,10 +81,12 @@ onMounted(async () => {
|
|||
<span class="inline">zurück zum Lernpfad</span>
|
||||
</router-link>
|
||||
|
||||
<h1 class="text-blue-dark text-7xl" data-cy="circle-title">
|
||||
<h1 class="text-blue-dark text-4xl lg:text-6xl" data-cy="circle-title">
|
||||
{{ circleStore.circle?.title }}
|
||||
</h1>
|
||||
|
||||
<div class="mt-2">Dauer: {{ duration }}</div>
|
||||
|
||||
<div class="w-full mt-8">
|
||||
<CircleDiagram></CircleDiagram>
|
||||
</div>
|
||||
|
|
@ -81,7 +105,7 @@ onMounted(async () => {
|
|||
<div class="hidden lg:block">
|
||||
<div class="block 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">
|
||||
<div class="leading-relaxed mt-4">
|
||||
{{ circleStore.circle?.description }}
|
||||
</div>
|
||||
|
||||
|
|
@ -92,7 +116,9 @@ onMounted(async () => {
|
|||
|
||||
<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>
|
||||
<div class="leading-relaxed mt-4">
|
||||
Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.
|
||||
</div>
|
||||
<button class="btn-secondary mt-4 text-xl">Fachexpertin kontaktieren</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,12 +142,12 @@ onMounted(async () => {
|
|||
|
||||
<style lang="postcss" scoped>
|
||||
.circle-container {
|
||||
background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
|
||||
/*background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);*/
|
||||
}
|
||||
|
||||
.circle {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
/*max-width: 1440px;*/
|
||||
/*margin: 0 auto;*/
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const userStore = useUserStore()
|
|||
<div class="mt-8 p-8 break-words bg-white max-w-xl">
|
||||
<h3>Versicherungsvermittler/in</h3>
|
||||
<div class="mt-4">
|
||||
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin"> Weiter gehts </router-link>
|
||||
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin"> Weiter geht's </router-link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { useUserStore } from '@/stores/user'
|
|||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
|
||||
import LearningPathViewVertical from '@/views/LearningPathViewVertical.vue'
|
||||
import { LearningPath } from '@/services/learningPath'
|
||||
|
||||
log.debug('LearningPathView created')
|
||||
|
||||
|
|
@ -26,6 +27,20 @@ onMounted(async () => {
|
|||
log.error(error)
|
||||
}
|
||||
})
|
||||
|
||||
const createContinueUrl = (learningPath: LearningPath) => {
|
||||
if (learningPath.nextLearningContent) {
|
||||
const circle = learningPath.nextLearningContent.parentCircle
|
||||
const lsShortSlug = learningPath.nextLearningContent.parentLearningSequence?.slug.replace(`${circle.slug}-`, '')
|
||||
const url = `/learn/${learningPath.slug}/${learningPath.nextLearningContent.parentCircle.slug}#${lsShortSlug}`
|
||||
const isFirst =
|
||||
learningPath.nextLearningContent.translation_key ===
|
||||
learningPath.circles[0].flatLearningContents[0].translation_key
|
||||
return [url, isFirst]
|
||||
}
|
||||
|
||||
return ['', false]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -44,7 +59,7 @@ onMounted(async () => {
|
|||
<div class="flex justify-end p-3">
|
||||
<button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'" data-cy="show-list-view">
|
||||
<it-icon-list />
|
||||
Listen Ansicht anzeigen
|
||||
Listenansicht anzeigen
|
||||
</button>
|
||||
</div>
|
||||
<LearningPathDiagram
|
||||
|
|
@ -54,28 +69,31 @@ onMounted(async () => {
|
|||
></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
<h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<h1 data-cy="learning-path-title" class="m-6 lg:m-12">
|
||||
{{ learningPathStore.learningPath.title }}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
|
||||
class="bg-white m-6 lg:m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
|
||||
>
|
||||
<div class="p-8 flex-auto">
|
||||
<div class="p-4 lg:p-8 flex-auto">
|
||||
<h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
||||
<p class="mt-4 text-xl"></p>
|
||||
</div>
|
||||
<div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
|
||||
Nächster Schirtt
|
||||
<div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
|
||||
Nächster Schritt
|
||||
<h3>
|
||||
{{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
|
||||
{{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }}
|
||||
</h3>
|
||||
<router-link
|
||||
class="mt-4 btn-blue"
|
||||
:to="`/learn/${learningPathStore.learningPath.slug}/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}`"
|
||||
data-cy="continue-button"
|
||||
:to="createContinueUrl(learningPathStore.learningPath)[0]"
|
||||
data-cy="lp-continue-button"
|
||||
translate
|
||||
>
|
||||
Los geht's
|
||||
<span v-if="createContinueUrl(learningPathStore.learningPath)[1]"> Los geht's </span>
|
||||
<span v-else>Weiter geht's</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,37 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel'
|
||||
import { useLearningPathStore } from '@/stores/learningPath'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
import * as log from 'loglevel';
|
||||
import {useLearningPathStore} from '@/stores/learningPath';
|
||||
import {useUserStore} from '@/stores/user';
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
|
||||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
|
||||
|
||||
|
||||
log.debug('LearningPathView created');
|
||||
log.debug('LearningPathView created')
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathSlug: string,
|
||||
learningPathSlug: string
|
||||
show: boolean
|
||||
|
||||
}>()
|
||||
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const userStore = useUserStore();
|
||||
const learningPathStore = useLearningPathStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const emits = defineEmits(['closemodal'])
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<ItFullScreenModal
|
||||
:show="show"
|
||||
@closemodal="$emit('closemodal')">
|
||||
<div class="bg-white" v-if="learningPathStore.learningPath">
|
||||
<h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
|
||||
<div class="container-medium" v-if="learningPathStore.learningPath">
|
||||
<h1>{{ learningPathStore.learningPath.title }}</h1>
|
||||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<div class="bg-red py-8">
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full"
|
||||
height="2000"
|
||||
identifier="verticalVisualization"
|
||||
v-bind:vertical="true"></LearningPathDiagram>
|
||||
</div>
|
||||
<LearningPathDiagram
|
||||
class="w-full"
|
||||
identifier="verticalVisualization"
|
||||
v-bind:vertical="true"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ module.exports = {
|
|||
spacing: {
|
||||
'128': '32rem',
|
||||
},
|
||||
maxWidth: {
|
||||
'8xl': '88rem',
|
||||
'9xl': '96rem',
|
||||
},
|
||||
backgroundImage: {
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ html {
|
|||
@apply text-black
|
||||
}
|
||||
|
||||
body {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
@apply fill-current
|
||||
}
|
||||
|
|
@ -55,6 +59,14 @@ svg {
|
|||
@apply text-base font-bold
|
||||
}
|
||||
|
||||
.container-medium {
|
||||
@apply mx-auto max-w-5xl px-4 lg:px-8 py-4
|
||||
}
|
||||
|
||||
.container-large {
|
||||
@apply mx-auto max-w-9xl px-4 lg:px-8 py-4
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
|
|
|||
|
|
@ -5,50 +5,90 @@ describe("circle page", () => {
|
|||
cy.manageCommand("cypress_reset");
|
||||
|
||||
login("admin", "test");
|
||||
cy.visit("/learn/versicherungsvermittlerin/analyse");
|
||||
cy.visit("/learn/unit-test-lernpfad/unit-test-circle");
|
||||
});
|
||||
|
||||
it("can open circle page", () => {
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
|
||||
});
|
||||
|
||||
it("can toggle learning content", () => {
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
|
||||
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox'
|
||||
).click();
|
||||
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
|
||||
// completion data should still be there after reload
|
||||
cy.reload();
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
});
|
||||
|
||||
it("can open learning contents and complete them by continuing", () => {
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"]'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-ermittlung-des-kundenbedarfs"]'
|
||||
).click();
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
"Ermittlung des Kundenbedarfs"
|
||||
);
|
||||
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
"Kundenbedürfnisse erkennen"
|
||||
);
|
||||
|
||||
cy.get('[data-cy="close-learnng-content"]').click();
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
"Was braucht eine Familie"
|
||||
);
|
||||
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-kundenanalyse"] > .cy-checkbox-checked'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-kundenbedürfnisse-erkennen"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
cy.get(
|
||||
'[data-cy="versicherungsvermittlerin-circle-analyse-lc-kundenbedürfnisse-erkennen"] > .cy-checkbox-checked'
|
||||
'[data-cy="unit-test-lernpfad-circle-unit-test-circle-lc-was-braucht-eine-familie"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
});
|
||||
|
||||
it("continue button works", () => {
|
||||
cy.get('[data-cy="ls-continue-button"]').should("contain", "Los geht's");
|
||||
cy.get('[data-cy="ls-continue-button"]').click();
|
||||
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
'Einleitung Circle "Unit-Test Circle"'
|
||||
);
|
||||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
|
||||
cy.get('[data-cy="ls-continue-button"]').should("contain", "Weiter geht's");
|
||||
cy.get('[data-cy="ls-continue-button"]').click();
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
"Ermittlung des Kundenbedarfs"
|
||||
);
|
||||
});
|
||||
|
||||
it("can open learning content by url", () => {
|
||||
cy.visit(
|
||||
"/learn/unit-test-lernpfad/unit-test-circle/ermittlung-des-kundenbedarfs"
|
||||
);
|
||||
cy.get('[data-cy="ln-title"]').should(
|
||||
"contain",
|
||||
"Ermittlung des Kundenbedarfs"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ describe("learningPath page", () => {
|
|||
cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
|
||||
});
|
||||
|
||||
it("open listView and click on cirle will open circle", () => {
|
||||
it("open listView and click on circle will open circle", () => {
|
||||
login("admin", "test");
|
||||
cy.visit("/learn/versicherungsvermittlerin");
|
||||
|
||||
|
|
@ -43,7 +43,8 @@ describe("learningPath page", () => {
|
|||
cy.visit("/learn/unit-test-lernpfad");
|
||||
|
||||
// first click will open first circle
|
||||
cy.get('[data-cy="continue-button"]').click();
|
||||
cy.get('[data-cy="lp-continue-button"]').should("contain", "Los geht's");
|
||||
cy.get('[data-cy="lp-continue-button"]').click();
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Basis");
|
||||
cy.get('[data-cy="back-to-learning-path-button"]').click();
|
||||
|
||||
|
|
@ -55,7 +56,8 @@ describe("learningPath page", () => {
|
|||
cy.get('[data-cy="back-to-learning-path-button"]').click();
|
||||
|
||||
// click on continue should go to unit-test-circle
|
||||
cy.get('[data-cy="continue-button"]').click();
|
||||
cy.get('[data-cy="lp-continue-button"]').should("contain", "Weiter geht's");
|
||||
cy.get('[data-cy="lp-continue-button"]').click();
|
||||
cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -425,8 +425,8 @@ Neukundinnen und -kunden.""",
|
|||
create_circle_children(circle_analyse, 'Betreuen')
|
||||
|
||||
TopicFactory(title="Prüfung", is_visible=True, parent=lp)
|
||||
circle_analyse = create_circle('Prüfungs- vorbereitung', lp)
|
||||
create_circle_children(circle_analyse, 'Prüfungs- vorbereitung')
|
||||
circle_analyse = create_circle('Prüfungsvorbereitung', lp)
|
||||
create_circle_children(circle_analyse, 'Prüfungsvorbereitung')
|
||||
|
||||
# locales
|
||||
if not skip_locales:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ from wagtail.models import Site, Page
|
|||
|
||||
from vbv_lernwelt.core.admin import User
|
||||
from vbv_lernwelt.learnpath.tests.learning_path_factories import LearningPathFactory, TopicFactory, CircleFactory, \
|
||||
LearningSequenceFactory, LearningContentFactory, VideoBlockFactory, PodcastBlockFactory, CompetenceBlockFactory, \
|
||||
LearningSequenceFactory, LearningContentFactory, CompetenceBlockFactory, \
|
||||
ExerciseBlockFactory, LearningUnitFactory, LearningUnitQuestionFactory
|
||||
|
||||
|
||||
|
|
@ -33,11 +33,7 @@ def create_circle_children(circle, title):
|
|||
title=f'Einleitung Circle "{title}"',
|
||||
parent=circle,
|
||||
minutes=15,
|
||||
contents=[('video', VideoBlockFactory(
|
||||
url='https://www.youtube.com/embed/qhPIfxS2hvI',
|
||||
description='In dieser Circle zeigt dir ein Fachexperte anhand von Kundensituationen, wie du erfolgreich'
|
||||
'den Kundenbedarf ermitteln, analysieren, priorisieren und anschliessend zusammenfassen kannst.'
|
||||
))]
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
|
||||
LearningSequenceFactory(title='Beobachten', parent=circle, icon='it-icon-ls-watch')
|
||||
|
|
@ -57,10 +53,7 @@ def create_circle_children(circle, title):
|
|||
title='Ermittlung des Kundenbedarfs',
|
||||
parent=circle,
|
||||
minutes=30,
|
||||
contents=[('podcast', PodcastBlockFactory(
|
||||
description='Die Ermittlung des Kundenbedarfs muss in einem eingehenden Gespräch herausgefunden werden. Höre dazu auch diesen Podcast an.',
|
||||
url='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/325190984&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true',
|
||||
))]
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningContentFactory(
|
||||
title='Kundenbedürfnisse erkennen',
|
||||
|
|
@ -138,10 +131,7 @@ def create_simple_test_learning_path(user=None, skip_locales=True):
|
|||
title='Einleitung Circle "Basis"',
|
||||
parent=circle_basis,
|
||||
minutes=15,
|
||||
contents=[('video', VideoBlockFactory(
|
||||
url='https://www.youtube.com/embed/qhPIfxS2hvI',
|
||||
description='Basis Video'
|
||||
))]
|
||||
contents=[('competence', CompetenceBlockFactory())]
|
||||
)
|
||||
LearningSequenceFactory(title='Beenden', parent=circle_basis, icon='it-icon-ls-end')
|
||||
LearningContentFactory(
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
{% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
|
||||
|
||||
<div class="content">
|
||||
<form action="/core/cypressreset/" method="post">
|
||||
<form action="/api/core/cypressreset/" method="post">
|
||||
{% csrf_token %}
|
||||
<button class="btn" name="">Testdaten zurück setzen</button>
|
||||
</form>
|
||||
<form action="/core/schemareset/" method="post">
|
||||
<form action="/api/core/schemareset/" method="post">
|
||||
{% csrf_token %}
|
||||
<button class="btn" name="">Datenbank zurück setzen</button>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue