Fix topic titles

client/src/components/circle/LearningPathDiagram.vue

@@ -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) => {
+      topicGroups
-        return "translate(" + Topics_X + ", " + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
+        .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) => {
+      topicGroups
-        return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
+        .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)
+      topicTitles
-        .call(wrap, circleWidth)
+        .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>
 

client/src/views/LearningPathViewVertical.vue

@@ -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>