Dies ist eine alte Version des Dokuments!

🔔 Countdown-Widget (ioBroker VIS + MagicMirror)

Dieses Widget zeigt automatisch die zwei nächsten anstehenden Countdowns an (z. B. Weihnachten, Silvester, Urlaub, Touren usw.).

Abgelaufene Countdowns werden automatisch ausgeblendet.

⚠️ WICHTIGE HINWEISE (bitte lesen!)

JEDER Countdown muss im versteckten Subscribe-Block stehen

KEINE Einzeiler mit { … } im JavaScript

Kein Array / kein Objekt-Literal

Code-Formatierung NICHT verändern

Sonst erscheint:

SyntaxError: Unexpected token 'null'

🧩 1. Subscribe-Block (Pflicht!)

Hier meldet VIS alle benötigten Datenpunkte an.

{countdown.0.countdowns.Weihnachten.fullJson}
{countdown.0.countdowns.Silvester.fullJson}
{countdown.0.countdowns.SommerurlaubItalien.fullJson}

👉 Für jeden neuen Countdown MUSS hier eine Zeile ergänzt werden!

🖼️ 2. Anzeige-HTML (2 Slots)

<div id="cd_text_xmas" style="font-size:28px;font-weight:700;line-height:1.15;">
  Lade...
</div>

<div style="height:18px;"></div>

<div id="cd_text_ny" style="font-size:28px;font-weight:700;line-height:1.15;">
  Lade...
</div>

Die IDs bleiben absichtlich so – sie sind MagicMirror-erprobt.

🧠 3. JavaScript – Finale Version

⚠️ NICHT kürzen, NICHT umformatieren

