Add data_visualization/js/app.js

data_visualization/js/app.js

@@ -0,0 +1,83 @@
+"use strict";
+
+/**
+ * Entry Script: Initialisierung der UI und Datenvisualisierung.
+ * Dieses Skript ist das Einstiegspunktmodul für die Anwendung.
+ * Es bindet UI-Ereignisse und startet den initialen Datenabruf.
+ */
+
+/**
+ * Ruft Messdaten von der API-Route /data ab.
+ * @async
+ * @returns {Promise<Array<Object>>} Array von Messobjekten
+ */
+async function fetchMeasurements() {
+  try {
+    const response = await fetch('/data');
+    if (!response.ok) throw new Error(`API error: ${response.status}`);
+    const data = await response.json();
+    return Array.isArray(data) ? data : [];
+  } catch (error) {
+    console.error('Fehler beim Laden der Messdaten:', error);
+    return [];
+  }
+}
+
+/**
+ * Rendert das Diagramm auf Basis der Messdaten.
+ * Placeholder-Funktion, die vom Visualisierungsmodul überschrieben werden kann.
+ * @param {Array<Object>} data Messobjekte
+ */
+function renderChart(data) {
+  const chartContainer = document.getElementById('chart-container');
+  if (!chartContainer) return;
+  chartContainer.textContent = `Gerenderte Datenpunkte: ${data.length}`;
+}
+
+/**
+ * Registriert UI-Eventhandler für Filter und Interaktionen.
+ * @returns {void}
+ */
+function bindUIEvents() {
+  const refreshBtn = document.getElementById('refresh-btn');
+  const sensorSelect = document.getElementById('sensor-select');
+  const timeRangeInput = document.getElementById('time-range');
+
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', async () => {
+      const data = await fetchMeasurements();
+      renderChart(data);
+    });
+  }
+
+  if (sensorSelect) {
+    sensorSelect.addEventListener('change', async () => {
+      const sensorId = sensorSelect.value;
+      const data = await fetchMeasurements();
+      const filtered = data.filter(d => d.sensorId === sensorId);
+      renderChart(filtered);
+    });
+  }
+
+  if (timeRangeInput) {
+    timeRangeInput.addEventListener('input', async () => {
+      const range = timeRangeInput.value;
+      const data = await fetchMeasurements();
+      const filtered = data.filter(d => d.timestamp >= range);
+      renderChart(filtered);
+    });
+  }
+}
+
+/**
+ * Initialisiert das UI und startet den initialen Datenabruf.
+ * Wird nach dem DOMContentLoaded Event aufgerufen.
+ * @returns {Promise<void>}
+ */
+async function initApp() {
+  bindUIEvents();
+  const data = await fetchMeasurements();
+  renderChart(data);
+}
+
+window.addEventListener('DOMContentLoaded', initApp);