107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<script>
|
|
import axios from 'axios';
|
|
import * as log from 'loglevel';
|
|
|
|
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
|
import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {MainNavigationBar, LearningPathDiagram},
|
|
props: ['learningPathSlug',],
|
|
data() {
|
|
return {
|
|
count: 0,
|
|
learningPathData: {},
|
|
learningPathContents: null,
|
|
circles: [],
|
|
learningSequences: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
log.debug('LearningPath mounted', this.learningPathSlug);
|
|
axios({
|
|
method: 'get',
|
|
url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
|
|
}).then((response) => {
|
|
|
|
this.learningPathData = response.data
|
|
|
|
let learningPathContents = {topics: []}
|
|
let topic = {
|
|
id: 0,
|
|
title: '',
|
|
slug: '',
|
|
type: 'learnpath.Topic',
|
|
translation_key: '',
|
|
is_visible: false,
|
|
cirlces: []
|
|
}
|
|
response.data.children.forEach((child) => {
|
|
if (child.type === 'learnpath.Topic') {
|
|
if (topic.id != 0) {
|
|
learningPathContents.topics.push(child)
|
|
}
|
|
topic = child
|
|
topic.circles = []
|
|
}
|
|
if (child.type === 'learnpath.Circle') {
|
|
topic.circles.push(child)
|
|
}
|
|
});
|
|
learningPathContents.topics.push(topic)
|
|
this.learningPathContents = learningPathContents;
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-300 h-screen" v-if="learningPathContents">
|
|
|
|
|
|
<MainNavigationBar/>
|
|
|
|
<div class="learningpath flex flex-col">
|
|
<div class="flex flex-col h-max">
|
|
<div class="bg-white h-80 pt-8">
|
|
<LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
|
|
</div>
|
|
|
|
<div class="text-blue-dark font-bold text-7xl m-12">
|
|
{{ learningPathData.title }}
|
|
</div>
|
|
|
|
<div class="bg-white m-12 p-8 flex flex-row justify-start">
|
|
<div class="p-8">
|
|
|
|
<h2>Willkommmen zurück, Jan</h2>
|
|
Du hast bereits drei circles bearbeitet, mach weiter so!
|
|
</div>
|
|
<div class="p-8 border-l ">Nächster Schirtt
|
|
<h3>Analyse: Anwenden</h3>
|
|
<button class="btn-blue mt-4">
|
|
Los geht's
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="topic"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|