Spotify-Links, Live-Status-Feature (grüner Punkt) mit Owner-Toggle

postfach.html

@@ -64,6 +64,21 @@
     </div>
   </section>
 
+  <!-- ===== Live-Status umschalten (NUR für Dogi/Owner sichtbar) ===== -->
+  <section class="section-tight" id="live-toggle-section" style="display:none;">
+    <div class="container text-center">
+      <h2>Live-Status</h2>
+      <p class="lead" style="max-width:50ch;margin:0 auto;">Steuert den grünen Punkt auf der Startseite.</p>
+      <div class="card" style="max-width:360px;margin:1rem auto 0;">
+        <span class="badge rank-1"><span class="live-dot" id="admin-live-dot"></span><span id="admin-live-text">Aktuell offline</span></span>
+        <div class="btn-row" style="justify-content:center;margin-top:1rem;">
+          <button class="btn btn-primary" id="go-live-btn" type="button">🟢 Live schalten</button>
+          <button class="btn btn-outline" id="go-offline-btn" type="button">Offline schalten</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- ===== Rollen-Verwaltung (NUR für Dogi/Owner sichtbar) ===== -->
   <section id="admin-section" style="display:none;">
     <div class="container">
@@ -122,6 +137,11 @@ document.addEventListener("DOMContentLoaded", () => {
   const roleCreateStatus = document.getElementById("role-create-status");
   const newCodeReveal = document.getElementById("new-code-reveal");
   const rolesList = document.getElementById("roles-list");
+  const liveToggleSection = document.getElementById("live-toggle-section");
+  const adminLiveDot = document.getElementById("admin-live-dot");
+  const adminLiveText = document.getElementById("admin-live-text");
+  const goLiveBtn = document.getElementById("go-live-btn");
+  const goOfflineBtn = document.getElementById("go-offline-btn");
 
   if (!API_BASE_URL) {
     notConfigured.style.display = "block";
@@ -178,9 +198,12 @@ document.addEventListener("DOMContentLoaded", () => {
 
       if (data.isOwner) {
         adminSection.style.display = "block";
+        liveToggleSection.style.display = "block";
         loadRoles();
+        loadLiveStatus();
       } else {
         adminSection.style.display = "none";
+        liveToggleSection.style.display = "none";
       }
       return true;
     } catch {
@@ -234,6 +257,38 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
+  function renderLiveStatus(live) {
+    adminLiveDot.classList.toggle("is-live", !!live);
+    adminLiveText.textContent = live ? "Live jetzt!" : "Aktuell offline";
+  }
+
+  async function loadLiveStatus() {
+    try {
+      const res = await fetch(`${API_BASE_URL}/live-status`);
+      const data = await res.json();
+      if (res.ok && data.ok) renderLiveStatus(data.live);
+    } catch {
+      // still, keine Blockade der restlichen Seite
+    }
+  }
+
+  async function setLiveStatus(live) {
+    try {
+      const res = await fetch(`${API_BASE_URL}/live-status/set`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ownerCode: session.code, live }),
+      });
+      const data = await res.json();
+      if (res.ok && data.ok) renderLiveStatus(data.live);
+    } catch {
+      // keine Blockade
+    }
+  }
+
+  goLiveBtn.addEventListener("click", () => setLiveStatus(true));
+  goOfflineBtn.addEventListener("click", () => setLiveStatus(false));
+
   form.addEventListener("submit", async (e) => {
     e.preventDefault();
     if (!API_BASE_URL) {
@@ -255,6 +310,7 @@ document.addEventListener("DOMContentLoaded", () => {
     sessionBar.style.display = "none";
     inboxSection.style.display = "none";
     adminSection.style.display = "none";
+    liveToggleSection.style.display = "none";
     status.textContent = "";
     status.className = "form-status";
   });