110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<script>
|
|
import axios from 'axios';
|
|
import * as log from 'loglevel';
|
|
|
|
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
|
import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
|
|
|
|
export default {
|
|
components: {MainNavigationBar, SimpleCircleDiagram},
|
|
props: ['learningPathSlug',],
|
|
data() {
|
|
return {
|
|
count: 0,
|
|
learningPathData: {},
|
|
learningPathContents: {},
|
|
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(topic)
|
|
}
|
|
|
|
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">
|
|
|
|
<MainNavigationBar/>
|
|
|
|
<div class="learningpath flex flex-col">
|
|
|
|
|
|
<div class="flex flex-col h-max p-6">
|
|
<div class="bg-green-500 h-64">
|
|
<SimpleCircleDiagram class="object-scale-down" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
|
|
</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>
|