bahmcloud/Whatsapp-Bridge-Addon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

whatsapp_bridge/ui/index.html aktualisiert

Browse Source
This commit is contained in:
René Bachmann
2026-04-15 18:18:53 +00:00
parent 9c5964147d
commit 1c656b87ed
1 changed files with 92 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
whatsapp_bridge/ui/index.html
View File

@@ -1,51 +1,98 @@
<script> <!DOCTYPE html>
// Wir nutzen relative Pfade (ohne führenden Slash), <html>
// damit Ingress den Pfad korrekt auflöst. <head>
async function update() { <meta charset="UTF-8">
try { <meta name="viewport" content="width=device-width, initial-scale=1.0">
const res = await fetch('api/status'); // Geändert von /api/status <title>Bahmcloud Bridge Manager</title>
if (!res.ok) throw new Error('Network error'); <style>
body { font-family: -apple-system, system-ui, sans-serif; background: #111; color: white; text-align: center; padding: 20px; }
const data = await res.json(); .card { background: #222; border-radius: 15px; padding: 25px; max-width: 400px; margin: 40px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid #333; }
const statusEl = document.getElementById('status'); h1 { color: #25D366; margin-bottom: 5px; }
const qrSection = document.getElementById('qr-section'); .status-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; font-weight: bold; margin: 15px 0; font-size: 14px; }
.connected { background: #25D366; color: black; }
.disconnected { background: #e74c3c; color: white; }
.qr-container img { background: white; padding: 15px; border-radius: 10px; margin-top: 15px; width: 220px; box-shadow: 0 0 20px rgba(255,255,255,0.1); }
.btn { display: block; width: 100%; padding: 12px; margin: 12px 0; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 14px; }
.btn-orange { background: #f39c12; color: white; }
.btn-orange:hover { background: #e67e22; }
.btn-red { background: #e74c3c; color: white; }
.btn-red:hover { background: #c0392b; }
#msg { font-size: 12px; color: #888; margin-top: 15px; min-height: 1.2em; }
</style>
</head>
<body>
<div class="card">
<h1>Bahmcloud Bridge</h1>
<p style="color: #666; font-size: 13px; margin-bottom: 20px;">WhatsApp Management Interface</p>
<div id="status" class="status-badge disconnected">Initialisiere...</div>
<div id="qr-section" class="qr-container" style="display:none;">
<p style="font-size: 14px;">Bitte QR-Code scannen:</p>
<div id="qr-code"></div>
</div>
if (data.isReady) { <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 10px;">
statusEl.innerText = "CONNECTED ✅"; <button class="btn btn-orange" onclick="cmd('auth/logout', 'POST', 'Möchtest du die aktuelle Nummer abmelden?')">📲 Account wechseln</button>
statusEl.className = "status-badge connected"; <button class="btn btn-red" onclick="cmd('system/reset', 'DELETE', 'ALLE Daten löschen und zurücksetzen?')">⚠️ Werkseinstellungen</button>
qrSection.style.display = "none"; </div>
} else if (data.hasQr) { <p id="msg"></p>
statusEl.innerText = "WAITING FOR SCAN 📱"; </div>
statusEl.className = "status-badge disconnected";
qrSection.style.display = "block"; <script>
document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`; // Erkennt den aktuellen Pfad (wichtig für HA Ingress)
} else { const getBaseUrl = () => {
statusEl.innerText = "INITIALIZING..."; const path = window.location.pathname;
qrSection.style.display = "none"; return path.endsWith('/') ? path : path + '/';
};
async function update() {
try {
const response = await fetch(getBaseUrl() + 'api/status');
const data = await response.json();
const statusEl = document.getElementById('status');
const qrSection = document.getElementById('qr-section');
if (data.isReady) {
statusEl.innerText = "VERBUNDEN ✅";
statusEl.className = "status-badge connected";
qrSection.style.display = "none";
} else if (data.hasQr) {
statusEl.innerText = "WARTE AUF SCAN 📱";
statusEl.className = "status-badge disconnected";
qrSection.style.display = "block";
document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
} else {
statusEl.innerText = "LADE CLIENT...";
qrSection.style.display = "none";
}
} catch (e) {
document.getElementById('status').innerText = "VERBINDUNG VERLOREN ❌";
document.getElementById('status').className = "status-badge disconnected";
} }
} catch (e) {
console.error("Update failed", e);
document.getElementById('status').innerText = "OFFLINE ❌";
} }
}
async function cmd(url, method, msg) { async function cmd(endpoint, method, confirmMsg) {
if (!confirm(msg)) return; if (!confirm(confirmMsg)) return;
document.getElementById('msg').innerText = "Working...";
const msgEl = document.getElementById('msg');
// Auch hier: Slash am Anfang entfernen für relative Pfade msgEl.innerText = "Befehl wird gesendet...";
const relativeUrl = url.startsWith('/') ? url.substring(1) : url;
try {
try { const res = await fetch(getBaseUrl() + endpoint, { method });
const res = await fetch(relativeUrl, { method }); const data = await res.json();
const data = await res.json(); alert(data.message);
alert(data.message); location.reload();
location.reload(); } catch (e) {
} catch (e) { alert("Fehler: " + e.message);
alert("Error: " + e.message); msgEl.innerText = "";
}
} }
}
setInterval(update, 3000); // Alle 3 Sekunden aktualisieren
update(); setInterval(update, 3000);
</script> update();
</script>
</body>
</html>