ErhebungsstellenOverview umbenannt und in eigene Overviews fuer Messs…

…tellen und Zaehlstellen aufgeteilt

frontend/src/components/messstelle/MessstelleOverview.vue

@@ -0,0 +1,126 @@
+<template>
+    <v-sheet
+        width="100%"
+        color="transparent"
+        class="overflow-y-auto"
+    >
+        <v-card-title style="font-weight: bold; font-size: x-large"
+            >Messstellen
+        </v-card-title>
+        <v-expansion-panels
+            v-if="hasMessstellen"
+            hover
+            focusable
+        >
+            <messstelle-overview-panel
+                :header="geplanteMessstellenHeader"
+                color="orange lighten-4"
+                icon="mdi-clipboard-clock-outline"
+                :messstellen="geplanteMessstellen"
+            />
+            <messstelle-overview-panel
+                :header="neuUmgesetzteMessstellenHeader"
+                color="blue lighten-4"
+                icon="mdi-clipboard-plus-outline"
+                :messstellen="neuUmgesetztMessstellen"
+            />
+            <messstelle-overview-panel
+                :header="nichtSichtbareMessstellenHeader"
+                color="purple lighten-4"
+                icon="mdi-eye-off-outline"
+                :messstellen="nichtSichtbareMessstellen"
+            />
+        </v-expansion-panels>
+        <v-card-subtitle
+            v-else
+            class="text-caption grey--text text--lighten-1"
+            >Es sind aktuell keine Daten zu den Messstellen vorhanden.
+        </v-card-subtitle>
+    </v-sheet>
+</template>
+
+<script setup lang="ts">
+import MessstelleOverviewDTO from "@/domain/dto/messstelle/MessstelleOverviewDTO";
+import MessstelleOverviewPanel from "@/components/messstelle/MessstelleOverviewPanel.vue";
+import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
+import MessstelleService from "@/api/service/MessstelleService";
+import { MessstelleStatus } from "@/domain/enums/MessstelleStatus";
+import { useStore } from "@/util/useStore";
+
+const store = useStore();
+
+const hasMessstellen: Ref<boolean> = ref(false);
+
+const geplanteMessstellen: Ref<Array<MessstelleOverviewDTO>> = ref(
+    [] as Array<MessstelleOverviewDTO>
+);
+const neuUmgesetztMessstellen: Ref<Array<MessstelleOverviewDTO>> = ref(
+    [] as Array<MessstelleOverviewDTO>
+);
+const nichtSichtbareMessstellen: Ref<Array<MessstelleOverviewDTO>> = ref(
+    [] as Array<MessstelleOverviewDTO>
+);
+
+const geplanteMessstellenHeader: ComputedRef<string> = computed(() => {
+    return `Geplante Messstellen: ${geplanteMessstellen.value.length}`;
+});
+const neuUmgesetzteMessstellenHeader: ComputedRef<string> = computed(() => {
+    return `Neu umgesetzte Messstellen: ${neuUmgesetztMessstellen.value.length}`;
+});
+const nichtSichtbareMessstellenHeader: ComputedRef<string> = computed(() => {
+    return `Nicht sichtbare Messstellen: ${nichtSichtbareMessstellen.value.length}`;
+});
+
+onMounted(() => {
+    resetDataArrays();
+    loadOpenMessstellen();
+});
+
+function loadOpenMessstellen(): void {
+    hasMessstellen.value = false;
+    MessstelleService.getAllMessstellenForOverview()
+        .then((messstellen: Array<MessstelleOverviewDTO>) => {
+            messstellen.forEach((messstelle: MessstelleOverviewDTO) => {
+                if (messstelle.status === MessstelleStatus.IN_PLANUNG) {
+                    geplanteMessstellen.value.push(messstelle);
+                } else if (!messstelle.geprueft) {
+                    neuUmgesetztMessstellen.value.push(messstelle);
+                } else if (!messstelle.sichtbarDatenportal) {
+                    nichtSichtbareMessstellen.value.push(messstelle);
+                }
+            });
+            hasMessstellen.value =
+                hasMessstellen.value || messstellen.length > 0;
+            sortDataArraysMessstelle();
+        })
+        .catch((error) => store.dispatch("snackbar/showError", error));
+}
+
+function sortDataArraysMessstelle(): void {
+    geplanteMessstellen.value = sortByMstId(geplanteMessstellen.value);
+    neuUmgesetztMessstellen.value = sortByMstId(neuUmgesetztMessstellen.value);
+    nichtSichtbareMessstellen.value = sortByMstId(
+        nichtSichtbareMessstellen.value
+    );
+}
+
+function sortByMstId(
+    toSort: Array<MessstelleOverviewDTO>
+): Array<MessstelleOverviewDTO> {
+    return toSort.sort((a, b) => (a.mstId > b.mstId ? 1 : -1));
+}
+
+function resetDataArrays(): void {
+    geplanteMessstellen.value = [];
+    neuUmgesetztMessstellen.value = [];
+    nichtSichtbareMessstellen.value = [];
+}
+</script>
+<style scoped lang="sass">
+// Entfernt die Elevation beim ExpansionPanel. Die Build-In-Funktion (flat) kann leider nicht genutzt werden,
+// da dann auch die Trennstriche zwischen den Panels entfernt werden.
+@import 'vuetify/src/components/VExpansionPanel/_variables.scss'
+.v-expansion-panel
+  &::before
+    +elevation(0)
+</style>

