Widget-Rahmen: Widgets sind Beschreibungen, keine Kaesten in der Seite

widgetAnmelden({ id, titel, wo, sichtbar, laden, leer, inhalt, takt }) —
der Rahmen macht daraus ein Fenster in der Spalte (Terminal) oder ein
Schild (Desktop), kennt lädt/fertig/nichts da/Fehler und haelt den
Nachladetakt. Benutzer, Wetter und Systemzustand sind umgestellt; aus
index.html sind vier feste Kaesten verschwunden und aus dem Raster die
Einzelplaetze.

Zwei Dinge, die erst dabei sichtbar wurden:

- Der Server meldete 'kein Ort eingestellt' und 'Dienst nicht
  erreichbar' beide als 204. Ein Ausfall sah damit aus wie ein
  abgeschaltetes Widget. Ausfall ist jetzt 502, mit Test.
- Die Reihenfolge haengt nicht mehr an der Modulauswertung: Seit
  glyphs.js seine Raster mit await auf oberster Ebene laedt, laufen
  Module ohne Symbole vorher durch — der Systemzustand stand deshalb
  ueber dem Benutzer. widgetsOrdnen() macht die Reihenfolge zur Angabe,
  und genau dort haengt spaeter die im Server gespeicherte ein.

web/js/widgets/weather.js

@@ -1,5 +1,6 @@
-import { $, api, state } from "../core.js";
+import { api, $, state } from "../core.js";
 import { glyphSvg } from "../glyphs.js";
+import { widgetAnmelden, widgetsLaden } from "./rahmen.js";
 
 /* ── Wetter ────────────────────────────────────────────────────────────────
  *
@@ -7,52 +8,63 @@ import { glyphSvg } from "../glyphs.js";
  * was er hergibt. Kein Ort eingestellt oder Dienst nicht erreichbar: 204, und
  * das Widget bleibt weg. Eine Zahl von gestern wäre schlechter als keine.
  */
-export async function loadWeather() {
-  if (!state.settings.weatherCity) {
-    state.weather = null;
-    renderWeather();
-    return;
-  }
-  try {
-    state.weather = await api("/api/weather");
-  } catch {
-    state.weather = null;
-  }
-  renderWeather();
-}
+widgetAnmelden({
+  id: "wetter",
+  titel: "wetter",
+  // Der eigene Schalter — unabhängig von dem für die HoneyBar.
+  sichtbar: () => state.settings.weatherDesk === "on",
+  leer: "verbergen",
+  takt: 10 * 60 * 1000, // derselbe Takt, in dem der Server seinen Speicher erneuert
 
-function weatherHtml(w) {
-  return `
-    <div class="wx">
-      <span class="wx-glyph">${glyphSvg(w.glyph)}</span>
-      <div class="wx-text">
-        <b class="wx-temp">${Math.round(w.grad)}°</b>
-        <span class="wx-desc">${w.text}</span>
-        <span class="wx-city">${w.ort}</span>
-      </div>
-    </div>`;
-}
+  async laden() {
+    if (!state.settings.weatherCity) {
+      state.weather = null;
+      return false;
+    }
+    try {
+      state.weather = await api("/api/weather");
+    } catch (e) {
+      // Auch im Fehlerfall den alten Stand wegwerfen: Das Widget zeigt dann
+      // „nicht erreichbar", und in der Leiste verschwindet das Symbol. Eine
+      // Temperatur von vorhin, die aussieht wie von jetzt, wäre schlechter.
+      state.weather = null;
+      throw e;
+    }
+    // 204: kein Ort, kein Dienst — der Aufrufhelfer gibt dann nichts zurück.
+    if (!state.weather || !state.weather.glyph) {
+      state.weather = null;
+      return false;
+    }
+    return true;
+  },
 
-export function renderWeather() {
-  const w = state.weather;
-  const tile = $("wxTile");
-  const desk = $("wxDesk");
+  inhalt() {
+    const w = state.weather;
+    return `
+      <div class="wx">
+        <span class="wx-glyph">${glyphSvg(w.glyph)}</span>
+        <div class="wx-text">
+          <b class="wx-temp">${Math.round(w.grad)}°</b>
+          <span class="wx-desc">${w.text}</span>
+          <span class="wx-city">${w.ort}</span>
+        </div>
+      </div>`;
+  },
+});
+
+/**
+ * Und in der HoneyBar. Die Menüleiste hier ist zwar anderer Code als
+ * honeybar.js in den Apps, aber für den, der davorsitzt, dieselbe HoneyBar —
+ * ein Schalter, der nur woanders wirkt, wäre nicht zu erklären.
+ *
+ * Sie hängt am selben geladenen Stand, hat aber ihren eigenen Schalter und
+ * gehört nicht in den Widget-Rahmen: Sie ist kein Widget, sondern ein Teil der
+ * Leiste.
+ */
+export function renderWeatherBar() {
   const bar = $("mbWx");
-  const desktopMode = state.settings.mode === "desktop";
-
-  // Das Widget: Fenster im Terminal-Modus, Schild auf dem Schreibtisch.
-  const alsWidget = state.settings.weatherDesk === "on" && w;
-  tile.hidden = !alsWidget || desktopMode;
-  desk.hidden = !alsWidget || !desktopMode;
-  if (alsWidget) {
-    const html = weatherHtml(w);
-    tile.querySelector(".wx-body").innerHTML = html;
-    desk.innerHTML = html;
-  }
-
-  // Und in der HoneyBar. Die Menüleiste hier ist zwar anderer Code als
-  // honeybar.js in den Apps, aber für den, der davorsitzt, dieselbe HoneyBar —
-  // ein Schalter, der nur woanders wirkt, wäre nicht zu erklären.
+  if (!bar) return;
+  const w = state.weather;
   const inBar = state.settings.weatherBar === "on" && w;
   bar.hidden = !inBar;
   if (inBar) {
@@ -60,3 +72,9 @@ export function renderWeather() {
     bar.title = `${w.ort}: ${w.text}, ${Math.round(w.grad)}°`;
   }
 }
+
+/** Beides zusammen: Widget und Leiste hängen am selben Abruf. */
+export async function loadWeather() {
+  await widgetsLaden("wetter");
+  renderWeatherBar();
+}