feat: Erweiterung der Module für Geräte, Stockwerke und Racks mit grundlegenden Funktionen und Strukturen

2026-02-06 18:47:25 +01:00
parent 3ec3ad7fa5
commit 98a3f4d5b6
8 changed files with 943 additions and 8 deletions
--- a/app/assets/js/app.js
+++ b/app/assets/js/app.js
@@ -1 +1,122 @@
-// Globale JS-Funktionen, Initialisierung
+/**
+ * app/assets/js/app.js
+ *
+ * Zentrale JS-Datei für die Webanwendung
+ * - Initialisiert alle Module
+ * - SVG-Editor, Netzwerk-Ansicht, Drag & Drop, Floorplan
+ * - Event-Handler, globale Variablen
+ */
+
+// =========================
+// Global Variables / Config
+// =========================
+
+window.APP = {
+    deviceTypes: [],   // TODO: alle Gerätetypen laden
+    devices: [],       // TODO: alle Geräte laden
+    racks: [],         // TODO: alle Racks laden
+    floors: [],        // TODO: alle Floors laden
+    connections: [],   // TODO: alle Verbindungen laden
+};
+
+// =========================
+// Init Functions
+// =========================
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    console.log('App initialized');
+
+    // =========================
+    // SVG-Port-Editor initialisieren
+    // =========================
+    // TODO: import / init svg-editor.js
+    // if (window.SVGEditor) window.SVGEditor.init();
+
+    // =========================
+    // Netzwerk-Ansicht initialisieren
+    // =========================
+    // TODO: import / init network-view.js
+    // if (window.NetworkView) window.NetworkView.init();
+
+    // =========================
+    // Drag & Drop für Floors / Racks / Devices
+    // =========================
+    // TODO: init drag & drop logic
+
+    // =========================
+    // Event-Handler für Buttons / Forms
+    // =========================
+    initEventHandlers();
+});
+
+// =========================
+// Event Handler Setup
+// =========================
+
+function initEventHandlers() {
+
+    // TODO: Save-Button Device-Type
+    const saveDeviceTypeBtn = document.querySelector('#save-device-type');
+    if (saveDeviceTypeBtn) {
+        saveDeviceTypeBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // TODO: Save Device-Type via AJAX
+        });
+    }
+
+    // TODO: Save-Button Device
+    const saveDeviceBtn = document.querySelector('#save-device');
+    if (saveDeviceBtn) {
+        saveDeviceBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // TODO: Save Device via AJAX
+        });
+    }
+
+    // TODO: Save-Button Floor
+    const saveFloorBtn = document.querySelector('#save-floor');
+    if (saveFloorBtn) {
+        saveFloorBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // TODO: Save Floor via AJAX
+        });
+    }
+
+    // TODO: Save-Button Rack
+    const saveRackBtn = document.querySelector('#save-rack');
+    if (saveRackBtn) {
+        saveRackBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // TODO: Save Rack via AJAX
+        });
+    }
+
+    // TODO: Weitere Event-Handler (Löschen, Import, Export, Filter)
+}
+
+// =========================
+// Utility Functions
+// =========================
+
+/**
+ * AJAX Request Helper
+ * @param {string} url
+ * @param {object} data
+ * @param {function} callback
+ */
+function ajaxPost(url, data, callback) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.onload = function() {
+        if (xhr.status >= 200 && xhr.status < 300) {
+            callback(JSON.parse(xhr.responseText));
+        } else {
+            console.error('AJAX Error:', xhr.statusText);
+        }
+    };
+    xhr.send(JSON.stringify(data));
+}
+
+// TODO: weitere Utility-Funktionen (DOM-Helper, SVG-Helper, etc.)