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

test_dani

This commit is contained in:
Lorenz Padberg 2022-06-27 15:12:19 +02:00
parent 0ccec140a4
commit cf6dc50922
2 changed files with 156 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
client/src/components/circle/LearningPathCircleDiagram.vue
View File

@ -4,147 +4,147 @@ import * as _ from 'underscore'
export default {
props: {
learninglearningPathContents: {
default: {
topics: [
{
id: 4,
title: 'Basissdf',
slug: 'basissdf',
type: 'learnpath.Topic',
translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
is_visible: false,
circles: [
{
id: 5,
title: 'Basis',
slug: 'basis',
type: 'learnpath.Circle',
translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
learning_sequences: [
{
id: 11,
title: 'Starten',
done: false,
},
{
id: 13,
title: 'Beobachten',
done: false,
},
],
},
],
},
{
id: 6,
title: 'Gewinnen von Kunden',
slug: 'gewinnen-von-kunden',
type: 'learnpath.Topic',
translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
is_visible: true,
circles: [
{
id: 7,
title: 'Gewinnen',
slug: 'gewinnen',
type: 'learnpath.Circle',
translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
learning_sequences: [
{
id: 11,
title: 'Starten',
done: true,
},
{
id: 13,
title: 'Beobachten',
done: false,
},
{
id: 11,
title: 'Starten',
done: false,
},
{
id: 13,
title: 'Beobachten',
done: false,
},
{
id: 11,
title: 'Starten',
done: true,
},
{
id: 13,
title: 'Beobachten',
done: false,
},
],
},
],
},
{
id: 8,
title: 'Beraten der Kunden',
slug: 'beraten-der-kunden',
type: 'learnpath.Topic',
translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
is_visible: true,
circles: [
{
id: 9,
title: 'Einstieg',
slug: 'einstieg',
type: 'learnpath.Circle',
translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
learning_sequences: [
{
id: 11,
title: 'Starten',
done: true,
},
{
id: 13,
title: 'Beobachten',
done: false,
},
],
},
{
id: 10,
title: 'Analyse des letzten Falles',
slug: 'analyse',
type: 'learnpath.Circle',
translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
learning_sequences: [
{
id: 11,
title: 'Starten',
done: true,
},
{
id: 13,
title: 'Beobachten',
done: true,
},
{
id: 18,
title: 'Anwenden',
done: true,
},
{
id: 30,
title: 'Üben',
done: false,
},
],
},
],
},
],
},
learningPathContents: {
default: 34,
// topics: [
// {
// id: 4,
// title: 'Basissdf',
// slug: 'basissdf',
// type: 'learnpath.Topic',
// translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
// is_visible: false,
// circles: [
// {
// id: 5,
// title: 'Basis',
// slug: 'basis',
// type: 'learnpath.Circle',
// translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
// learning_sequences: [
// {
// id: 11,
// title: 'Starten',
// done: false,
// },
// {
// id: 13,
// title: 'Beobachten',
// done: false,
// },
// ],
// },
// ],
// },
// // {
// // id: 6,
// // title: 'Gewinnen von Kunden',
// // slug: 'gewinnen-von-kunden',
// // type: 'learnpath.Topic',
// // translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
// // is_visible: true,
// // circles: [
// // {
// // id: 7,
// // title: 'Gewinnen',
// // slug: 'gewinnen',
// // type: 'learnpath.Circle',
// // translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
// // learning_sequences: [
// // {
// // id: 11,
// // title: 'Starten',
// // done: true,
// // },
// // {
// // id: 13,
// // title: 'Beobachten',
// // done: false,
// // },
// // {
// // id: 11,
// // title: 'Starten',
// // done: false,
// // },
// // {
// // id: 13,
// // title: 'Beobachten',
// // done: false,
// // },
// // {
// // id: 11,
// // title: 'Starten',
// // done: true,
// // },
// // {
// // id: 13,
// // title: 'Beobachten',
// // done: false,
// // },
// // ],
// // },
// // ],
// // },
// // {
// // id: 8,
// // title: 'Beraten der Kunden',
// // slug: 'beraten-der-kunden',
// // type: 'learnpath.Topic',
// // translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
// // is_visible: true,
// // circles: [
// // {
// // id: 9,
// // title: 'Einstieg',
// // slug: 'einstieg',
// // type: 'learnpath.Circle',
// // translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
// // learning_sequences: [
// // {
// // id: 11,
// // title: 'Starten',
// // done: true,
// // },
// // {
// // id: 13,
// // title: 'Beobachten',
// // done: false,
// // },
// // ],
// // },
// // {
// // id: 10,
// // title: 'Analyse des letzten Falles',
// // slug: 'analyse',
// // type: 'learnpath.Circle',
// // translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
// // learning_sequences: [
// // {
// // id: 11,
// // title: 'Starten',
// // done: true,
// // },
// // {
// // id: 13,
// // title: 'Beobachten',
// // done: true,
// // },
// // {
// // id: 18,
// // title: 'Anwenden',
// // done: true,
// // },
// // {
// // id: 30,
// // title: 'Üben',
// // done: false,
// // },
// // ],
// // },
// // ],
// // },
// ],
// },
type: Object,
},
@ -159,12 +159,14 @@ export default {
},
computed: {
viewBox() {
console.log(this.width, this.height)
return `0 0 ${this.width} ${this.height* 1.5}`
},
circles() {
let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
console.log(this.learningPathContents)
let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
_.forEach(internalCircles, function (circle) {
console.log('circle', circle)
let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
let pieGenerator = d3.pie()
let pieData = pieGenerator(pieWeights)
@ -183,6 +185,7 @@ export default {
},
mounted() {
console.log('cirlces', this.circles)
console.log(this.width, this.height)
const circleWidth = 200
@ -276,7 +279,7 @@ export default {
const topicTitles = this.svg
.selectAll('.topicTitles')
.data(this.learninglearningPathContents.topics)
.data(this.learningPathContents.topics)
.enter()
.append('text')
.attr('x', (d, i) => {
@ -290,7 +293,7 @@ export default {
const topicLines = this.svg
.selectAll('lines')
.data(this.learninglearningPathContents.topics)
.data(this.learningPathContents.topics)
.enter()
.append('line')
.attr('x1', (d, i) => {
@ -346,6 +349,7 @@ export default {
<template>
<pre>{{learningPathContents}}</pre>
<div class="svg-container h-full content-start ">
<svg class="learning-path-visualization h-full" :viewBox="viewBox">
</svg>

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

@ -5,7 +5,10 @@ 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() {
@ -17,14 +20,14 @@ export default {
learningSequences: [],
}
},
mounted() {
beforeMount() {
log.debug('LearningPath mounted', this.learningPathSlug);
axios({
method: 'get',
url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
}).then((response) => {
this.learningPathData = response.data
this.learningPathData = response.data
let learningPathContents = {topics: []}
let topic = {
@ -36,13 +39,11 @@ export default {
is_visible: false,
cirlces: []
}
response.data.children.forEach((child) => {
if (child.type === 'learnpath.Topic') {
if (topic.id != 0) {
learningPathContents.topics.push(topic)
learningPathContents.topics.push(child)
}
topic = child
topic.circles = []
}
@ -51,8 +52,6 @@ export default {
}
});
learningPathContents.topics.push(topic)
this.learningPathContents = learningPathContents;
});
@ -69,12 +68,9 @@ export default {
<MainNavigationBar/>
<div class="learningpath flex flex-col">
<div class="flex flex-col h-max">
<div class="bg-white h-80 pt-8">
<!-- <img src="@/assets/learning_path.svg" alt="" class="h-full">-->
<SimpleCircleDiagram :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
<SimpleCircleDiagram :learning-path-contents="learningPathContents"></SimpleCircleDiagram>
</div>
<div class="text-blue-dark font-bold text-7xl m-12">