Files
ExoMy_Cuno/ExoMy_Software-master/gui/admin.html
T

600 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CUNO // Admin</title>
<style>
:root {
--bg: #05080F;
--pri: #0088FF;
--sec: #FF8C00;
--ok: #00ff91;
--txt: rgba(0,255,145,.8);
--txt2: rgba(0,210,130,.38);
--mono: "Consolas","Cascadia Code","Cascadia Mono","Courier New",monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
font-family:var(--mono);
background-color:var(--bg);
background-image:
linear-gradient(rgba(0,255,145,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,145,.04) 1px, transparent 1px);
background-size:32px 32px;
color:var(--txt);
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
}
/* ── HEADER ─────────────────────────────────────── */
header {
height:52px;
background:linear-gradient(135deg, #060D1A 0%, #0C1C38 100%);
border-bottom:2px solid var(--pri);
box-shadow:0 2px 24px rgba(0,136,255,.28);
display:flex;
align-items:center;
padding:0 16px;
gap:14px;
flex-shrink:0;
z-index:10;
}
.hdr-icon { width:32px; height:32px; flex-shrink:0; }
.hdr-title { font-weight:700; font-size:14px; color:#fff; letter-spacing:5px; text-transform:uppercase; white-space:nowrap; }
.hdr-title em { font-style:normal; color:var(--pri); }
.hdr-div { width:1px; height:28px; background:rgba(255,255,255,.12); flex-shrink:0; }
.hdr-badge { font-size:7px; color:var(--pri); border:1px solid rgba(0,136,255,.5); padding:2px 8px; letter-spacing:2.5px; text-transform:uppercase; white-space:nowrap; }
.hdr-gap { flex:1; }
.hdr-status { font-size:8px; color:rgba(0,255,145,.55); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.hdr-back { color:rgba(0,255,145,.45); text-decoration:none; font-size:8px; letter-spacing:2px; text-transform:uppercase; }
.hdr-back:hover { color:rgba(0,255,145,.8); }
.hdr-clk { display:flex; flex-direction:column; align-items:flex-end; }
.hdr-clk-lbl { font-size:7px; color:rgba(255,255,255,.35); letter-spacing:2px; text-transform:uppercase; }
.hdr-clk-val { font-weight:700; font-size:14px; color:#fff; letter-spacing:3px; line-height:1.1; }
/* ── PANEL ──────────────────────────────────────── */
.panel {
position:relative;
background:
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/1px 14px no-repeat,
#070D18;
border:1px solid rgba(0,255,145,.1);
box-shadow:0 0 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,255,145,.018);
}
.p-hdr {
display:flex; align-items:center; gap:7px;
padding:7px 12px;
border-bottom:1px solid rgba(0,255,145,.08);
background:linear-gradient(90deg, rgba(0,255,145,.05) 0%, transparent 100%);
}
.p-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); flex-shrink:0; }
.p-lbl { font-size:8px; letter-spacing:3px; color:rgba(0,255,145,.7); text-transform:uppercase; font-weight:bold; }
.p-tag { margin-left:auto; font-size:7px; color:rgba(0,255,145,.25); letter-spacing:1px; }
/* ── STATUS ROWS ────────────────────────────────── */
.sr { display:flex; align-items:center; padding:4px 10px; gap:7px; border-bottom:1px solid rgba(0,255,145,.04); transition:background .1s; }
.sr:last-child { border-bottom:none; }
.sr:hover { background:rgba(0,255,145,.02); }
.sr-led { width:6px; height:6px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,255,145,.15); background:#0a1408; }
.sr-led.led-ok { background:#00ff91; border-color:#00ff91; box-shadow:0 0 5px #00ff91, 0 0 12px rgba(0,255,145,.55); }
.sr-led.led-warn { background:#FF8C00; border-color:#FF8C00; box-shadow:0 0 5px #FF8C00, 0 0 12px rgba(255,140,0,.5); }
.sr-led.led-blue { background:#0088FF; border-color:#0088FF; box-shadow:0 0 5px #0088FF, 0 0 12px rgba(0,136,255,.5); }
.sr-led.led-off { background:#0d1208; border-color:rgba(0,255,145,.08); box-shadow:none; }
.sr-key { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:60px; flex-shrink:0; }
.sr-val { font-size:9px; font-weight:700; letter-spacing:.8px; margin-left:auto; color:rgba(0,255,145,.85); text-align:right; }
/* ── SERVICE STATE ──────────────────────────────── */
.state_active { color:#00ff91; }
.state_inactive { color:#FF3333; }
.state_unknown { color:#FF8C00; }
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:.1} }
/* ── SECTION DIVIDER ────────────────────────────── */
.ss-hdr {
display:flex; align-items:center; gap:7px;
padding:5px 10px 4px;
background:rgba(0,255,145,.035);
border-top:1px solid rgba(0,255,145,.1);
border-bottom:1px solid rgba(0,255,145,.05);
}
.ss-hdr-line { flex:1; height:1px; background:repeating-linear-gradient(90deg, rgba(0,255,145,.22) 0, rgba(0,255,145,.22) 3px, transparent 3px, transparent 6px); }
.ss-hdr-txt { font-size:6px; letter-spacing:4px; color:rgba(0,255,145,.45); text-transform:uppercase; }
/* ── GAUGE ──────────────────────────────────────── */
.sr-gauge { padding-bottom:6px; }
.gauge { flex:1; height:8px; background:rgba(0,255,145,.04); border:1px solid rgba(0,255,145,.14); position:relative; overflow:hidden; }
.gauge::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(4,8,16,.88) 8px, rgba(4,8,16,.88) 9px); z-index:2; pointer-events:none; }
.gauge-fill { height:100%; width:0%; position:relative; z-index:1; transition:width .6s cubic-bezier(.25,.46,.45,.94); }
.gauge-temp .gauge-fill { background:linear-gradient(90deg, rgba(180,60,0,.7), rgba(255,160,0,.9)); box-shadow:2px 0 14px rgba(255,140,0,.45); }
.gauge-num { font-size:8px; font-weight:700; min-width:52px; text-align:right; letter-spacing:.5px; color:rgba(255,160,0,.8); }
/* ── MAIN LAYOUT ────────────────────────────────── */
.admin-main {
flex:1; min-height:0; overflow-y:auto;
display:flex; flex-direction:column; gap:12px;
padding:12px; width:100%;
}
.admin-col { display:flex; flex-direction:column; gap:12px; }
/* ── RESPONSIVE ─────────────────────────────────── */
@media (min-width:640px) {
.admin-main { flex-direction:row; overflow:hidden; max-width:1100px; margin:0 auto; }
.admin-col { flex:1; min-width:0; overflow-y:auto; min-height:0; }
}
@media (min-width:1024px) {
.admin-main { padding:16px; gap:16px; }
}
@media (max-width:479px) {
.hdr-badge, .hdr-clk { display:none; }
}
/* ── ACTION BUTTONS ─────────────────────────────── */
.act-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px; }
.act-btn {
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
padding:10px 8px; border:1px solid rgba(0,255,145,.2); background:rgba(0,255,145,.03);
color:rgba(0,255,145,.6); cursor:pointer; transition:all .15s;
}
.act-btn:hover { background:rgba(0,255,145,.08); color:var(--ok); border-color:rgba(0,255,145,.5); }
.act-btn.warm { border-color:rgba(255,140,0,.35); color:rgba(255,140,0,.7); background:rgba(255,140,0,.04); }
.act-btn.warm:hover { background:rgba(255,140,0,.12); color:#FF8C00; border-color:rgba(255,140,0,.7); }
.act-btn.danger { border-color:rgba(255,51,51,.35); color:rgba(255,51,51,.7); background:rgba(255,51,51,.04); }
.act-btn.danger:hover { background:rgba(255,51,51,.12); color:#FF3333; border-color:rgba(255,51,51,.7); }
.act-btn.full { grid-column:span 2; }
.act-btn.subtle { border-color:rgba(0,255,145,.1); color:rgba(0,255,145,.3); }
.act-btn.subtle:hover { color:rgba(0,255,145,.6); border-color:rgba(0,255,145,.35); }
/* ── LINK CARD ──────────────────────────────────── */
.link-card { display:flex; align-items:center; gap:12px; padding:10px 12px; }
.link-card-text strong { display:block; font-size:9px; letter-spacing:1.5px; color:rgba(0,255,145,.8); margin-bottom:3px; text-transform:uppercase; }
.link-card-text p { font-size:8px; color:rgba(0,210,130,.45); letter-spacing:.5px; }
.link-card-action { margin-left:auto; flex-shrink:0; }
.link-btn {
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
padding:8px 14px; border:1px solid rgba(0,136,255,.4); background:rgba(0,136,255,.06);
color:rgba(0,136,255,.8); cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s;
}
.link-btn:hover { background:rgba(0,136,255,.14); color:#55AAFF; border-color:rgba(0,136,255,.7); }
/* ── DROPDOWN CONTROL ───────────────────────────── */
.dropdown-row { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.dropdown-row label { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:40px; }
.ctrl-select {
font-family:var(--mono); font-size:8px; letter-spacing:1px;
color:rgba(0,255,145,.8); background:#050A14;
border:1px solid rgba(0,255,145,.2); padding:6px 8px;
cursor:pointer; outline:none; flex:1;
}
.ctrl-select:focus { border-color:rgba(0,255,145,.5); }
.ctrl-status { font-size:7px; letter-spacing:1.5px; color:rgba(0,255,145,.45); white-space:nowrap; min-width:50px; text-align:right; }
/* ── AUTH OVERLAY ───────────────────────────────── */
.auth-overlay {
position:fixed; inset:0; background:rgba(5,8,15,.93);
display:flex; align-items:center; justify-content:center;
z-index:1000; backdrop-filter:blur(4px);
}
.auth-box {
width:320px; display:flex; flex-direction:column; gap:14px; padding:28px 24px;
background:
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/1px 14px no-repeat,
#070D18;
border:1px solid rgba(0,255,145,.12);
box-shadow:0 0 60px rgba(0,0,0,.8), 0 0 40px rgba(0,136,255,.08);
}
.auth-eyebrow { font-size:7px; letter-spacing:3px; color:rgba(0,210,130,.5); text-transform:uppercase; }
.auth-title { font-size:20px; font-weight:700; color:#fff; letter-spacing:4px; text-transform:uppercase; }
.auth-sub { font-size:8px; color:rgba(0,255,145,.35); letter-spacing:1px; }
.auth-input {
font-family:var(--mono); font-size:16px; background:#050A14;
border:1px solid rgba(0,255,145,.2); color:var(--ok);
padding:10px 12px; outline:none; letter-spacing:6px; width:100%;
}
.auth-input:focus { border-color:rgba(0,255,145,.5); }
.auth-error { font-size:8px; color:#FF3333; letter-spacing:1px; min-height:12px; }
.auth-submit {
font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase;
padding:11px; border:1px solid rgba(0,136,255,.5); background:rgba(0,136,255,.1);
color:rgba(0,136,255,.9); cursor:pointer; transition:all .15s; width:100%;
}
.auth-submit:hover { background:rgba(0,136,255,.22); color:#55AAFF; }
</style>
</head>
<body>
<header>
<svg class="hdr-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="11" width="18" height="10" rx="1" fill="#0088FF" opacity=".85"/>
<rect x="11" y="7" width="10" height="4" rx="1" fill="#0088FF" opacity=".5"/>
<circle cx="9" cy="23" r="3.5" fill="none" stroke="#0088FF" stroke-width="1.5"/>
<circle cx="23" cy="23" r="3.5" fill="none" stroke="#0088FF" stroke-width="1.5"/>
<circle cx="9" cy="23" r="1.3" fill="#0088FF"/>
<circle cx="23" cy="23" r="1.3" fill="#0088FF"/>
<rect x="22" y="8" width="4" height="3" rx=".5" fill="#FF6B00" opacity=".9"/>
<line x1="16" y1="7" x2="16" y2="3" stroke="#0088FF" stroke-width="1.5"/>
<circle cx="16" cy="2.5" r="1" fill="#0088FF"/>
<rect x="3" y="14" width="4" height="2" rx="1" fill="#0088FF" opacity=".6"/>
</svg>
<span class="hdr-title">CUNO&nbsp;<em>ADMIN</em></span>
<div class="hdr-div"></div>
<div class="hdr-badge">System Control</div>
<div class="hdr-gap"></div>
<span id="admin_status" class="hdr-status">Lade...</span>
<div class="hdr-div"></div>
<a class="hdr-back" href="./index.html">← Ground Control</a>
<div class="hdr-div"></div>
<div class="hdr-clk">
<div class="hdr-clk-lbl">UTC</div>
<div class="hdr-clk-val" id="utc-clock">--:--:--</div>
</div>
</header>
<div class="admin-main">
<div class="admin-col">
<div class="panel">
<div class="p-hdr">
<div class="p-dot"></div>
<span class="p-lbl">Aktionen</span>
<span class="p-tag">System Control</span>
</div>
<div class="act-grid">
<button class="act-btn warm" onclick="runAdminAction('restart-camera')">Kamera neu starten</button>
<button class="act-btn danger" onclick="runAdminAction('restart-container')">Container neu starten</button>
<button class="act-btn warm" onclick="runAdminAction('reboot')">Pi neu starten</button>
<button class="act-btn danger" onclick="runAdminAction('shutdown')">Pi herunterfahren</button>
<button class="act-btn subtle full" onclick="runRumble()">Controller vibrieren</button>
</div>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Dienste</span><div class="ss-hdr-line"></div></div>
<div class="sr">
<span class="sr-led led-ok"></span>
<span class="sr-key">Kamera</span>
<strong id="service_camera" class="sr-val service_state state_unknown">-</strong>
</div>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Admin API</span>
<strong id="service_admin_api" class="sr-val service_state state_unknown">-</strong>
</div>
<div class="sr">
<span class="sr-led led-ok"></span>
<span class="sr-key">ExoMy</span>
<strong id="service_exomy" class="sr-val service_state state_unknown">-</strong>
</div>
</div>
</div>
<div class="admin-col">
<div class="panel">
<div class="p-hdr">
<div class="p-dot"></div>
<span class="p-lbl">Wartung</span>
<span class="p-tag">Maintenance</span>
</div>
<div class="link-card">
<div class="link-card-text">
<strong>Motorentest</strong>
<p>Separate Testseite für Lenkung und Antrieb je Rad.</p>
</div>
<div class="link-card-action">
<a class="link-btn" href="./admin-motor-test.html">Öffnen</a>
</div>
</div>
</div>
<div class="panel">
<div class="p-hdr">
<div class="p-dot"></div>
<span class="p-lbl">Latenz-Simulation</span>
<span class="p-tag">Signal Delay</span>
</div>
<div class="dropdown-row">
<label>Delay</label>
<select id="delay_select" class="ctrl-select" onchange="setDelay(parseFloat(this.value))">
<option value="0">0 s – kein Delay</option>
<option value="1">1 s</option>
<option value="2">2 s</option>
<option value="3">3 s</option>
<option value="4">4 s</option>
<option value="5">5 s</option>
<option value="6">6 s</option>
<option value="7">7 s</option>
<option value="8">8 s</option>
<option value="9">9 s</option>
<option value="10">10 s</option>
</select>
<span id="delay_status" class="ctrl-status"></span>
</div>
</div>
<div class="panel">
<div class="p-hdr">
<div class="p-dot"></div>
<span class="p-lbl">Geschwindigkeit</span>
<span class="p-tag">Speed Limit</span>
</div>
<div class="dropdown-row">
<label>Limit</label>
<select id="speed_limit_select" class="ctrl-select" onchange="setSpeedLimit(parseInt(this.value))">
<option value="10">10 %</option>
<option value="20">20 %</option>
<option value="30">30 %</option>
<option value="40">40 %</option>
<option value="50">50 %</option>
<option value="60">60 %</option>
<option value="70">70 %</option>
<option value="80">80 %</option>
<option value="90">90 %</option>
<option value="100" selected>100 % – kein Limit</option>
</select>
<span id="speed_limit_status" class="ctrl-status"></span>
</div>
</div>
<div class="panel">
<div class="p-hdr">
<div class="p-dot"></div>
<span class="p-lbl">Systemstatus</span>
<span class="p-tag">Telemetry</span>
</div>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Netzwerk</span><div class="ss-hdr-line"></div></div>
<div class="sr">
<span class="sr-led led-ok"></span>
<span class="sr-key">WLAN</span>
<span class="sr-val" id="info_wifi">-</span>
</div>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">IP</span>
<span class="sr-val" id="info_ips">-</span>
</div>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Hardware</span><div class="ss-hdr-line"></div></div>
<div class="sr sr-gauge gauge-temp">
<span class="sr-key">Temp</span>
<div class="gauge"><div class="gauge-fill" id="bar-temp-adm" style="width:0%"></div></div>
<span class="gauge-num" id="info_temp">--</span>
</div>
<div class="sr">
<span class="sr-led led-off"></span>
<span class="sr-key">Spannung</span>
<span class="sr-val" id="info_undervoltage">-</span>
</div>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Uptime</span>
<span class="sr-val" id="info_uptime">-</span>
</div>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Disk frei</span>
<span class="sr-val" id="info_disk">-</span>
</div>
</div>
</div>
</div>
<div id="auth_overlay" class="auth-overlay">
<div class="auth-box">
<div class="auth-eyebrow">Admin-Zugang</div>
<div class="auth-title">CUNO</div>
<div class="auth-sub">Passwort eingeben um fortzufahren</div>
<input type="password" id="auth_input" class="auth-input" placeholder="••••••••" autocomplete="current-password">
<p id="auth_error" class="auth-error"></p>
<button class="auth-submit" onclick="submitPassword()">Entsperren</button>
</div>
</div>
<script type="text/javascript">
var adminApiBase = window.location.protocol + '//' + window.location.hostname + ':8082';
var AUTH_TOKEN = 'Y3Vubw==';
function submitPassword() {
var input = document.getElementById('auth_input');
var error = document.getElementById('auth_error');
if (btoa(input.value) === AUTH_TOKEN) {
document.getElementById('auth_overlay').remove();
} else {
error.textContent = 'Falsches Passwort';
input.value = '';
input.focus();
}
}
function setAdminStatus(text) {
var el = document.getElementById('admin_status');
if (el) el.textContent = text;
}
function setText(id, value) {
var node = document.getElementById(id);
if (node) node.textContent = value || '-';
}
function setServiceState(id, value) {
var node = document.getElementById(id);
if (!node) return;
node.textContent = value || '-';
node.classList.remove('state_active', 'state_inactive', 'state_unknown');
if (value === 'active' || value === 'running') { node.classList.add('state_active'); return; }
if (value === 'inactive' || value === 'failed' || value === 'exited') { node.classList.add('state_inactive'); return; }
node.classList.add('state_unknown');
}
function setUndervoltageState(id, text, state) {
var node = document.getElementById(id);
if (!node) return;
node.textContent = text || '-';
node.classList.remove('state_active', 'state_inactive', 'state_unknown');
if (state === 'active') {
node.classList.add('state_inactive');
node.style.animation = 'statusBlink 0.9s step-end infinite';
return;
}
node.style.animation = '';
if (state === 'past') { node.classList.add('state_unknown'); return; }
if (state === 'clear') { node.classList.add('state_active'); return; }
node.classList.add('state_unknown');
}
function temperatureToWidth(value) {
if (!value || typeof value !== 'string') return '0%';
var n = parseFloat(value.replace('°C', '').replace(',', '.'));
if (isNaN(n)) return '0%';
return Math.max(0, Math.min(100, ((n - 20) / 60) * 100)).toFixed(0) + '%';
}
function renderStatus(data) {
setAdminStatus(data.status || 'Bereit');
setText('info_ips', data.system && data.system.ips);
setText('info_wifi', data.system && data.system.wifi);
setText('info_temp', data.system && data.system.cpu_temperature);
var bar = document.getElementById('bar-temp-adm');
if (bar && data.system) bar.style.width = temperatureToWidth(data.system.cpu_temperature);
setUndervoltageState('info_undervoltage', data.system && data.system.undervoltage, data.system && data.system.undervoltage_state);
setText('info_uptime', data.system && data.system.uptime);
setText('info_disk', data.system && data.system.disk_free);
setServiceState('service_camera', data.services && data.services.camera);
setServiceState('service_admin_api', data.services && data.services.admin_api);
setServiceState('service_exomy', data.services && data.services.exomy);
}
async function fetchStatus() {
try {
var response = await fetch(adminApiBase + '/api/status');
if (!response.ok) throw new Error('status ' + response.status);
renderStatus(await response.json());
} catch (e) {
setAdminStatus('API nicht erreichbar');
}
}
async function runAdminAction(action) {
var labels = {
'restart-camera': 'Kameradienst jetzt wirklich neu starten?',
'restart-container': 'ExoMy-Container jetzt wirklich neu starten?',
'reboot': 'Raspberry Pi jetzt wirklich neu starten?',
'shutdown': 'Raspberry Pi jetzt wirklich herunterfahren?'
};
if (!window.confirm(labels[action] || 'Befehl ausführen?')) return;
setAdminStatus('Sende Befehl...');
try {
var response = await fetch(adminApiBase + '/api/' + action, { method: 'POST' });
if (!response.ok) throw new Error('status ' + response.status);
var data = await response.json();
setAdminStatus(data.status || 'Befehl gesendet');
window.setTimeout(fetchStatus, 2000);
} catch (e) {
setAdminStatus('Fehler');
alert('Der Admin-Befehl konnte nicht ausgeführt werden.');
}
}
async function fetchDelay() {
try {
var response = await fetch(adminApiBase + '/api/delay');
if (!response.ok) return;
var data = await response.json();
var sel = document.getElementById('delay_select');
if (sel) sel.value = String(data.delay_seconds);
} catch (e) {}
}
async function setDelay(seconds) {
var statusEl = document.getElementById('delay_status');
if (statusEl) statusEl.textContent = 'Setze…';
try {
var response = await fetch(adminApiBase + '/api/delay', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({delay_seconds: seconds})
});
var data = await response.json();
var sel = document.getElementById('delay_select');
if (sel) sel.value = String(seconds);
if (statusEl) statusEl.textContent = data.status || 'Gesetzt';
window.setTimeout(function() { if (statusEl) statusEl.textContent = ''; }, 2000);
} catch (e) {
if (statusEl) statusEl.textContent = 'Fehler';
}
}
async function fetchSpeedLimit() {
try {
var response = await fetch(adminApiBase + '/api/speed-limit');
if (!response.ok) return;
var data = await response.json();
var sel = document.getElementById('speed_limit_select');
if (sel) sel.value = String(data.speed_limit_percent);
} catch (e) {}
}
async function setSpeedLimit(percent) {
var statusEl = document.getElementById('speed_limit_status');
if (statusEl) statusEl.textContent = 'Setze…';
try {
var response = await fetch(adminApiBase + '/api/speed-limit', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({speed_limit_percent: percent})
});
var data = await response.json();
if (statusEl) statusEl.textContent = data.status || 'Gesetzt';
window.setTimeout(function() { if (statusEl) statusEl.textContent = ''; }, 2000);
} catch (e) {
if (statusEl) statusEl.textContent = 'Fehler';
}
}
async function runRumble() {
try {
var response = await fetch(adminApiBase + '/api/rumble', { method: 'POST' });
var data = await response.json();
setAdminStatus(data.status || 'Vibration ausgelöst');
window.setTimeout(function() { setAdminStatus('Bereit'); }, 2000);
} catch (e) {
setAdminStatus('Fehler');
}
}
function updateClock() {
var el = document.getElementById('utc-clock');
if (el) el.textContent = new Date().toUTCString().split(' ')[4];
}
window.addEventListener('load', function() {
var input = document.getElementById('auth_input');
input.focus();
input.addEventListener('keydown', function(e) { if (e.key === 'Enter') submitPassword(); });
updateClock();
window.setInterval(updateClock, 1000);
fetchStatus();
fetchDelay();
fetchSpeedLimit();
window.setInterval(fetchStatus, 10000);
window.setInterval(fetchDelay, 5000);
window.setInterval(fetchSpeedLimit, 5000);
});
</script>
</body>
</html>