ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/vbv-88-learning-path-vertical' into develop

This commit is contained in:
Daniel Egger 2022-09-15 07:56:38 +02:00
parent 384999619c d8959a8d0c
commit da13345511
17 changed files with 234 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

5
client/src/components/circle/CircleDiagram.vue
View File

@ -48,6 +48,7 @@ const pieData = computed(() => {
pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
pie.translation_key = thisLearningSequence.translation_key pie.translation_key = thisLearningSequence.translation_key
pie.slug = thisLearningSequence.slug
pie.someFinished = someFinished(thisLearningSequence) pie.someFinished = someFinished(thisLearningSequence)
pie.allFinished = allFinished(thisLearningSequence) pie.allFinished = allFinished(thisLearningSequence)
}) })
@ -146,7 +147,7 @@ function render() {
}) })
.on('click', function (d, elm) { .on('click', function (d, elm) {
console.log('clicked on ', 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 const learningSequenceText = learningSequences
.append('text') .append('text')
.attr('fill', colors.blue[900]) .attr('fill', colors.blue[900])
.style('font-size', 15) .style('font-size', '15px')
.text((d) => { .text((d) => {
return d.title return d.title
}) })

6
client/src/components/circle/CircleOverview.vue
View File

@ -12,6 +12,7 @@ const props = defineProps<{
<template> <template>
<ItFullScreenModal :show="show" @closemodal="$emit('closemodal')"> <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
<div class="container-medium">
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1> <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>
@ -27,7 +28,9 @@ const props = defineProps<{
</ul> </ul>
</div> </div>
<h3 class="mt-16">Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:</h3> <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"> <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
<li <li
@ -38,6 +41,7 @@ const props = defineProps<{
{{ jobSituation.value }} {{ jobSituation.value }}
</li> </li>
</ul> </ul>
</div>
</ItFullScreenModal> </ItFullScreenModal>
</template> </template>

8
client/src/components/circle/LearningContent.vue
View File

@ -27,20 +27,20 @@ const block = computed(() => {
<button <button
type="button" type="button"
class="btn-text inline-flex items-center px-3 py-2 font-normal" 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()" @click="circleStore.closeLearningContent()"
> >
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left> <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> <span class="hidden lg:inline">zurück zum Circle</span>
</button> </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 <button
type="button" type="button"
class="btn-blue" class="btn-blue"
data-cy="complete-and-continue" data-cy="complete-and-continue"
@click="circleStore.continueFromLearningContent(this.learningContent)" @click="circleStore.continueFromLearningContent(props.learningContent)"
> >
Abschliessen und weiter Abschliessen und weiter
</button> </button>
@ -50,7 +50,7 @@ const block = computed(() => {
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" /> <iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
</div> </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> <p>{{ block.value.description }}</p>
<div v-if="block.type === 'video'"> <div v-if="block.type === 'video'">

48
client/src/components/circle/LearningPathDiagram.vue
View File

@ -1,18 +1,11 @@
<script> <script>
import * as d3 from 'd3' import * as d3 from 'd3'
import { useLearningPathStore } from '../../stores/learningPath' import { useLearningPathStore } from '@/stores/learningPath'
import colors from '@/colors.json' import colors from '@/colors.json'
import * as log from 'loglevel'
export default { export default {
props: { props: {
width: {
default: 1640,
type: Number,
},
height: {
default: 256,
type: Number,
},
vertical: { vertical: {
default: false, default: false,
type: Boolean, type: Boolean,
@ -22,14 +15,19 @@ export default {
type: String, type: String,
}, },
}, },
data() {
return {
width: 1640,
height: 384,
}
},
setup() { setup() {
const learningPathStore = useLearningPathStore() const learningPathStore = useLearningPathStore()
return { learningPathStore } return { learningPathStore }
}, },
computed: { computed: {
viewBox() { viewBox() {
return `0 0 ${this.width} ${this.height * 1.5}` return `0 0 ${this.width} ${this.height}`
}, },
circles() { circles() {
function someFinished(circle, learningSequence) { function someFinished(circle, learningSequence) {
@ -81,6 +79,13 @@ export default {
}, },
mounted() { 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 circleWidth = this.vertical ? 60 : 200
const radius = (circleWidth * 0.8) / 2 const radius = (circleWidth * 0.8) / 2
@ -177,8 +182,14 @@ export default {
const circlesText = circle_groups const circlesText = circle_groups
.append('text') .append('text')
.attr('fill', colors.blue[900]) .attr('fill', colors.blue[900])
.style('font-size', 19) .style('font-size', '18px')
.text((d) => d.title) .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 topicHeightOffset = 20
const topicHeight = 50 const topicHeight = 50
@ -229,13 +240,13 @@ export default {
const topicTitles = topicGroups const topicTitles = topicGroups
.append('text') .append('text')
.attr('fill', colors.blue[900]) .attr('fill', colors.blue[900])
.style('font-size', 16) .style('font-size', '16px')
.text((d) => d.title) .text((d) => d.title)
// Calculate positions of objects // Calculate positions of objects
if (this.vertical) { if (this.vertical) {
const Circles_X = 60 const Circles_X = radius
const Topics_X = Circles_X - radius const Topics_X = Circles_X - radius
circle_groups.attr('transform', (d, i) => { circle_groups.attr('transform', (d, i) => {
@ -255,10 +266,7 @@ export default {
return 'topic '.concat(d.is_visible ? 'block' : 'hidden') return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
}) })
topicLines topicLines.transition().duration('1000').attr('x2', this.width)
.transition()
.duration('1000')
.attr('x2', this.width * 0.8)
topicTitles.attr('y', 30) topicTitles.attr('y', 30)
} else { } else {
@ -292,7 +300,7 @@ export default {
topicTitles topicTitles
.attr('y', 20) .attr('y', 20)
.style('font-size', 19) .style('font-size', '18px')
.call(wrap, circleWidth * 0.8) .call(wrap, circleWidth * 0.8)
.attr('class', 'topicTitles font-bold') .attr('class', 'topicTitles font-bold')
} }

18
client/src/components/circle/LearningSequence.vue
View File

@ -3,6 +3,7 @@ import ItCheckbox from '@/components/ui/ItCheckbox.vue'
import type { LearningContent, LearningSequence } from '@/types' import type { LearningContent, LearningSequence } from '@/types'
import { useCircleStore } from '@/stores/circle' import { useCircleStore } from '@/stores/circle'
import { computed } from 'vue' import { computed } from 'vue'
import _ from 'lodash'
const props = defineProps<{ const props = defineProps<{
learningSequence: LearningSequence learningSequence: LearningSequence
@ -30,20 +31,19 @@ const allFinished = computed(() => {
return false return false
}) })
const continueTranslationKey = computed(() => { const continueTranslationKeyTuple = computed(() => {
if (props.learningSequence && circleStore.circle) { if (props.learningSequence && circleStore.circle) {
const childrenReversed = [...circleStore.circle.flatLearningContents].reverse() const lastFinished = _.findLast(circleStore.circle.flatLearningContents, (learningContent) => {
const lastFinished = childrenReversed.find((learningContent) => {
return learningContent.completed return learningContent.completed
}) })
if (!lastFinished) { if (!lastFinished) {
// must be the first // must be the first
return circleStore.circle.flatLearningContents[0].translation_key return [circleStore.circle.flatLearningContents[0].translation_key, true]
} }
if (lastFinished && lastFinished.nextLearningContent) { if (lastFinished && lastFinished.nextLearningContent) {
return lastFinished.nextLearningContent.translation_key return [lastFinished.nextLearningContent.translation_key, false]
} }
} }
@ -67,7 +67,7 @@ const learningSequenceBorderClass = computed(() => {
</script> </script>
<template> <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"> <div class="flex items-center gap-4 mb-2 text-blue-900">
<component :is="learningSequence.icon" /> <component :is="learningSequence.icon" />
<h3 class="text-xl font-semibold"> <h3 class="text-xl font-semibold">
@ -99,11 +99,13 @@ const learningSequenceBorderClass = computed(() => {
</ItCheckbox> </ItCheckbox>
<button <button
v-if="learningContent.translation_key === continueTranslationKey" v-if="learningContent.translation_key === continueTranslationKeyTuple[0]"
class="btn-blue -my-4" class="btn-blue -my-4"
data-cy="ls-continue-button"
@click.stop="circleStore.openLearningContent(learningContent)" @click.stop="circleStore.openLearningContent(learningContent)"
> >
Weiter gehts <span v-if="continueTranslationKeyTuple[1]"> Los geht's </span>
<span v-else> Weiter geht's </span>
</button> </button>
</div> </div>

46
client/src/views/CircleView.vue
View File

@ -5,11 +5,15 @@ import CircleOverview from '@/components/circle/CircleOverview.vue'
import CircleDiagram from '@/components/circle/CircleDiagram.vue' import CircleDiagram from '@/components/circle/CircleDiagram.vue'
import LearningContent from '@/components/circle/LearningContent.vue' import LearningContent from '@/components/circle/LearningContent.vue'
import { onMounted } from 'vue' import { computed, onMounted } from 'vue'
import { useCircleStore } from '@/stores/circle' import { useCircleStore } from '@/stores/circle'
import { useAppStore } from '@/stores/app' 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<{ const props = defineProps<{
learningPathSlug: string learningPathSlug: string
@ -21,11 +25,29 @@ appStore.showMainNavigationBar = true
const circleStore = useCircleStore() const circleStore = useCircleStore()
const duration = computed(() => {
if (circleStore.circle) {
const minutes = _.sumBy(circleStore.circle.learningSequences, 'minutes')
return `${minutes} Minuten`
}
return ''
})
onMounted(async () => { onMounted(async () => {
log.debug('CircleView.vue mounted', props.learningPathSlug, props.circleSlug) log.debug('CircleView.vue mounted', props.learningPathSlug, props.circleSlug)
try { try {
await circleStore.loadCircle(props.learningPathSlug, props.circleSlug) 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) { } catch (error) {
log.error(error) log.error(error)
} }
@ -46,8 +68,8 @@ onMounted(async () => {
<LearningContent :key="circleStore.currentLearningContent.translation_key" /> <LearningContent :key="circleStore.currentLearningContent.translation_key" />
</div> </div>
<div v-else> <div v-else>
<div class="circle-container"> <div class="circle-container bg-gray-200">
<div class="circle"> <div class="circle max-w-9xl">
<div class="flex flex-col lg:flex-row"> <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"> <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
<router-link <router-link
@ -59,10 +81,12 @@ onMounted(async () => {
<span class="inline">zurück zum Lernpfad</span> <span class="inline">zurück zum Lernpfad</span>
</router-link> </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 }} {{ circleStore.circle?.title }}
</h1> </h1>
<div class="mt-2">Dauer: {{ duration }}</div>
<div class="w-full mt-8"> <div class="w-full mt-8">
<CircleDiagram></CircleDiagram> <CircleDiagram></CircleDiagram>
</div> </div>
@ -81,7 +105,7 @@ onMounted(async () => {
<div class="hidden lg:block"> <div class="hidden lg:block">
<div class="block border border-gray-500 mt-8 p-6"> <div class="block border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3> <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 }} {{ circleStore.circle?.description }}
</div> </div>
@ -92,7 +116,9 @@ onMounted(async () => {
<div class="expert border border-gray-500 mt-8 p-6"> <div class="expert border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3> <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> <button class="btn-secondary mt-4 text-xl">Fachexpertin kontaktieren</button>
</div> </div>
</div> </div>
@ -116,12 +142,12 @@ onMounted(async () => {
<style lang="postcss" scoped> <style lang="postcss" scoped>
.circle-container { .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 { .circle {
max-width: 1440px; /*max-width: 1440px;*/
margin: 0 auto; /*margin: 0 auto;*/
} }
.v-enter-active, .v-enter-active,

2
client/src/views/CockpitView.vue
View File

@ -16,7 +16,7 @@ const userStore = useUserStore()
<div class="mt-8 p-8 break-words bg-white max-w-xl"> <div class="mt-8 p-8 break-words bg-white max-w-xl">
<h3>Versicherungsvermittler/in</h3> <h3>Versicherungsvermittler/in</h3>
<div class="mt-4"> <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>
</div> </div>
</main> </main>

36
client/src/views/LearningPathView.vue
View File

@ -7,6 +7,7 @@ import { useUserStore } from '@/stores/user'
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue' import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
import LearningPathViewVertical from '@/views/LearningPathViewVertical.vue' import LearningPathViewVertical from '@/views/LearningPathViewVertical.vue'
import { LearningPath } from '@/services/learningPath'
log.debug('LearningPathView created') log.debug('LearningPathView created')
@ -26,6 +27,20 @@ onMounted(async () => {
log.error(error) 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> </script>
<template> <template>
@ -44,7 +59,7 @@ onMounted(async () => {
<div class="flex justify-end p-3"> <div class="flex justify-end p-3">
<button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'" data-cy="show-list-view"> <button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'" data-cy="show-list-view">
<it-icon-list /> <it-icon-list />
Listen Ansicht anzeigen Listenansicht anzeigen
</button> </button>
</div> </div>
<LearningPathDiagram <LearningPathDiagram
@ -54,28 +69,31 @@ onMounted(async () => {
></LearningPathDiagram> ></LearningPathDiagram>
</div> </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 <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> <h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
<p class="mt-4 text-xl"></p> <p class="mt-4 text-xl"></p>
</div> </div>
<div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate> <div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
Nächster Schirtt Nächster Schritt
<h3> <h3>
{{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}: {{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
{{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }} {{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }}
</h3> </h3>
<router-link <router-link
class="mt-4 btn-blue" class="mt-4 btn-blue"
:to="`/learn/${learningPathStore.learningPath.slug}/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}`" :to="createContinueUrl(learningPathStore.learningPath)[0]"
data-cy="continue-button" data-cy="lp-continue-button"
translate translate
> >
Los geht's <span v-if="createContinueUrl(learningPathStore.learningPath)[1]"> Los geht's </span>
<span v-else>Weiter geht's</span>
</router-link> </router-link>
</div> </div>
</div> </div>

43
client/src/views/LearningPathViewVertical.vue
View File

@ -1,46 +1,37 @@
<script setup lang="ts"> <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 LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
import {useLearningPathStore} from '@/stores/learningPath'; import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
import {useUserStore} from '@/stores/user';
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'; log.debug('LearningPathView created')
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
log.debug('LearningPathView created');
const props = defineProps<{ const props = defineProps<{
learningPathSlug: string, learningPathSlug: string
show: boolean show: boolean
}>() }>()
const learningPathStore = useLearningPathStore()
const learningPathStore = useLearningPathStore(); const userStore = useUserStore()
const userStore = useUserStore();
const emits = defineEmits(['closemodal']) const emits = defineEmits(['closemodal'])
</script> </script>
<template> <template>
<ItFullScreenModal <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
:show="show" <div class="container-medium" v-if="learningPathStore.learningPath">
@closemodal="$emit('closemodal')"> <h1>{{ learningPathStore.learningPath.title }}</h1>
<div class="bg-white" v-if="learningPathStore.learningPath">
<h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<div class="flex flex-col h-max"> <div class="flex flex-col h-max">
<div class="bg-red py-8"> <LearningPathDiagram
<LearningPathDiagram class="max-w-[1680px] w-full" class="w-full"
height="2000"
identifier="verticalVisualization" identifier="verticalVisualization"
v-bind:vertical="true"></LearningPathDiagram> v-bind:vertical="true"
</div> ></LearningPathDiagram>
</div> </div>
</div> </div>
</div> </div>
</ItFullScreenModal> </ItFullScreenModal>
</template> </template>
<style scoped> <style scoped></style>
</style>

4
client/tailwind.config.js
View File

@ -15,6 +15,10 @@ module.exports = {
spacing: { spacing: {
'128': '32rem', '128': '32rem',
}, },
maxWidth: {
'8xl': '88rem',
'9xl': '96rem',
},
backgroundImage: { backgroundImage: {
} }
}, },

12
client/tailwind.css
View File

@ -6,6 +6,10 @@ html {
@apply text-black @apply text-black
} }
body {
hyphens: auto;
}
svg { svg {
@apply fill-current @apply fill-current
} }
@ -55,6 +59,14 @@ svg {
@apply text-base font-bold @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 { @layer components {

66
cypress/e2e/circle.cy.js
View File

@ -5,50 +5,90 @@ describe("circle page", () => {
cy.manageCommand("cypress_reset"); cy.manageCommand("cypress_reset");
login("admin", "test"); login("admin", "test");
cy.visit("/learn/versicherungsvermittlerin/analyse"); cy.visit("/learn/unit-test-lernpfad/unit-test-circle");
}); });
it("can open circle page", () => { 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", () => { 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( 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(); ).click();
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
// completion data should still be there after reload // completion data should still be there after reload
cy.reload(); cy.reload();
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
}); });
it("can open learning contents and complete them by continuing", () => { it("can open learning contents and complete them by continuing", () => {
cy.get( 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(); ).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(
cy.get('[data-cy="complete-and-continue"]').click(); "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( 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"); ).should("have.class", "cy-checkbox-checked");
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
cy.get( 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"); ).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"
);
});
}); });

8
cypress/e2e/learningPath.cy.js
View File

@ -25,7 +25,7 @@ describe("learningPath page", () => {
cy.get('[data-cy="circle-title"]').should("contain", "Analyse"); 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"); login("admin", "test");
cy.visit("/learn/versicherungsvermittlerin"); cy.visit("/learn/versicherungsvermittlerin");
@ -43,7 +43,8 @@ describe("learningPath page", () => {
cy.visit("/learn/unit-test-lernpfad"); cy.visit("/learn/unit-test-lernpfad");
// first click will open first circle // 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="circle-title"]').should("contain", "Basis");
cy.get('[data-cy="back-to-learning-path-button"]').click(); 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(); cy.get('[data-cy="back-to-learning-path-button"]').click();
// click on continue should go to unit-test-circle // 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"); cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
}); });
}); });

4
server/vbv_lernwelt/learnpath/create_default_learning_path.py
View File

@ -425,8 +425,8 @@ Neukundinnen und -kunden.""",
create_circle_children(circle_analyse, 'Betreuen') create_circle_children(circle_analyse, 'Betreuen')
TopicFactory(title="Prüfung", is_visible=True, parent=lp) TopicFactory(title="Prüfung", is_visible=True, parent=lp)
circle_analyse = create_circle('Prüfungs- vorbereitung', lp) circle_analyse = create_circle('Prüfungsvorbereitung', lp)
create_circle_children(circle_analyse, 'Prüfungs- vorbereitung') create_circle_children(circle_analyse, 'Prüfungsvorbereitung')
# locales # locales
if not skip_locales: if not skip_locales:

18
server/vbv_lernwelt/learnpath/tests/create_simple_test_learning_path.py
View File

@ -4,7 +4,7 @@ from wagtail.models import Site, Page
from vbv_lernwelt.core.admin import User from vbv_lernwelt.core.admin import User
from vbv_lernwelt.learnpath.tests.learning_path_factories import LearningPathFactory, TopicFactory, CircleFactory, \ from vbv_lernwelt.learnpath.tests.learning_path_factories import LearningPathFactory, TopicFactory, CircleFactory, \
LearningSequenceFactory, LearningContentFactory, VideoBlockFactory, PodcastBlockFactory, CompetenceBlockFactory, \ LearningSequenceFactory, LearningContentFactory, CompetenceBlockFactory, \
ExerciseBlockFactory, LearningUnitFactory, LearningUnitQuestionFactory ExerciseBlockFactory, LearningUnitFactory, LearningUnitQuestionFactory
@ -33,11 +33,7 @@ def create_circle_children(circle, title):
title=f'Einleitung Circle "{title}"', title=f'Einleitung Circle "{title}"',
parent=circle, parent=circle,
minutes=15, minutes=15,
contents=[('video', VideoBlockFactory( contents=[('competence', CompetenceBlockFactory())]
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.'
))]
) )
LearningSequenceFactory(title='Beobachten', parent=circle, icon='it-icon-ls-watch') LearningSequenceFactory(title='Beobachten', parent=circle, icon='it-icon-ls-watch')
@ -57,10 +53,7 @@ def create_circle_children(circle, title):
title='Ermittlung des Kundenbedarfs', title='Ermittlung des Kundenbedarfs',
parent=circle, parent=circle,
minutes=30, minutes=30,
contents=[('podcast', PodcastBlockFactory( contents=[('competence', CompetenceBlockFactory())]
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',
))]
) )
LearningContentFactory( LearningContentFactory(
title='Kundenbedürfnisse erkennen', title='Kundenbedürfnisse erkennen',
@ -138,10 +131,7 @@ def create_simple_test_learning_path(user=None, skip_locales=True):
title='Einleitung Circle "Basis"', title='Einleitung Circle "Basis"',
parent=circle_basis, parent=circle_basis,
minutes=15, minutes=15,
contents=[('video', VideoBlockFactory( contents=[('competence', CompetenceBlockFactory())]
url='https://www.youtube.com/embed/qhPIfxS2hvI',
description='Basis Video'
))]
) )
LearningSequenceFactory(title='Beenden', parent=circle_basis, icon='it-icon-ls-end') LearningSequenceFactory(title='Beenden', parent=circle_basis, icon='it-icon-ls-end')
LearningContentFactory( LearningContentFactory(

4
server/vbv_lernwelt/templates/admin/index.html
View File

@ -5,11 +5,11 @@
{% include "admin/app_list.html" with app_list=app_list show_changelinks=True %} {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
<div class="content"> <div class="content">
<form action="/core/cypressreset/" method="post"> <form action="/api/core/cypressreset/" method="post">
{% csrf_token %} {% csrf_token %}
<button class="btn" name="">Testdaten zurück setzen</button> <button class="btn" name="">Testdaten zurück setzen</button>
</form> </form>
<form action="/core/schemareset/" method="post"> <form action="/api/core/schemareset/" method="post">
{% csrf_token %} {% csrf_token %}
<button class="btn" name="">Datenbank zurück setzen</button> <button class="btn" name="">Datenbank zurück setzen</button>
</form> </form>