From 78ec9fb291a883cf071f1f5b6c03ffb774c4a186 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 7 May 2025 12:16:17 +0200 Subject: [PATCH] =?UTF-8?q?style:=20Auswahlfarbe=20im=20DatePicker=20auf?= =?UTF-8?q?=20littwin-blue=20angepasst=20f=C3=BCr=20konsistentes=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoopMeasurementChart/DateRangePicker.tsx | 1 + .../meldungen/DateRangePickerMeldungen.tsx | 59 +++++++++++++++++++ config/webVersion.ts | 2 +- package-lock.json | 31 ++++++++++ package.json | 1 + pages/meldungen.tsx | 37 ++++-------- styles/globals.css | 14 +++++ 7 files changed, 118 insertions(+), 27 deletions(-) create mode 100644 components/main/meldungen/DateRangePickerMeldungen.tsx diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx index 3d5f218..b942dc2 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx @@ -1,3 +1,4 @@ +// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx import React, { useEffect } from "react"; import DatePicker from "react-datepicker"; import { useSelector, useDispatch } from "react-redux"; diff --git a/components/main/meldungen/DateRangePickerMeldungen.tsx b/components/main/meldungen/DateRangePickerMeldungen.tsx new file mode 100644 index 0000000..fd7f9fd --- /dev/null +++ b/components/main/meldungen/DateRangePickerMeldungen.tsx @@ -0,0 +1,59 @@ +// /components/main/meldungen/DateRangePickerMeldungen.tsx +import React from "react"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; + +type Props = { + fromDate: string; + toDate: string; + setFromDate: (val: string) => void; + setToDate: (val: string) => void; +}; + +const parseISO = (iso: string) => { + const [y, m, d] = iso.split("-").map(Number); + return new Date(y, m - 1, d); +}; + +const formatDate = (d: Date) => d.toLocaleDateString("sv-SE"); // YYYY-MM-DD + +const DateRangePickerMeldungen: React.FC = ({ + fromDate, + toDate, + setFromDate, + setToDate, +}) => { + return ( +
+
+ + date && setFromDate(formatDate(date))} + selectsStart + startDate={parseISO(fromDate)} + endDate={parseISO(toDate)} + maxDate={new Date()} + dateFormat="dd.MM.yyyy" + className="border px-2 py-1 rounded" + /> +
+ +
+ + date && setToDate(formatDate(date))} + selectsEnd + startDate={parseISO(fromDate)} + endDate={parseISO(toDate)} + maxDate={new Date()} + dateFormat="dd.MM.yyyy" + className="border px-2 py-1 rounded" + /> +
+
+ ); +}; + +export default DateRangePickerMeldungen; diff --git a/config/webVersion.ts b/config/webVersion.ts index b2061fc..f604516 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.386"; +const webVersion = "1.6.387"; export default webVersion; diff --git a/package-lock.json b/package-lock.json index a4b61a4..0f738d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "react-chartjs-2": "^5.3.0", "react-date-picker": "^11.0.0", "react-datepicker": "^8.0.0", + "react-day-picker": "^9.6.7", "react-dom": "^18.3.1", "react-modal": "^3.16.1", "react-redux": "^9.1.2", @@ -686,6 +687,11 @@ "ms": "^2.1.1" } }, + "node_modules/@date-fns/tz": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz", + "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==" + }, "node_modules/@floating-ui/core": { "version": "1.6.9", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", @@ -3579,6 +3585,11 @@ "url": "https://github.com/sponsors/kossnocorp" } }, + "node_modules/date-fns-jalali": { + "version": "4.1.0-0", + "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz", + "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==" + }, "node_modules/dayjs": { "version": "1.11.13", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", @@ -7294,6 +7305,26 @@ "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, + "node_modules/react-day-picker": { + "version": "9.6.7", + "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.6.7.tgz", + "integrity": "sha512-rCSt6X8FXQWpjykns/azRXjJk3cMSzkzGbDEXuEveFGNZgOjZULdJQ5wsu8Zfyo8ZgPBoYCBKQ5wRrgJfhJGbg==", + "dependencies": { + "@date-fns/tz": "1.2.0", + "date-fns": "4.1.0", + "date-fns-jalali": "4.1.0-0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/gpbl" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/package.json b/package.json index e56fe00..c232fe5 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-chartjs-2": "^5.3.0", "react-date-picker": "^11.0.0", "react-datepicker": "^8.0.0", + "react-day-picker": "^9.6.7", "react-dom": "^18.3.1", "react-modal": "^3.16.1", "react-redux": "^9.1.2", diff --git a/pages/meldungen.tsx b/pages/meldungen.tsx index d879de4..cfa508d 100644 --- a/pages/meldungen.tsx +++ b/pages/meldungen.tsx @@ -1,6 +1,7 @@ "use client"; // /pages/meldungen.tsx import React, { useState } from "react"; +import DateRangePickerMeldungen from "../components/main/meldungen/DateRangePickerMeldungen"; type Meldung = { t: string; @@ -47,15 +48,11 @@ export default function Messages() { try { const res = await fetch(url); const raw = await res.json(); - console.log("URL:", url); - console.log("Daten vom Server:", raw); - const data = Array.isArray(raw) ? raw : raw.data; if (!Array.isArray(data)) { console.error("Die empfangenen Daten sind kein Array:", data); return; } - setMessages(data); setCurrentPage(1); } catch (err) { @@ -73,28 +70,16 @@ export default function Messages() {

Berichte

-
-
- - setFromDate(e.target.value)} - className="border px-2 py-1 rounded" - /> -
-
- - setToDate(e.target.value)} - className="border px-2 py-1 rounded" - /> -
+
+ @@ -139,7 +124,7 @@ export default function Messages() { @@ -151,7 +136,7 @@ export default function Messages() { setCurrentPage((prev) => Math.min(prev + 1, totalPages)) } disabled={currentPage === totalPages} - className="bg-littwin-blue text-white px-4 py-2 rounded " + className="bg-littwin-blue text-white px-4 py-2 rounded" > Weiter diff --git a/styles/globals.css b/styles/globals.css index 9dc9b5e..8553c7b 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -43,3 +43,17 @@ body { border: 1px solid #ccc; /* Optional: heller Rahmen */ } } + +.react-datepicker__day--selected, +.react-datepicker__day--keyboard-selected { + background-color: var(--littwin-blue) !important; + color: white !important; +} + +.react-datepicker__day--selected:hover { + background-color: #0095cc !important; /* dunklere Version von Littwin-Blau */ +} + +.react-datepicker__day--today { + border: 1px solid var(--littwin-blue); +}