<script> (function () {

/* ==========================================================
   KONFIGURATION – HIER ERWEITERN
   ========================================================== */

const OID_1 = "countdown.0.countdowns.Weihnachten.fullJson";
const OID_2 = "countdown.0.countdowns.Silvester.fullJson";
const OID_3 = "countdown.0.countdowns.SommerurlaubItalien.fullJson";

const EMPTY_TEXT = "…";

/* ==========================================================
   HILFSFUNKTIONEN
   ========================================================== */

function safeNum(x, fallback)
{
  const n = Number(x);
  if (Number.isFinite(n)) return n;
  return fallback;
}

function parseFullJson(val)
{
  if (val === null || val === undefined || val === "") return null;

  try
  {
    let t = val;

    if (typeof t === "string")
    {
      t = t.trim();
      if (t.startsWith('"') && t.endsWith('"')) t = JSON.parse(t);
      return JSON.parse(t);
    }

    return t;
  }
  catch (e)
  {
    return null;
  }
}

function subline(s)
{
  return "<br><span style='font-size:18px;font-weight:400;opacity:.85'>(noch " + s + ")</span>";
}

function dayWord(n)
{
  if (n === 1) return "Tag";
  return "Tagen";
}

function hourWord(n)
{
  if (n === 1) return "Stunde";
  return "Stunden";
}

/* ==========================================================
   RESTZEIT
   ========================================================== */

function remainingSeconds(val)
{
  const d = parseFullJson(val);
  if (!d) return 999999999;

  if (d.total && d.total.seconds !== undefined)
  {
    return safeNum(d.total.seconds, 999999999);
  }

  const days  = safeNum((d.total && d.total.days  !== undefined) ? d.total.days  : d.days, 0);
  const hours = safeNum((d.total && d.total.hours !== undefined) ? d.total.hours : d.hours, 0);
  const mins  = safeNum((d.total && d.total.minutes !== undefined) ? d.total.minutes : d.minutes, 0);
  const secs  = safeNum((d.total && d.total.seconds !== undefined) ? d.total.seconds : d.seconds, 0);

  return (days * 86400) + (hours * 3600) + (mins * 60) + secs;
}

function isExpired(val)
{
  return remainingSeconds(val) <= 0;
}

/* ==========================================================
   RENDER-FUNKTIONEN
   ========================================================== */

function renderWeihnachten(val)
{
  const data = parseFullJson(val);
  const now  = new Date();

  if (now.getMonth() === 11 && now.getDate() >= 24 && now.getDate() <= 26)
  {
    return "🎄 Frohe Weihnachten 🎄<br><span style='font-size:26px;'>🎅🛷🎁</span>";
  }

  if (!data) return EMPTY_TEXT;

  const days  = safeNum(data.total.days, 0);
  const hours = safeNum(data.total.hours, 0);

  return "🎁 Weihnachten in " + days + " " + dayWord(days) +
         " und " + hours + " " + hourWord(hours);
}

function renderSilvester(val)
{
  const data = parseFullJson(val);
  const now  = new Date();

  if (now.getMonth() === 11 && now.getDate() === 31)
  {
    return "🎇 Silvester heute";
  }

  if (!data) return EMPTY_TEXT;

  const days  = safeNum(data.total.days, 0);
  const hours = safeNum(data.total.hours, 0);

  return "🕛 Silvester in " + days + " " + dayWord(days) +
         " und " + hours + " " + hourWord(hours);
}

function renderGeneric(val, title, emoji)
{
  const data = parseFullJson(val);
  if (!data) return EMPTY_TEXT;

  const days  = safeNum(data.total.days, 0);
  const hours = safeNum(data.total.hours, 0);

  return emoji + " " + title + " in " + days + " " + dayWord(days) +
         " und " + hours + " " + hourWord(hours);
}

/* ==========================================================
   EVENTS (KONFIGURIERBAR)
   ========================================================== */

const E1_OID = OID_1;
const E2_OID = OID_2;
const E3_OID = OID_3;

function renderEvent(i, val)
{
  if (i === 1) return renderWeihnachten(val);
  if (i === 2) return renderSilvester(val);
  if (i === 3) return renderGeneric(val, "Sommerurlaub Italien", "☀️🇮🇹");
  return EMPTY_TEXT;
}

function pickTwo()
{
  let b1 = -1;
  let b2 = -1;
  let r1 = 999999999;
  let r2 = 999999999;

  let r;

  r = remainingSeconds(vis.states.attr(E1_OID + ".val"));
  if (!isExpired(vis.states.attr(E1_OID + ".val")) && r < r1)
  {
    r2 = r1; b2 = b1;
    r1 = r;  b1 = 1;
  }

  r = remainingSeconds(vis.states.attr(E2_OID + ".val"));
  if (!isExpired(vis.states.attr(E2_OID + ".val")) && r < r1)
  {
    r2 = r1; b2 = b1;
    r1 = r;  b1 = 2;
  }

  r = remainingSeconds(vis.states.attr(E3_OID + ".val"));
  if (!isExpired(vis.states.attr(E3_OID + ".val")) && r < r2)
  {
    b2 = 3;
  }

  return String(b1) + "|" + String(b2);
}

function start()
{
  const el1 = document.getElementById("cd_text_xmas");
  const el2 = document.getElementById("cd_text_ny");

  function update()
  {
    const p = pickTwo().split("|");

    const v1 = vis.states.attr((p[0] === "1" ? E1_OID : p[0] === "2" ? E2_OID : E3_OID) + ".val");
    const v2 = vis.states.attr((p[1] === "1" ? E1_OID : p[1] === "2" ? E2_OID : E3_OID) + ".val");

    el1.innerHTML = renderEvent(Number(p[0]), v1);
    el2.innerHTML = renderEvent(Number(p[1]), v2);
  }

  vis.states.bind(E1_OID + ".val", update);
  vis.states.bind(E2_OID + ".val", update);
  vis.states.bind(E3_OID + ".val", update);

  update();
}

if (document.readyState === "complete")
{
  start();
}
else
{
  window.addEventListener("load", start);
}

})(); </script>

➕ Neuen Countdown hinzufügen (Checkliste) Beispiel: countdown.0.countdowns.Herbsturlaub.fullJson ✅ Schritt 1 – Subscribe-Block {countdown.0.countdowns.Herbsturlaub.fullJson}

✅ Schritt 2 – OID definieren const OID_4 = „countdown.0.countdowns.Herbsturlaub.fullJson“;

✅ Schritt 3 – Renderfunktion ergänzen if (i === 4) return renderGeneric(val, „Herbsturlaub“, „🍂🧳“);

✅ Schritt 4 – remainingSeconds / pickTwo erweitern

(analog zu Event 3)