From 037c2e69e93b40f4b67cce53fa00c753768db2f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anett=20H=C3=BCbner?= Date: Tue, 10 Feb 2026 14:25:07 +0100 Subject: [PATCH 1/2] added date range picker to zaehlstelle --- .../optionsmenue/OptionsmenueZaehlstelle.vue | 38 +++++++++++++++ .../optionsmenue/panels/ZeitauswahlPanel.vue | 48 ++++++++++++++++++- frontend/src/store/ZaehlstelleStore.ts | 17 +++++++ frontend/src/types/zaehlung/OptionsDTO.ts | 3 ++ frontend/src/util/DefaultObjectCreator.ts | 2 + 5 files changed, 107 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue b/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue index 99465e6be..1f8d1cb4d 100644 --- a/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue +++ b/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue @@ -39,6 +39,7 @@ > (() => { return zaehlstelleStore.getFilteroptions; @@ -178,6 +182,22 @@ function setDefaultOptionsForZaehlung() { const optionsCopy = {} as OptionsDTO; Object.assign(optionsCopy, options.value); + optionsCopy.zeitraumStartAndEndDate = { + startDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), + endDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), + isRange: () => true + }; + + const isoStartDate = dateUtils.formatDateToISO( + chosenOptions.value.zeitraumStartAndEndDate.startDate + ); + const isoEndDate = dateUtils.formatDateToISO( + chosenOptions.value.zeitraumStartAndEndDate.endDate + ); + chosenOptions.value.zeitraum = [isoStartDate, isoEndDate].filter( + (date) => !isEmpty(date) + ); + if (props.zaehlung.zaehldauer === Zaehldauer.DAUER_13_STUNDEN) { optionsCopy.zeitauswahl = Zeitauswahl.BLOCK; optionsCopy.zeitblock = Zeitblock.ZB_06_19; @@ -241,6 +261,24 @@ function setDefaultOptionsForZaehlung() { } // Event Methoden für die Zeitauswahl Komponente +function setZeitraumStartAndEndDate(event: StartAndEndDate) { + if (event) { + chosenOptions.value.zeitraumStartAndEndDate = event; + zaehlstelleStore.setZeitraumStartAndEndDate(event); + if (!isNil(chosenOptions.value.zeitraumStartAndEndDate)) { + const isoStartDate = dateUtils.formatDateToISO( + chosenOptions.value.zeitraumStartAndEndDate.startDate + ); + const isoEndDate = dateUtils.formatDateToISO( + chosenOptions.value.zeitraumStartAndEndDate.endDate + ); + chosenOptions.value.zeitraum = [isoStartDate, isoEndDate].filter( + (date) => !isEmpty(date) + ); + } + } +} + function setZeitauswahl(event: string) { chosenOptions.value.zeitauswahl = event; zaehlstelleStore.setZeitauswahl(event); diff --git a/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue b/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue index 396f646c7..f103ba876 100644 --- a/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue +++ b/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue @@ -10,13 +10,21 @@ + + - (); const zaehlstelleStore = useZaehlstelleStore(); const zaehlstelleUtils = useZaehlstelleUtils(); +const dateUtils = useDateUtils(); const emits = defineEmits<{ + (e: "zeitraumStartAndEndDate", v: StartAndEndDate): void; (e: "zeitauswahl", v: string): void; (e: "zeitblock", v: string): void; (e: "intervall", v: ZaehldatenIntervall): void; @@ -221,6 +234,39 @@ const activeZaehlung = computed(() => { return zaehlstelleStore.getAktiveZaehlung; }); +const zeitraumStartAndEndDate = computed(() => { + return zaehlstelleStore.getZeitraumStartAndEndDate; +}); + +const minDateDescription = ref(""); +const minDate = ref(); + +watch( + () => [activeZaehlung.value.datum], + () => { + const startdatum = new Date("2006-01-01"); + const realisierungsdatum = new Date( + activeZaehlung.value.datum + ); + if ( + dateUtils.isValidIsoDate(activeZaehlung.value.datum) && + realisierungsdatum >= startdatum + ) { + minDateDescription.value = "Realisierungsdatum"; + minDate.value = realisierungsdatum; + } else { + minDateDescription.value = "frühestmöglichen Datum"; + minDate.value = startdatum; + } + }, + { immediate: true } +); + +const maxDateDescription = ref("gestrigen Datum"); +const maxDate = ref(new Date(new Date().setDate(new Date().getDate() - 1))); + +const auffaelligeTage = ref>([]); + const isZeitauswahlSpitzenstundeOrBlock = computed(() => { return ( zeitauswahl.value === Zeitauswahl.BLOCK || isZeitauswahlSpitzenstunde.value diff --git a/frontend/src/store/ZaehlstelleStore.ts b/frontend/src/store/ZaehlstelleStore.ts index 6c4511ef4..791673994 100644 --- a/frontend/src/store/ZaehlstelleStore.ts +++ b/frontend/src/store/ZaehlstelleStore.ts @@ -12,6 +12,8 @@ import { useUserStore } from "@/store/UserStore"; import LadeKnotenarmComperator from "@/types/zaehlung/LadeKnotenarmComperator"; import LadeZaehlungComperator from "@/types/zaehlung/LadeZaehlungComperator"; import DefaultObjectCreator from "@/util/DefaultObjectCreator"; +import type { set } from "lodash"; +import type StartAndEndDate from "@/types/common/StartAndEndDate"; export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { const route = useRoute(); @@ -23,6 +25,13 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { const filteroptions = ref( DefaultObjectCreator.createDefaultZaehlstelleOptionsDto() ); + const zeitraumStartAndEndDate = ref( + { + startDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), + endDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), + isRange: () => true + } + ); const zeitblock = ref(""); const zeitauswahl = ref(""); const history = ref(false); @@ -51,6 +60,9 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { () => filteroptions.value.differenzdatenDarstellen ); const isBlackprintMode = computed(() => filteroptions.value.blackPrintMode); + const getZeitraumStartAndEndDate = computed( + () => zeitraumStartAndEndDate.value + ); const getZeitblock = computed(() => zeitblock.value); const getZeitauswahl = computed(() => zeitauswahl.value); const isHistory = computed(() => history.value); @@ -100,6 +112,9 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { filteroptions.value = payload; history.value = true; } + function setZeitraumStartAndEndDate(payload: StartAndEndDate) { + zeitraumStartAndEndDate.value = payload; + } function setZeitblock(payload: string) { zeitblock.value = payload; } @@ -204,6 +219,7 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { getFilteroptions, isDifferenzdatenDarstellung, isBlackprintMode, + getZeitraumStartAndEndDate, getZeitblock, getZeitauswahl, isHistory, @@ -225,6 +241,7 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { setActiveTab, setFilteroptions, setFilteroptionsHistory, + setZeitraumStartAndEndDate, setZeitblock, setZeitauswahl, reloadFilteroptions, diff --git a/frontend/src/types/zaehlung/OptionsDTO.ts b/frontend/src/types/zaehlung/OptionsDTO.ts index dc69065e1..0e499cd2a 100644 --- a/frontend/src/types/zaehlung/OptionsDTO.ts +++ b/frontend/src/types/zaehlung/OptionsDTO.ts @@ -1,7 +1,10 @@ import ZaehldatenIntervall from "@/types/enum/ZaehldatenIntervall"; import Zaehldauer from "@/types/enum/Zaehldauer"; +import type StartAndEndDate from "../common/StartAndEndDate"; export default interface OptionsDTO { + zeitraumStartAndEndDate: StartAndEndDate; + zeitraum: string[]; zaehldauer: Zaehldauer; intervall: ZaehldatenIntervall; zeitblock: string; diff --git a/frontend/src/util/DefaultObjectCreator.ts b/frontend/src/util/DefaultObjectCreator.ts index 41b8d94ac..2481c8652 100644 --- a/frontend/src/util/DefaultObjectCreator.ts +++ b/frontend/src/util/DefaultObjectCreator.ts @@ -223,6 +223,8 @@ export default class DefaultObjectCreator { return { beideRichtungen: false, vergleichszaehlungsId: null, + zeitraumStartAndEndDate: new StartAndEndDate(undefined, undefined), + zeitraum: [], zaehldauer: Zaehldauer.DAUER_24_STUNDEN, intervall: ZaehldatenIntervall.STUNDE_VIERTEL, zeitblock: Zeitblock.ZB_00_24, From 81f60e0a9eddc0de903839b139c56ce9ac26c279 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anett=20H=C3=BCbner?= Date: Fri, 13 Feb 2026 15:06:46 +0100 Subject: [PATCH 2/2] date-range-picker --- .../optionsmenue/OptionsmenueZaehlstelle.vue | 11 +++++----- .../optionsmenue/panels/ZeitauswahlPanel.vue | 9 ++++++++ frontend/src/store/ZaehlstelleStore.ts | 22 ++++++++++++++++++- 3 files changed, 36 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue b/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue index 1f8d1cb4d..21262e73c 100644 --- a/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue +++ b/frontend/src/components/zaehlstelle/optionsmenue/OptionsmenueZaehlstelle.vue @@ -181,20 +181,21 @@ const getContentSheetHeight = computed(() => { function setDefaultOptionsForZaehlung() { const optionsCopy = {} as OptionsDTO; Object.assign(optionsCopy, options.value); + const yesterday = new Date(Date.now() - 1 * 24 * 60 * 60 * 1000); optionsCopy.zeitraumStartAndEndDate = { - startDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), - endDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), + startDate: yesterday, + endDate: yesterday, isRange: () => true }; const isoStartDate = dateUtils.formatDateToISO( - chosenOptions.value.zeitraumStartAndEndDate.startDate + yesterday ); const isoEndDate = dateUtils.formatDateToISO( - chosenOptions.value.zeitraumStartAndEndDate.endDate + yesterday ); - chosenOptions.value.zeitraum = [isoStartDate, isoEndDate].filter( + optionsCopy.zeitraum = [isoStartDate, isoEndDate].filter( (date) => !isEmpty(date) ); diff --git a/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue b/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue index f103ba876..f3755d335 100644 --- a/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue +++ b/frontend/src/components/zaehlstelle/optionsmenue/panels/ZeitauswahlPanel.vue @@ -445,6 +445,15 @@ watch(options, (newOptions: OptionsDTO) => { update(newOptions); }); +watch( + () => [zeitraumStartAndEndDate.value.startDate, zeitraumStartAndEndDate.value.endDate], + () => { + emits("zeitraumStartAndEndDate", zeitraumStartAndEndDate.value); + }, + { immediate: true } +); + + watch(zeitauswahl, () => { emits("zeitauswahl", zeitauswahl.value); }); diff --git a/frontend/src/store/ZaehlstelleStore.ts b/frontend/src/store/ZaehlstelleStore.ts index 791673994..7448005a9 100644 --- a/frontend/src/store/ZaehlstelleStore.ts +++ b/frontend/src/store/ZaehlstelleStore.ts @@ -12,8 +12,9 @@ import { useUserStore } from "@/store/UserStore"; import LadeKnotenarmComperator from "@/types/zaehlung/LadeKnotenarmComperator"; import LadeZaehlungComperator from "@/types/zaehlung/LadeZaehlungComperator"; import DefaultObjectCreator from "@/util/DefaultObjectCreator"; -import type { set } from "lodash"; +import { isNil, isEmpty } from "lodash"; import type StartAndEndDate from "@/types/common/StartAndEndDate"; +import { useDateUtils } from "@/util/DateUtils"; export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { const route = useRoute(); @@ -32,6 +33,8 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { isRange: () => true } ); + const dateUtils = useDateUtils(); + const zeitraum = ref([]); const zeitblock = ref(""); const zeitauswahl = ref(""); const history = ref(false); @@ -63,6 +66,7 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { const getZeitraumStartAndEndDate = computed( () => zeitraumStartAndEndDate.value ); + const getZeitraum = computed(() => zeitraum.value); const getZeitblock = computed(() => zeitblock.value); const getZeitauswahl = computed(() => zeitauswahl.value); const isHistory = computed(() => history.value); @@ -114,6 +118,20 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { } function setZeitraumStartAndEndDate(payload: StartAndEndDate) { zeitraumStartAndEndDate.value = payload; + if (!isNil(payload)) { + const isoStartDate = dateUtils.formatDateToISO( + payload.startDate + ); + const isoEndDate = dateUtils.formatDateToISO( + payload.endDate + ); + zeitraum.value = [isoStartDate, isoEndDate].filter( + (date) => !isEmpty(date) + ); + } + } + function setZeitraum(payload: string[]) { + zeitraum.value = payload; } function setZeitblock(payload: string) { zeitblock.value = payload; @@ -219,6 +237,7 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { getFilteroptions, isDifferenzdatenDarstellung, isBlackprintMode, + getZeitraum, getZeitraumStartAndEndDate, getZeitblock, getZeitauswahl, @@ -241,6 +260,7 @@ export const useZaehlstelleStore = defineStore("zaehlstelleStore", () => { setActiveTab, setFilteroptions, setFilteroptionsHistory, + setZeitraum, setZeitraumStartAndEndDate, setZeitblock, setZeitauswahl,