feat: Zeitraum einstellbar in AnalogInputsChart mit Zoom- und Pan-Funktion umgesetzt

docs/TODO.md

@@ -10,3 +10,5 @@
 - [ ] System: Button bei jedem Messwert für Detailansicht (inkl. Kurve im Popup und Zeitauswahl)
 - [ ] Einstellungen – Benutzerverwaltung: Admin kann Adminpasswort ändern
 - [ ] Einstellungen – OPC: Anzahl der aktuellen Clients (ggf. KAS-Variable einbauen)
+
+  ![Zusatzfunktionen Kai 25.06.2025](./TODOsScreenshots/Zusatzfunktionen_25-06-2025.png)

docs/components/main/analogInputs/AnalogInputsChart.md

@@ -0,0 +1,51 @@
+<!-- /docs/components/main/analogInputs/AnalogInputsChart.md -->
+
+# 📈 AnalogInputsChart
+
+Die Komponente `AnalogInputsChart` zeigt den Verlauf der Messwerte für einen ausgewählten analogen Eingang an. Sie nutzt `react-chartjs-2` mit `chart.js` (inkl. TimeScale).
+
+---
+
+## ⚙️ Funktion
+
+- Ruft über `Redux Thunk` die Historie der analogen Eingänge ab
+- Zeigt eine Liniendiagramm-Kurve mit Zeit auf der X-Achse und Messwerten auf der Y-Achse
+- Berücksichtigt die Auswahl des Messwerteingangs (`selectedId`)
+
+---
+
+## 🧩 Feature-Flag: Zoom & Pan
+
+Der Zoom- und Pan-Modus (interaktives Scrollen/Ziehen im Chart) wird über ein Feature-Flag gesteuert:
+
+```env
+NEXT_PUBLIC_FEATURE_MESSWERTANZEIGE_EINGANG=true
+```
+
+### Verhalten:
+
+- Wenn `true`: Nutzer kann in das Zeitfenster hineinzoomen und sich bewegen (pan).
+- Wenn `false`: Chart ist statisch und nur lesbar.
+
+### Technisch:
+
+- `chartjs-plugin-zoom` wird **dynamisch nur im Browser** geladen
+- Die Optionen für `zoom` und `pan` werden nur gesetzt, wenn das Flag aktiv ist
+
+---
+
+## 📦 Technologien
+
+- `react-chartjs-2`
+- `chart.js` mit `TimeScale`
+- `chartjs-plugin-zoom` (lazy import)
+- `redux` & `thunks` für Daten
+- `date-fns` mit deutscher Lokalisierung
+
+---
+
+## 🔍 Hinweise
+
+- Der Messwert-Key wird berechnet als `selectedId + 99`, da Backend-Daten mit Key `99`, `100`, usw. zurückkommen.
+- Wenn keine Daten vorhanden sind, wird ein entsprechender Hinweis angezeigt.
+- Farbschema nutzt `getColor("littwin-blue")` aus den Projektfarben.

docs/components/main/analogInputs/AnalogInputsSettingsModal.md

@@ -0,0 +1,70 @@
+<!-- /docs/components/main/analogInputs/AnalogInputsSettingsModal.md -->
+
+# ⚙️ AnalogInputsSettingsModal
+
+Diese Komponente zeigt ein zentriertes Modal zur Konfiguration eines analogen Eingangs.
+
+---
+
+## 🧩 Funktion
+
+- Wird angezeigt, wenn `isOpen` true ist und ein `selectedInput` gesetzt ist.
+- Zeigt alle relevanten Felder zur Konfiguration:
+  - **Bezeichnung**
+  - **Offset** (z. B. für Kalibrierung)
+  - **Faktor** (Multiplikator)
+  - **Einheit** (Dropdown: V, mA, °C, bar, %)
+  - **Loggerintervall** (in Minuten)
+
+---
+
+## ✏️ Verwendung
+
+```tsx
+<AnalogInputSettingsModal
+  selectedInput={input}
+  isOpen={modalOpen}
+  onClose={() => setModalOpen(false)}
+/>
+```
+
+---
+
+## 💾 Speichern-Logik
+
+Beim Klick auf „Speichern“ werden die Einstellungen auf zwei verschiedene Arten verarbeitet:
+
+### 🔧 Entwicklungsmodus (`localhost`):
+
+- Daten werden per POST an die lokale API gesendet:  
+  `/api/cpl/updateAnalogInputsSettingsHandler`
+- Die Datenstruktur orientiert sich an `window.win_analogInputs*` Variablen
+
+### 🚀 Produktionsmodus:
+
+- Daten werden über einen GET-Request mit URL-Parametern an ein CGI-Backend übermittelt:
+  `/CPL?/Service/ae.ACP&ACN{slot}=...&ACO{slot}=...`
+
+---
+
+## 🧪 Besonderheiten
+
+- Werte wie `offset` und `factor` werden als String mit `,` oder `.` akzeptiert und korrekt konvertiert.
+- Eingabefelder sind per `useState` gebunden.
+- Ein `console.log` zeigt `loggerInterval`, wenn `selectedInput` geladen wird.
+- Nach erfolgreichem Speichern wird die Seite neu geladen (`location.reload()`), um aktuelle Werte anzuzeigen.
+
+---
+
+## 🛑 Validierung
+
+- Aktuell keine Validierung gegen ungültige Werte (z. B. negatives Intervall oder leere Felder).
+- Sollte ggf. ergänzt werden, wenn das Backend empfindlich auf falsche Werte reagiert.
+
+---
+
+## 🖼️ UI/UX
+
+- Modal ist zentriert mit dunklem Overlay.
+- Abbrechen über „X“-Button oben rechts.
+- Tailwind CSS für Layout und Styling verwendet.

