Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Analogeingänge (Messwerteingänge) Modal

Browse Source
This commit is contained in:
ISA
2025-08-14 10:20:33 +02:00
parent 2db9da2394
commit bb68327604
7 changed files with 87 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.716 NEXT_PUBLIC_APP_VERSION=1.6.717
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.716 NEXT_PUBLIC_APP_VERSION=1.6.717
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.717] – 2025-08-14
- feat: close button and maximize modal
---
## [1.6.716] – 2025-08-14 ## [1.6.716] – 2025-08-14
- Messkurve Modal in Messwerteingänge - Messkurve Modal in Messwerteingänge

110
components/main/analogInputs/AnalogInputsChart.tsx
View File

@@ -3,6 +3,7 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "@/redux/store"; import { RootState, AppDispatch } from "@/redux/store";
import { Dialog } from "@headlessui/react";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { import {
Chart as ChartJS, Chart as ChartJS,
@@ -106,7 +107,7 @@ export default function AnalogInputsChart({
setLocalZeitraum(zeitraum); setLocalZeitraum(zeitraum);
}, [vonDatumRedux, bisDatumRedux, zeitraum]); }, [vonDatumRedux, bisDatumRedux, zeitraum]);
// Initiale Default-Werte: 30 Tage zurück // Initiale Default-Werte: 30 Tage zurück (nur wenn Redux-Werte fehlen)
useEffect(() => { useEffect(() => {
if (!vonDatumRedux || !bisDatumRedux) { if (!vonDatumRedux || !bisDatumRedux) {
const today = new Date(); const today = new Date();
@@ -117,7 +118,7 @@ export default function AnalogInputsChart({
setLocalVonDatum(fromDate); setLocalVonDatum(fromDate);
setLocalBisDatum(toDate); setLocalBisDatum(toDate);
} }
}, []); }, [vonDatumRedux, bisDatumRedux]);
// ✅ Nur lokale Änderung beim Picker // ✅ Nur lokale Änderung beim Picker
const handleDateChange = (from: string, to: string) => { const handleDateChange = (from: string, to: string) => {
@@ -276,6 +277,7 @@ export default function AnalogInputsChart({
const memoizedChartOptions = React.useMemo(() => { const memoizedChartOptions = React.useMemo(() => {
return { return {
responsive: true, responsive: true,
maintainAspectRatio: false,
plugins: { plugins: {
legend: { position: "top" as const }, legend: { position: "top" as const },
tooltip: { tooltip: {
@@ -360,57 +362,68 @@ export default function AnalogInputsChart({
}, []); }, []);
return ( return (
<div className={`flex flex-col gap-3 ${loading ? "cursor-wait" : ""}`}> <div
<div className="flex flex-wrap items-center gap-4 mb-2"> className={`flex flex-col gap-2 h-full ${loading ? "cursor-wait" : ""}`}
{/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */} >
<AnalogInputsDatePicker <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
from={localVonDatum} <div className="flex justify-start">
to={localBisDatum} <Dialog.Title className="text-lg font-semibold text-gray-700">
onChange={handleDateChange} Eingang {selectedId ?? "–"}
/> </Dialog.Title>
</div>
<div className="flex justify-end">
<div className="flex flex-wrap items-center gap-4 mb-2">
{/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */}
<AnalogInputsDatePicker
from={localVonDatum}
to={localBisDatum}
onChange={handleDateChange}
/>
{/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */} {/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
<Listbox value={localZeitraum} onChange={setLocalZeitraum}> <Listbox value={localZeitraum} onChange={setLocalZeitraum}>
<div className="relative w-48"> <div className="relative w-48">
<Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm"> <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
<span> <span>
{localZeitraum === "DIA0" {localZeitraum === "DIA0"
? "Alle Messwerte" ? "Alle Messwerte"
: localZeitraum === "DIA1" : localZeitraum === "DIA1"
? "Stündlich" ? "Stündlich"
: "Täglich"} : "Täglich"}
</span> </span>
<i className="bi bi-chevron-down text-gray-400" /> <i className="bi bi-chevron-down text-gray-400" />
</Listbox.Button> </Listbox.Button>
<Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm"> <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
{["DIA0", "DIA1", "DIA2"].map((option) => ( {["DIA0", "DIA1", "DIA2"].map((option) => (
<Listbox.Option <Listbox.Option
key={option} key={option}
value={option} value={option}
className="px-4 py-1 cursor-pointer hover:bg-gray-200" className="px-4 py-1 cursor-pointer hover:bg-gray-200"
> >
{option === "DIA0" {option === "DIA0"
? "Alle Messwerte" ? "Alle Messwerte"
: option === "DIA1" : option === "DIA1"
? "Stündlich" ? "Stündlich"
: "Täglich"} : "Täglich"}
</Listbox.Option> </Listbox.Option>
))} ))}
</Listbox.Options> </Listbox.Options>
</div>
</Listbox>
{/* ✅ Button: lädt die Daten & aktualisiert Redux */}
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
>
Daten laden
</button>
</div> </div>
</Listbox> </div>
{/* ✅ Button: lädt die Daten & aktualisiert Redux */}
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
>
Daten laden
</button>
</div> </div>
{/* Chart-Anzeige */} {/* Chart-Anzeige */}
<div className="h-[50vh] w-full"> <div className="flex-1 min-h-0 w-full">
{!selectedAnalogInput?.id ? ( {!selectedAnalogInput?.id ? (
<div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2"> <div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2">
<i className="bi bi-info-circle text-2xl mr-2" /> <i className="bi bi-info-circle text-2xl mr-2" />
@@ -423,6 +436,7 @@ export default function AnalogInputsChart({
ref={chartRef} ref={chartRef}
data={memoizedChartData} data={memoizedChartData}
options={memoizedChartOptions} options={memoizedChartOptions}
style={{ height: "100%", width: "100%" }}
/> />
)} )}
</div> </div>

20
components/main/analogInputs/AnalogInputsChartModal.tsx
View File

@@ -91,16 +91,26 @@ export default function AnalogInputsChartModal({
</button> </button>
</div> </div>
{/* Title */} {/* Title row (align like IsoChartView) */}
<div className="flex items-center justify-between mb-3 pr-14"> <div className="flex justify-between items-center mb-2 pr-24">
<Dialog.Title className="text-lg font-semibold text-gray-700"> <Dialog.Title className="text-lg font-semibold text-gray-700">
Messkurve Messwerteingang {selectedId ?? "–"} Messkurve Messwerteingang {selectedId ?? "–"}
</Dialog.Title> </Dialog.Title>
</div> </div>
{/* Chart */} {/* Chart container (structure similar to IsoChartView) */}
<div className="flex-1 min-h-0"> <div
<AnalogInputsChart loading={loading} setLoading={setLoading} /> style={{
flex: 1,
display: "flex",
flexDirection: "column",
height: "90%",
}}
>
{/* Optional: place an action bar here if needed */}
<div style={{ flex: 1, height: "90%" }}>
<AnalogInputsChart loading={loading} setLoading={setLoading} />
</div>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.716", "version": "1.6.717",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.716", "version": "1.6.717",
"dependencies": { "dependencies": {
"@fontsource/roboto": "^5.1.0", "@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.4",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.716", "version": "1.6.717",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",