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

fixed learning path text wrapping

This commit is contained in:
Lorenz Padberg 2022-07-04 12:22:38 +02:00
parent cc293400b4
commit 5f39cfb2e9
2 changed files with 34 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,113 +36,7 @@ export default {
}, },
], ],
}, },
// {
// 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, type: Object,
@ -159,7 +53,7 @@ export default {
}, },
computed: { computed: {
viewBox() { viewBox() {
return `0 0 ${this.width} ${this.height* 1.5}` return `0 0 ${this.width} ${this.height * 1.5}`
}, },
circles() { circles() {
@ -193,7 +87,7 @@ export default {
sky400 = '#72CAFF', sky400 = '#72CAFF',
sky500 = '#41B5FA' sky500 = '#41B5FA'
let vueRouter = this.$router let vueRouter = this.$router
// Create append pie charts to the main svg // Create append pie charts to the main svg
const circle_groups = this.svg const circle_groups = this.svg
@ -225,7 +119,7 @@ export default {
}) })
}) })
.on('click', function (d, i) { .on('click', function (d, i) {
vueRouter.push('/circle/'+i.slug) vueRouter.push('/circle/' + i.slug)
}) })
.attr('role', 'button') .attr('role', 'button')
@ -258,6 +152,7 @@ export default {
//Draw arc paths //Draw arc paths
arcs.append('path').attr('d', arcGenerator) arcs.append('path').attr('d', arcGenerator)
const circlesText = circle_groups const circlesText = circle_groups
.append('text') .append('text')
.attr('fill', blue900) .attr('fill', blue900)
@ -266,37 +161,39 @@ export default {
.attr('y', radius + 30) .attr('y', radius + 30)
.attr('class', 'circlesText text-xl font-bold') .attr('class', 'circlesText text-xl font-bold')
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.call(wrap, 200 - 20) .call(wrap, circleWidth - 20)
const topicTitles = this.svg
.selectAll('.topicTitles') const topicGroups = this.svg
.selectAll('.topic')
.data(this.learningPathContents.topics) .data(this.learningPathContents.topics)
.enter() .enter()
.append('text') .append('g')
.attr('x', (d, i) => { .attr('transform', (d, i) => {
return i * circleWidth * d.circles.length + 50 console.log(d)
return "translate(" + (i * circleWidth * d.circles.length + 30) + ",0)"
}) })
.attr('y', 50) .style("visibility", d => d.is_visible ? "visible" : "hidden")
.attr('class', 'topic')
const topicLines = topicGroups
.append('line')
.attr('x1', -10)
.attr('y1', 0)
.attr('x2', -10)
.attr('y2', 0)
.attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76)
const topicTitles = topicGroups
.append('text')
.attr('y', 20)
.attr('fill', blue900) .attr('fill', blue900)
.style('font-size', 19) .style('font-size', 19)
.text((d) => d.title) .text((d) => d.title)
.attr('class', 'topicTitles font-bold') .attr('class', 'topicTitles font-bold')
.call(wrap, circleWidth)
const topicLines = this.svg
.selectAll('lines')
.data(this.learningPathContents.topics)
.enter()
.append('line')
.attr('x1', (d, i) => {
return i * circleWidth * d.circles.length + 30
})
.attr('y1', 10)
.attr('x2', (d, i) => {
return i * circleWidth * d.circles.length + 30
})
.attr('y2', 0)
.attr('class', 'stroke-gray-500')
.attr('stroke-width', 1.76)
topicLines.transition().duration('1000').attr('y2', 350) topicLines.transition().duration('1000').attr('y2', 350)

10
server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py
View File

@ -387,12 +387,12 @@ Neukundinnen und -kunden.""",
TopicFactory(title="Betreuen und Ausbauen des Kundenstamms", parent=lp) TopicFactory(title="Betreuen und Ausbauen des Kundenstamms", parent=lp)
circle_analyse = create_circle('Betreueun', lp) circle_analyse = create_circle('Betreuen', lp)
create_circle_children(circle_analyse, 'Betreueun') create_circle_children(circle_analyse, 'Betreuen')
TopicFactory(title="Prüfungsvorbereitung", is_visible=False, parent=lp) TopicFactory(title="Prüfungs- vorbereitung", is_visible=False, parent=lp)
circle_analyse = create_circle('Prüfungsvorbereitung', lp) circle_analyse = create_circle('Prüfungs- vorbereitung', lp)
create_circle_children(circle_analyse, 'Prüfungsvorbereitung') create_circle_children(circle_analyse, 'Prüfungs- vorbereitung')
# locales # locales