frontend/src/components/zaehlstelle/ZaehlstelleOverview.vue

@@ -0,0 +1,187 @@
+<template>
+    <v-sheet
+        width="100%"
+        color="transparent"
+        class="overflow-y-auto"
+    >
+        <v-card-title style="font-weight: bold; font-size: x-large"
+            >Zählstellen
+        </v-card-title>
+        <v-expansion-panels
+            v-if="hasOpenZaehlungen"
+            hover
+            focusable
+        >
+            <open-zaehlung-panel
+                :header="getCreatedHeader"
+                :status-design="createdStatusDesign"
+                :zaehlungen="createdZaehlungen"
+            />
+            <open-zaehlung-panel
+                :header="getInstructedHeader"
+                :status-design="instructedStatusDesign"
+                :zaehlungen="instructedZaehlungen"
+            />
+            <open-zaehlung-panel
+                :header="getCountingHeader"
+                :status-design="countingStatusDesign"
+                :zaehlungen="countingZaehlungen"
+            />
+            <open-zaehlung-panel
+                :header="getAccomplishedHeader"
+                :status-design="accomplishedStatusDesign"
+                :zaehlungen="accomplishedZaehlungen"
+            />
+            <open-zaehlung-panel
+                :header="getCorrectionHeader"
+                :status-design="correctionStatusDesign"
+                :zaehlungen="correctionZaehlungen"
+            />
+        </v-expansion-panels>
+        <v-card-subtitle
+            v-else
+            class="text-caption grey--text text--lighten-1"
+            >Es sind aktuell keine offenen Zählungen vorhanden.
+        </v-card-subtitle>
+    </v-sheet>
+</template>
+
+<script setup lang="ts">
+import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
+import { useStore } from "@/util/useStore";
+import OpenZaehlungDTO from "@/domain/dto/OpenZaehlungDTO";
+import IconOptions from "@/components/icons/IconOptions";
+import Status, { statusIcon } from "@/domain/enums/Status";
+import ZaehlungService from "@/api/service/ZaehlungService";
+import ZaehlungComparator from "@/util/ZaehlungComparator";
+import OpenZaehlungPanel from "@/components/zaehlung/OpenZaehlungPanel.vue";
+
+const store = useStore();
+
+const hasOpenZaehlungen: Ref<boolean> = ref(false);
+
+const createdZaehlungen: Ref<Array<OpenZaehlungDTO>> = ref(
+    [] as Array<OpenZaehlungDTO>
+);
+const instructedZaehlungen: Ref<Array<OpenZaehlungDTO>> = ref(
+    [] as Array<OpenZaehlungDTO>
+);
+const countingZaehlungen: Ref<Array<OpenZaehlungDTO>> = ref(
+    [] as Array<OpenZaehlungDTO>
+);
+const accomplishedZaehlungen: Ref<Array<OpenZaehlungDTO>> = ref(
+    [] as Array<OpenZaehlungDTO>
+);
+const correctionZaehlungen: Ref<Array<OpenZaehlungDTO>> = ref(
+    [] as Array<OpenZaehlungDTO>
+);
+
+const createdStatusDesign: ComputedRef<IconOptions> = computed(() => {
+    return getStatusDesign(Status.CREATED);
+});
+const instructedStatusDesign: ComputedRef<IconOptions> = computed(() => {
+    return getStatusDesign(Status.INSTRUCTED);
+});
+const countingStatusDesign: ComputedRef<IconOptions> = computed(() => {
+    return getStatusDesign(Status.COUNTING);
+});
+const accomplishedStatusDesign: ComputedRef<IconOptions> = computed(() => {
+    return getStatusDesign(Status.ACCOMPLISHED);
+});
+const correctionStatusDesign: ComputedRef<IconOptions> = computed(() => {
+    return getStatusDesign(Status.CORRECTION);
+});
+
+const getCreatedHeader: ComputedRef<string> = computed(() => {
+    return `Angelegte Zählungen: ${createdZaehlungen.value.length}`;
+});
+const getInstructedHeader: ComputedRef<string> = computed(() => {
+    return `Beauftragte Zählungen: ${instructedZaehlungen.value.length}`;
+});
+const getCountingHeader: ComputedRef<string> = computed(() => {
+    return `Laufende Zählungen: ${countingZaehlungen.value.length}`;
+});
+const getAccomplishedHeader: ComputedRef<string> = computed(() => {
+    return `Durchgeführte Zählungen: ${accomplishedZaehlungen.value.length}`;
+});
+const getCorrectionHeader: ComputedRef<string> = computed(() => {
+    return `Fehlerhafte Zählungen: ${correctionZaehlungen.value.length}`;
+});
+
+onMounted(() => {
+    resetDataArrays();
+    loadOpenZaehlungen();
+});
+
+function loadOpenZaehlungen(): void {
+    hasOpenZaehlungen.value = false;
+    ZaehlungService.getAllOpenZaehlungen()
+        .then((zaehlungen: Array<OpenZaehlungDTO>) => {
+            zaehlungen.forEach((zaehlung: OpenZaehlungDTO) => {
+                switch (zaehlung.status) {
+                    case Status.CREATED:
+                        createdZaehlungen.value.push(zaehlung);
+                        break;
+                    case Status.INSTRUCTED:
+                        instructedZaehlungen.value.push(zaehlung);
+                        break;
+                    case Status.COUNTING:
+                        countingZaehlungen.value.push(zaehlung);
+                        break;
+                    case Status.ACCOMPLISHED:
+                        accomplishedZaehlungen.value.push(zaehlung);
+                        break;
+                    case Status.CORRECTION:
+                        correctionZaehlungen.value.push(zaehlung);
+                        break;
+                }
+            });
+            hasOpenZaehlungen.value = zaehlungen.length > 0;
+            sortDataArraysZaehlstelle();
+        })
+        .catch((error) => store.dispatch("snackbar/showError", error));
+}
+
+function sortDataArraysZaehlstelle(): void {
+    createdZaehlungen.value = sortByDatumDesc(createdZaehlungen.value);
+    instructedZaehlungen.value = sortByDatumDesc(instructedZaehlungen.value);
+    countingZaehlungen.value = sortByDatumDesc(countingZaehlungen.value);
+    accomplishedZaehlungen.value = sortByDatumDesc(
+        accomplishedZaehlungen.value
+    );
+    correctionZaehlungen.value = sortByDatumDesc(correctionZaehlungen.value);
+}
+
+function sortByDatumDesc(
+    toSort: Array<OpenZaehlungDTO>
+): Array<OpenZaehlungDTO> {
+    return toSort.sort(ZaehlungComparator.sortByDatumDesc);
+}
+
+function resetDataArrays(): void {
+    createdZaehlungen.value = [];
+    instructedZaehlungen.value = [];
+    countingZaehlungen.value = [];
+    accomplishedZaehlungen.value = [];
+    correctionZaehlungen.value = [];
+}
+
+function getStatusDesign(status: Status): IconOptions {
+    let design: IconOptions | undefined = statusIcon.get(status);
+    if (!design) {
+        design = {} as IconOptions;
+        design.color = "deep-orange lighten-4";
+        design.iconPath = "mdi-calendar-question";
+        design.tooltip = "Status unbekannt";
+    }
+    return design;
+}
+</script>
+<style scoped lang="sass">
+// Entfernt die Elevation beim ExpansionPanel. Die Build-In-Funktion (flat) kann leider nicht genutzt werden,
+// da dann auch die Trennstriche zwischen den Panels entfernt werden.
+@import 'vuetify/src/components/VExpansionPanel/_variables.scss'
+.v-expansion-panel
+  &::before
+    +elevation(0)
+</style>

frontend/src/router.ts

@@ -2,7 +2,7 @@ import Vue from "vue";
 import Router from "vue-router";
 import Main from "./views/Main.vue";
 import ZaehlstelleView from "@/views/ZaehlstelleView.vue";
-import ErhebungsstellenOverview from "@/views/ErhebungsstellenOverview.vue";
+import ErhebungsstellenOverview from "@/views/ErhebungsstellenOverviewView.vue";
 import ConfigView from "@/views/ConfigView.vue";
 import MessstelleView from "@/views/MessstelleView.vue";