style: Auswahlfarbe im DatePicker auf littwin-blue angepasst für konsistentes UI
This commit is contained in:
ISA
@@ -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";
|
||||
|
||||
59
components/main/meldungen/DateRangePickerMeldungen.tsx
Normal file
59
components/main/meldungen/DateRangePickerMeldungen.tsx
Normal file
@@ -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<Props> = ({
|
||||
fromDate,
|
||||
toDate,
|
||||
setFromDate,
|
||||
setToDate,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex space-x-4 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<label className="text-sm font-semibold">Von</label>
|
||||
<DatePicker
|
||||
selected={parseISO(fromDate)}
|
||||
onChange={(date) => 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<label className="text-sm font-semibold">Bis</label>
|
||||
<DatePicker
|
||||
selected={parseISO(toDate)}
|
||||
onChange={(date) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePickerMeldungen;
|
||||
@@ -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;
|
||||
|
||||
31
package-lock.json
generated
31
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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() {
|
||||
<div className="p-4">
|
||||
<h1 className="text-xl font-bold mb-4">Berichte</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mb-4 items-end">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Von Datum</label>
|
||||
<input
|
||||
type="date"
|
||||
value={fromDate}
|
||||
onChange={(e) => setFromDate(e.target.value)}
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Bis Datum</label>
|
||||
<input
|
||||
type="date"
|
||||
value={toDate}
|
||||
onChange={(e) => setToDate(e.target.value)}
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-6 mb-6 items-end">
|
||||
<DateRangePickerMeldungen
|
||||
fromDate={fromDate}
|
||||
toDate={toDate}
|
||||
setFromDate={setFromDate}
|
||||
setToDate={setToDate}
|
||||
/>
|
||||
<button
|
||||
onClick={fetchMessages}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded "
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded h-fit"
|
||||
>
|
||||
Anzeigen
|
||||
</button>
|
||||
@@ -139,7 +124,7 @@ export default function Messages() {
|
||||
<button
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded "
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded"
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
@@ -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
|
||||
</button>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user