Feat/dave 108 export pdf report

frontend/components.d.ts

@@ -55,6 +55,7 @@ declare module '@vue/runtime-core' {
     MessquerschnittAnzahlInfo: typeof import('./src/components/messstelle/MessquerschnittAnzahlInfo.vue')['default']
     MessquerschnittInfo: typeof import('./src/components/messstelle/MessquerschnittInfo.vue')['default']
     MessquerschnittPanel: typeof import('./src/components/messstelle/optionsmenue/panels/MessquerschnittPanel.vue')['default']
+    MessquerschnittPanel2: typeof import('./src/components/messstelle/optionsmenue/panels/MessquerschnittPanel2.vue')['default']
     MessstelleDiagramme: typeof import('./src/components/messstelle/charts/MessstelleDiagramme.vue')['default']
     MessstelleGeometrie: typeof import('./src/components/messstelle/MessstelleGeometrie.vue')['default']
     MessstelleHeaderInfo: typeof import('./src/components/messstelle/MessstelleHeaderInfo.vue')['default']
@@ -67,6 +68,7 @@ declare module '@vue/runtime-core' {
     PanelHeader: typeof import('./src/components/common/PanelHeader.vue')['default']
     PdfPreviewDialog: typeof import('./src/components/pdfreport/assetforms/PdfPreviewDialog.vue')['default']
     PdfReportMenue: typeof import('./src/components/zaehlstelle/PdfReportMenue.vue')['default']
+    PdfReportMenueMessstelle: typeof import('./src/components/messstelle/PdfReportMenueMessstelle.vue')['default']
     QKFZIcon: typeof import('./src/components/messstelle/icons/FahrzeugklasseIcons/QKFZIcon.vue')['default']
     QpkwLkwIcon: typeof import('./src/components/messstelle/icons/FahrzeugklasseIcons/QpkwLkwIcon.vue')['default']
     QuelleIcon: typeof import('./src/components/zaehlstelle/icons/QuelleIcon.vue')['default']

frontend/src/components/messstelle/PdfReportMenueMessstelle.vue

@@ -0,0 +1,246 @@
+<template>
+    <div>
+        <v-dialog
+            v-model="openDialog"
+            max-width="900px"
+            @click:outside="closeDialog"
+        >
+            <v-card
+                width="900px"
+                flat
+            >
+                <v-card-title>
+                    <v-icon left>mdi-file-chart</v-icon>
+                    Auswahl zum PDF Report
+                </v-card-title>
+
+                <v-list
+                    flat
+                    subheader
+                    three-line
+                >
+                    <v-subheader
+                        >Wählen Sie die Inhalte, die dem PDF Report hinzugefügt
+                        werden sollen.</v-subheader
+                    >
+                    <v-list-item>
+                        <v-list-item-action>
+                            <v-checkbox v-model="messstelleninfo"></v-checkbox>
+                        </v-list-item-action>
+
+                        <v-list-item-content>
+                            <v-list-item-title
+                                >Messstelleninformationen</v-list-item-title
+                            >
+                            <v-list-item-subtitle
+                                >Folgende Informationen werden im PDF Report
+                                eingetragen: Messstelle-ID, ID & Standort der
+                                Messquerschnitte, Stadtbezirk,
+                                Messstellenkommentar.
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <v-list-item-action>
+                            <v-checkbox v-model="messinfo"></v-checkbox>
+                        </v-list-item-action>
+
+                        <v-list-item-content>
+                            <v-list-item-title
+                                >Messinformationen</v-list-item-title
+                            >
+                            <v-list-item-subtitle
+                                >Folgende Informationen werden im PDF Report
+                                eingetragen: Zeitraum von ... bis / Einzeltag,
+                                Wochentag, Statistik zur Auswertung (Anzahl
+                                plausible Wochentage)
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <v-list-item-action>
+                            <v-checkbox v-model="legende"></v-checkbox>
+                        </v-list-item-action>
+
+                        <v-list-item-content>
+                            <v-list-item-title>Legende</v-list-item-title>
+                            <v-list-item-subtitle
+                                >Die Legende enthält Kurzbeschreibungen der
+                                einzelnen Zählattribute, z.B. für den
+                                Kraftfahrzeugverkehr, Schwerverkehr etc.
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+                <v-footer>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        color="secondary"
+                        @click="saveItems"
+                    >
+                        Aktualisiere PDF Report
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        color="grey lighten-1"
+                        @click="closeDialog"
+                    >
+                        Abbrechen
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                </v-footer>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, Ref, ref } from "vue";
+import MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
+import { useStore } from "@/api/util/useStore";
+import { Levels } from "@/api/error";
+import HeadingAsset from "@/types/pdfreport/assets/HeadingAsset";
+import AssetTypesEnum from "@/types/pdfreport/assets/AssetTypesEnum";
+import TextAsset from "@/types/pdfreport/assets/TextAsset";
+import MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
+import BaseAsset from "@/types/pdfreport/assets/BaseAsset";
+import { useDateUtils } from "@/util/DateUtils";
+import { tagesTypText } from "@/types/enum/TagesTyp";
+
+interface Props {
+    value: boolean;
+}
+const props = defineProps<Props>();
+
+const openDialog = computed({
+    get: () => props.value,
+    set: (payload: boolean) => emits("input", payload),
+});
+
+const emits = defineEmits<{
+    (e: "close"): void;
+    (e: "input", v: boolean): void;
+}>();
+
+const store = useStore();
+const dateUtils = useDateUtils();
+
+const messstelleninfo = ref(false);
+const messinfo = ref(false);
+const legende = ref(false);
+
+const messstelle: Ref<MessstelleInfoDTO> = computed(() => {
+    return store.getters["messstelleInfo/getMessstelleInfo"];
+});
+
+const options: Ref<MessstelleOptionsDTO> = computed(() => {
+    return store.getters["filteroptionsMessstelle/getFilteroptions"];
+});
+
+function closeDialog(): void {
+    resetCheckboxes();
+    emits("close");
+}
+
+function resetCheckboxes(): void {
+    messstelleninfo.value = false;
+    messinfo.value = false;
+    legende.value = false;
+}
+
+function saveItems(): void {
+    if (messstelleninfo.value) {
+        createMessstelleInfo();
+    }
+
+    if (messinfo.value) {
+        createMessInfo();
+    }
+
+    if (legende.value) {
+        createLegende();
+    }
+
+    store.dispatch("snackbar/showToast", {
+        snackbarTextPart1: `Die ausgewählten Informationen wurden dem PDF Report hinzugefügt.`,
+        level: Levels.SUCCESS,
+    });
+
+    closeDialog();
+}
+
+function createMessstelleInfo(): void {
+    const assets: Array<BaseAsset> = [];
+    const headline = new HeadingAsset(
+        `Info für Messstelle Id ${messstelle.value.mstId}`,
+        AssetTypesEnum.HEADING3
+    );
+    assets.push(headline);
+
+    const messquerschnittIds = options.value.messquerschnittIds;
+    const messquerschnittInfoDTOS = messstelle.value.messquerschnitte.filter(
+        (value) => messquerschnittIds.includes(value.mqId)
+    );
+    if (messquerschnittInfoDTOS.length > 0) {
+        let text = "Messquerschnitt(e):<br/>";
+        messquerschnittInfoDTOS.forEach((value) => {
+            text += `- ${value.mqId}`;
+            if (value.standort) {
+                text += ` - ${value.standort}`;
+            }
+            text += "<br/>\n";
+        });
+        assets.push(new TextAsset(text));
+    }
+    const stadtbezirk = new TextAsset(
+        `Stadtbezirk: ${messstelle.value.stadtbezirk} (${messstelle.value.stadtbezirkNummer})`
+    );
+    assets.push(stadtbezirk);
+    let kommentar = new TextAsset(
+        `Messstellenkommentar: ${messstelle.value.kommentar ?? "---"}`
+    );
+    assets.push(kommentar);
+    store.dispatch("addAssets", assets);
+}
+
+function createMessInfo(): void {
+    const assets: Array<BaseAsset> = [];
+
+    const zeitraum = options.value.zeitraum;
+    let header = `Info zur Messung vom ${dateUtils.formatDate(zeitraum[0])}`;
+    if (zeitraum.length === 2) {
+        header += ` bis ${dateUtils.formatDate(zeitraum[1])}`;
+    }
+    header += ` (Mst-Id ${messstelle.value.mstId})`;
+    assets.push(new HeadingAsset(header, AssetTypesEnum.HEADING3));
+
+    if (options.value.tagesTyp) {
+        const wochentag = new TextAsset(
+            `Wochentag (Tagestyp): ${tagesTypText.get(options.value.tagesTyp)}`
+        );
+        assets.push(wochentag);
+    }
+    const statistikAuswertung = new TextAsset(
+        `Auswertungsstatistik: Exisitiert noch nicht.`
+    );
+    assets.push(statistikAuswertung);
+
+    store.dispatch("addAssets", assets);
+}
+
+function createLegende(): void {
+    const ueberschrift = new HeadingAsset(
+        "Legende zu den Kennzahlen",
+        AssetTypesEnum.HEADING3
+    );
+    const legende = new TextAsset(
+        "<p>- <b>Kraftfahrzeugverkehr (KFZ)</b>: Der Kraftfahrzeugverkehr ist die Summe der Personenkraftwagen, Krafträder, Busse, Lieferwagen, Lastkraftwagen und Lastzüge.</p>\n" +
+            "<p>- <b>Schwerverkehr\t(SV)</b>: Der Schwerverkehr ist die Summe aller Fahrzeuge > 3,5t zul. Gesamtgewicht (Summe aus Bussen, Lastkraftwagen und Lastzüge).</p>\n" +
+            "<p>- <b>Güterverkehr (GV)</b>: Der Güterverkehr ist die Summe aller Fahrzeuge > 3,5t zul. Gesamtgewicht ohne Busse (Summe aus Lastkraftwagen und Lastzüge).</p>\n" +
+            "<p>- <b>Schwer- und Güterverkehrsanteil</b>: Anteil des Schwer- bzw. Güterverkehrs am Kraftfahrzeugverkehr in Prozent [%].</p>"
+    );
+    store.dispatch("addAssets", [ueberschrift, legende]);
+}
+</script>

frontend/src/components/messstelle/charts/MessstelleDiagramme.vue

@@ -119,6 +119,11 @@
             :loading-file="loadingFile"
             @addChartToPdfReport="addChartToPdfReport"
             @saveGraphAsImage="saveGraphAsImage"
+            @openPdfReportDialog="openPdfReportDialog"
+        />
+        <pdf-report-menue-messstelle
+            v-model="pdfReportDialog"
+            @close="closePdfReportDialog"
         />
     </v-sheet>
 </template>
@@ -145,6 +150,7 @@ import MessstelleHistoryItem from "@/types/app/MessstelleHistoryItem";
 import MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
 import MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
 import _ from "lodash";
+import PdfReportMenueMessstelle from "@/components/messstelle/PdfReportMenueMessstelle.vue";
 
 // Refactoring: Synergieeffekt mit ZaehldatenDiagramme nutzen
 
@@ -176,6 +182,7 @@ const showSpeedial: Ref<boolean> = ref(false);
 
 const isTabListenausgabe: Ref<boolean> = ref(false);
 const isNotTabHeatmap: Ref<boolean> = ref(false);
+const pdfReportDialog: Ref<boolean> = ref(false);
 
 const activeTab: Ref<number> = ref(0);
 
@@ -284,10 +291,16 @@ function addChartToPdfReport(): void {
             "Die"
         );
     }
