Add data_visualization/js/app.js

data_visualization/js/app.js

@@ -0,0 +1,86 @@
+import { getData, getImages } from './api.js';
+import { renderCharts, updateCharts } from './charts.js';
+import { renderGallery, updateGallery } from './gallery.js';
+
+/**
+ * Initialisiert die Applikation nach dem Fenster-Load-Ereignis.
+ * Lädt Umweltdaten und Bilddaten, initialisiert Diagramme und Gallerie.
+ */
+export async function initApp() {
+  try {
+    const [dataResponse, imageResponse] = await Promise.all([
+      getData(),
+      getImages()
+    ]);
+
+    if (Array.isArray(dataResponse)) {
+      renderCharts(dataResponse);
+    }
+    if (Array.isArray(imageResponse)) {
+      renderGallery(imageResponse);
+    }
+
+    setupFilterListeners();
+    setupAutoRefresh();
+  } catch (err) {
+    console.error('Fehler bei der Initialisierung der App:', err);
+  }
+}
+
+/**
+ * Aktualisiert die Datenanzeige bei Änderungen der Filter oder bei Auto-Refresh.
+ * @param {Object} filters - Zeitbereich und Sensorfilter.
+ */
+export async function refreshData(filters = {}) {
+  try {
+    const updatedData = await getData(filters);
+    if (Array.isArray(updatedData)) {
+      updateCharts(updatedData);
+    }
+  } catch (err) {
+    console.error('Fehler beim Aktualisieren der Daten:', err);
+  }
+}
+
+/**
+ * Setzt Event-Listener für UI-Filter.
+ * Filter senden z. B. Zeitraum- und Sensorparameter an refreshData().
+ */
+function setupFilterListeners() {
+  const filterForm = document.querySelector('#filter-form');
+  if (!filterForm) return;
+
+  filterForm.addEventListener('change', async () => {
+    const formData = new FormData(filterForm);
+    const filters = {
+      time_range: formData.get('time_range') || null,
+      sensor_id: formData.get('sensor_id') || null
+    };
+    await refreshData(filters);
+
+    try {
+      const updatedImages = await getImages({
+        start_time: filters.time_range?.split(',')[0] || null,
+        end_time: filters.time_range?.split(',')[1] || null
+      });
+      if (Array.isArray(updatedImages)) {
+        updateGallery(updatedImages);
+      }
+    } catch (e) {
+      console.error('Fehler beim Aktualisieren der Bilder:', e);
+    }
+  });
+}
+
+/**
+ * Setzt einen automatischen Refresh der Daten in regelmäßigen Abständen.
+ */
+function setupAutoRefresh() {
+  const REFRESH_INTERVAL = 60000; // 1 Minute
+  setInterval(() => {
+    refreshData();
+  }, REFRESH_INTERVAL);
+}
+
+// Initialisierung beim Laden des Fensters
+window.addEventListener('load', initApp);