docs/components/main/analogInputs/AnalogInputsTable.md

@@ -0,0 +1,52 @@
+<!-- /docs/components/main/analogInputs/AnalogInputsTable.md -->
+
+# 🧮 AnalogInputsTable
+
+Die Komponente `AnalogInputsTable` zeigt eine Tabelle mit allen verfügbaren analogen Eingängen an, einschließlich Messwert, Einheit und Bezeichnung.
+
+---
+
+## ⚙️ Funktion
+
+- Ruft beim Laden die Liste der analogen Eingänge aus dem Redux-Store über `getAnalogInputsThunk()` ab.
+- Zeigt alle Eingänge in einer Tabelle mit folgenden Spalten:
+  - Eingang (ID)
+  - Messwert
+  - Einheit
+  - Bezeichnung
+  - Aktion (Zahnrad-Icon zur Konfiguration)
+
+---
+
+## 🔄 Interaktion
+
+- Beim Klick auf eine Tabellenzeile:
+  - Wird der Eingang als aktiv markiert (`activeId`)
+  - `setSelectedId` wird gesetzt → z. B. für Diagrammanzeige
+- Beim Klick auf das ⚙️-Icon:
+  - `setSelectedInput` wird mit dem aktuellen Objekt befüllt
+  - Das Einstellungs-Modal (`AnalogInputsSettingsModal`) wird geöffnet
+
+---
+
+## 📦 Technologien
+
+- `react-redux` für Zustand und Datenabruf
+- `@iconify/react` für Icons (z. B. `mdi/waveform`, `mdi/settings`)
+- Tailwind CSS für Styling und Layout
+- Typ `AnalogInput` zur Definition der Eingangsdatenstruktur
+
+---
+
+## 🧪 Besonderheiten
+
+- `unit` ist optional – wird als `"-"` angezeigt, wenn nicht vorhanden
+- Die Auswahlfarbe der Zeile (hellblau) zeigt den aktiven Eingang an
+- Mobilfreundlich durch `overflow-x-auto` und responsives Tailwind-Layout
+
+---
+
+## 🔍 Hinweise
+
+- Die `label`-, `value`- und `unit`-Werte stammen direkt aus dem Redux-State `analogInputs`
+- Eingänge ohne `id` oder `label` werden gefiltert

docs/components/main/analogInputs/README.md

@@ -0,0 +1,60 @@
+<!-- /docs/components/main/analogInputs/README.md -->
+
+# 📂 Komponentenübersicht: Analoge Eingänge
+
+Dieses Verzeichnis enthält alle React-Komponenten zur Visualisierung und Konfiguration der analogen Eingänge im System.
+
+---
+
+## 📋 Übersicht der Komponenten
+
+### 1. [`AnalogInputsTable`](./AnalogInputsTable.md)
+
+Zeigt eine tabellarische Übersicht aller analogen Eingänge mit Messwert, Einheit und Bezeichnung.
+
+- Auswahl eines Eingangs durch Klick
+- Öffnet Einstellungen per Zahnrad-Icon
+- Nutzt Redux für Datenabruf
+
+➡️ Dokumentation: [AnalogInputsTable.md](./AnalogInputsTable.md)
+
+---
+
+### 2. [`AnalogInputsChart`](./AnalogInputsChart.md)
+
+Zeigt den zeitlichen Verlauf eines Messwerteingangs im Liniendiagramm.
+
+- Zoom & Pan steuerbar über Feature-Flag `NEXT_PUBLIC_FEATURE_MESSWERTANZEIGE_EINGANG`
+- Chart.js mit Zeitachse (TimeScale)
+- Daten aus Redux-State
+
+➡️ Dokumentation: [AnalogInputsChart.md](./AnalogInputsChart.md)
+
+---
+
+### 3. [`AnalogInputsSettingsModal`](./AnalogInputsSettingsModal.md)
+
+Modal zur Bearbeitung eines analogen Eingangs (Label, Offset, Faktor, Einheit, Speicherintervall).
+
+- Werte werden lokal oder über API/CGI gespeichert
+- Dynamische Anzeige der aktuellen Einstellungen
+- Eingaben mit `useState` gebunden
+
+➡️ Dokumentation: [AnalogInputsSettingsModal.md](./AnalogInputsSettingsModal.md)
+
+---
+
+## 🧩 Technologien
+
+- React & Redux
+- Chart.js / react-chartjs-2
+- Tailwind CSS
+- Iconify
+- API-Anbindung & lokale Mockdaten
+
+---
+
+## 🗂️ Speicherort
+
+Pfad: `/components/main/analogInputs/`  
+Dokumentation: `/docs/components/main/analogInputs/`