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/os.js

@@ -4,8 +4,16 @@ import {
   SS_BOOTED, state,
 } from "./core.js";
 import { GLYPHS, glyphSvg } from "./glyphs.js";
-import { renderUser } from "./widgets/user.js";
-import { loadWeather, renderWeather } from "./widgets/weather.js";
+import { widgetsLaden, widgetsOrdnen, widgetsStarten, widgetsZeichnen } from "./widgets/rahmen.js";
+import "./widgets/user.js";
+import { statsHtml } from "./widgets/system.js";
+import { loadWeather, renderWeatherBar } from "./widgets/weather.js";
+
+// Die Reihenfolge steht hier und nicht in den Importzeilen darüber: Module
+// werden nicht in deren Reihenfolge ausgewertet, sobald eines auf oberster
+// Ebene wartet (glyphs.js holt seine Raster mit await). Bis die Reihenfolge
+// aus dem Server kommt, ist das ihre Stelle.
+widgetsOrdnen(["benutzer", "system", "wetter"]);
 
 /*
  * HoneyOS — Desktop-Logik.
@@ -116,8 +124,11 @@ function renderShell() {
   // Nicht abgewartet: Das Wetter kommt von außen und darf den Aufbau des
   // Schreibtischs nicht verzögern. Danach alle 10 Minuten, im selben Takt,
   // in dem der Server seinen Zwischenspeicher erneuert.
-  loadWeather();
-  setInterval(loadWeather, 10 * 60 * 1000);
+  // Nicht abgewartet: Die Widgets holen ihre Daten von außen und dürfen den
+  // Aufbau des Schreibtischs nicht verzögern. Den Takt fürs Nachladen kennt
+  // jedes Widget selbst.
+  widgetsLaden().then(renderWeatherBar);
+  widgetsStarten();
 }
 
 function renderMenubarApps() {
@@ -163,9 +174,7 @@ function renderMode() {
     closeAllWindows();
     renderTiles();
   }
-  renderStats();
-  renderUser();
-  renderWeather();
+  widgetsZeichnen();
   paintProbes();
 }
 
@@ -188,18 +197,13 @@ function launch(app) {
 
 /** Die Kennzahlen stehen in beiden Ansichten — deshalb über die Klasse in
  *  alle vorhandenen Listen schreiben, nicht in eine bestimmte id. */
+/** Zeichnet den Systemzustand überall neu, wo er gerade steht: als Widget in
+ *  der Spalte und, im Desktop-Modus, im Fenster aus dem Startmenü. */
 function renderStats() {
-  const up = Object.values(state.probes).filter((s) => s === "up").length;
-  const rows = [
-    ["apps", `${state.cfg.apps.length}`],
-    ["erreichbar", `${up}/${state.cfg.apps.length}`],
-    ["modus", state.settings.mode],
-    ["röhre", state.settings.phosphor],
-    ["version", `v${state.cfg.version}`],
-  ];
-  const html = rows.map(([k, v]) => `<dt>${k}</dt><dd>${escapeHtml(v)}</dd>`).join("");
-  document.querySelectorAll(".statlist").forEach((dl) => (dl.innerHTML = html));
-
+  widgetsZeichnen();
+  document.querySelectorAll("#windows .statlist").forEach((dl) => {
+    dl.outerHTML = statsHtml();
+  });
 }
 
 function tickClock() {
@@ -490,8 +494,9 @@ function openSystemWindow() {
     id: "system",
     title: "system",
     w: 320,
-    body: `<p class="greet"></p><dl class="statlist"></dl>`,
-    onMount: renderStats,
+    // Derselbe Inhalt wie das Widget im Terminal-Modus — eine Quelle, damit
+    // nicht zwei Listen mit denselben Zahlen auseinanderlaufen.
+    body: statsHtml(),
   });
 }