120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<script>
|
|
import axios from 'axios';
|
|
import * as log from 'loglevel';
|
|
|
|
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
|
import LearningSequence from '../components/circle/LearningSequence.vue';
|
|
|
|
export default {
|
|
components: { LearningSequence, MainNavigationBar },
|
|
props: ['circleSlug',],
|
|
data() {
|
|
return {
|
|
count: 0,
|
|
circleData: {},
|
|
learningSequences: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
log.debug('CircleView mounted', this.circleSlug);
|
|
axios({
|
|
method: 'get',
|
|
url: `/learnpath/api/circle/${this.circleSlug}/`,
|
|
}).then((response) => {
|
|
log.debug(response.data);
|
|
this.circleData = response.data;
|
|
|
|
// aggregate wagtail data into LearningSequence > LearningPackages > LearningUnit hierarchy
|
|
let learningSequence = null;
|
|
let learningPackageIndex = 0;
|
|
this.circleData.children.forEach((child) => {
|
|
if (child.type === 'learnpath.LearningSequence') {
|
|
if (learningSequence) {
|
|
this.learningSequences.push(learningSequence);
|
|
}
|
|
learningSequence = Object.assign(child, { learningPackages: [] });
|
|
learningPackageIndex = 0;
|
|
} else {
|
|
if (learningSequence.learningPackages.length === 0) {
|
|
learningSequence.learningPackages.push({
|
|
title: child.package,
|
|
learningUnits: [],
|
|
})
|
|
}
|
|
if (learningSequence.learningPackages[learningPackageIndex].title !== child.package) {
|
|
learningPackageIndex += 1;
|
|
learningSequence.learningPackages.push({
|
|
title: child.package,
|
|
learningUnits: [],
|
|
})
|
|
}
|
|
learningSequence.learningPackages[learningPackageIndex].learningUnits.push(child);
|
|
}
|
|
});
|
|
this.learningSequences.push(learningSequence);
|
|
|
|
// sum minutes
|
|
this.learningSequences.forEach((learningSequence) => {
|
|
learningSequence.minutes = 0;
|
|
learningSequence.learningPackages.forEach((learningPackage) => {
|
|
learningPackage.minutes = 0;
|
|
learningPackage.learningUnits.forEach((learningUnit) => {
|
|
learningPackage.minutes += learningUnit.minutes;
|
|
});
|
|
learningSequence.minutes += learningPackage.minutes;
|
|
});
|
|
});
|
|
|
|
log.debug(this.learningSequences);
|
|
});
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<MainNavigationBar/>
|
|
|
|
<div class="circle">
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
|
|
<h1 class="text-blue-dark text-7xl">
|
|
{{ circleData.title }}
|
|
</h1>
|
|
|
|
<div class="mt-8">
|
|
<img src="@/assets/circle-analyse.svg" alt="">
|
|
</div>
|
|
|
|
<div class="outcome 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">
|
|
{{ circleData.description }}
|
|
</div>
|
|
|
|
<button class="btn-primary mt-4">Erfahre mehr dazu</button>
|
|
</div>
|
|
|
|
<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>
|
|
<button class="btn-secondary mt-4">
|
|
Fachexpertin kontaktieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
|
|
<div v-for="learningSequence in learningSequences">
|
|
<LearningSequence :learning-sequence="learningSequence"></LearningSequence>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|