Messfaehigkeit ergaenzt (#60)

* Messfaehigkeit ergaenzt

* remove unused field

* remove MessstelleInfoDto

* fix reload

* change color

frontend/components.d.ts

@@ -37,6 +37,7 @@ declare module '@vue/runtime-core' {
     KontaktForm: typeof import('./src/components/zaehlung/form/KontaktForm.vue')['default']
     LageplanForm: typeof import('./src/components/messstelle/LageplanForm.vue')['default']
     LhmTextField: typeof import('./src/components/common/LhmTextField.vue')['default']
+    MessfaehigkeitForm: typeof import('./src/components/messstelle/MessfaehigkeitForm.vue')['default']
     MessquerschnittForm: typeof import('./src/components/messstelle/MessquerschnittForm.vue')['default']
     MessstelleForm: typeof import('./src/components/messstelle/MessstelleForm.vue')['default']
     MessstelleInfo: typeof import('./src/components/messstelle/MessstelleInfo.vue')['default']
@@ -94,6 +95,7 @@ declare module '@vue/runtime-core' {
     VProgressLinear: typeof import('vuetify/lib')['VProgressLinear']
     VRow: typeof import('vuetify/lib')['VRow']
     VSheet: typeof import('vuetify/lib')['VSheet']
+    VSimpleTable: typeof import('vuetify/lib')['VSimpleTable']
     VSnackbar: typeof import('vuetify/lib')['VSnackbar']
     VSpacer: typeof import('vuetify/lib')['VSpacer']
     VSpeedDial: typeof import('vuetify/lib')['VSpeedDial']

frontend/src/api/service/MessstelleService.ts

@@ -1,18 +1,11 @@
 import MessstelleEditDTO from "@/domain/dto/messstelle/MessstelleEditDTO";
 import FetchService from "@/api/service/FetchService";
 import BackendIdDTO from "@/domain/dto/bearbeiten/BackendIdDTO";
-import MessstelleInfoDTO from "@/domain/dto/messstelle/MessstelleInfoDTO";
 import MessstelleOverviewDTO from "@/domain/dto/messstelle/MessstelleOverviewDTO";
 
 export default class MessstelleService {
     private static readonly ENDPOINT: string =
         "api/dave-backend-service/messstelle";
-    static getMessstelleInfo(id: string): Promise<MessstelleInfoDTO> {
-        return FetchService.getData(
-            `${this.ENDPOINT}/info?id=${id}`,
-            "Beim Laden der Messstellen-Info ist ein Fehler aufgetreten."
-        );
-    }
 
     static getMessstelleToEdit(id: string): Promise<MessstelleEditDTO> {
         return FetchService.getData(

frontend/src/components/messstelle/MessfaehigkeitForm.vue

@@ -0,0 +1,77 @@
+<template>
+    <v-sheet
+        width="100%"
+        :min-height="height"
+        :max-height="height"
+    >
+        <v-card elevation="0">
+            <v-card-text>
+                <v-form>
+                    <v-data-table
+                        class="overflow-y-auto"
+                        :height="tableHeight"
+                        dense
+                        :headers="header"
+                        :items="messfahigkeiten"
+                        :items-per-page="-1"
+                        hide-default-footer
+                        fixed-header
+                        :item-class="activeMessfaehigkeit"
+                    />
+                </v-form>
+            </v-card-text>
+        </v-card>
+    </v-sheet>
+</template>
+
+<script setup lang="ts">
+import MessfaehigkeitEditDTO from "@/domain/dto/messstelle/MessfaehigkeitEditDTO";
+import { computed, ComputedRef } from "vue";
+import _ from "lodash";
+
+interface Props {
+    height: string;
+    messfahigkeiten: Array<MessfaehigkeitEditDTO>;
+}
+
+const props = defineProps<Props>();
+const tableHeight: ComputedRef<string> = computed(() => {
+    return parseInt(props.height.replace("px", "")) - 136 + "px";
+});
+
+function activeMessfaehigkeit(item: MessfaehigkeitEditDTO) {
+    return _.isEmpty(item.gueltigBis) ? "blue darken-3" : "";
+}
+
+const header = computed(() => {
+    return [
+        {
+            text: "Fahrzeugklassen",
+            align: "start",
+            sortable: false,
+            value: "fahrzeugklassen",
+            divider: true,
+        },
+        {
+            text: "Intervallwert",
+            align: "start",
+            sortable: false,
+            value: "intervall",
+            divider: true,
+        },
+        {
+            text: "gültig ab",
+            align: "start",
+            sortable: false,
+            value: "gueltigAb",
+            divider: true,
+        },
+        {
+            text: "gültig bis",
+            align: "start",
+            sortable: false,
+            value: "gueltigBis",
+        },
+    ];
+});
+</script>

frontend/src/components/messstelle/MessquerschnittForm.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
+import { computed, onMounted, ref, Ref, watch } from "vue";
 import MessstelleEditDTO from "@/domain/dto/messstelle/MessstelleEditDTO";
 import LhmTextField from "@/components/common/LhmTextField.vue";
 import MessquerschnittEditDTO from "@/domain/dto/messstelle/MessquerschnittEditDTO";
@@ -120,13 +120,14 @@ import type { VForm } from "@/util/useVuetify";
 
 const validationUtils = useValidationUtils();
 
-onMounted(validate);
+onMounted(() => validate());
 
 interface Props {
     height: string;
     disabled: boolean;
     value: MessstelleEditDTO;
     valid: Map<string, boolean>;
+    reload: boolean;
 }
 
 const props = defineProps<Props>();
@@ -158,11 +159,15 @@ const selectedMessquerschnitt: Ref<MessquerschnittEditDTO> = ref(
     editMessstelle.value.messquerschnitte[0]
 );
 
-const stadtbezirk: ComputedRef<string> = computed(() => {
-    return `${editMessstelle.value.stadtbezirkNummer} - ${editMessstelle.value.stadtbezirk}`;
-});
-
 function validate() {
     if (messquerschnittform.value) messquerschnittform.value.validate();
 }
-</script>
+
+watch(
+    () => props.reload,
+    () => {
+        selectedMessquerschnitt.value =
+            editMessstelle.value.messquerschnitte[0];
+    }
+);
+</script>

frontend/src/components/messstelle/MessstelleInfo.vue

@@ -16,10 +16,10 @@
     </v-sheet>
 </template>
 <script setup lang="ts">
-import MessstelleInfoDTO from "@/domain/dto/messstelle/MessstelleInfoDTO";
+import MessstelleEditDTO from "@/domain/dto/messstelle/MessstelleEditDTO";
 
 interface Props {
-    messstelle: MessstelleInfoDTO;
+    messstelle: MessstelleEditDTO;
     height: string;
     minheight: string;
 }
@@ -28,4 +28,3 @@ withDefaults(defineProps<Props>(), {
     minheight: "160px",
 });
 </script>
-

frontend/src/components/messstelle/UpdateMessstelleForm.vue

@@ -21,6 +21,10 @@
                 Messquerschnitt
                 <v-icon>mdi-routes</v-icon>
             </v-tab>
+            <v-tab>
+                Messfähigkeit
+                <v-icon>mdi-car-multiple</v-icon>
+            </v-tab>
             <v-tab>
                 Standort
                 <v-icon>mdi-map-marker-outline</v-icon>
@@ -60,26 +64,33 @@
             <!-- Inhalte -->
             <v-tab-item ref="messstelleform">
                 <messstelle-form
-                    v-model="messstelle"
+                    v-model="messstelleToEdit"
                     :valid.sync="validMst"
                     :height="contentHeightVh"
                     :disabled="isMessstelleReadonly"
                 />
             </v-tab-item>
             <v-tab-item ref="messquerschnittform">
                 <messquerschnitt-form
-                    v-model="messstelle"
+                    v-model="messstelleToEdit"
                     :valid.sync="validMqs"
+                    :reload="reload"
                     :height="contentHeightVh"
                     :disabled="isMessstelleReadonly"
                 />
             </v-tab-item>
+            <v-tab-item ref="messfaehigkeit">
+                <messfaehigkeit-form
+                    :messfahigkeiten="messstelleToEdit.messfaehigkeiten"
+                    :height="contentHeightVh"
+                />
+            </v-tab-item>
             <v-tab-item ref="standort">
                 <standort-tab-item
-                    v-model="messstelle"
+                    v-model="messstelleToEdit"
                     :height="contentHeightVh"
                     :height-map="mapHeightVh"
-                    :reset-marker="resetMarker"
+                    :reset-marker="reload"
                     :draggable="!isMessstelleReadonly"
                 />
             </v-tab-item>
@@ -110,38 +121,45 @@
 import MessstelleEditDTO from "@/domain/dto/messstelle/MessstelleEditDTO";
 import MessstelleForm from "@/components/messstelle/MessstelleForm.vue";
 import MessquerschnittForm from "@/components/messstelle/MessquerschnittForm.vue";
-import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
+import { computed, ComputedRef, ref, Ref, watch } from "vue";
 import MessstelleService from "@/api/service/MessstelleService";
 import { ApiError, Levels } from "@/api/error";
 import { useStore } from "@/util/useStore";
-import { useRoute } from "vue-router/composables";
-import DefaultObjectCreator from "@/util/DefaultObjectCreator";
 import { MessstelleStatus } from "@/domain/enums/MessstelleStatus";
 import LageplanForm from "@/components/messstelle/LageplanForm.vue";
 import { useVuetify } from "@/util/useVuetify";
 import StandortTabItem from "@/components/messstelle/StandortTabItem.vue";
+import MessfaehigkeitForm from "@/components/messstelle/MessfaehigkeitForm.vue";
 
 const activeTab: Ref<number> = ref(0);
 const validMst: Ref<boolean> = ref(false);
 const validMqs: Ref<Map<string, boolean>> = ref(new Map<string, boolean>());
-const messstelle: Ref<MessstelleEditDTO> = ref(
-    DefaultObjectCreator.createDefaultMessstelleEditDTO()
-);
 const resetMarker: Ref<boolean> = ref(false);
 
 interface Props {
+    value: MessstelleEditDTO;
     height: string;
     contentHeight: number;
+    reload: boolean;
 }
 
 const props = defineProps<Props>();
 
 const store = useStore();
-const route = useRoute();
 const vuetify = useVuetify();
 
+const emits = defineEmits<{
+    (e: "input", v: MessstelleEditDTO): void;
+    (e: "reload"): void;
+}>();
+
+const messstelleToEdit = computed({
+    get: () => props.value,
+    set: (payload: MessstelleEditDTO) => emits("input", payload),
+});
+
 const isMessstelleReadonly: ComputedRef<boolean> = computed(() => {
-    return messstelle.value.status === MessstelleStatus.IN_PLANUNG;
+    return messstelleToEdit.value.status === MessstelleStatus.IN_PLANUNG;
 });
 const contentHeightVh: ComputedRef<string> = computed(() => {
     return props.contentHeight - 70 / (vuetify.breakpoint.height / 100) + "vh";
@@ -151,48 +169,38 @@ const mapHeightVh: ComputedRef<string> = computed(() => {
     return props.contentHeight - 105 / (vuetify.breakpoint.height / 100) + "vh";
 });
 
-const emit = defineEmits<(e: "reload") => void>();
-
-onMounted(() => {
-    loadMessstelle();
-});
-
 function save(): void {
     if (areAllFormsValid()) {
-        MessstelleService.saveMessstelle(messstelle.value)
+        MessstelleService.saveMessstelle(messstelleToEdit.value)
             .then(() => {
                 store.dispatch("snackbar/showToast", {
                     level: Levels.INFO,
-                    snackbarTextPart1: `Die Messstelle ${messstelle.value.mstId} wurde erfolgreich aktualisiert.`,
+                    snackbarTextPart1: `Die Messstelle ${messstelleToEdit.value.mstId} wurde erfolgreich aktualisiert.`,
                 });
             })
             .catch((error: ApiError) => {
                 store.dispatch("snackbar/showError", error);
             })
             .finally(() => {
                 activeTab.value = 0;
-                emit("reload");
+                emits("reload");
             });
     }
 }
 
 function cancel(): void {
-    loadMessstelle();
-    emit("reload");
+    emits("reload");
 }
 
-function loadMessstelle(): void {
-    const messstelleId = route.params.messstelleId;
-    MessstelleService.getMessstelleToEdit(messstelleId).then(
-        (messstelleById) => {
-            messstelle.value = messstelleById;
-            messstelleById.messquerschnitte.forEach((value) =>
-                validMqs.value.set(value.mqId, !!value.standort)
-            );
-            resetMarker.value = !resetMarker.value;
-        }
-    );
-}
+watch(
+    () => props.reload,
+    () => {
+        messstelleToEdit.value.messquerschnitte.forEach((value) =>
+            validMqs.value.set(value.mqId, !!value.standort)
+        );
+        resetMarker.value = !resetMarker.value;
+    }
+);
 
 function areAllFormsValid(): boolean {
     const invalidMqs: Array<string> = [];
@@ -205,7 +213,7 @@ function areAllFormsValid(): boolean {
     if (!areAllFormsValid) {
         let errorText = "Der Standort";
         if (!validMst.value) {
-            errorText = `${errorText} der Messstelle ${messstelle.value.mstId}`;
+            errorText = `${errorText} der Messstelle ${messstelleToEdit.value.mstId}`;
             if (invalidMqs.length > 0) {
                 errorText = `${errorText} und`;
             }
@@ -225,4 +233,4 @@ function areAllFormsValid(): boolean {
     }
     return areAllFormsValid;
 }
-</script>
+</script>

frontend/src/domain/dto/ZaehlstelleKarteDTO.ts

@@ -4,4 +4,4 @@ import TooltipZaehlstelleDTO from "@/domain/dto/TooltipZaehlstelleDTO";
 export default interface ZaehlstelleKarteDTO extends AnzeigeKarteDTO {
     letzteZaehlungId: string;
     tooltip: TooltipZaehlstelleDTO;
-}
+}

frontend/src/domain/dto/messstelle/MessfaehigkeitEditDTO.ts

@@ -0,0 +1,6 @@
+export default interface MessfaehigkeitEditDTO {
+    gueltigAb: string;
+    gueltigBis: string;
+    intervall: string;
+    fahrzeugklassen: string;
+}

frontend/src/domain/dto/messstelle/MessstelleEditDTO.ts

@@ -1,6 +1,7 @@
 import BaseEntity from "@/domain/BaseEntity";
 import MessquerschnittEditDTO from "@/domain/dto/messstelle/MessquerschnittEditDTO";
 import { MessstelleStatus } from "@/domain/enums/MessstelleStatus";
+import MessfaehigkeitEditDTO from "@/domain/dto/messstelle/MessfaehigkeitEditDTO";
 
 export default interface MessstelleEditDTO extends BaseEntity {
     mstId: string;
@@ -25,4 +26,5 @@ export default interface MessstelleEditDTO extends BaseEntity {
     sichtbarDatenportal: boolean;
 
     messquerschnitte: Array<MessquerschnittEditDTO>;
+    messfaehigkeiten: Array<MessfaehigkeitEditDTO>;
 }