WIP: Add competence page and progress

client/src/components/competences/CompetenceProgress.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  total: number
+  done: number
+  open: number
+}>()
+
+const done = 100 * props.done / props.total
+const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done
+console.log(done, notDone)
+
+</script>
+
+<template>
+  <span class="relative w-full h-2 bg-gray-300">
+    <span v-if="notDone !== done"
+          class="absolute bg-orange-500 h-full"
+          :style="{width: `${notDone}%`}"
+    ></span>
+    <span v-if="done > 0"
+          class="absolute bg-green-500 h-full"
+          :style="{width: `${done}%`}"
+    ></span>
+  </span>
+</template>
+
+<style lang="scss" scoped></style>

client/src/pages/CompetencesMainView.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import { ref, watch } from 'vue'
+import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
+
+log.debug('CompetencesMainView created')
+
+const lastCompetences = [
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'notDone',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'notDone',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  },
+  {
+    description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
+    criteria: [
+      {
+        description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
+        state: 'done',
+        unit: 'Fahrzeug',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'notDone',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'open',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      },
+      {
+        description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
+        state: 'done',
+        unit: 'Reisen',
+        url: 'https://www.iterativ.ch'
+      }
+    ]
+  }
+]
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
+      <h1>Kompetenzprofil</h1>
+      <!--      <ItDropdownSelect-->
+      <!--        v-model="dropdownSelected"-->
+      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
+    </div>
+    <div class="bg-white p-8">
+      <div>
+        <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
+        <ul class="divide-y">
+          <li v-for="competence in lastCompetences" :key="competence.description"
+              class="py-4 flex flex-col lg:flex-row items-center">
+            <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
+            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/ComptencesView.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import { onMounted } from 'vue'
+
+log.debug('CometencesView created')
+
+const props = defineProps<{
+  competencesPageSlug: string
+}>()
+
+
+onMounted(async () => {
+  log.debug('CompetencesView mounted', props.competencesPageSlug)
+
+})
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <main class="px-8 py-8">
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<style scoped></style>

client/src/router/index.ts

@@ -52,6 +52,17 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: '/competences/:competencesPageSlug',
+      props: true,
+      component: () => import('@/views/ComptencesView.vue'),
+      children: [
+        {
+          path: 'overview',
+          component: () => import('@/views/CompetencesMainView.vue'),
+        },
+      ],
+    },
     {
       path: "/learn/:learningPathSlug",
       component: () => import("../pages/learningPath/LearningPathPage.vue"),