DAVE-662

frontend/src/components/messstelle/FahrspurenAnzeige.vue

@@ -0,0 +1,40 @@
+<template>
+  <span class="text-caption">
+    {{ textAnzahlFahrspuren }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { isNil } from "lodash";
+import { computed, ref } from "vue";
+
+interface Props {
+  fahrspuren: number;
+}
+
+const props = defineProps<Props>();
+
+const textByAnzahlFahrspuren = ref<Map<number, string>>(
+  new Map([
+    [0, "0 Fahrstreifen"],
+    [1, "1 Fahrstreifen"],
+    [2, "2 Fahrstreifen"],
+    [3, "3 Fahrstreifen"],
+    [4, "4 Fahrstreifen"],
+    [5, "5 Fahrstreifen"],
+    [6, "6 Fahrstreifen"],
+    [7, "7 Fahrstreifen"],
+  ])
+);
+
+/**
+ * Ermittelt den Text passend zur Anzahl der Fahrspuren.
+ */
+const textAnzahlFahrspuren = computed<string>(() => {
+  let result = textByAnzahlFahrspuren.value.get(props.fahrspuren);
+  if (isNil(result)) {
+    result = "Keine Information zur Fahrstreifenanzahl vorhanden";
+  }
+  return result;
+});
+</script>

frontend/src/components/messstelle/MessquerschnittInfo.vue

@@ -22,8 +22,7 @@
           />
         </span>
         <br />
-        <fahrspuren-icon
-          size="small"
+        <fahrspuren-anzeige
           :fahrspuren="messquerschnitt.anzahlFahrspuren"
         />
         <br />
@@ -38,7 +37,7 @@
 <script setup lang="ts">
 import type MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
 
-import FahrspurenIcon from "@/components/messstelle/icons/FahrspurenIcon.vue";
+import FahrspurenAnzeige from "@/components/messstelle/FahrspurenAnzeige.vue";
 import FahrtrichtungIcon from "@/components/messstelle/icons/FahrtrichtungIcon.vue";
 import { useAlternateRowColor } from "@/util/AlternateRowColorUtil";