Changes to the Statusdisplay
This commit is contained in:
Carsten Graf
116
data/index.html
116
data/index.html
@@ -56,19 +56,19 @@
|
||||
<div class="lane">
|
||||
<div id="name1" class="swimmer-name" style="display: none"></div>
|
||||
<h2>🏊♀️ Bahn 1</h2>
|
||||
<div id="time1" class="time-display">00.00</div>
|
||||
<div id="status1" class="status standby">
|
||||
Standby: Drücke beide Buttons einmal
|
||||
</div>
|
||||
<div id="time1" class="time-display">00.00</div>
|
||||
</div>
|
||||
|
||||
<div class="lane">
|
||||
<div id="name2" class="swimmer-name" style="display: none"></div>
|
||||
<h2>🏊♂️ Bahn 2</h2>
|
||||
<div id="time2" class="time-display">00.00</div>
|
||||
<div id="status2" class="status standby">
|
||||
Standby: Drücke beide Buttons einmal
|
||||
</div>
|
||||
<div id="time2" class="time-display">00.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -442,11 +442,65 @@
|
||||
|
||||
document.getElementById("time1").textContent = formatTime(display1);
|
||||
|
||||
const time1Element = document.getElementById("time1");
|
||||
const lane1Element = time1Element.closest(".lane");
|
||||
const h2_1 = lane1Element.querySelector("h2");
|
||||
|
||||
if (!lane1Connected) {
|
||||
s1.className = "status standby";
|
||||
s1.className = "status standby large-status";
|
||||
s1.textContent = "Standby: Drücke beide Buttons einmal";
|
||||
// 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.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";
|
||||
}
|
||||
} else {
|
||||
s1.className = `status ${status1}`;
|
||||
|
||||
// Add large-status class if not running and not finished
|
||||
if (status1 !== "running" && status1 !== "finished") {
|
||||
s1.classList.add("large-status");
|
||||
// Position über time-display, aber innerhalb des Containers
|
||||
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.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";
|
||||
} else {
|
||||
s1.classList.remove("large-status");
|
||||
s1.style.top = "";
|
||||
s1.style.transform = "";
|
||||
s1.style.maxHeight = "";
|
||||
}
|
||||
|
||||
switch (status1) {
|
||||
case "ready":
|
||||
@@ -468,11 +522,65 @@
|
||||
|
||||
document.getElementById("time2").textContent = formatTime(display2);
|
||||
|
||||
const time2Element = document.getElementById("time2");
|
||||
const lane2Element = time2Element.closest(".lane");
|
||||
const h2_2 = lane2Element.querySelector("h2");
|
||||
|
||||
if (!lane2Connected) {
|
||||
s2.className = "status standby";
|
||||
s2.className = "status standby large-status";
|
||||
s2.textContent = "Standby: Drücke beide Buttons einmal";
|
||||
// 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.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";
|
||||
}
|
||||
} else {
|
||||
s2.className = `status ${status2}`;
|
||||
|
||||
// Add large-status class if not running and not finished
|
||||
if (status2 !== "running" && status2 !== "finished") {
|
||||
s2.classList.add("large-status");
|
||||
// Position über time-display, aber innerhalb des Containers
|
||||
const time2Rect = time2Element.getBoundingClientRect();
|
||||
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.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";
|
||||
} else {
|
||||
s2.classList.remove("large-status");
|
||||
s2.style.top = "";
|
||||
s2.style.transform = "";
|
||||
s2.style.maxHeight = "";
|
||||
}
|
||||
|
||||
switch (status2) {
|
||||
case "ready":
|
||||
|
||||
Reference in New Issue
Block a user