ChK/appServerPortalUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design E-Stop

Browse Source
This commit is contained in:
chk
2026-06-12 23:20:00 +02:00
parent 8706bc4c01
commit a1d86cbee0
2 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/app.js
View File

@@ -60,7 +60,7 @@ function switchToLogout() {
function performLocalLogout() { function performLocalLogout() {
loggedIn = false; loggedIn = false;
stopArmedPolling(); stopArmedPolling();
estopBtn.style.display = "none"; hideEstopInstant();
iframe.src = ""; iframe.src = "";
iframe.style.display = "none"; iframe.style.display = "none";
nav.innerHTML = ""; nav.innerHTML = "";
@@ -74,6 +74,41 @@ function performLocalLogout() {
const POWER_STATUS_URL = '/api/power-status'; const POWER_STATUS_URL = '/api/power-status';
const ESTOP_URL = '/api/emergency-stop'; const ESTOP_URL = '/api/emergency-stop';
let estopFadeTimer = null;
const ESTOP_FADE_MS = 10000; // 10s Ausblende-Dauer
// Einblenden: zügig (Sicherheit – Button soll prompt da sein)
function showEstop() {
if (estopFadeTimer) { clearTimeout(estopFadeTimer); estopFadeTimer = null; }
estopBtn.style.transition = "opacity 0.3s ease, transform 0.1s ease";
estopBtn.style.pointerEvents = "auto";
estopBtn.style.display = "block";
void estopBtn.offsetWidth; // Reflow erzwingen -> Transition startet sauber
estopBtn.style.opacity = "1";
}
// Ausblenden: langsam über 10s, danach display:none
function fadeOutEstop() {
// schon weg oder ein Fade läuft bereits? -> nichts tun (kein Neustart des Timers)
if (estopBtn.style.display === "none" || estopFadeTimer) return;
estopBtn.style.transition = "opacity " + (ESTOP_FADE_MS / 1000) + "s ease, transform 0.1s ease";
estopBtn.style.pointerEvents = "none"; // während Ausblenden nicht mehr klickbar
estopBtn.style.opacity = "0";
estopFadeTimer = setTimeout(() => {
estopBtn.style.display = "none";
estopFadeTimer = null;
}, ESTOP_FADE_MS);
}
// Sofort verstecken ohne Animation (z.B. Logout)
function hideEstopInstant() {
if (estopFadeTimer) { clearTimeout(estopFadeTimer); estopFadeTimer = null; }
estopBtn.style.transition = "none";
estopBtn.style.pointerEvents = "none";
estopBtn.style.opacity = "0";
estopBtn.style.display = "none";
}
async function updateArmedStatus() { async function updateArmedStatus() {
console.log('[armed-check] GET', POWER_STATUS_URL); console.log('[armed-check] GET', POWER_STATUS_URL);
try { try {
@@ -81,14 +116,14 @@ async function updateArmedStatus() {
if (r.ok) { if (r.ok) {
const data = await r.json(); const data = await r.json();
console.log('[armed-check] response:', data); console.log('[armed-check] response:', data);
estopBtn.style.display = data.armed ? "block" : "none"; if (data.armed) showEstop(); else fadeOutEstop();
} else { } else {
console.warn('[armed-check] HTTP', r.status, '– Button versteckt'); console.warn('[armed-check] HTTP', r.status, '– Button wird ausgeblendet');
estopBtn.style.display = "none"; fadeOutEstop();
} }
} catch (e) { } catch (e) {
console.error('[armed-check] Fehler bei', POWER_STATUS_URL, '–', e.message); console.error('[armed-check] Fehler bei', POWER_STATUS_URL, '–', e.message);
estopBtn.style.display = "none"; fadeOutEstop();
} }
} }

1
public/style.css
View File

@@ -41,6 +41,7 @@ header {
#emergency-stop { #emergency-stop {
display: none; display: none;
opacity: 0; /* Startwert – Fade-Dauer wird per JS gesetzt */
position: relative; position: relative;
width: 78px; width: 78px;
height: 78px; height: 78px;