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.
40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
import { escapeAttr, escapeHtml, state } from "../core.js";
|
|
import { glyphSvg } from "../glyphs.js";
|
|
import { widgetAnmelden } from "./rahmen.js";
|
|
|
|
function greeting() {
|
|
const h = new Date().getHours();
|
|
if (h < 5 || h >= 23) return "Noch wach?";
|
|
if (h < 11) return "Guten Morgen.";
|
|
if (h < 18) return "Willkommen zurück.";
|
|
return "Guten Abend.";
|
|
}
|
|
|
|
/* ── Wer angemeldet ist ────────────────────────────────────────────────────
|
|
*
|
|
* Stand früher rechts in der Menüleiste. Dort war es das einzige Stück, das
|
|
* die HoneyBar in den Apps nicht hat — beide sollen aber gleich aussehen, sonst
|
|
* merkt man beim Wechsel, dass es zwei verschiedene HoneyBars sind. Auf dem
|
|
* Schreibtisch ist ohnehin Platz dafür, und die Begrüßung gehört dazu.
|
|
*
|
|
* Kein `laden`: Der Name steht schon im Zustand, seit die Seite ihn geholt hat.
|
|
*/
|
|
widgetAnmelden({
|
|
id: "benutzer",
|
|
titel: "angemeldet",
|
|
inhalt() {
|
|
const bild = state.me && state.me.picture
|
|
? `<img class="uw-bild" src="${escapeAttr(state.me.picture)}" alt="" />`
|
|
: `<span class="uw-bild uw-leer">${glyphSvg("chip")}</span>`;
|
|
return `
|
|
<div class="uw">
|
|
${bild}
|
|
<div class="uw-text">
|
|
<b class="uw-name">${escapeHtml(state.cfg.user)}</b>
|
|
<span class="uw-gruss">${greeting()}</span>
|
|
<span class="uw-host">${escapeHtml(state.cfg.user)}@${escapeHtml(state.cfg.hostname)}</span>
|
|
</div>
|
|
</div>`;
|
|
},
|
|
});
|