Add vertical Learning path diagramm to modal

client/src/components/circle/LearningPathDiagram.vue

@@ -15,6 +15,10 @@ export default {
     vertical: {
       default: false,
       type: Boolean
+    },
+    identifier: {
+      required: true,
+      type: String
     }
   },
   setup() {
@@ -27,8 +31,8 @@ export default {
     },
     circles() {
       if (this.learningPathStore.learningPath) {
-        let internalCircles = this.learningPathStore.learningPath.circles;
+        let internalCircles = []
-        internalCircles.forEach((circle) => {
+        this.learningPathStore.learningPath.circles.forEach((circle) => {
           let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
           let pieGenerator = d3.pie()
           let pieData = pieGenerator(pieWeights)
@@ -38,19 +42,25 @@ export default {
             const lp = circle.learningSequences[parseInt(pie.index)];
             pie.done = circle.someFinishedInLearningSequence(lp.translation_key);
           });
-          circle.pieData = pieData.reverse()
+          let newCircle = {}
-
+          newCircle.pieData = pieData.reverse()
-
+          newCircle.title = circle.title
+          newCircle.slug = circle.slug
+          newCircle.id = circle.id
+          internalCircles.push(newCircle)
         });
         return internalCircles
       }
       return [];
     },
     svg() {
-      return d3.select('.learning-path-visualization')
+      return d3.select("#" + this.identifier)
-
     },
 
+    learningPath() {
+      return Object.assign({}, this.learningPathStore.learningPath)
+    }
+
   },
 
   mounted() {
@@ -66,6 +76,7 @@ export default {
 
     let vueRouter = this.$router
 
+
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -138,8 +149,8 @@ export default {
     const circleHeigth = circleWidth + 20
 
     function getTopicHorizontalPosition(i, d, topics) {
-      let x =0
+      let x = 0
-      for (let index=0; index < i; index++){
+      for (let index = 0; index < i; index++) {
         x += circleWidth * topics[index].circles.length
       }
       return x + 30
@@ -176,10 +187,9 @@ export default {
       }
     }
 
-
     const topicGroups = this.svg
       .selectAll('.topic')
-      .data(this.learningPathStore.learningPath.topics)
+      .data(this.learningPath.topics)
       .enter()
       .append('g')
       .attr('class', (d) => {
@@ -203,7 +213,7 @@ export default {
     if (this.vertical) {
       circle_groups
         .attr('transform', (d, i) => {
-          return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPathStore.learningPath.topics) + ')'
+          return 'translate(100,' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
         })
 
       circlesText
@@ -214,8 +224,8 @@ export default {
 
       topicGroups
         .attr('transform', (d, i) => {
-        return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPathStore.learningPath.topics) + ")"
+          return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPath.topics) + ")"
-      })
+        })
 
 
       topicLines
@@ -227,12 +237,11 @@ export default {
 
 
     } else {
-      console.log('Wheeee horizontal ')
       circle_groups
         .attr('transform', (d, i) => {
-        let x_coord = (i + 1) * circleWidth - radius
+          let x_coord = (i + 1) * circleWidth - radius
-        return 'translate(' + x_coord + ', 200)'
+          return 'translate(' + x_coord + ', 200)'
-      })
+        })
 
       circlesText
         .attr('y', radius + 30)
@@ -241,8 +250,8 @@ export default {
 
       topicGroups
         .attr('transform', (d, i) => {
-        return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
+          return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
-      })
+        })
 
       topicLines
         .attr('x1', -10)
@@ -254,7 +263,7 @@ export default {
       topicTitles
         .attr('y', 20)
         .style('font-size', 19)
-        .call(wrap, circleWidth*0.8)
+        .call(wrap, circleWidth * 0.8)
         .attr('class', 'topicTitles font-bold')
 
 
@@ -300,10 +309,10 @@ export default {
 
 
 <template>
-    <div class="svg-container h-full content-start">
+  <div class="svg-container h-full content-start">
-      <svg class="learning-path-visualization h-full" :viewBox="viewBox">
+    <svg class="learning-path-visualization h-full" :viewBox="viewBox" :id=identifier>
-      </svg>
+    </svg>
-    </div>
+  </div>
 
 </template>
 

client/src/views/LearningPathView.vue

@@ -7,6 +7,7 @@ import {useLearningPathStore} from '@/stores/learningPath';
 import {useUserStore} from '@/stores/user';
 
 import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
+import LearningPathViewVertical from "@/views/LearningPathViewVertical.vue";
 
 
 log.debug('LearningPathView created');
@@ -27,11 +28,24 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-200" v-if="learningPathStore.learningPath">
+        <Teleport to="body">
+      <LearningPathViewVertical
+        :show="learningPathStore.page === 'OVERVIEW'"
+        @closemodal="learningPathStore.page = 'INDEX'"
+        v-bind:learning-path-slug="this.learningPathSlug"
+      />
+    </Teleport>
 
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">
-        <div class="bg-white py-8">
+        <div class="bg-white py-8 flex flex-col">
-          <LearningPathDiagram class="max-w-[1680px] w-full"></LearningPathDiagram>
+          <div class="flex justify-end p-3">
+            <button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'">
+              <it-icon-list/>
+              Listen Ansicht anzeigen
+            </button>
+          </div>
+         <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization" v-bind:vertical="false"></LearningPathDiagram>
         </div>
 
         <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>

client/src/views/LearningPathViewVertical.vue

@@ -7,60 +7,57 @@ import {useLearningPathStore} from '@/stores/learningPath';
 import {useUserStore} from '@/stores/user';
 
 import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
+import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
+import {Circle} from "@/services/circle";
 
 
 log.debug('LearningPathView created');
 
 const props = defineProps<{
-  learningPathSlug: string
+  learningPathSlug: string,
+    show: boolean
+
 }>()
 
+
+
 const learningPathStore = useLearningPathStore();
 const userStore = useUserStore();
 
-onMounted(async () => {
+const emits = defineEmits(['closemodal'])
-  log.info('LearningPathView mounted');
+console.log("======================")
-  await learningPathStore.loadLearningPath(props.learningPathSlug);
+
-});
+console.log(learningPathStore.learningPath)
+console.log("======================")
 
 </script>
 
 <template>
-  <div class="bg-gray-200" v-if="learningPathStore.learningPath">
+  <ItFullScreenModal
+    :show="show"
+    @closemodal="$emit('closemodal')">
 
-    <div class="learningpath flex flex-col">
+    <div class="bg-white" v-if="learningPathStore.learningPath">
-      <div class="flex flex-col h-max">
+      <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
-        <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="learningpath flex flex-col">
+        <div class="flex flex-col h-max">
+          <div class="bg-red py-8">
 
-        <div
+        <LearningPathDiagram class="max-w-[1680px] w-full" height="2000" identifier="verticalVisualization" v-bind:vertical="true"></LearningPathDiagram>-->
-          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">
+            ksdfklm klsmfskdflsif msdlfkfjie
-          <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>
+
+  </ItFullScreenModal>
+
 </template>
 
 <style scoped>