From f3cfcd9ffa9d2ba15b522508bc4db79faca93995 Mon Sep 17 00:00:00 2001
From: "alexander.kerscher" <alexander.kerscher@muenchen.de>
Date: Wed, 3 Apr 2024 16:49:31 +0200
Subject: [PATCH] stepper mit leben gefuellt

---
 frontend/components.d.ts                      |   6 +-
 .../stepper/AuswertungStepper.vue             |  85 ++++++++++---
 .../stepper/JahreStepContent.vue              |  61 +++++----
 .../stepper/TagesTypStepContent.vue           |  58 +++++++++
 .../stepper/WochentagStepContent.vue          |  10 --
 .../stepper/ZeitintervallStepContent.vue      | 117 ++++++++++++++++--
 .../MessstelleAuswertungOptionsDTO.ts         |   5 +
 frontend/src/util/DefaultObjectCreator.ts     |  13 ++
 frontend/src/views/AuswertungView.vue         |  10 +-
 9 files changed, 308 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue
 delete mode 100644 frontend/src/components/messstelle/gesamtauswertung/stepper/WochentagStepContent.vue
 create mode 100644 frontend/src/types/messstelle/MessstelleAuswertungOptionsDTO.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 07195806..075438b2 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     HeatmapCard: typeof import('./src/components/zaehlstelle/charts/HeatmapCard.vue')['default']
     ImageAssetForm: typeof import('./src/components/pdfreport/assetforms/ImageAssetForm.vue')['default']
     InfoMessage: typeof import('./src/components/app/InfoMessage.vue')['default']
+    JahreStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue')['default']
     KommentarInfo: typeof import('./src/components/zaehlstelle/KommentarInfo.vue')['default']
     Loader: typeof import('./src/components/common/Loader.vue')['default']
     MessquerschnittAnzahlInfo: typeof import('./src/components/messstelle/MessquerschnittAnzahlInfo.vue')['default']
