From 089d81bd0304a9318842eb14bec8bcb3c5b8e9f5 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 11 Nov 2022 13:59:24 +0100
Subject: [PATCH] Add small LearningPath diagram for cockpit

---
 .../learningPath/LearningPathDiagram.vue      |  3 +-
 .../learningPath/LearningPathDiagramSmall.vue | 32 +++++++++++++++++++
 client/src/pages/CockpitPage.vue              | 16 +++++++---
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/learningPath/LearningPathDiagramSmall.vue

diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index 7db58efd..0055da5c 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -413,7 +413,8 @@ export default {
       :id="svgId"
       class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
       :class="{
-        'max-h-[384px]': ['horizontal', 'horizontalSmall'].includes(diagramType),
+        'max-h-[384px]': ['horizontal'].includes(diagramType),
+        'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
       }"
       :viewBox="viewBox"
     ></svg>
diff --git a/client/src/components/learningPath/LearningPathDiagramSmall.vue b/client/src/components/learningPath/LearningPathDiagramSmall.vue
new file mode 100644
index 00000000..b53aec77
--- /dev/null
+++ b/client/src/components/learningPath/LearningPathDiagramSmall.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useLearningPathStore } from "@/stores/learningPath";
+import * as log from "loglevel";
+
+import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
+import type { LearningPath } from "@/services/learningPath";
+import { ref } from "vue";
+
+log.debug("LearningPathDiagramSmall created");
+
+const props = defineProps<{
+  learningPathUrl: string;
+}>();
+
+const learningPathData = ref<LearningPath | undefined>(undefined);
+
+const learningPathStore = useLearningPathStore();
+
+learningPathStore
+  .loadLearningPath(props.learningPathUrl.replace("/learn/", ""))
+  .then((data) => {
+    learningPathData.value = data;
+  });
+</script>
+<template>
+  <LearningPathDiagram
+    v-if="learningPathData"
+    :learning-path="learningPathData"
+    diagram-type="horizontalSmall"
+  ></LearningPathDiagram>
+</template>
+<style scoped></style>
diff --git a/client/src/pages/CockpitPage.vue b/client/src/pages/CockpitPage.vue
index 873f4dc0..012b285d 100644
--- a/client/src/pages/CockpitPage.vue
+++ b/client/src/pages/CockpitPage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import log from "loglevel";
@@ -43,10 +44,17 @@ onMounted(async () => {
             >
               <div class="bg-white p-6 md:h-full">
                 <h3 class="mb-4">{{ courseSession.title }}</h3>
-                <img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" />
-                <router-link class="btn-blue" :to="courseSession.learning_path_url">
-                  {{ $t("general.nextStep") }}
-                </router-link>
+                <div>
+                  <LearningPathDiagramSmall
+                    class="mb-4"
+                    :learning-path-url="courseSession.learning_path_url"
+                  ></LearningPathDiagramSmall>
+                </div>
+                <div>
+                  <router-link class="btn-blue" :to="courseSession.learning_path_url">
+                    {{ $t("general.nextStep") }}
+                  </router-link>
+                </div>
               </div>
             </div>
           </div>