FV-59 CSV je Zählart mitsamt Dokumentation der CSV-Dateien (#159)

Author: boal

frontend/src/App.vue

@@ -52,14 +52,18 @@
 </template>
 
 <script setup lang="ts">
+import type ConfigurationDTO from "@/types/configuration/ConfigurationDTO";
+
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 
+import ConfigurationService from "@/api/service/ConfigurationService";
 import SsoUserInfoService from "@/api/service/SsoUserInfoService";
 import VersionInfoService from "@/api/service/VersionInfoService";
 import TheSnackbar from "@/components/common/TheSnackbar.vue";
 import SsoUserInfoResponse from "@/domain/SsoUserInfoResponse";
 import VersionInfoResponse from "@/domain/VersionInfoResponse";
+import { useConfigurationStore } from "@/store/ConfigurationStore";
 import { useSnackbarStore } from "@/store/SnackbarStore";
 import { useUserStore } from "@/store/UserStore";
 
@@ -74,6 +78,7 @@ const frontendVersion = ref<string>("");
 const userStore = useUserStore();
 const route = useRoute();
 const snackbarStore = useSnackbarStore();
+const configurationStore = useConfigurationStore();
 
 created();
 
@@ -102,6 +107,11 @@ function created() {
     .catch(() => {
       backendVersion.value = "error";
     });
+  ConfigurationService.getConfiguration().then(
+    (configuration: ConfigurationDTO) => {
+      configurationStore.setConfiguration(configuration);
+    }
+  );
 }
 
 function navigateToHandbuch() {

frontend/src/api/service/ConfigurationService.ts

@@ -0,0 +1,15 @@
+import type ConfigurationDTO from "@/types/configuration/ConfigurationDTO";
+
+import FetchService from "@/api/service/FetchService";
+
+export default class ConfigurationService {
+  private static readonly ENDPOINT: string =
+    "api/dave-backend-service/configuration";
+
+  static getConfiguration(): Promise<ConfigurationDTO> {
+    return FetchService.getData(
+      `${this.ENDPOINT}`,
+      "Beim Laden der Anwendungskonfiguration ist ein Fehler aufgetreten."
+    );
+  }
+}

frontend/src/components/zaehlung/ZaehlungCard.vue

@@ -159,6 +159,16 @@
           />
         </template>
         <v-list density="compact">
+          <v-list-item density="compact">
+            <v-btn
+              v-tooltip:end="'Link zur Dokumentation der CSV-Datei'"
+              class="ml-2 mr-2"
+              icon="mdi-information"
+              variant="text"
+              color="secondary"
+              @click="openCsvDokumentation"
+            />
+          </v-list-item>
           <v-list-item density="compact">
             <v-btn
               v-tooltip:end="'CSV-Muster herunterladen'"
@@ -194,6 +204,7 @@ import ZaehlartIcon from "@/components/icons/ZaehlartIcon.vue";
 import ZaehldauerIcon from "@/components/icons/ZaehldauerIcon.vue";
 import ZaehlungCardMap from "@/components/map/ZaehlungCardMap.vue";
 import ZaehlungGeometrie from "@/components/zaehlung/ZaehlungGeometrie.vue";
+import { useConfigurationStore } from "@/store/ConfigurationStore";
 import { useSnackbarStore } from "@/store/SnackbarStore";
 import Status, { statusIcon } from "@/types/enum/Status";
 import Zaehlart from "@/types/enum/Zaehlart";
@@ -216,6 +227,7 @@ const ICON_COLOR = "black";
 const loading = ref<boolean>(false);
 
 const snackbarStore = useSnackbarStore();
+const configurationStore = useConfigurationStore();
 const dateUtils = useDateUtils();
 
 const coordsZaehlstelle = computed<LatLng>(() => {
@@ -343,20 +355,22 @@ function openZaehlungDialog() {
 function downloadDummyCsv(): void {
   // Beispiel: 62301Q_20210423_Knotenarm2.csv
   const zaehlstelleNummer: string = zaehlung.value.zaehlstelleNummer;
-  const zaehlart: string =
+  const zaehlartForFileContent: string =
     zaehlung.value.zaehlart === Zaehlart.N ? "" : zaehlung.value.zaehlart;
-  const filename = `${zaehlstelleNummer}${zaehlart}_${zaehlung.value.datum.replace(
+  const filename = `${zaehlstelleNummer}${zaehlartForFileContent}_${zaehlung.value.datum.replace(
     "-",
     ""
   )}_Knotenarm_X.csv`;
 
-  const metaHeader = "Zählstellennummer;Zählart;Datum;Knotenarmnummer;;;;;\n";
-  const metaData = `${zaehlstelleNummer};${zaehlart};${zaehlung.value.datum};<von-Knotenarmnr>;;;;;\n`;
-  const zaehlungHeader = "Intervallnummer;nach;Pkw;Lkw;Lz;Bus;Krad;Rad;Fuss\n";
+  const csvFileContent = getCsvContentForAllZaehlarten(
+    zaehlstelleNummer,
+    zaehlartForFileContent,
+    zaehlung.value.datum
+  );
+  const csvContentWithFileMetadata =
+    "data:text/csv;charset=utf-8," + csvFileContent;
 
-  const csvContent =
-    "data:text/csv;charset=utf-8," + metaHeader + metaData + zaehlungHeader;
-  const encodedUri = encodeURI(csvContent);
+  const encodedUri = encodeURI(csvContentWithFileMetadata);
   const link = document.createElement("a");
   link.setAttribute("href", encodedUri);
   link.setAttribute("download", filename);
@@ -365,8 +379,29 @@ function downloadDummyCsv(): void {
   link.click();
 }
 
+function getCsvContentForAllZaehlarten(
+  zaehlstelleNummer: string,
+  zaehlart: string,
+  zaehlungDatum: string
+): string {
+  const metaHeader = "Zählstellennummer;Zählart;Datum;Knotenarmnummer;;;;;\n";
+  const metaData = `${zaehlstelleNummer};${zaehlart};${zaehlungDatum};<knotenarmnummer>;;;;;\n`;
+  const zaehlungHeader =
+    "Intervallnummer;nach;Strassenseite;Richtung;Pkw;Lkw;Lz;Bus;Krad;Rad;Fuss\n";
+  return metaHeader + metaData + zaehlungHeader;
+}
+
 function openChatDialog() {
   zaehlung.value.unreadMessagesDienstleister = false;
   emits("openChatDialog", zaehlung.value);
 }
+
+function openCsvDokumentation(): void {
+  const linkCsvFile =
+    configurationStore.getZaehlstelleConfiguration
+      .linkDocumentationCsvFileForUploadZaehlung;
+  if (!isEmpty(linkCsvFile)) {
+    window.open(linkCsvFile);
+  }
+}
 </script>

frontend/src/store/ConfigurationStore.ts

@@ -0,0 +1,28 @@
+import type ConfigurationDTO from "@/types/configuration/ConfigurationDTO";
+
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+import DefaultObjectCreator from "@/util/DefaultObjectCreator";
+
+export const useConfigurationStore = defineStore("configurationStore", () => {
+  const configuration = ref<ConfigurationDTO>(
+    DefaultObjectCreator.createDefaultConfigurationDTO()
+  );
+
+  const getMapConfiguration = computed(() => configuration.value.map);
+
+  const getZaehlstelleConfiguration = computed(
+    () => configuration.value.zaehlstelle
+  );
+
+  function setConfiguration(payload: ConfigurationDTO) {
+    configuration.value = payload;
+  }
+
+  return {
+    getMapConfiguration,
+    getZaehlstelleConfiguration,
+    setConfiguration,
+  };
+});

frontend/src/types/configuration/ConfigurationDTO.ts

@@ -0,0 +1,7 @@
+import type MapConfigurationDTO from "@/types/configuration/MapConfigurationDTO";
+import type ZaehlstelleConfigurationDTO from "@/types/configuration/ZaehlstelleConfigurationDTO";
+
+export default interface ConfigurationDTO {
+  map: MapConfigurationDTO;
+  zaehlstelle: ZaehlstelleConfigurationDTO;
+}

frontend/src/types/configuration/MapConfigurationDTO.ts

@@ -0,0 +1,5 @@
+export default interface MapConfigurationDTO {
+  lat: string;
+  lng: string;
+  zoom: number;
+}

frontend/src/types/configuration/ZaehlstelleConfigurationDTO.ts

@@ -0,0 +1,4 @@
+export default interface ZaehlstelleConfigurationDTO {
+  automaticNumberAssignment: boolean;
+  linkDocumentationCsvFileForUploadZaehlung: string;
+}

frontend/src/util/DefaultObjectCreator.ts

@@ -1,3 +1,6 @@
+import type ConfigurationDTO from "@/types/configuration/ConfigurationDTO";
+import type MapConfigurationDTO from "@/types/configuration/MapConfigurationDTO";
+import type ZaehlstelleConfigurationDTO from "@/types/configuration/ZaehlstelleConfigurationDTO";
 import type ZaehlungDTO from "@/types/zaehlung/ZaehlungDTO";
 
 import { LatLng } from "leaflet";
@@ -28,4 +31,27 @@ export default class DefaultObjectCreator {
     zaehlung.sonderzaehlung = false;
     return zaehlung;
   }
+
+  public static createDefaultConfigurationDTO(): ConfigurationDTO {
+    return {
+      map: this.createDefaultMapConfigurationDTO(),
+      zaehlstelle: this.createDefaultZaehlstelleConfigurationDTO(),
+    };
+  }
+
+  public static createDefaultZaehlstelleConfigurationDTO(): ZaehlstelleConfigurationDTO {
+    return {
+      automaticNumberAssignment: true,
+      linkDocumentationCsvFileForUploadZaehlung: "",
+    };
+  }
+
+  public static createDefaultMapConfigurationDTO(): MapConfigurationDTO {
+    return {
+      // München Zentrum
+      lat: "48.137227",
+      lng: "11.575517",
+      zoom: 12,
+    };
+  }
 }