82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
const img = document.getElementById("personImg");
|
|
const nameEl = document.getElementById("personName");
|
|
const button = document.getElementById("toggleButton");
|
|
const reasonInput = document.getElementById("reasonInput");
|
|
const lastReasonBox = document.getElementById("lastReasonBox");
|
|
const lastReasonText = document.getElementById("lastReasonText");
|
|
|
|
async function loadStatus() {
|
|
const res = await fetch("/status");
|
|
const data = await res.json();
|
|
showStatus(data.current, false);
|
|
|
|
// Show last reason if available
|
|
if (data.lastReason) {
|
|
lastReasonText.textContent = data.lastReason;
|
|
lastReasonBox.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function showStatus(person, animate = true) {
|
|
const file = person === "A" ? "img/a.png" : "img/b.png";
|
|
const label = person === "A" ? "Honey" : "Kirby";
|
|
|
|
// Hintergrundbilder für A und B
|
|
const bgA = "url('img/bgA.jpg')";
|
|
const bgB = "url('img/bgB.jpg')";
|
|
|
|
// Hintergrundanimation (optional)
|
|
document.body.style.transition = "background 0.4s ease";
|
|
|
|
// Hintergrund setzen
|
|
document.body.style.backgroundImage = person === "A" ? bgA : bgB;
|
|
document.body.style.backgroundSize = "cover";
|
|
document.body.style.backgroundPosition = "center";
|
|
|
|
if (animate) {
|
|
img.classList.add("rotate");
|
|
}
|
|
|
|
setTimeout(() => {
|
|
img.src = file;
|
|
nameEl.textContent = label;
|
|
}, 150);
|
|
|
|
setTimeout(() => {
|
|
img.classList.remove("rotate");
|
|
}, 600);
|
|
}
|
|
|
|
|
|
button.addEventListener("click", async () => {
|
|
const reason = reasonInput.value.trim();
|
|
|
|
const res = await fetch("/toggle", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({ reason: reason || undefined })
|
|
});
|
|
|
|
const data = await res.json();
|
|
showStatus(data.current);
|
|
|
|
// Update last reason display
|
|
if (reason) {
|
|
lastReasonText.textContent = reason;
|
|
lastReasonBox.classList.remove("hidden");
|
|
}
|
|
|
|
// Clear input
|
|
reasonInput.value = "";
|
|
});
|
|
|
|
// Allow Enter key to trigger switch
|
|
reasonInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") {
|
|
button.click();
|
|
}
|
|
});
|
|
|
|
loadStatus(); |