-    // Heatmap
     if (activeTab.value === TAB_HEATMAP) {
         reportTools.addChartToPdfReport(getHeatmapBase64(), "Heatmap", "Die");
     }
+    if (activeTab.value === TAB_LISTENAUSGABE) {
+        reportTools.addDatatabelToPdfReport(
+            _.cloneDeep(options.value),
+            "Datentabelle",
+            "Die"
+        );
+    }
 }
 
 /**
@@ -324,4 +337,12 @@ function getHeatmapBase64(): string {
         excludeComponents: ["toolbox"],
     });
 }
+
+function openPdfReportDialog(): void {
+    pdfReportDialog.value = true;
+}
+
+function closePdfReportDialog(): void {
+    pdfReportDialog.value = false;
+}
 </script>

frontend/src/components/pdfreport/assetforms/DatatableAssetForm.vue

@@ -72,7 +72,7 @@ import OptionsDTO from "@/types/zaehlung/OptionsDTO";
 
 @Component
 export default class DatatableAssetForm extends Vue {
-    @Prop({ default: false }) open = false;
+    @Prop({ default: false }) open: boolean | undefined;
     @Prop() datatable?: DatatableAsset;
 
     asset: DatatableAsset = new DatatableAsset({} as OptionsDTO, "", "");

frontend/src/components/pdfreport/assetforms/DeleteDialog.vue

@@ -44,7 +44,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class DeleteDialog extends Vue {
-    @Prop() open = false;
+    @Prop({ default: false }) open: boolean | undefined;
     @Prop() assetId!: number;
 
     deleteAsset(): void {

frontend/src/components/pdfreport/assetforms/HeadingAssetForm.vue

@@ -86,7 +86,7 @@ import AssetTypesEnum from "@/types/pdfreport/assets/AssetTypesEnum";
 
 @Component
 export default class HeadingAssetForm extends Vue {
-    @Prop({ default: false }) open = false;
+    @Prop({ default: false }) open: boolean | undefined;
     @Prop() heading?: HeadingAsset;
 
     asset: HeadingAsset = new HeadingAsset("", AssetTypesEnum.HEADING1);

frontend/src/components/pdfreport/assetforms/ImageAssetForm.vue

@@ -101,7 +101,7 @@ import ImageAsset from "@/types/pdfreport/assets/ImageAsset";
 
 @Component
 export default class ImageAssetForm extends Vue {
-    @Prop({ default: false }) open = false;
+    @Prop({ default: false }) open: boolean | undefined;
     @Prop({ default: new ImageAsset("", "") }) image?: ImageAsset;
 
     asset: ImageAsset = new ImageAsset("", "");

frontend/src/components/pdfreport/assetforms/PdfPreviewDialog.vue

@@ -92,7 +92,7 @@ import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed";
 export default class DeleteDialog extends Vue {
     @Prop() source!: Uint8Array;
 
-    @Prop() open = false;
+    @Prop({ default: false }) open: boolean | undefined;
 
     fab = false;
 

frontend/src/components/pdfreport/assetforms/TextAssetForm.vue

@@ -156,7 +156,7 @@ import TextAsset from "@/types/pdfreport/assets/TextAsset";
 
 @Component
 export default class TextAssetForm extends Vue {
-    @Prop({ default: false }) open = false;
+    @Prop({ default: false }) open: boolean | undefined;
     @Prop() text?: TextAsset;
 
     asset: TextAsset = new TextAsset("");

frontend/src/types/pdfreport/assets/AssetTypesEnum.ts

@@ -9,6 +9,7 @@ export enum AssetTypesEnum {
     PAGEBREAK = "PAGEBREAK",
     NEWLINE = "NEWLINE",
     DATATABLE = "DATATABLE",
+    DATATABLE_MESSSTELLE = "DATATABLE_MESSSTELLE",
     ZAEHLUNGSKENNGROESSEN = "ZAEHLUNGSKENNGROESSEN",
 }