admin seiten auf neues Layout umgestellt
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,416 +1,599 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>CUNO Admin</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<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>
|
||||
|
||||
<body class="admin-page">
|
||||
<main>
|
||||
<div class="admin_shell">
|
||||
<section class="panel admin_panel">
|
||||
<div class="panel_header">
|
||||
<div class="pilot_brand">
|
||||
<a class="pilot_logo_link" href="./index.html" aria-label="Zurück zur Steuerung">
|
||||
<img class="pilot_logo" src="./Logo_Cuno.png" alt="CUNO Logo" />
|
||||
</a>
|
||||
<div>
|
||||
<p class="eyebrow">Admin</p>
|
||||
<h1>CUNO System</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p id="admin_status" class="status_badge">Lade...</p>
|
||||
</div>
|
||||
<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 <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>
|
||||
|
||||
<p class="admin_copy">
|
||||
Diese Seite bündelt die wichtigsten Systemfunktionen und Statuswerte des Raspberry Pi.
|
||||
</p>
|
||||
<div class="admin-main">
|
||||
<div class="admin-col">
|
||||
|
||||
<div class="admin_content">
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Aktionen und Status</p>
|
||||
</div>
|
||||
<div class="admin_action_row">
|
||||
<div class="admin_actions">
|
||||
<button class="button buttonWarm" onclick="runAdminAction('restart-camera')">Kameradienst neu starten</button>
|
||||
<button class="button buttonDanger" onclick="runAdminAction('restart-container')">ExoMy-Container neu starten</button>
|
||||
<button class="button buttonWarm" onclick="runAdminAction('reboot')">Raspberry Pi neu starten</button>
|
||||
<button class="button buttonDanger" onclick="runAdminAction('shutdown')">Raspberry Pi herunterfahren</button>
|
||||
<button class="button rumble_btn" onclick="runRumble()">Controller vibrieren</button>
|
||||
</div>
|
||||
|
||||
<div class="service_compact">
|
||||
<div class="service_compact_row">
|
||||
<span>cam</span>
|
||||
<strong id="service_camera" class="service_state">-</strong>
|
||||
</div>
|
||||
<div class="service_compact_row">
|
||||
<span>api</span>
|
||||
<strong id="service_admin_api" class="service_state">-</strong>
|
||||
</div>
|
||||
<div class="service_compact_row">
|
||||
<span>exo</span>
|
||||
<strong id="service_exomy" class="service_state">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Wartung</p>
|
||||
</div>
|
||||
<div class="admin_quick_link_card">
|
||||
<div>
|
||||
<strong>Motorentest pro Rad</strong>
|
||||
<p>Separate Testseite für Lenkung links, Lenkung rechts, Vorwärts und Rückwärts je ausgewähltem Rad.</p>
|
||||
</div>
|
||||
<a class="button buttonX admin_quick_link_button" href="./admin-motor-test.html">Motortest öffnen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Latenz-Simulation</p>
|
||||
</div>
|
||||
<div class="admin_quick_link_card">
|
||||
<div>
|
||||
<strong>Signallaufzeit</strong>
|
||||
<p>Verzögert Steuerbefehle (Controller + Web-GUI) und Kamerabild gleichzeitig.</p>
|
||||
</div>
|
||||
<div class="delay_control">
|
||||
<select id="delay_select" class="delay_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="delay_status_text"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Geschwindigkeit</p>
|
||||
</div>
|
||||
<div class="admin_quick_link_card">
|
||||
<div>
|
||||
<strong>Maximale Geschwindigkeit</strong>
|
||||
<p>Begrenzt die Höchstgeschwindigkeit des Rovers für Controller und Web-GUI.</p>
|
||||
</div>
|
||||
<div class="delay_control">
|
||||
<select id="speed_limit_select" class="delay_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 % – keine Begrenzung</option>
|
||||
</select>
|
||||
<span id="speed_limit_status" class="delay_status_text"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin_section">
|
||||
<div class="admin_section_header">
|
||||
<p class="eyebrow">Systemstatus</p>
|
||||
</div>
|
||||
<div class="info_grid">
|
||||
<div class="info_card">
|
||||
<span class="info_label">WLAN-Status</span>
|
||||
<strong id="info_wifi">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">IP-Adressen</span>
|
||||
<strong id="info_ips">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">CPU-Temperatur</span>
|
||||
<strong id="info_temp">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">Unterspannung</span>
|
||||
<strong id="info_undervoltage" class="state_unknown">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">Uptime</span>
|
||||
<strong id="info_uptime">-</strong>
|
||||
</div>
|
||||
<div class="info_card">
|
||||
<span class="info_label">Freier Speicherplatz</span>
|
||||
<strong id="info_disk">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="admin_back" href="./index.html">Zurück zur Steuerung</a>
|
||||
</section>
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<div id="auth_overlay" class="auth_overlay">
|
||||
<div class="auth_box">
|
||||
<p class="eyebrow" style="margin:0;">Admin-Zugang</p>
|
||||
<h2 style="margin:0;">CUNO System</h2>
|
||||
<p style="margin:0; font-size:0.88rem; opacity:.6;">Passwort eingeben um fortzufahren</p>
|
||||
<input type="password" id="auth_input" class="auth_input" placeholder="••••••••" autocomplete="current-password">
|
||||
<p id="auth_error" class="auth_error"></p>
|
||||
<button class="button buttonX" onclick="submitPassword()">Entsperren</button>
|
||||
<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>
|
||||
|
||||
<script type="text/javascript">
|
||||
var adminApiBase = window.location.protocol + '//' + window.location.hostname + ':8082';
|
||||
var AUTH_TOKEN = 'Y3Vubw==';
|
||||
</div>
|
||||
<div class="admin-col">
|
||||
|
||||
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();
|
||||
}
|
||||
<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 status = document.getElementById('admin_status');
|
||||
if (status) {
|
||||
status.innerHTML = text;
|
||||
}
|
||||
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 setText(id, value) {
|
||||
var node = document.getElementById(id);
|
||||
if (node) {
|
||||
node.textContent = value || '-';
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
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.');
|
||||
}
|
||||
}
|
||||
|
||||
function setUndervoltageState(id, text, state) {
|
||||
var node = document.getElementById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
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) {}
|
||||
}
|
||||
|
||||
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 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);
|
||||
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);
|
||||
}
|
||||
|
||||
var data = await response.json();
|
||||
renderStatus(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
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 (error) {
|
||||
console.error(error);
|
||||
setAdminStatus('Fehler');
|
||||
alert('Der Admin-Befehl konnte nicht ausgeführt werden.');
|
||||
}
|
||||
}
|
||||
|
||||
function updateDelayButtons(seconds) {
|
||||
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 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 fetchDelay() {
|
||||
try {
|
||||
var response = await fetch(adminApiBase + '/api/delay');
|
||||
if (!response.ok) return;
|
||||
var data = await response.json();
|
||||
updateDelayButtons(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();
|
||||
updateDelayButtons(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 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');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
var input = document.getElementById('auth_input');
|
||||
input.focus();
|
||||
input.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') submitPassword();
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
fetchStatus();
|
||||
fetchDelay();
|
||||
fetchSpeedLimit();
|
||||
window.setInterval(fetchStatus, 10000);
|
||||
window.setInterval(fetchDelay, 5000);
|
||||
window.setInterval(fetchSpeedLimit, 5000);
|
||||
});
|
||||
</script>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user