diff --git a/internal/store/store.go b/internal/store/store.go index 6e393b6..5621527 100644 --- a/internal/store/store.go +++ b/internal/store/store.go @@ -3,14 +3,18 @@ package store import ( + "crypto/sha256" + "encoding/hex" "encoding/json" "fmt" "net/url" "os" "path/filepath" "regexp" + "strconv" "strings" "sync" + "time" ) // Der ganze Zustand von HoneyOS passt in eine JSON-Datei: eine Handvoll Apps @@ -35,6 +39,17 @@ type User struct { Name string `json:"name,omitempty"` Picture string `json:"picture,omitempty"` Settings map[string]string `json:"settings,omitempty"` + // Der Zettel. Nicht in den Einstellungen, obwohl er dorthin passen würde: + // Die sind auf kurze Werte ausgelegt (200 Zeichen je Feld), und ein Zettel + // ist Text, kein Schalter. + Note string `json:"note,omitempty"` + + // Das Bild — entweder eine Datei neben honeyos.json oder eine fremde + // Adresse, nie beides. `Bildstand` ist der Versionsanteil in der Adresse: + // Ohne ihn bliebe beim Austausch das alte Bild im Zwischenspeicher hängen. + Bild string `json:"bild,omitempty"` // Dateiname in bilder/ + BildURL string `json:"bildUrl,omitempty"` // oder eine fremde Adresse + Bildstand string `json:"bildstand,omitempty"` // gegen den Zwischenspeicher } type data struct { @@ -52,6 +67,9 @@ const ( maxApps = 24 maxSettings = 40 maxFieldLen = 200 + // Ein Zettel, kein Dokument. Wer mehr braucht, hat InkNote — und der Server + // muss die Grenze durchsetzen, nicht das Formular. + maxNoteLen = 4000 ) var ( @@ -182,6 +200,27 @@ func (s *Store) SeenUser(sub, name, picture string) error { return s.save() } +// Note gibt den Zettel des Nutzers. Kein Rückfall auf den Standardnutzer wie +// bei den Einstellungen: Ein fremder Zettel ist kein Ersatz für den eigenen. +func (s *Store) Note(sub string) string { + return s.User(sub).Note +} + +// SetNote schreibt den Zettel. Zwei offene Geräte überschreiben einander — der +// letzte Stand gewinnt. Für einen Zettel ist das vertretbar; alles darüber +// bräuchte Versionen und eine Zusammenführung, und dann wäre es keine +// Kleinigkeit mehr, sondern eine Notiz-App. +func (s *Store) SetNote(sub, text string) error { + if len([]rune(text)) > maxNoteLen { + return fmt.Errorf("der Zettel fasst %d Zeichen", maxNoteLen) + } + + s.mu.Lock() + defer s.mu.Unlock() + s.userLocked(sub).Note = text + return s.save() +} + func (s *Store) SetSettings(sub string, in map[string]string) error { if len(in) > maxSettings { return fmt.Errorf("zu viele Einstellungen") @@ -254,5 +293,92 @@ func (s *Store) AppOrigins() map[string]bool { return out } +/* ── Bilder ──────────────────────────────────────────────────────────────── + * + * Das Erste, was HoneyOS als Datei ablegt. Bis hierher war alles in einer + * einzigen JSON-Datei, und das soll auch so bleiben: Die Bilder liegen daneben + * in `bilder/`, die JSON kennt nur ihre Namen. Ein Nutzer hat genau **ein** + * Bild — ein neues ersetzt das alte, samt Datei. + * + * Der Dateiname ist ein Fingerabdruck der Nutzerkennung, keine Kennung im + * Klartext: In einem Ordnernamen hätte eine OIDC-`sub` nichts zu suchen, und + * manche taugen gar nicht als Dateiname. + */ + +func (s *Store) bilderDir() string { return filepath.Join(filepath.Dir(s.path), "bilder") } + +func bildName(sub, endung string) string { + sum := sha256.Sum256([]byte(sub)) + return hex.EncodeToString(sum[:8]) + endung +} + +// Bild sagt, was der Nutzer hinterlegt hat: eine Datei, eine Adresse oder +// nichts. `stand` gehört an die Adresse der Datei. +func (s *Store) Bild(sub string) (datei, url, stand string) { + u := s.User(sub) + return u.Bild, u.BildURL, u.Bildstand +} + +func (s *Store) BildPfad(sub string) (string, bool) { + datei, _, _ := s.Bild(sub) + if datei == "" { + return "", false + } + return filepath.Join(s.bilderDir(), datei), true +} + +// SetBildDatei legt die Bytes ab und macht sie zum Bild des Nutzers. Ein +// vorhandenes Bild wird ersetzt — auch die alte Datei, sonst wächst der Ordner +// mit jedem Austausch. +func (s *Store) SetBildDatei(sub, endung string, daten []byte) error { + if err := os.MkdirAll(s.bilderDir(), 0o755); err != nil { + return fmt.Errorf("bilder-ordner: %w", err) + } + name := bildName(sub, endung) + if err := os.WriteFile(filepath.Join(s.bilderDir(), name), daten, 0o644); err != nil { + return fmt.Errorf("bild schreiben: %w", err) + } + + s.mu.Lock() + defer s.mu.Unlock() + u := s.userLocked(sub) + if u.Bild != "" && u.Bild != name { + os.Remove(filepath.Join(s.bilderDir(), u.Bild)) + } + u.Bild, u.BildURL = name, "" + u.Bildstand = strconv.FormatInt(time.Now().Unix(), 36) + return s.save() +} + +// SetBildURL nimmt stattdessen eine fremde Adresse. Eine leere löscht alles. +func (s *Store) SetBildURL(sub, url string) error { + if len(url) > maxFieldLen*4 { + return fmt.Errorf("die Adresse ist zu lang") + } + if url != "" && !strings.HasPrefix(url, "https://") && !strings.HasPrefix(url, "http://") { + return fmt.Errorf("die Adresse muss mit http:// oder https:// beginnen") + } + + s.mu.Lock() + defer s.mu.Unlock() + u := s.userLocked(sub) + if u.Bild != "" { + os.Remove(filepath.Join(s.bilderDir(), u.Bild)) + } + u.Bild, u.BildURL = "", url + u.Bildstand = strconv.FormatInt(time.Now().Unix(), 36) + return s.save() +} + +// userLocked holt (oder legt an) den Nutzer. Nur mit gehaltenem Schloss. +func (s *Store) userLocked(sub string) *User { + u, ok := s.d.Users[sub] + if !ok { + u = &User{} + s.d.Users[sub] = u + } + return u +} + // DataPath nennt die eine Datei, in der alles steht. func DataPath(dir string) string { return filepath.Join(dir, "honeyos.json") } diff --git a/main.go b/main.go index c98a506..db67019 100644 --- a/main.go +++ b/main.go @@ -16,6 +16,7 @@ import ( "crypto/subtle" "embed" "encoding/json" + "io" "io/fs" "log" "net/http" @@ -146,6 +147,19 @@ func (s *Server) routes() http.Handler { mux.HandleFunc("GET /api/me", s.requireAuth(s.handleMe)) mux.HandleFunc("PUT /api/settings", s.requireAuth(s.handleSetSettings)) + // Der Zettel — nur für Angemeldete, in beide Richtungen. Er steht bewusst + // nicht in `appsReadable`: Die HoneyBar in einer fremden App weist sich mit + // dem Schlüssel aus, und der kennt keinen Nutzer. Fremde Zettel gehen + // niemanden etwas an. + mux.HandleFunc("GET /api/note", s.requireAuth(s.handleNote)) + mux.HandleFunc("PUT /api/note", s.requireAuth(s.handleSetNote)) + // Das Bild: nachsehen, hochladen, verlinken, ausliefern. Vier Wege, weil + // „hochgeladene Bytes" und „fremde Adresse" verschiedene Dinge sind und + // eine Abzweigung nach Inhaltstyp im selben Endpunkt nur Rätsel aufgäbe. + mux.HandleFunc("GET /api/image/info", s.requireAuth(s.handleBildInfo)) + mux.HandleFunc("POST /api/image", s.requireAuth(s.handleBildHoch)) + mux.HandleFunc("PUT /api/image", s.requireAuth(s.handleBildLink)) + mux.HandleFunc("GET /api/image", s.requireAuth(s.handleBild)) mux.HandleFunc("GET /api/apps", s.appsReadable(s.handleApps)) mux.HandleFunc("PUT /api/apps", s.requireAuth(s.handleSetApps)) // Dieselbe Tür wie die App-Liste: Die HoneyBar steht in einer fremden App und @@ -368,6 +382,114 @@ func (s *Server) handleApps(w http.ResponseWriter, r *http.Request, sub string) // Normalfall, solange niemand einen gewählt hat, und die HoneyBar soll dafür // nicht rot blinken, sondern das Symbol einfach weglassen. Dasselbe gilt, wenn // der Dienst nicht erreichbar ist: lieber kein Wetter als eine Zahl von gestern. +func (s *Server) handleNote(w http.ResponseWriter, r *http.Request, sub string) { + writeJSON(w, http.StatusOK, map[string]string{"text": s.store.Note(sub)}) +} + +func (s *Server) handleSetNote(w http.ResponseWriter, r *http.Request, sub string) { + var in struct { + Text string `json:"text"` + } + if err := decode(r, &in); err != nil { + writeJSON(w, http.StatusBadRequest, map[string]string{"error": err.Error()}) + return + } + if err := s.store.SetNote(sub, in.Text); err != nil { + writeJSON(w, http.StatusBadRequest, map[string]string{"error": err.Error()}) + return + } + w.WriteHeader(http.StatusNoContent) +} + +/* ── Das Bild ────────────────────────────────────────────────────────────── + * + * Genau eines je Nutzer, entweder hochgeladen oder verlinkt. Der Ausweis ist + * immer die Sitzung: Bilder gehen weder über den App-Schlüssel noch an fremde + * Ursprünge — es ist das persönlichste, was HoneyOS speichert. + */ + +// bildTypen: was hereindarf, und mit welcher Endung es abgelegt wird. +// +// **SVG steht bewusst nicht dabei.** Es ist Text, kann Skripte enthalten und +// würde, aus derselben Adresse ausgeliefert, im Namen der Seite laufen. Ein +// Bildwidget ist diesen Weg nicht wert. +var bildTypen = map[string]string{ + "image/png": ".png", + "image/jpeg": ".jpg", + "image/webp": ".webp", + "image/gif": ".gif", +} + +const maxBild = 3 << 20 // 3 MB + +func (s *Server) handleBildInfo(w http.ResponseWriter, r *http.Request, sub string) { + datei, url, stand := s.store.Bild(sub) + switch { + case datei != "": + writeJSON(w, http.StatusOK, map[string]string{"art": "datei", "url": "/api/image?v=" + stand}) + case url != "": + writeJSON(w, http.StatusOK, map[string]string{"art": "link", "url": url}) + default: + writeJSON(w, http.StatusOK, map[string]string{"art": "", "url": ""}) + } +} + +func (s *Server) handleBildHoch(w http.ResponseWriter, r *http.Request, sub string) { + defer r.Body.Close() + daten, err := io.ReadAll(io.LimitReader(r.Body, maxBild+1)) + if err != nil { + writeJSON(w, http.StatusBadRequest, map[string]string{"error": "Bild nicht lesbar"}) + return + } + if len(daten) > maxBild { + writeJSON(w, http.StatusRequestEntityTooLarge, map[string]string{"error": "Das Bild ist größer als 3 MB"}) + return + } + + // Der eigene Blick auf die Bytes, nicht die Angabe des Browsers: Wer + // hochlädt, bestimmt sonst den Typ — und damit, was ausgeliefert wird. + typ := strings.SplitN(http.DetectContentType(daten), ";", 2)[0] + endung, ok := bildTypen[typ] + if !ok { + writeJSON(w, http.StatusUnsupportedMediaType, map[string]string{ + "error": "Nur PNG, JPEG, WebP oder GIF — erkannt wurde " + typ, + }) + return + } + if err := s.store.SetBildDatei(sub, endung, daten); err != nil { + writeJSON(w, http.StatusInternalServerError, map[string]string{"error": err.Error()}) + return + } + w.WriteHeader(http.StatusNoContent) +} + +func (s *Server) handleBildLink(w http.ResponseWriter, r *http.Request, sub string) { + var in struct { + URL string `json:"url"` + } + if err := decode(r, &in); err != nil { + writeJSON(w, http.StatusBadRequest, map[string]string{"error": err.Error()}) + return + } + if err := s.store.SetBildURL(sub, strings.TrimSpace(in.URL)); err != nil { + writeJSON(w, http.StatusBadRequest, map[string]string{"error": err.Error()}) + return + } + w.WriteHeader(http.StatusNoContent) +} + +func (s *Server) handleBild(w http.ResponseWriter, r *http.Request, sub string) { + pfad, ok := s.store.BildPfad(sub) + if !ok { + http.NotFound(w, r) + return + } + // Der Versionsanteil steht in der Adresse, also darf der Browser es lange + // behalten: Ein neues Bild bekommt eine neue Adresse. + w.Header().Set("Cache-Control", "private, max-age=604800") + http.ServeFile(w, r, pfad) +} + func (s *Server) handleWeather(w http.ResponseWriter, r *http.Request, sub string) { set := s.store.SettingsFor(sub) lat, err1 := strconv.ParseFloat(set["weatherLat"], 64) diff --git a/web/css/style.css b/web/css/style.css index 652f199..7e3a88c 100644 --- a/web/css/style.css +++ b/web/css/style.css @@ -1115,6 +1115,117 @@ body { .w-zustand { color: var(--p-dim); margin: 0; font-size: 12.5px; } .w-fehler { color: var(--p-mid); } +/* ── Zettel ──────────────────────────────────────────────────────────────── + * Gelesen wird gesetzt, geschrieben wird roh. Beide Ansichten sind gleich + * hoch, damit der Kasten beim Umschalten nicht springt. */ +.zettel-text, +.zettel-feld { + min-height: 112px; + max-height: 320px; + overflow-y: auto; +} +.zettel-feld { + display: block; + width: 100%; + background: var(--bg); + border: 1px solid var(--p-dim); + color: var(--p); + font: inherit; + font-size: 13px; + line-height: 1.45; + padding: 8px; + resize: vertical; +} +.zettel-feld:focus { outline: none; border-color: var(--p); } + +.zettel-text { font-size: 13px; line-height: 1.45; color: var(--p-mid); } +.zettel-text h3, +.zettel-text h4, +.zettel-text h5 { + margin: 10px 0 4px; + color: var(--p); + font-weight: 400; + letter-spacing: 0.08em; + text-transform: uppercase; +} +.zettel-text h3 { font-size: 13px; } +.zettel-text h4 { font-size: 12px; } +.zettel-text h5 { font-size: 11px; color: var(--p-mid); } +.zettel-text > :first-child { margin-top: 0; } +.zettel-text p { margin: 0 0 6px; } +.zettel-text ul, +.zettel-text ol { margin: 0 0 6px; padding-left: 18px; } +.zettel-text li { margin: 1px 0; } +.zettel-text code { + background: var(--p-faint); + padding: 0 3px; + color: var(--p); +} +.zettel-text b { color: var(--p); font-weight: 400; } +.zettel-text hr { border: 0; border-top: 1px solid var(--p-faint); margin: 8px 0; } + +/* Häkchen: anklickbar, ohne in den Text zu springen. Die Aufzählungspunkte + fallen weg — das Kästchen ist der Punkt. */ +.zettel-text .zettel-hak { list-style: none; margin-left: -18px; } +.zettel-text .zettel-hak label { + display: flex; + align-items: baseline; + gap: 7px; + cursor: pointer; +} +.zettel-text .zettel-hak input { + appearance: none; + flex: none; + width: 11px; + height: 11px; + border: 1px solid var(--p-dim); + background: var(--bg); + cursor: pointer; + position: relative; + top: 1px; +} +.zettel-text .zettel-hak input:checked { background: var(--p); border-color: var(--p); } +.zettel-text .zettel-hak.ab span { color: var(--p-dim); text-decoration: line-through; } + +.zettel-fuss { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-top: 8px; +} +.zettel-stand { color: var(--p-dim); font-size: 11px; } +.zettel-fuss .btn { font-size: 12px; padding: 3px 9px; } + +/* ── Bild ────────────────────────────────────────────────────────────────── + * Fester Rahmen, das Bild füllt ihn. Verzerren wäre die Alternative — und + * Zuschneiden von Hand ein eigenes Stück Arbeit. */ +.bildw { + border: 1px solid var(--p-faint); + background: var(--bg); + aspect-ratio: 16 / 10; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.bildw-bild { width: 100%; height: 100%; object-fit: cover; display: block; } +.bildw .w-zustand { padding: 0 12px; text-align: center; } + +.bildw-linkzeile { display: flex; gap: 6px; margin-top: 8px; } +.bildw-linkzeile input { + flex: 1; + min-width: 0; + background: var(--bg); + border: 1px solid var(--p-dim); + color: var(--p); + font: inherit; + font-size: 12px; + padding: 4px 6px; +} +.bildw-linkzeile input:focus { outline: none; border-color: var(--p); } +.bildw-knoepfe { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } + /* Einspaltig (Handy, schmales Fenster) sollen die Widgets so breit sein wie das Systemfenster. Drei verschieden breite Kästen untereinander sehen aus wie ein Fehler, nicht wie Absicht. Muss hinter den Regeln stehen, die es aufhebt — diff --git a/web/js/core.js b/web/js/core.js index 2325c5d..6ed4dbb 100644 --- a/web/js/core.js +++ b/web/js/core.js @@ -53,7 +53,9 @@ export async function api(path, opts = {}) { const headers = { ...(opts.headers || {}) }; if (APPS_KEY) headers["X-HoneyOS-Key"] = APPS_KEY; if (opts.method && opts.method !== "GET") { - headers["Content-Type"] = "application/json"; + // Nur voreinstellen, nicht überschreiben: Das Bild-Widget schickt Bytes und + // nennt deren Typ selbst. Vorher log der Aufrufhelfer den Server an. + if (!headers["Content-Type"]) headers["Content-Type"] = "application/json"; const tok = cookie("honeyos_csrf"); if (tok) headers["X-CSRF-Token"] = tok; } diff --git a/web/js/os.js b/web/js/os.js index 6ecc24a..df76ea1 100644 --- a/web/js/os.js +++ b/web/js/os.js @@ -8,12 +8,14 @@ import { widgetsLaden, widgetsOrdnen, widgetsStarten, widgetsZeichnen } from "./ import "./widgets/user.js"; import { statsHtml } from "./widgets/system.js"; import { loadWeather, renderWeatherBar } from "./widgets/weather.js"; +import "./widgets/notiz.js"; +import "./widgets/bild.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"]); +widgetsOrdnen(["benutzer", "system", "wetter", "notiz", "bild"]); /* * HoneyOS — Desktop-Logik. diff --git a/web/js/widgets/bild.js b/web/js/widgets/bild.js new file mode 100644 index 0000000..076c43c --- /dev/null +++ b/web/js/widgets/bild.js @@ -0,0 +1,134 @@ +import { api, escapeAttr, escapeHtml } from "../core.js"; +import { widgetAnmelden, widgetsLaden, widgetsZeichnen } from "./rahmen.js"; + +/* ── Das Bild ────────────────────────────────────────────────────────────── + * + * Genau **ein** Bild je Nutzer, hochgeladen oder verlinkt. Ein neues ersetzt + * das alte, ohne Verwaltung und ohne Liste — das ist der ganze Reiz: Es ist + * das erste Widget, das nichts abfragt, sondern etwas *ist*. + * + * Hochgeladen wird zum eigenen Server; verlinkt wird auf eine fremde Adresse. + * Der Unterschied ist keiner der Bequemlichkeit: Ein Link holt bei jedem + * Aufbau des Schreibtischs etwas von woanders, ein Upload nie. + */ + +const LEER = "Kein Bild — hochladen oder Adresse einfügen."; + +let art = ""; // "datei" | "link" | "" +let quelle = ""; +let stand = ""; // Meldung unter dem Bild +let linkAuf = false; + +widgetAnmelden({ + id: "bild", + titel: "bild", + // Hält ein Dateifeld und ein Eingabefeld: Der Rahmen darf den Inhalt nicht + // unter den Fingern austauschen. + stabil: true, + + async laden() { + const d = await api("/api/image/info"); + art = (d && d.art) || ""; + quelle = (d && d.url) || ""; + }, + + inhalt() { + const bild = quelle + ? `` + : `