@@ -80,6 +81,7 @@ declare module '@vue/runtime-core' {
     StepLine: typeof import('./src/components/zaehlstelle/charts/StepLine.vue')['default']
     StepLineCard: typeof import('./src/components/zaehlstelle/charts/StepLineCard.vue')['default']
     TagesTypRadiogroup: typeof import('./src/components/messstelle/optionsmenue/panels/TagesTypRadiogroup.vue')['default']
+    TagesTypStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue')['default']
     TextAssetForm: typeof import('./src/components/pdfreport/assetforms/TextAssetForm.vue')['default']
     TheSnackbar: typeof import('./src/components/common/TheSnackbar.vue')['default']
     TooltipWithIcon: typeof import('./src/components/zaehlstelle/icons/TooltipWithIcon.vue')['default']
@@ -94,6 +96,7 @@ declare module '@vue/runtime-core' {
     VCardText: typeof import('vuetify/lib')['VCardText']
     VCardTitle: typeof import('vuetify/lib')['VCardTitle']
     VCheckbox: typeof import('vuetify/lib')['VCheckbox']
+    VChip: typeof import('vuetify/lib')['VChip']
     VCol: typeof import('vuetify/lib')['VCol']
     VContainer: typeof import('vuetify/lib')['VContainer']
     VDataTable: typeof import('vuetify/lib')['VDataTable']
@@ -147,6 +150,7 @@ declare module '@vue/runtime-core' {
     VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
     VTooltip: typeof import('vuetify/lib')['VTooltip']
     WetterIcon: typeof import('./src/components/zaehlstelle/icons/WetterIcon.vue')['default']
+    WochentagStepContent: typeof import('@/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue')['default']
     YesNoDialog: typeof import('./src/components/common/YesNoDialog.vue')['default']
     ZaehlartIcon: typeof import('./src/components/zaehlstelle/icons/ZaehlartIcon.vue')['default']
     ZaehldatenDiagramme: typeof import('./src/components/zaehlstelle/ZaehldatenDiagramme.vue')['default']
@@ -168,7 +172,7 @@ declare module '@vue/runtime-core' {
     ZeitauswahlStundeOrBlock: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitauswahlStundeOrBlock.vue')['default']
     ZeitIntervall: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitIntervall.vue')['default']
     ZeitintervallStep: typeof import('@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
-    ZeitintervallStepContent: typeof import('@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
+    ZeitintervallStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
     ZeitPanel: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitPanel.vue')['default']
     Zeitreihe: typeof import('./src/components/zaehlstelle/charts/Zeitreihe.vue')['default']
     ZeitreiheCard: typeof import('./src/components/zaehlstelle/charts/ZeitreiheCard.vue')['default']
diff --git a/frontend/src/components/messstelle/gesamtauswertung/stepper/AuswertungStepper.vue b/frontend/src/components/messstelle/gesamtauswertung/stepper/AuswertungStepper.vue
index e37fe639..381c8918 100644
--- a/frontend/src/components/messstelle/gesamtauswertung/stepper/AuswertungStepper.vue
+++ b/frontend/src/components/messstelle/gesamtauswertung/stepper/AuswertungStepper.vue
@@ -12,41 +12,39 @@
                 :complete="activeStep > 1"
                 step="1"
                 editable
+                :rules="[isJahresintervallSelected]"
             >
                 Zeitintervalle
+                <small> {{ selectedJahresintervallAsSummary }}</small>
             </v-stepper-step>
             <v-stepper-content step="1">
-                <zeitintervall-step-content />
+                <zeitintervall-step-content v-model="auswertungOptions" />
             </v-stepper-content>
 
             <v-stepper-step
                 :complete="activeStep > 2"
                 step="2"
                 editable
+                :rules="[isOneYearSelected]"
             >
                 Jahre
+                <small> {{ selectedYearsAsSummary }}</small>
             </v-stepper-step>
             <v-stepper-content step="2">
-                <v-card
-                    color="grey lighten-1"
-                    class="mb-12"
-                    height="200px"
-                ></v-card>
+                <jahre-step-content v-model="auswertungOptions" />
             </v-stepper-content>
 
             <v-stepper-step
                 step="3"
                 editable
+                :rules="[isTagesTypSelected]"
             >
                 Wochentag
+                <small> {{ selectedTagesTypAsSummary }}</small>
             </v-stepper-step>
 
             <v-stepper-content step="3">
-                <v-card
-                    color="grey lighten-1"
-                    class="mb-12"
-                    height="200px"
-                ></v-card>
+                <tages-typ-step-content v-model="auswertungOptions" />
             </v-stepper-content>
         </v-stepper>
     </v-sheet>
@@ -55,17 +53,74 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import ZeitintervallStepContent from "@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue";
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
+import JahreStepContent from "@/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue";
+import TagesTypStepContent from "@/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue";
+import { tagesTypText } from "@/types/enum/TagesTyp";
 
 interface Props {
-    value: number;
+    value: MessstelleAuswertungOptionsDTO;
+    activeStep: number;
     height: string;
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits<(e: "input", v: number) => void>();
 
-const activeStep = computed({
+const emits = defineEmits<{
+    (e: "input", v: MessstelleAuswertungOptionsDTO): void;
+    (e: "update:activeStep", v: number): void;
+}>();
+
+const auswertungOptions = computed({
     get: () => props.value,
-    set: (payload: number) => emit("input", payload),
+    set: (v) => emits("input", v),
+});
+
+const activeStep = computed({
+    get: () => props.activeStep,
+    set: (v) => emits("update:activeStep", v),
+});
+
+const selectedYearsAsSummary = computed(() => {
+    let summary = auswertungOptions.value.jahre.join(", ");
+    if (!isOneYearSelected()) {
+        summary = "Es muss mindestens ein Jahr ausgewählt sein.";
+    }
+    return summary;
+});
+
+const selectedJahresintervallAsSummary = computed(() => {
+    let summary = auswertungOptions.value.zeitintervalle.join(", ");
+    if (!isJahresintervallSelected()) {
+        summary = "Es muss mindestens ein Zeitintervall ausgewählt sein.";
+    }
+    return summary;
 });
+
+const selectedTagesTypAsSummary = computed(() => {
+    let summary = tagesTypText.get(auswertungOptions.value.tagesTyp) ?? "";
+    if (!isTagesTypSelected()) {
+        summary = "Es muss ein Wochentag ausgewählt sein.";
+    }
+    return summary;
+});
+
+function isOneYearSelected(): boolean {
+    return !(
+        auswertungOptions.value.jahre.length === 0 && activeStep.value > 1
+    );
+}
+
+function isTagesTypSelected(): boolean {
+    return !(
+        auswertungOptions.value.tagesTyp.length === 0 && activeStep.value > 2
+    );
+}
+
+function isJahresintervallSelected(): boolean {
+    return !(
+        auswertungOptions.value.zeitintervalle.length === 0 &&
+        activeStep.value > 0
+    );
+}
 </script>
diff --git a/frontend/src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue b/frontend/src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue
index 221b3a12..e02e1c8c 100644
--- a/frontend/src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue
+++ b/frontend/src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue
@@ -1,32 +1,47 @@
 <template>
-    <v-card
-        color="grey lighten-1"
-        class="mb-12"
-        height="200px"
-    >
-        <v-autocomplete
-            v-model="values"
-            :items="jahre"
-            outlined
-            dense
-            chips
-            small-chips
-            label="Jahre"
-            multiple
-        ></v-autocomplete>
-    </v-card>
+    <v-autocomplete
+        v-model="auswertungOptions.jahre"
+        :items="jahre"
+        class="mt-4"
+        outlined
+        dense
+        chips
+        small-chips
+        label="Jahre"
+        multiple
+        clearable
+        deletable-chips
+    />
 </template>
 
 <script setup lang="ts">
+import { computed, ComputedRef } from "vue";
+import KeyVal from "@/types/KeyVal";
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
 
-import { computed } from "vue";
+interface Props {
+    value: MessstelleAuswertungOptionsDTO;
+}
 
-const jahre = computed(() => {
-    // TODO Einschränkung der Jahre je nach Zeitintervall
-    const years = [];
-    for (let index = 2006; index <= new Date().getFullYear(); index++) {
-        years.push(index);
+const props = defineProps<Props>();
+
+const emits = defineEmits<{
+    (e: "input", v: MessstelleAuswertungOptionsDTO): void;
+}>();
+
+const auswertungOptions = computed({
+    get: () => props.value,
+    set: (v) => emits("input", v),
+});
+
+const jahre: ComputedRef<Array<KeyVal>> = computed(() => {
+    const result: Array<KeyVal> = [];
+    for (let index = 2006; index < new Date().getFullYear(); index++) {
+        result.push({
+            text: `${index}`,
+            value: `${index}`,
+        });
     }
-    return years;
+    return result;
 });
 </script>
diff --git a/frontend/src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue b/frontend/src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue
new file mode 100644
index 00000000..34b4d7b7
--- /dev/null
+++ b/frontend/src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue
@@ -0,0 +1,58 @@
+<template>
+    <v-card color="grey lighten-1">
+        <v-radio-group
+            v-model="auswertungOptions.tagesTyp"
+            class="full-width"
+        >
+            <v-radio
+                :value="TagesTyp.WERKTAG_DI_MI_DO"
+                :label="getTagesTypText(TagesTyp.WERKTAG_DI_MI_DO)"
+            />
+            <v-radio
+                :value="TagesTyp.WERKTAG_MO_FR"
+                :label="getTagesTypText(TagesTyp.WERKTAG_MO_FR)"
+            />
+            <v-radio
+                :value="TagesTyp.SAMSTAG"
+                :label="getTagesTypText(TagesTyp.SAMSTAG)"
+            />
+            <v-radio
+                :value="TagesTyp.SONNTAG_FEIERTAG"
+                :label="getTagesTypText(TagesTyp.SONNTAG_FEIERTAG)"
+            />
+            <v-radio
+                :value="TagesTyp.WERKTAG_FERIEN"
+                :label="getTagesTypText(TagesTyp.WERKTAG_FERIEN)"
+            />
+            <v-radio
+                :value="TagesTyp.MO_SO"
+                :label="getTagesTypText(TagesTyp.MO_SO)"
+            />
+        </v-radio-group>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import TagesTyp, { tagesTypText } from "@/types/enum/TagesTyp";
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
+import { computed } from "vue";
+
+interface Props {
+    value: MessstelleAuswertungOptionsDTO;
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<{
+    (e: "input", v: MessstelleAuswertungOptionsDTO): void;
+}>();
+
+const auswertungOptions = computed({
+    get: () => props.value,
+    set: (v) => emits("input", v),
+});
+
+function getTagesTypText(key: string): string | undefined {
+    return tagesTypText.get(key);
+}
+</script>
diff --git a/frontend/src/components/messstelle/gesamtauswertung/stepper/WochentagStepContent.vue b/frontend/src/components/messstelle/gesamtauswertung/stepper/WochentagStepContent.vue
deleted file mode 100644
index 0658e68f..00000000
--- a/frontend/src/components/messstelle/gesamtauswertung/stepper/WochentagStepContent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <v-card
-        color="grey lighten-1"
-        class="mb-12"
-        height="200px"
-    >
-    </v-card>
-</template>
-
-<script setup lang="ts"></script>
diff --git a/frontend/src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue b/frontend/src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue
index 0658e68f..26276d02 100644
--- a/frontend/src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue
+++ b/frontend/src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue
@@ -1,10 +1,113 @@
 <template>
-    <v-card
-        color="grey lighten-1"
-        class="mb-12"
-        height="200px"
-    >
-    </v-card>
+    <div>
+        <p>Welche Zeitintervalle sollen verglichen werden?</p>
+        <v-autocomplete
+            v-model="selected"
+            :items="zeitintervalle"
+            class="mt-4"
+            outlined
+            dense
+            label="Zeitintervalle"
+            @input="checkIfJahreIsSelected"
+        />
+        <v-autocomplete
+            v-if="showSecondSelect"
+            v-model="auswertungOptions.zeitintervalle"
+            :items="selectableItems"
+            class="mt-4"
+            outlined
+            dense
+            chips
+            small-chips
+            :label="selected"
+            multiple
+            clearable
+            deletable-chips
+            @input="checkIfSelectAll"
+        />
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
+import { computed, ref } from "vue";
+
+interface Props {
+    value: MessstelleAuswertungOptionsDTO;
+}
+
+const jahre = "Jahre";
+const halbjahre = "Halbjahre";
+const quartale = "Quartale";
+const monate = "Monate";
+const selectAll = "alle auswählen";
+
+const zeitintervalle = [jahre, halbjahre, quartale, monate];
+const monateItems = [
+    "Januar",
+    "Februar",
+    "März",
+    "April",
+    "Mai",
+    "Juni",
+    "Juli",
+    "August",
+    "September",
+    "Oktober",
+    "November",
+    "Dezember",
+];
+
+const selected = ref("");
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<{
+    (e: "input", v: MessstelleAuswertungOptionsDTO): void;
+}>();
+
+const auswertungOptions = computed({
+    get: () => props.value,
+    set: (v) => emits("input", v),
+});
+
+const showSecondSelect = computed(() => {
+    return selected.value && selected.value !== jahre;
+});
+
+const selectableItems = computed(() => {
+    let items: Array<string> = [];
+    switch (selected.value) {
+        case halbjahre:
+            items = ["1. Halbjahr (Jan - Juni)", "2. Halbjahr (Juli - Dez)"];
+            break;
+        case quartale:
+            items = [
+                "1. Quartal (Jan - März)",
+                "2. Quartal (Apr - Juni)",
+                "3. Quartal (Juli - Sept)",
+                "4. Quartal (Okt - Dez)",
+            ];
+            break;
+        case monate:
+            items = [...monateItems, selectAll];
+            break;
+    }
+    return items;
+});
+
+function checkIfJahreIsSelected() {
+    if (selected.value === jahre) {
+        auswertungOptions.value.zeitintervalle.push(selected.value);
+    } else {
+        auswertungOptions.value.zeitintervalle = [];
+    }
+}
+
+function checkIfSelectAll() {
+    if (auswertungOptions.value.zeitintervalle.includes(selectAll)) {
+        auswertungOptions.value.zeitintervalle = [];
+        auswertungOptions.value.zeitintervalle.push(...monateItems);
+    }
+}
+</script>
diff --git a/frontend/src/types/messstelle/MessstelleAuswertungOptionsDTO.ts b/frontend/src/types/messstelle/MessstelleAuswertungOptionsDTO.ts
new file mode 100644
index 00000000..724a3b5b
--- /dev/null
+++ b/frontend/src/types/messstelle/MessstelleAuswertungOptionsDTO.ts
@@ -0,0 +1,5 @@
+export default interface MessstelleAuswertungOptionsDTO {
+    jahre: Array<string>;
+    tagesTyp: string;
+    zeitintervalle: Array<string>;
+}
diff --git a/frontend/src/util/DefaultObjectCreator.ts b/frontend/src/util/DefaultObjectCreator.ts
index cdd5dc59..2aecded0 100644
--- a/frontend/src/util/DefaultObjectCreator.ts
+++ b/frontend/src/util/DefaultObjectCreator.ts
@@ -7,6 +7,7 @@ import DetektierteFahrzeugart from "@/types/enum/DetektierteFahrzeugart";
 import FahrzeugOptions from "@/types/messstelle/FahrzeugOptions";
 import MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
 import ZaehldatenIntervall from "@/types/enum/ZaehldatenIntervall";
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
 
 export default class DefaultObjectCreator {
     public static createDefaultZaehlstelleKarte(): ZaehlstelleKarteDTO {
@@ -83,6 +84,14 @@ export default class DefaultObjectCreator {
 
     public static createDefaultMessstelleOptions(): MessstelleOptionsDTO {
         return {
+            blackPrintMode: false,
+            blocksumme: false,
+            ganglinieYAchse1MaxValue: null,
+            ganglinieYAchse2MaxValue: null,
+            spitzenstunde: false,
+            stundensumme: false,
+            tagessumme: false,
+            werteHundertRunden: false,
             fahrzeuge: this.createDefaultFahrzeugOptions(true),
             intervall: ZaehldatenIntervall.STUNDE_KOMPLETT,
             messquerschnittIds: [],
@@ -92,4 +101,8 @@ export default class DefaultObjectCreator {
             zeitraum: [],
         };
     }
+
+    public static createDefaultMessstelleAuswertungOptions(): MessstelleAuswertungOptionsDTO {
+        return { jahre: [], tagesTyp: "", zeitintervalle: [] };
+    }
 }
diff --git a/frontend/src/views/AuswertungView.vue b/frontend/src/views/AuswertungView.vue
index e1456187..7a3fef20 100644
--- a/frontend/src/views/AuswertungView.vue
+++ b/frontend/src/views/AuswertungView.vue
@@ -3,11 +3,13 @@
         <v-row dense>
             <v-col cols="4">
                 <auswertung-stepper
-                    v-model="activeStep"
+                    v-model="auswertungsOptions"
                     :height="leftHeightVh"
+                    :active-step.sync="activeStep"
                 />
                 <v-card-actions>
                     <v-btn
+                        :disabled="activeStep === 3"
                         class="mr-2"
                         color="primary"
                         @click="activeStep++"
@@ -15,6 +17,7 @@
                         Weiter
                     </v-btn>
                     <v-btn
+                        :disabled="activeStep === 1"
                         class="mr-2"
                         color="primary"
                         @click="activeStep--"
@@ -33,10 +36,15 @@
 import { computed, ref, Ref } from "vue";
 import { useVuetify } from "@/util/useVuetify";
 import AuswertungStepper from "@/components/messstelle/gesamtauswertung/stepper/AuswertungStepper.vue";
+import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
+import DefaultObjectCreator from "@/util/DefaultObjectCreator";
 
 const vuetify = useVuetify();
 
 const activeStep: Ref<number> = ref(1);
+const auswertungsOptions: Ref<MessstelleAuswertungOptionsDTO> = ref(
+    DefaultObjectCreator.createDefaultMessstelleAuswertungOptions()
+);
 
 const appBarHeight = computed(() => {
     return 65 / (vuetify.breakpoint.height / 100);