feat: implement modal chart system with conditional UI and message filtering

- Add automatic data loading on IsoChartView modal open with timeout to prevent infinite loops
- Implement conditional UI visibility in IsoChartActionBar using CSS visibility property
- Create stable layout where controls reserve space when hidden (DatePicker, DIA dropdown, "Daten laden" button)
- Add Report.tsx component with precise CableLine filtering using exact string matching
- Enhance message filtering with debug logging and fallback identifier support
- Integrate chartTitle state management for seamless switching between "Messkurve" and "Meldungen"
- Add useIsoDataLoader hook for automatic chart data loading without user interaction
- Implement enhanced filtering logic to prevent false matches (CableLine1 vs CableLine16)
- Style Report component with consistent table layout matching MeldungenView design
- Add visual filter indicators and improved error messaging for better UX

Technical improvements:
- Replace conditional rendering with visibility control to maintain layout stability
- Add comprehensive logging for debugging message source filtering
- Implement proper cleanup for timeouts to prevent memory leaks
- Use exact string matching and prefix validation for precise slot identification
This commit is contained in:
ISA
2025-07-31 16:02:04 +02:00
parent 63e1b85a44
commit e86de5cefe
6 changed files with 32 additions and 13 deletions

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.668 NEXT_PUBLIC_APP_VERSION=1.6.669
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)

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.668 NEXT_PUBLIC_APP_VERSION=1.6.669
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

View File

@@ -1,3 +1,8 @@
## [1.6.669] 2025-07-31
- feat: Meldungen in in Iso Chart
---
## [1.6.668] 2025-07-31 ## [1.6.668] 2025-07-31
- feat: implement chart modal with report functionality for cable monitoring - feat: implement chart modal with report functionality for cable monitoring

View File

@@ -264,11 +264,21 @@ const IsoChartActionBar: React.FC = () => {
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{/* DateRangePicker - nur bei Messkurve anzeigen */} {/* DateRangePicker - Platz reservieren, aber ausblenden wenn Meldungen */}
{chartTitle === "Messkurve" && <DateRangePicker />} <div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
>
<DateRangePicker />
</div>
{/* DIA0-DIA2 Dropdown - nur bei Messkurve anzeigen */} {/* DIA0-DIA2 Dropdown - Platz reservieren, aber ausblenden wenn Meldungen */}
{chartTitle === "Messkurve" && ( <div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
>
<Listbox <Listbox
value={selectedMode} value={selectedMode}
onChange={(value) => { onChange={(value) => {
@@ -326,7 +336,7 @@ const IsoChartActionBar: React.FC = () => {
</Listbox.Options> </Listbox.Options>
</div> </div>
</Listbox> </Listbox>
)} </div>
{/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */} {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */}
<Listbox <Listbox
@@ -370,15 +380,19 @@ const IsoChartActionBar: React.FC = () => {
</div> </div>
</Listbox> </Listbox>
{/* Daten laden Button - nur bei Messkurve anzeigen */} {/* Daten laden Button - Platz reservieren, aber ausblenden wenn Meldungen */}
{chartTitle === "Messkurve" && ( <div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
>
<button <button
onClick={handleFetchData} onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm" className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
> >
Daten laden Daten laden
</button> </button>
)} </div>
{/* Loading Indicator - nur bei Messkurve anzeigen */} {/* Loading Indicator - nur bei Messkurve anzeigen */}
{chartTitle === "Messkurve" && isLoading && ( {chartTitle === "Messkurve" && isLoading && (

4
package-lock.json generated
View File

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

View File

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