From 033cd10e9520948219385b349b0f931a9808fe00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Bachmann?= <bahmcloud@noreply.localhost>
Date: Wed, 15 Apr 2026 17:59:01 +0000
Subject: [PATCH] whatsapp_bridge/ui/index.html aktualisiert

---
 whatsapp_bridge/ui/index.html | 110 +++++++++++++---------------------
 1 file changed, 43 insertions(+), 67 deletions(-)
diff --git a/whatsapp_bridge/ui/index.html b/whatsapp_bridge/ui/index.html
index 7254107..2ed1df5 100644
--- a/whatsapp_bridge/ui/index.html
+++ b/whatsapp_bridge/ui/index.html
@@ -1,75 +1,51 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bahmcloud Bridge Manager</title>
-    <style>
-        body { font-family: sans-serif; background: #111; color: white; text-align: center; padding: 20px; }
-        .card { background: #222; border-radius: 15px; padding: 20px; max-width: 400px; margin: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
-        h1 { color: #25D366; }
-        .status-badge { display: inline-block; padding: 5px 15px; border-radius: 20px; font-weight: bold; margin: 10px 0; }
-        .connected { background: #25D366; color: black; }
-        .disconnected { background: #e74c3c; color: white; }
-        .qr-container img { background: white; padding: 10px; border-radius: 10px; margin-top: 15px; width: 200px; }
-        .btn { display: block; width: 100%; padding: 12px; margin: 10px 0; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; }
-        .btn-orange { background: #e67e22; color: white; }
-        .btn-red { background: #c0392b; color: white; }
-        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>WhatsApp Bridge</h1>
-        <div id="status" class="status-badge disconnected">Checking...</div>
-        
-        <div id="qr-section" class="qr-container" style="display:none;">
-            <p>Scan this QR Code:</p>
-            <div id="qr-code"></div>
-        </div>
+<script>
+    // Wir nutzen relative Pfade (ohne führenden Slash), 
+    // damit Ingress den Pfad korrekt auflöst.
+    async function update() {
+        try {
+            const res = await fetch('api/status'); // Geändert von /api/status
+            if (!res.ok) throw new Error('Network error');
+            
+            const data = await res.json();
+            const statusEl = document.getElementById('status');
+            const qrSection = document.getElementById('qr-section');
 
-        <div style="margin-top: 20px;">
-            <button class="btn btn-orange" onclick="cmd('/auth/logout', 'POST', 'Logout current account?')">📲 Change Account</button>
-            <button class="btn btn-red" onclick="cmd('/system/reset', 'DELETE', 'DELETE ALL DATA?')">⚠️ Factory Reset</button>
-        </div>
-        <p id="msg" style="font-size: 12px; color: #888; margin-top: 10px;"></p>
-    </div>
-
-    <script>
-        async function update() {
-            try {
-                const res = await fetch('/api/status');
-                const data = await res.json();
-                const statusEl = document.getElementById('status');
-                const qrSection = document.getElementById('qr-section');
-
-                if (data.isReady) {
-                    statusEl.innerText = "CONNECTED ✅";
-                    statusEl.className = "status-badge connected";
-                    qrSection.style.display = "none";
-                } else if (data.hasQr) {
-                    statusEl.innerText = "WAITING FOR SCAN 📱";
-                    statusEl.className = "status-badge disconnected";
-                    qrSection.style.display = "block";
-                    document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
-                } else {
-                    statusEl.innerText = "INITIALIZING...";
-                    qrSection.style.display = "none";
-                }
-            } catch (e) {}
+            if (data.isReady) {
+                statusEl.innerText = "CONNECTED ✅";
+                statusEl.className = "status-badge connected";
+                qrSection.style.display = "none";
+            } else if (data.hasQr) {
+                statusEl.innerText = "WAITING FOR SCAN 📱";
+                statusEl.className = "status-badge disconnected";
+                qrSection.style.display = "block";
+                document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
+            } else {
+                statusEl.innerText = "INITIALIZING...";
+                qrSection.style.display = "none";
+            }
+        } catch (e) {
+            console.error("Update failed", e);
+            document.getElementById('status').innerText = "OFFLINE ❌";
         }
+    }
 
-        async function cmd(url, method, msg) {
-            if (!confirm(msg)) return;
-            document.getElementById('msg').innerText = "Working...";
-            const res = await fetch(url, { method });
+    async function cmd(url, method, msg) {
+        if (!confirm(msg)) return;
+        document.getElementById('msg').innerText = "Working...";
+        
+        // Auch hier: Slash am Anfang entfernen für relative Pfade
+        const relativeUrl = url.startsWith('/') ? url.substring(1) : url;
+        
+        try {
+            const res = await fetch(relativeUrl, { method });
             const data = await res.json();
             alert(data.message);
             location.reload();
+        } catch (e) {
+            alert("Error: " + e.message);
         }
+    }
 
-        setInterval(update, 3000);
-        update();
-    </script>
-</body>
-</html>
\ No newline at end of file
+    setInterval(update, 3000);
+    update();
+</script>
\ No newline at end of file
