Fix topic titles
This commit is contained in:
Lorenz Padberg
parent
1209a57e87
commit
a3266aac14
|
|
@ -4,50 +4,12 @@ import {useLearningPathStore} from '../../stores/learningPath';
|
|||
|
||||
export default {
|
||||
props: {
|
||||
learningPathContents: {
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
|
||||
width: {
|
||||
default: 1640,
|
||||
type: Number,
|
||||
},
|
||||
height: {
|
||||
default: 256 * 3,
|
||||
default: 256,
|
||||
type: Number,
|
||||
},
|
||||
vertical: {
|
||||
|
|
@ -57,7 +19,6 @@ export default {
|
|||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore()
|
||||
|
||||
return {learningPathStore}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -176,7 +137,15 @@ export default {
|
|||
const topicHeight = 35
|
||||
const circleHeigth = circleWidth + 20
|
||||
|
||||
function getTopicPosition(i, d, topics) {
|
||||
function getTopicHorizontalPosition(i, d, topics) {
|
||||
let x =0
|
||||
for (let index=0; index < i; index++){
|
||||
x += circleWidth * topics[index].circles.length
|
||||
}
|
||||
return x + 30
|
||||
}
|
||||
|
||||
function getTopicVerticalPosition(i, d, topics) {
|
||||
let pos = topicHeightOffset
|
||||
|
||||
for (let index = 0; index < i; index++) {
|
||||
|
|
@ -193,16 +162,12 @@ export default {
|
|||
let y = circleHeigth / 2 + topicHeightOffset + 10
|
||||
for (let topic_index = 0; topic_index < topics.length; topic_index++) {
|
||||
const topic = topics[topic_index]
|
||||
console.log(topic.title)
|
||||
if (topic.is_visible) {
|
||||
y += topicHeight
|
||||
|
||||
}
|
||||
for (let circle_index = 0; circle_index < topic.circles.length; circle_index++) {
|
||||
let circle = topic.circles[circle_index]
|
||||
console.log('- ' + circle.title)
|
||||
if (circle.id === d.id) {
|
||||
console.log('found')
|
||||
return y
|
||||
}
|
||||
y += circleHeigth
|
||||
|
|
@ -226,7 +191,7 @@ export default {
|
|||
.attr('class', 'stroke-gray-500')
|
||||
.attr('stroke-width', 1.76)
|
||||
|
||||
const ç = topicGroups
|
||||
const topicTitles = topicGroups
|
||||
.append('text')
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
|
|
@ -247,13 +212,14 @@ export default {
|
|||
|
||||
const Topics_X = 100 - radius
|
||||
|
||||
topicGroups.attr('transform', (d, i) => {
|
||||
return "translate(" + Topics_X + ", " + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
|
||||
topicGroups
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
|
||||
})
|
||||
.attr('class', 'topicTitles')
|
||||
|
||||
|
||||
topicLines.attr('x1', 0)
|
||||
topicLines
|
||||
.attr('x1', 0)
|
||||
.attr('y1', -20)
|
||||
.attr('x2', 0)
|
||||
.attr('y2', -20)
|
||||
|
|
@ -261,64 +227,37 @@ export default {
|
|||
|
||||
|
||||
} else {
|
||||
circle_groups.attr('transform', (d, i) => {
|
||||
console.log('Wheeee horizontal ')
|
||||
circle_groups
|
||||
.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius
|
||||
return 'translate(' + x_coord + ', 200)'
|
||||
})
|
||||
|
||||
circlesText.attr('y', radius + 30)
|
||||
circlesText
|
||||
.attr('y', radius + 30)
|
||||
.style('text-anchor', 'middle')
|
||||
.call(wrap, circleWidth - 20)
|
||||
|
||||
topicGroups.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
topicGroups
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
})
|
||||
|
||||
topicLines.attr('x1', -10)
|
||||
topicLines
|
||||
.attr('x1', -10)
|
||||
.attr('y1', 0)
|
||||
.attr('x2', -10)
|
||||
.attr('y2', 0)
|
||||
.transition().duration('1000').attr('y2', 350)
|
||||
|
||||
topicGroups.attr('y', 20)
|
||||
.call(wrap, circleWidth)
|
||||
topicTitles
|
||||
.attr('y', 20)
|
||||
.style('font-size', 19)
|
||||
.call(wrap, circleWidth*0.8)
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function flipToVertical() {
|
||||
|
||||
this.height = 2000
|
||||
|
||||
const animationTime = 1000
|
||||
circle_groups
|
||||
.transition().duration(animationTime).attr('transform', (d, i) => {
|
||||
let y_coord = ((i + 1) * circleWidth - radius) * 0.5
|
||||
return 'translate(200, ' + y_coord + ') scale(0.5)'
|
||||
}).on("end", d => {
|
||||
addTexts()
|
||||
})
|
||||
circle_groups.selectAll('.circlesText').attr('class', 'hidden')
|
||||
topicGroups.attr('class', 'hidden')
|
||||
|
||||
|
||||
function addTexts() {
|
||||
|
||||
|
||||
circle_groups
|
||||
.append('text')
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 45)
|
||||
.text((d) => d.title)
|
||||
.attr('y', 0)
|
||||
.attr('x', radius + 30)
|
||||
.attr('class', 'circlesText text-xl font-bold')
|
||||
.style('text-anchor', 'left')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function wrap(text, width) {
|
||||
|
|
@ -361,16 +300,10 @@ export default {
|
|||
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<button class="content-center">
|
||||
<it-icon-list/>
|
||||
Listen ansicht anzeigen
|
||||
</button>
|
||||
<div class="svg-container h-full content-start">
|
||||
<svg class="learning-path-visualization h-full" :viewBox="viewBox">
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import * as log from 'loglevel';
|
||||
|
||||
import {onMounted} from 'vue'
|
||||
import {useLearningPathStore} from '@/stores/learningPath';
|
||||
import {useUserStore} from '@/stores/user';
|
||||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
|
||||
|
||||
|
||||
log.debug('LearningPathView created');
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathSlug: string
|
||||
}>()
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
onMounted(async () => {
|
||||
log.info('LearningPathView mounted');
|
||||
await learningPathStore.loadLearningPath(props.learningPathSlug);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-200" v-if="learningPathStore.learningPath">
|
||||
|
||||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<div class="bg-white py-8">
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full"></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
<h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
|
||||
<div
|
||||
class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
|
||||
<div class="p-8 flex-auto">
|
||||
<h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
||||
<p class="mt-4 text-xl">
|
||||
Du hast bereits drei circles bearbeitet, mach weiter so!
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8 flex-1">
|
||||
Nächster Schirtt
|
||||
<h3>Analyse: Anwenden</h3>
|
||||
<router-link class="mt-4 btn-blue" to="/circle/analyse">
|
||||
Los geht's
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue