reptil1990/AquaMasterMQTT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Kleine änderungen
All checks were successful
/ build (push) Successful in 6m43s
Details

Browse Source
This commit is contained in:
Carsten Graf
2026-02-21 15:37:54 +01:00
parent a67e29b9e4
commit 76b492606e
13 changed files with 119 additions and 3863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
data/index.html
View File

@@ -449,57 +449,80 @@
if (!lane1Connected) {
s1.className = "status standby large-status";
s1.textContent = "Standby: Drücke beide Buttons einmal";
time1Element.style.display = "none";
// Position über time-display, aber innerhalb des Containers
if (s1.classList.contains("large-status")) {
const time1Rect = time1Element.getBoundingClientRect();
const lane1Rect = lane1Element.getBoundingClientRect();
const h2Rect = h2_1.getBoundingClientRect();
const time1Center = time1Rect.top - lane1Rect.top + time1Rect.height / 2;
const h2Bottom = h2Rect.bottom - lane1Rect.top;
// Stelle sicher, dass die obere Kante der Status-Box unter h2 beginnt
// Beginne unter h2 (ohne translate(-50%, -50%) beginnt die Box von oben)
const startTop = h2Bottom + 10;
// Positioniere so, dass die Box über time-display zentriert ist, aber nicht über h2 hinausragt
// Berechne die benötigte Höhe, um über time-display zentriert zu sein
const statusHeight = s1.offsetHeight || 200; // Verwende tatsächliche Höhe oder Schätzwert
const targetTop = Math.max(startTop, time1Center - statusHeight / 2);
s1.style.top = targetTop + "px";
s1.style.top = startTop + "px";
s1.style.left = "50%";
s1.style.transform = "translateX(-50%)";
// Stelle sicher, dass die Box innerhalb des Containers bleibt
const maxHeight = lane1Rect.height - targetTop - 30;
s1.style.maxHeight = maxHeight + "px";
s1.style.overflow = "auto";
s1.style.bottom = "20px";
s1.style.width = "calc(100% - 40px)";
s1.style.display = "flex";
s1.style.alignItems = "center";
s1.style.justifyContent = "center";
}
} else {
s1.className = `status ${status1}`;
// Add large-status class if not running and not finished
if (status1 !== "running" && status1 !== "finished") {
// Wenn status "ready" ist, verstecke Zeit und mache Status groß
if (status1 === "ready") {
s1.classList.add("large-status");
// Position über time-display, aber innerhalb des Containers
const time1Rect = time1Element.getBoundingClientRect();
time1Element.style.display = "none";
const lane1Rect = lane1Element.getBoundingClientRect();
const h2Rect = h2_1.getBoundingClientRect();
const time1Center = time1Rect.top - lane1Rect.top + time1Rect.height / 2;
const h2Bottom = h2Rect.bottom - lane1Rect.top;
// Stelle sicher, dass die obere Kante der Status-Box unter h2 beginnt
// Beginne unter h2 (ohne translate(-50%, -50%) beginnt die Box von oben)
const startTop = h2Bottom + 10;
// Positioniere so, dass die Box über time-display zentriert ist, aber nicht über h2 hinausragt
// Berechne die benötigte Höhe, um über time-display zentriert zu sein
const statusHeight = s1.offsetHeight || 200; // Verwende tatsächliche Höhe oder Schätzwert
const targetTop = Math.max(startTop, time1Center - statusHeight / 2);
s1.style.top = targetTop + "px";
s1.style.top = startTop + "px";
s1.style.left = "50%";
s1.style.transform = "translateX(-50%)";
// Stelle sicher, dass die Box innerhalb des Containers bleibt
const maxHeight = lane1Rect.height - targetTop - 30;
s1.style.maxHeight = maxHeight + "px";
s1.style.overflow = "auto";
s1.style.bottom = "20px";
s1.style.width = "calc(100% - 40px)";
s1.style.display = "flex";
s1.style.alignItems = "center";
s1.style.justifyContent = "center";
s1.style.fontSize = "clamp(2rem, 8vw, 8rem)";
} else {
s1.classList.remove("large-status");
s1.style.top = "";
s1.style.transform = "";
s1.style.maxHeight = "";
// Bei anderen Status (running, finished, etc.) zeige Zeit wieder an
time1Element.style.display = "";
if (status1 !== "running" && status1 !== "finished") {
s1.classList.add("large-status");
const time1Rect = time1Element.getBoundingClientRect();
const lane1Rect = lane1Element.getBoundingClientRect();
const h2Rect = h2_1.getBoundingClientRect();
const time1Center = time1Rect.top - lane1Rect.top + time1Rect.height / 2;
const h2Bottom = h2Rect.bottom - lane1Rect.top;
const startTop = h2Bottom + 10;
const statusHeight = s1.offsetHeight || 200;
const targetTop = Math.max(startTop, time1Center - statusHeight / 2);
s1.style.top = targetTop + "px";
s1.style.transform = "translateX(-50%)";
s1.style.height = "";
s1.style.width = "";
s1.style.display = "";
s1.style.alignItems = "";
s1.style.justifyContent = "";
s1.style.fontSize = "";
const maxHeight = lane1Rect.height - targetTop - 30;
s1.style.maxHeight = maxHeight + "px";
s1.style.overflow = "auto";
} else {
s1.classList.remove("large-status");
s1.style.top = "";
s1.style.transform = "";
s1.style.maxHeight = "";
s1.style.height = "";
s1.style.width = "";
s1.style.display = "";
s1.style.alignItems = "";
s1.style.justifyContent = "";
s1.style.fontSize = "";
s1.style.left = "";
s1.style.bottom = "";
}
}
switch (status1) {
@@ -529,57 +552,80 @@
if (!lane2Connected) {
s2.className = "status standby large-status";
s2.textContent = "Standby: Drücke beide Buttons einmal";
time2Element.style.display = "none";
// Position über time-display, aber innerhalb des Containers
if (s2.classList.contains("large-status")) {
const time2Rect = time2Element.getBoundingClientRect();
const lane2Rect = lane2Element.getBoundingClientRect();
const h2Rect = h2_2.getBoundingClientRect();
const time2Center = time2Rect.top - lane2Rect.top + time2Rect.height / 2;
const h2Bottom = h2Rect.bottom - lane2Rect.top;
// Stelle sicher, dass die obere Kante der Status-Box unter h2 beginnt
// Beginne unter h2 (ohne translate(-50%, -50%) beginnt die Box von oben)
const startTop = h2Bottom + 10;
// Positioniere so, dass die Box über time-display zentriert ist, aber nicht über h2 hinausragt
// Berechne die benötigte Höhe, um über time-display zentriert zu sein
const statusHeight = s2.offsetHeight || 200; // Verwende tatsächliche Höhe oder Schätzwert
const targetTop = Math.max(startTop, time2Center - statusHeight / 2);
s2.style.top = targetTop + "px";
s2.style.top = startTop + "px";
s2.style.left = "50%";
s2.style.transform = "translateX(-50%)";
// Stelle sicher, dass die Box innerhalb des Containers bleibt
const maxHeight = lane2Rect.height - targetTop - 30;
s2.style.maxHeight = maxHeight + "px";
s2.style.overflow = "auto";
s2.style.bottom = "20px";
s2.style.width = "calc(100% - 40px)";
s2.style.display = "flex";
s2.style.alignItems = "center";
s2.style.justifyContent = "center";
}
} else {
s2.className = `status ${status2}`;
// Add large-status class if not running and not finished
if (status2 !== "running" && status2 !== "finished") {
// Wenn status "ready" ist, verstecke Zeit und mache Status groß
if (status2 === "ready") {
s2.classList.add("large-status");
// Position über time-display, aber innerhalb des Containers
const time2Rect = time2Element.getBoundingClientRect();
time2Element.style.display = "none";
const lane2Rect = lane2Element.getBoundingClientRect();
const h2Rect = h2_2.getBoundingClientRect();
// Stelle sicher, dass die obere Kante der Status-Box unter h2 beginnt
const h2Bottom = h2Rect.bottom - lane2Rect.top;
const time2Center = time2Rect.top - lane2Rect.top + time2Rect.height / 2;
// Beginne unter h2 (ohne translate(-50%, -50%) beginnt die Box von oben)
const startTop = h2Bottom + 10;
// Positioniere so, dass die Box über time-display zentriert ist, aber nicht über h2 hinausragt
// Berechne die benötigte Höhe, um über time-display zentriert zu sein
const statusHeight = s2.offsetHeight || 200; // Verwende tatsächliche Höhe oder Schätzwert
const targetTop = Math.max(startTop, time2Center - statusHeight / 2);
s2.style.top = targetTop + "px";
s2.style.top = startTop + "px";
s2.style.left = "50%";
s2.style.transform = "translateX(-50%)";
// Stelle sicher, dass die Box innerhalb des Containers bleibt
const maxHeight = lane2Rect.height - targetTop - 30;
s2.style.maxHeight = maxHeight + "px";
s2.style.overflow = "auto";
s2.style.bottom = "20px";
s2.style.width = "calc(100% - 40px)";
s2.style.display = "flex";
s2.style.alignItems = "center";
s2.style.justifyContent = "center";
s2.style.fontSize = "clamp(2rem, 8vw, 8rem)";
} else {
s2.classList.remove("large-status");
s2.style.top = "";
s2.style.transform = "";
s2.style.maxHeight = "";
// Bei anderen Status (running, finished, etc.) zeige Zeit wieder an
time2Element.style.display = "";
if (status2 !== "running" && status2 !== "finished") {
s2.classList.add("large-status");
const time2Rect = time2Element.getBoundingClientRect();
const lane2Rect = lane2Element.getBoundingClientRect();
const h2Rect = h2_2.getBoundingClientRect();
const time2Center = time2Rect.top - lane2Rect.top + time2Rect.height / 2;
const h2Bottom = h2Rect.bottom - lane2Rect.top;
const startTop = h2Bottom + 10;
const statusHeight = s2.offsetHeight || 200;
const targetTop = Math.max(startTop, time2Center - statusHeight / 2);
s2.style.top = targetTop + "px";
s2.style.transform = "translateX(-50%)";
s2.style.height = "";
s2.style.width = "";
s2.style.display = "";
s2.style.alignItems = "";
s2.style.justifyContent = "";
s2.style.fontSize = "";
const maxHeight = lane2Rect.height - targetTop - 30;
s2.style.maxHeight = maxHeight + "px";
s2.style.overflow = "auto";
} else {
s2.classList.remove("large-status");
s2.style.top = "";
s2.style.transform = "";
s2.style.maxHeight = "";
s2.style.height = "";
s2.style.width = "";
s2.style.display = "";
s2.style.alignItems = "";
s2.style.justifyContent = "";
s2.style.fontSize = "";
s2.style.left = "";
s2.style.bottom = "";
}
}
switch (status2) {