${LEER}

`; + + return ` +
${bild}
+ ${ + linkAuf + ? `
+ + +
` + : "" + } +
+ ${escapeHtml(stand)} + + + + + ${quelle ? `` : ""} + +
`; + }, + + montiert(el) { + const datei = el.querySelector(".bildw-datei"); + el.querySelector(".bildw-waehlen").addEventListener("click", () => datei.click()); + datei.addEventListener("change", () => datei.files[0] && hochladen(datei.files[0])); + + el.querySelector(".bildw-link").addEventListener("click", () => { + linkAuf = !linkAuf; + neu(); + }); + + const url = el.querySelector(".bildw-url"); + if (url) { + url.focus(); + const setzen = () => linkSetzen(url.value.trim()); + el.querySelector(".bildw-uebernehmen").addEventListener("click", setzen); + url.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + e.preventDefault(); + setzen(); + } + }); + } + + const weg = el.querySelector(".bildw-weg"); + if (weg) weg.addEventListener("click", () => linkSetzen("")); + + // Ein Bild, das nicht kommt, soll es sagen — bei einem Link ist das der + // Normalfall des Tages, an dem die fremde Seite umzieht. + const img = el.querySelector(".bildw-bild"); + if (img) { + img.addEventListener("error", () => { + melden(art === "link" ? "Adresse liefert kein Bild" : "Bild nicht lesbar"); + }); + } + }, +}); + +async function hochladen(file) { + melden("lädt hoch …"); + try { + await api("/api/image", { method: "POST", body: file, headers: { "Content-Type": file.type || "application/octet-stream" } }); + linkAuf = false; + await widgetsLaden("bild"); + melden(""); + } catch (e) { + melden(e.message); + } +} + +async function linkSetzen(adresse) { + melden(adresse ? "übernehme …" : "entferne …"); + try { + await api("/api/image", { method: "PUT", body: JSON.stringify({ url: adresse }) }); + linkAuf = false; + await widgetsLaden("bild"); + melden(""); + } catch (e) { + melden(e.message); + } +} + +function melden(s) { + stand = s; + document.querySelectorAll('[data-widget="bild"] .zettel-stand').forEach((el) => { + el.textContent = s; + }); +} + +/** Neu zeichnen — stabile Widgets lässt der Rahmen sonst in Ruhe. */ +function neu() { + document.querySelectorAll('[data-widget="bild"]').forEach((el) => delete el.dataset.zustand); + widgetsZeichnen(); +} diff --git a/web/js/widgets/notiz.js b/web/js/widgets/notiz.js new file mode 100644 index 0000000..bd4f15a --- /dev/null +++ b/web/js/widgets/notiz.js @@ -0,0 +1,254 @@ +import { api, escapeHtml } from "../core.js"; +import { widgetAnmelden, widgetsZeichnen } from "./rahmen.js"; + +/* ── Der Zettel ──────────────────────────────────────────────────────────── + * + * Ein Textfeld, mehr nicht. **InkNote gibt es schon** — der Zettel darf keine + * zweite Notiz-App werden: kein Titel, keine Liste, keine Ordner, keine Suche. + * Genau ein Text, den man im Vorbeigehen benutzt: Einkaufszettel, eine Nummer, + * ein Gedanke. Alles, was länger als einen Tag lebt, gehört nach InkNote. + * + * Zwei Ansichten: gelesen wird gesetzt, geschrieben wird roh. Der Umweg über + * einen Knopf ist Absicht — ein Feld, das immer im Bearbeitungsmodus steht, + * frisst jeden Klick, den man eigentlich dem Häkchen zugedacht hatte. + * + * Häkchen lassen sich **ohne** Bearbeiten setzen. Das ist der häufigste Griff + * an einer Liste, und dafür erst in den Text zu springen wäre albern. + */ + +const LEER = "Noch nichts notiert."; +const VERZUG = 800; // ms bis zum Speichern beim Tippen + +let text = ""; +let bearbeiten = false; +let stand = ""; // "speichert …" | "gespeichert" | Fehlertext +let uhr = null; + +widgetAnmelden({ + id: "notiz", + titel: "zettel", + // Der Zettel hält ein Textfeld: Sein Inhalt darf nicht bei jedem Neuzeichnen + // ersetzt werden, sonst verliert man beim Tippen Text und Schreibmarke. + stabil: true, + + async laden() { + const d = await api("/api/note"); + text = (d && d.text) || ""; + }, + + inhalt() { + if (bearbeiten) { + return ` + +
+ ${escapeHtml(stand)} + +
`; + } + return ` +
${text.trim() ? markdown(text) : `

${LEER}

`}
+
+ ${escapeHtml(stand)} + +
`; + }, + + montiert(el) { + const feld = el.querySelector(".zettel-feld"); + if (feld) { + feld.focus(); + // Schreibmarke ans Ende, nicht an den Anfang: Man schreibt weiter, man + // fängt selten neu an. + feld.setSelectionRange(feld.value.length, feld.value.length); + feld.addEventListener("input", () => { + text = feld.value; + spaeterSpeichern(); + }); + // Beim Verlassen sofort, nicht erst nach dem Verzug — sonst ginge der + // letzte Satz verloren, wenn man den Tab zumacht. + feld.addEventListener("blur", jetztSpeichern); + el.querySelector(".zettel-fertig").addEventListener("click", () => { + bearbeiten = false; + jetztSpeichern(); + neu(); + }); + return; + } + + const auf = el.querySelector(".zettel-auf"); + if (auf) { + auf.addEventListener("click", () => { + bearbeiten = true; + neu(); + }); + } + // Häkchen im gesetzten Text — sie ändern die Quelle, nicht nur die Anzeige. + el.querySelectorAll("[data-hak]").forEach((box) => + box.addEventListener("change", () => { + text = hakenUmlegen(text, Number(box.dataset.hak)); + neu(); + jetztSpeichern(); + }) + ); + }, +}); + +/** Neu zeichnen — der Rahmen lässt stabile Widgets sonst in Ruhe. */ +function neu() { + const koerper = document.querySelectorAll('[data-widget="notiz"]'); + koerper.forEach((el) => delete el.dataset.zustand); + widgetsZeichnen(); +} + +function spaeterSpeichern() { + stand = ""; + clearTimeout(uhr); + uhr = setTimeout(jetztSpeichern, VERZUG); +} + +/** + * Speichert, wenn sich etwas geändert hat. + * + * Zwei offene Geräte überschreiben einander; der letzte Stand gewinnt. Für + * einen Zettel ist das vertretbar — man sollte es nur wissen und nicht später + * „Datenverlust" nennen. + */ +let gespeichert = null; +async function jetztSpeichern() { + clearTimeout(uhr); + if (text === gespeichert) return; + const wollte = text; + standSetzen("speichert …"); + try { + await api("/api/note", { method: "PUT", body: JSON.stringify({ text: wollte }) }); + gespeichert = wollte; + standSetzen("gespeichert"); + } catch (e) { + standSetzen(e.message || "nicht gespeichert"); + } +} + +function standSetzen(s) { + stand = s; + document.querySelectorAll('[data-widget="notiz"] .zettel-stand').forEach((el) => { + el.textContent = s; + }); +} + +/* ── Das kleine Markdown ─────────────────────────────────────────────────── + * + * Absichtlich von Hand und absichtlich klein: Überschriften, Häkchen, Striche, + * Aufzählungen, fett, kursiv, Code. Keine Bibliothek — HoneyOS hat keinen + * Bauschritt, und für sechs Regeln lohnt kein Nachladen. + * + * **Zuerst wird escapt, dann gesetzt.** Der Text ist zwar der eigene, aber ein + * Zettel, der `