🌊 Badepark Inzell – Auslastung
Stand: – · Aktualisieren
Gesamt
–%
–
Datenquelle: shop.badepark-inzell.de/api/visitor-utilization · Aktualisierung automatisch alle 30 Sekunden.
Hinweis: Live-Abruf funktioniert nur, wenn die Seite auf einer Badepark-Domain gehostet wird (CORS). Lokal wird der zuletzt eingebettete Stand gezeigt.
// Direkt-API. Wenn ein PHP-Proxy auf dem eigenen Server liegt, hier auf "proxy.php" setzen // (löst das CORS-Problem beim Hosten auf fremder Domain): const API = "https://shop.badepark-inzell.de/api/visitor-utilization"; // const API = "proxy.php"; const RING_LEN = 2 * Math.PI * 95; // 597 // Eingebetteter Fallback-Snapshot (Stand des Datei-Erstellens) const SNAPSHOT = {"status":"success","data":{"total":{"current":43,"total":62},"zones":[{"current":42,"total":48,"name":"Bad"},{"current":0,"total":0,"name":"Sauna"},{"current":1,"total":14,"name":"Freibad"}]}}; function color(p){ if(p < 50) return getComputedStyle(document.documentElement).getPropertyValue('--green'); if(p < 75) return getComputedStyle(document.documentElement).getPropertyValue('--yellow'); if(p < 90) return getComputedStyle(document.documentElement).getPropertyValue('--orange'); return getComputedStyle(document.documentElement).getPropertyValue('--red'); } function pct(c,t){ return t > 0 ? Math.round(c/t*100) : 0; } function render(data, live){ const t = data.total; const p = pct(t.current, t.total); document.getElementById('totalPct').textContent = p + '%'; document.getElementById('totalCount').textContent = t.current + ' / ' + t.total + ' Gäste'; const ring = document.getElementById('ring'); ring.style.stroke = color(p); ring.style.strokeDashoffset = RING_LEN * (1 - p/100); const zc = document.getElementById('zones'); zc.innerHTML = ''; data.zones.forEach(z => { const closed = z.total === 0; const zp = pct(z.current, z.total); const c = color(zp); const el = document.createElement('div'); el.className = 'zone' + (closed ? ' closed' : ''); el.innerHTML = ` <div class="top"> <span class="name">${z.name}</span> ${closed ? '<span class="badge">geschlossen</span>' : `<span class="num"><b>${z.current}</b> / ${z.total}</span>`} </div> <div class="bar"><span style="width:${closed?0:zp}%;background:${c}"></span></div> <div class="pctline">${closed ? 'Aktuell nicht in Betrieb' : zp + '% ausgelastet'}</div>`; zc.appendChild(el); }); document.getElementById('time').textContent = new Date().toLocaleTimeString('de-DE'); document.getElementById('src').textContent = live ? 'Live' : 'Snapshot (offline)'; } async function load(){ const err = document.getElementById('err'); try{ const r = await fetch(API, {cache:'no-store'}); if(!r.ok) throw new Error('HTTP ' + r.status); const j = await r.json(); if(j.status !== 'success' || !j.data) throw new Error('Unerwartete Antwort'); err.style.display = 'none'; render(j.data, true); }catch(e){ err.style.display = 'block'; err.textContent = 'Live-Abruf nicht möglich (' + e.message + '). Zeige eingebetteten Stand. Für Live-Daten die Seite auf einer Badepark-Domain hosten.'; render(SNAPSHOT.data, false); } } document.getElementById('reload').addEventListener('click', load); load(); setInterval(load, 30000);