Add small LearningPath diagram for cockpit

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>

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>

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'" />
+                <div>
-                <router-link class="btn-blue" :to="courseSession.learning_path_url">
+                  <LearningPathDiagramSmall
-                  {{ $t("general.nextStep") }}
+                    class="mb-4"
-                </router-link>
+                    :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>