Merge branch 'feature/responsive-learnpfad' into develop

client/src/components/circle/LearningPathDiagram.vue

@@ -1,47 +1,9 @@
 <script>
 import * as d3 from 'd3';
-import { useLearningPathStore } from '../../stores/learningPath';
+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,
@@ -50,11 +12,18 @@ export default {
       default: 256,
       type: Number,
     },
+    vertical: {
+      default: false,
+      type: Boolean
+    },
+    identifier: {
+      required: true,
+      type: String
+    }
   },
   setup() {
     const learningPathStore = useLearningPathStore()
-
+    return {learningPathStore}
-    return { learningPathStore }
   },
   computed: {
     viewBox() {
@@ -62,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)
@@ -73,23 +42,29 @@ 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() {
-    const circleWidth = 200
+    const circleWidth = this.vertical ? 60 : 200
     const radius = (circleWidth * 0.8) / 2
     const blue900 = '#00224D',
       blue700 = '#1A5197',
@@ -101,6 +76,7 @@ export default {
 
     let vueRouter = this.$router
 
+
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -108,10 +84,6 @@ export default {
       .enter()
       .append('g')
       .attr('class', 'circle')
-      .attr('transform', (d, i) => {
-        let x_coord = (i + 1) * circleWidth - radius
-        return 'translate(' + x_coord + ', 200)'
-      })
       .on('mouseover', function (d, i) {
         d3.select(this)
           .selectAll('.learningSegmentArc')
@@ -170,52 +142,134 @@ export default {
       .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
-      .attr('y', radius + 30)
+      .attr('class', 'circlesText text-xl font-bold hidden lg:block')
-      .attr('class', 'circlesText text-xl font-bold')
-      .style('text-anchor', 'middle')
-      .call(wrap, circleWidth - 20)
 
+    const topicHeightOffset = 20
+    const topicHeight = 50
+    const circleHeigth = circleWidth + 20
 
-    function getTopicPosition(i, d, topics){
+    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
     }
 
+    function getTopicVerticalPosition(i, d, topics) {
+      let pos = topicHeightOffset
+
+      for (let index = 0; index < i; index++) {
+        let topic = topics[index]
+        if (topic.is_visible) {
+          pos += topicHeight
+        }
+        pos += circleHeigth * topic.circles.length
+      }
+      return pos + topicHeightOffset
+    }
+
+    function getCircleVerticalPostion(i, d, topics) {
+      let y = circleHeigth / 2 + topicHeightOffset + 10
+      for (let topic_index = 0; topic_index < topics.length; topic_index++) {
+        const topic = topics[topic_index]
+        if (topic.is_visible) {
+          y += topicHeight
+        }
+        for (let circle_index = 0; circle_index < topic.circles.length; circle_index++) {
+          let circle = topic.circles[circle_index]
+          if (circle.id === d.id) {
+            return y
+          }
+          y += circleHeigth
+
+        }
+      }
+    }
 
     const topicGroups = this.svg
       .selectAll('.topic')
-      .data(this.learningPathStore.learningPath.topics)
+      .data(this.learningPath.topics)
       .enter()
       .append('g')
-      .attr('transform', (d, i) => {
+      .attr('class', (d) => {
-        return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
+        return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
       })
-      .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)
+      .attr('stroke-width', 1)
 
     const topicTitles = topicGroups
       .append('text')
-      .attr('y', 20)
       .attr('fill', blue900)
-      .style('font-size', 19)
+      .style('font-size', 16)
       .text((d) => d.title)
-      .attr('class', 'topicTitles font-bold')
-      .call(wrap, circleWidth)
 
 
-    topicLines.transition().duration('1000').attr('y2', 350)
+    // Calculate positions of objects
+
+    if (this.vertical) {
+      const Circles_X = 60
+      const Topics_X = Circles_X - radius
+
+
+      circle_groups
+        .attr('transform', (d, i) => {
+          return 'translate('+ Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
+        })
+
+      circlesText
+        .attr('y', 7)
+        .attr('x', radius + 40)
+
+
+      topicGroups
+        .attr('transform', (d, i) => {
+          return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPath.topics) + ")"
+        })
+
+
+      topicLines
+        .transition().duration('1000').attr('x2', this.width * 0.8)
+
+      topicTitles
+        .attr('y', 30)
+
+
+    } else {
+      circle_groups
+        .attr('transform', (d, i) => {
+          let x_coord = (i + 1) * circleWidth - radius
+          return 'translate(' + x_coord + ', 200)'
+        })
+
+      circlesText
+        .attr('y', radius + 30)
+        .style('text-anchor', 'middle')
+        .call(wrap, circleWidth - 20)
+
+      topicGroups
+        .attr('transform', (d, i) => {
+          return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
+        })
+
+      topicLines
+        .attr('x1', -10)
+        .attr('y1', 0)
+        .attr('x2', -10)
+        .attr('y2', 0)
+        .transition().duration('1000').attr('y2', 350)
+
+      topicTitles
+        .attr('y', 20)
+        .style('font-size', 19)
+        .call(wrap, circleWidth * 0.8)
+        .attr('class', 'topicTitles font-bold')
+
+
+    }
 
     function wrap(text, width) {
       text.each(function () {
@@ -258,8 +312,9 @@ export default {
 
 <template>
   <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>
   </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,23 +28,37 @@ 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>
 
-        <div class="bg-white m-12 p-8 flex flex-row  justify-start">
+        <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>
+            <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  border-l border-gray-500 flex-1">
+          <div class="p-8 flex-1">
             Nächster Schirtt
             <h3>Analyse: Anwenden</h3>
             <router-link class="mt-4 btn-blue" to="/circle/analyse">

client/src/views/LearningPathViewVertical.vue

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