Add Score board page to visualize progress of exercises

software/src/pages/scoreBoardPage/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import scoreCard from './scoreCard.vue';
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup0')"
+          :progress="2"
+          :total-steps="2"
+          :step-names="['Registrieren', 'Bestellung ausführen']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup1')"
+          :progress="1"
+          :total-steps="4"
+          :step-names="['', '']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup2')"
+          :progress="1"
+          :total-steps="4"
+          :step-names="['', '']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup3')"
+          :progress="0"
+          :total-steps="3"
+          :step-names="['', '', '']"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/scoreBoardPage/scoreCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+
+const props = defineProps({
+  exerciseGroup: String,
+  progress: Number,
+  totalSteps: Number,
+  stepNames: Array<String>
+})
+
+function getDotColor(step: number) {
+  if (props.progress >= step) {
+    return "green"
+  } else {
+    return "grey"
+  }
+}
+
+function getIcon(step: number) {
+  if (props.progress >= step) {
+    return "mdi-check"
+  } else {
+    return "mdi-pencil"
+  }
+}
+</script>
+
+<template>
+  <card-view :title="exerciseGroup" >
+    <v-timeline
+      direction="horizontal"
+      side="end"
+      class="pb-3"
+    >
+      <v-timeline-item
+        v-for="step in totalSteps"
+        :dot-color="getDotColor(step)"
+        :icon="getIcon(step)"
+      >
+        {{ stepNames[step - 1] }}
+
+        <template #opposite>
+          {{ $t('scoreBoard.exercise', [step]) }}
+        </template>
+        
+      </v-timeline-item>
+    </v-timeline>
+  </card-view>
+</template>