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 17:59:01 +00:00
parent 3b5fb7ff79
commit 033cd10e95
1 changed files with 43 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
whatsapp_bridge/ui/index.html
View File

@@ -1,75 +1,51 @@
<!DOCTYPE html> <script>
<html> // Wir nutzen relative Pfade (ohne führenden Slash),
<head> // damit Ingress den Pfad korrekt auflöst.
<meta charset="UTF-8"> async function update() {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> try {
<title>Bahmcloud Bridge Manager</title> const res = await fetch('api/status'); // Geändert von /api/status
<style> if (!res.ok) throw new Error('Network error');
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); } const data = await res.json();
h1 { color: #25D366; } const statusEl = document.getElementById('status');
.status-badge { display: inline-block; padding: 5px 15px; border-radius: 20px; font-weight: bold; margin: 10px 0; } const qrSection = document.getElementById('qr-section');
.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>
<div style="margin-top: 20px;"> if (data.isReady) {
<button class="btn btn-orange" onclick="cmd('/auth/logout', 'POST', 'Logout current account?')">📲 Change Account</button> statusEl.innerText = "CONNECTED ✅";
<button class="btn btn-red" onclick="cmd('/system/reset', 'DELETE', 'DELETE ALL DATA?')">⚠️ Factory Reset</button> statusEl.className = "status-badge connected";
</div> qrSection.style.display = "none";
<p id="msg" style="font-size: 12px; color: #888; margin-top: 10px;"></p> } else if (data.hasQr) {
</div> statusEl.innerText = "WAITING FOR SCAN 📱";
statusEl.className = "status-badge disconnected";
<script> qrSection.style.display = "block";
async function update() { document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}">`;
try { } else {
const res = await fetch('/api/status'); statusEl.innerText = "INITIALIZING...";
const data = await res.json(); qrSection.style.display = "none";
const statusEl = document.getElementById('status'); }
const qrSection = document.getElementById('qr-section'); } catch (e) {
console.error("Update failed", e);
if (data.isReady) { document.getElementById('status').innerText = "OFFLINE ❌";
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) {}
} }
}
async function cmd(url, method, msg) { async function cmd(url, method, msg) {
if (!confirm(msg)) return; if (!confirm(msg)) return;
document.getElementById('msg').innerText = "Working..."; document.getElementById('msg').innerText = "Working...";
const res = await fetch(url, { method });
// 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(); const data = await res.json();
alert(data.message); alert(data.message);
location.reload(); location.reload();
} catch (e) {
alert("Error: " + e.message);
} }
}
setInterval(update, 3000); setInterval(update, 3000);
update(); update();
</script> </script>
</body>
</html>