iframe optimalization
This commit is contained in:
+56
-36
@@ -17,27 +17,41 @@
|
||||
color: #fff;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── NORMAL VIEW ──────────────────────────────── */
|
||||
#normal-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border: none;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ── ALARM VIEW ──────────────────────────────── */
|
||||
#alarm-view {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #0d0000;
|
||||
overflow: hidden;
|
||||
}
|
||||
#alarm-view.active {
|
||||
z-index: 2; /* Warstwa na wierzchu */
|
||||
|
||||
/* Zamiast display: none, używamy przezroczystości i wyłączamy kliknięcia */
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0d0000;
|
||||
transition: opacity 0.3s ease; /* Łagodne przejście */
|
||||
}
|
||||
|
||||
#alarm-view.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto; /* Włączenie interakcji, jeśli potrzebne */
|
||||
}
|
||||
|
||||
.alarm-header {
|
||||
@@ -274,8 +288,8 @@
|
||||
const DEBUG_MACHINES = ["2.60", "3.22", "4.09"];
|
||||
const DEBUG_DATA = {
|
||||
"2.60": { machine: "2.60", status: "Alarm - brak materiału" },
|
||||
"3.22": { machine: "3.22", status: "Alarm - awaria" },
|
||||
"4.09": { machine: "4.09", status: "Alarm - przekroczony cykl" },
|
||||
3.22: { machine: "3.22", status: "Alarm - awaria" },
|
||||
4.09: { machine: "4.09", status: "Alarm - przekroczony cykl" },
|
||||
};
|
||||
|
||||
const machineData = {}; // id → last data payload
|
||||
@@ -287,6 +301,22 @@
|
||||
// (nawet przy technicznie otwartym WS), dane uznajemy za nieaktualne.
|
||||
const DATA_STALE_MS = 2 * 60 * 1000; // 2 minuty
|
||||
|
||||
const iframe = document.getElementById("normal-view");
|
||||
|
||||
iframe.onload = () => {
|
||||
console.log("Iframe załadowany, startuję WebSockety...");
|
||||
// Dajemy stronie w iframe jeszcze sekundę na przetworzenie własnego JS
|
||||
setTimeout(() => {
|
||||
MACHINES.forEach(connect);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
if (Object.keys(wsMap).length === 0) {
|
||||
MACHINES.forEach(connect);
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
function resetStaleTimer(id) {
|
||||
clearTimeout(dataTimers[id]);
|
||||
dataTimers[id] = setTimeout(() => {
|
||||
@@ -296,8 +326,8 @@
|
||||
// NOWE: Jeśli dane są przestarzałe, zakładamy, że WebSocket to "zombie".
|
||||
// Zabijamy go ręcznie, co wywoła onclose i sprowokuje ponowne połączenie.
|
||||
if (wsMap[id] && wsStatus[id] === "connected") {
|
||||
console.warn(`Brak danych dla ${id} - ubijam ciche połączenie`);
|
||||
wsMap[id].close();
|
||||
console.warn(`Brak danych dla ${id} - ubijam ciche połączenie`);
|
||||
wsMap[id].close();
|
||||
}
|
||||
}, DATA_STALE_MS);
|
||||
}
|
||||
@@ -325,9 +355,9 @@
|
||||
try {
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg.data) {
|
||||
machineData[id] = { ...msg.data, _ts: Date.now() };
|
||||
resetStaleTimer(id);
|
||||
updateDisplay();
|
||||
machineData[id] = { ...msg.data, _ts: Date.now() };
|
||||
resetStaleTimer(id);
|
||||
updateDisplay();
|
||||
}
|
||||
} catch (e) {
|
||||
/* ignore malformed frames */
|
||||
@@ -337,25 +367,20 @@
|
||||
ws.onerror = () => {
|
||||
wsStatus[id] = "error";
|
||||
refreshStatus();
|
||||
|
||||
// NOWE: Jitter zapobiegający "Thundering Herd"
|
||||
// Baza 5000ms + losowo od 0 do 3000ms
|
||||
const reconnectDelay = RECONNECT_MS + Math.floor(Math.random() * 3000);
|
||||
setTimeout(() => connect(id), reconnectDelay);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
wsStatus[id] = "disconnected";
|
||||
// Usuwamy dane maszyny przy rozłączeniu - nie możemy potwierdzić
|
||||
// aktualnego stanu, więc nie trzymamy przestarzałego alarmu w cache.
|
||||
// Po ponownym połączeniu serwer wyśle aktualny stan.
|
||||
clearTimeout(dataTimers[id]);
|
||||
delete machineData[id];
|
||||
updateDisplay();
|
||||
refreshStatus();
|
||||
setTimeout(() => connect(id), RECONNECT_MS);
|
||||
};
|
||||
}
|
||||
ws.onclose = () => {
|
||||
wsStatus[id] = "disconnected";
|
||||
clearTimeout(dataTimers[id]);
|
||||
delete machineData[id];
|
||||
updateDisplay();
|
||||
refreshStatus();
|
||||
|
||||
const reconnectDelay =
|
||||
RECONNECT_MS + Math.floor(Math.random() * 3000);
|
||||
setTimeout(() => connect(id), reconnectDelay);
|
||||
};
|
||||
}
|
||||
|
||||
// ── Display logic ─────────────────────────────────────────────────────────
|
||||
|
||||
@@ -373,18 +398,15 @@
|
||||
.filter(([, d]) => isAlarm(d))
|
||||
.sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }));
|
||||
|
||||
const normalView = document.getElementById("normal-view");
|
||||
const alarmView = document.getElementById("alarm-view");
|
||||
const countEl = document.getElementById("alarm-count");
|
||||
|
||||
if (alarms.length > 0) {
|
||||
normalView.style.display = "none";
|
||||
alarmView.classList.add("active");
|
||||
countEl.textContent =
|
||||
alarms.length === 1 ? "1 maszyna" : alarms.length + " maszyny";
|
||||
renderCards(alarms);
|
||||
} else {
|
||||
normalView.style.display = "block";
|
||||
alarmView.classList.remove("active");
|
||||
}
|
||||
}
|
||||
@@ -427,8 +449,6 @@
|
||||
});
|
||||
document.getElementById("status-bar").textContent =
|
||||
"[DEBUG] widok alarmowy";
|
||||
} else {
|
||||
MACHINES.forEach(connect);
|
||||
}
|
||||
updateDisplay();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user