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