From 95a49db1871fba9bbfd03db6f77ab2eb121a100d Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Sun, 10 May 2026 02:07:40 +0000
Subject: [PATCH] Add data_visualization/js/app.js

---
 data_visualization/js/app.js | 68 ++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 data_visualization/js/app.js

diff --git a/data_visualization/js/app.js b/data_visualization/js/app.js
new file mode 100644
index 0000000..5895daf
--- /dev/null
+++ b/data_visualization/js/app.js
@@ -0,0 +1,68 @@
+import { fetchTelemetryData } from './api.js';
+import { renderCharts, updateCharts } from './charts.js';
+
+/**
+ * Globaler Applikationszustand
+ * @typedef {Object} AppState
+ * @property {Array<Object>} data - Geladene Telemetriedaten
+ * @property {Object} filters - Aktuelle Filtereinstellungen
+ * @property {string} filters.time_range - Zeitspanne
+ * @property {number|string} filters.ir_gain - IR-Gain-Wert
+ * @property {string} filters.material_type - Materialtyp
+ */
+
+/** @type {AppState} */
+let appState = {
+  data: [],
+  filters: {
+    time_range: 'all',
+    ir_gain: 'all',
+    material_type: 'all'
+  }
+};
+
+/**
+ * Initialisiert die Anwendung, lädt Daten und bindet Events.
+ */
+export async function initApp() {
+  try {
+    const data = await fetchTelemetryData(appState.filters);
+    appState.data = data || [];
+
+    renderCharts(appState.data);
+    attachEventListeners();
+  } catch (err) {
+    console.error('Fehler bei Initialisierung:', err);
+    const container = document.getElementById('chart-container');
+    if (container) {
+      container.innerHTML = '<p class="error-msg">Fehler beim Laden der Daten.</p>';
+    }
+  }
+}
+
+/**
+ * Bindet Event-Listener für Filteränderungen.
+ */
+export function attachEventListeners() {
+  const timeRangeInput = document.getElementById('filter-time-range');
+  const irGainInput = document.getElementById('filter-ir-gain');
+  const materialInput = document.getElementById('filter-material');
+
+  if (!timeRangeInput || !irGainInput || !materialInput) return;
+
+  [timeRangeInput, irGainInput, materialInput].forEach(el => {
+    el.addEventListener('change', async () => {
+      appState.filters = {
+        time_range: timeRangeInput.value,
+        ir_gain: irGainInput.value,
+        material_type: materialInput.value
+      };
+
+      const updatedData = await fetchTelemetryData(appState.filters);
+      appState.data = updatedData || [];
+      updateCharts(appState.data);
+    });
+  });
+}
+
+window.addEventListener('load', initApp);