bump theming to 0.9.10

web/themes/THEME-ID-CHECKLIST.md

@@ -0,0 +1,338 @@
+# KX-Bridge Theme – Element-ID-Checkliste
+
+Alle IDs, die `default/app.js` erwartet oder nutzt. Beim Umbau eines Themes (`new1`, …) müssen diese **IDs beibehalten** werden, sonst brechen Features still (null-Check) oder mit Fehler (ohne null-Check).
+
+**Legende**
+
+| Symbol | Bedeutung |
+|--------|-----------|
+| **Pflicht** | Fehlt → Laufzeitfehler oder zentraler Ablauf bricht |
+| **Empfohlen** | Fehlt → Feature funktioniert nicht (meist mit `if(el)` abgesichert) |
+| **Optional** | Nur i18n, Dekoration oder rein HTML-seitig |
+
+**Quelle:** automatisch aus `default/app.js` extrahiert + Abgleich mit `default/index.html`
+
+---
+
+## Navigation & Panels
+
+| ID | Pflicht | Verwendung in app.js |
+|----|---------|----------------------|
+| `panel-dashboard` | **Pflicht** | `showPanel('dashboard')` |
+| `panel-printers` | **Pflicht** | `showPanel('printers')` |
+| `panel-store` | **Pflicht** | `showPanel('store')` |
+| `panel-console` | **Pflicht** | `showPanel('console')` |
+| `nb-dashboard` | Empfohlen | Sidebar active + i18n `.nav-text` |
+| `nb-printers` | Empfohlen | Sidebar active + i18n |
+| `nb-store` | Empfohlen | Sidebar active + i18n |
+| `nb-console` | Empfohlen | Sidebar active + i18n + `#log-badge` |
+| `bnb-dashboard` | Empfohlen | Bottom-Nav active + i18n |
+| `bnb-printers` | Empfohlen | Bottom-Nav |
+| `bnb-store` | Empfohlen | Bottom-Nav |
+| `bnb-console` | Empfohlen | Bottom-Nav + `#log-badge-bot` |
+| `log-badge` | Empfohlen | Fehler-Badge Sidebar-Konsole |
+| `log-badge-bot` | Empfohlen | Fehler-Badge Bottom-Nav |
+
+**CSS-Klassen:** `.panel`, `.nav-btn`, `.bnav-btn`, `.nav-text` (in Sidebar-Buttons)
+
+---
+
+## Header & Banner
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `lang-btn` | **Pflicht** | Sprachumschalter (ohne null-Check) |
+| `conn-btn` | **Pflicht** | Verbinden/Trennen, `updateConnBtn()` |
+| `settings-btn` | Optional | Nur HTML – `openSettings()` per onclick |
+| `printer-dropdown-wrap` | Empfohlen | Multi-Drucker UI |
+| `printer-dropdown-btn` | Optional | Nur HTML-onclick |
+| `printer-dropdown-menu` | Empfohlen | Dropdown-Inhalt |
+| `h-pname` | Empfohlen | Druckername (Multi-Modus) |
+| `h-pname-single` | Empfohlen | Druckername (Einzel-Modus) |
+| `h-version` | Empfohlen | Bridge-Version aus `/api/state` |
+| `h-badge` | Empfohlen | Status-Badge CSS-Klasse |
+| `h-state` | Empfohlen | Status-Text |
+| `conn-error-banner` | Empfohlen | MQTT-Verbindungsfehler |
+| `file-ready-banner` | Empfohlen | Slicer-Upload bereit |
+| `file-ready-name` | Empfohlen | Dateiname im Banner |
+| `file-ready-btn` | Empfohlen | Druck starten |
+| `file-slots-btn` | Empfohlen | Slots wählen |
+| `file-cancel-btn` | Empfohlen | Banner abbrechen |
+
+---
+
+## Dashboard – Kamera
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `d-light-toggle` | **Pflicht** | Licht sync in `applyState()` (`.checked`) |
+| `cam-toggle-btn` | Empfohlen | Start/Stop-Label |
+| `cam-img` | Empfohlen | MJPEG-Stream |
+| `cam-placeholder` | Empfohlen | Platzhalter sichtbar/unsichtbar |
+| `cam-placeholder-txt` | Empfohlen | i18n Platzhaltertext |
+| `cam-spinner` | Empfohlen | Lade-Animation |
+| `cam-overlay` | Empfohlen | Dateiname über Video |
+| `cam-fname` | Empfohlen | Dateiname in Overlay |
+| `cam-wrap` | Optional | Nur HTML/CSS |
+
+---
+
+## Dashboard – Fortschritt & Druck
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `d-pct` | Empfohlen | Prozent-Anzeige |
+| `d-pbar` | Empfohlen | Fortschrittsbalken |
+| `d-layers` | Empfohlen | Layer X / Y |
+| `d-elapsed` | Empfohlen | Verstrichene Zeit |
+| `d-remain` | Empfohlen | Restzeit |
+| `d-slicer-row` | Empfohlen | Slicer-Schätzung ein/aus |
+| `d-slicer-time` | Empfohlen | Slicer-Zeitwert |
+| `d-fname` | Empfohlen | Aktueller Dateiname |
+| `d-thumbnail` | Empfohlen | GCode-Vorschaubild |
+| `d-btn-pause` | Empfohlen | i18n + onclick |
+| `d-btn-resume` | Empfohlen | i18n + onclick |
+| `d-btn-cancel` | Empfohlen | i18n + onclick |
+| `d-ctrl-btns` | Optional | Nur Layout |
+| `p-fname` | Optional | Legacy/Print-Panel (falls vorhanden) |
+| `d-card-progress` | Optional | i18n Kartentitel |
+| `d-lbl-elapsed` | Optional | i18n |
+| `d-lbl-remain` | Optional | i18n |
+| `d-lbl-layers` | Optional | i18n |
+| `d-slicer-label` | Optional | i18n |
+
+---
+
+## Dashboard – Temperaturen
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `d-nt` | Empfohlen | Ist-Temperatur Düse |
+| `d-nt-t` | Empfohlen | Soll-Temperatur Düse |
+| `d-bt` | Empfohlen | Ist-Temperatur Bett |
+| `d-bt-t` | Empfohlen | Soll-Temperatur Bett |
+| `d-ntbar` | Empfohlen | Fortschrittsbalken Düse |
+| `d-btbar` | Empfohlen | Fortschrittsbalken Bett |
+| `p-nozzle-inp` | Empfohlen | Eingabe Ziel Düse (`setNozzle`) |
+| `p-bed-inp` | Empfohlen | Eingabe Ziel Bett (`setBed`) |
+| `d-chart` | Empfohlen | Canvas Temperatur-Verlauf |
+| `d-chart-label` | Optional | i18n |
+| `d-card-temps` | Optional | i18n |
+| `d-lbl-bed` | Optional | i18n |
+
+**CSS-Klassen:** `.lbl-set`, `.lbl-off`, `.temp-input`
+
+---
+
+## Dashboard – Achsen & Schrittweite
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `step-display` | Empfohlen | Anzeige aktuelle Schrittweite |
+| `ptitle-motion-xy` | Optional | i18n |
+| `ptitle-motion-z` | Optional | i18n |
+
+**CSS-Klassen:** `.step-btn`, `.joy`, `.lbl-home-z`, `.lbl-home-xy`, `.lbl-home-all`, `.lbl-disable-motors`, `.lbl-step`
+
+---
+
+## Dashboard – Geschwindigkeit & Lüfter
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `d-spd-1` | Empfohlen | Speed-Modus Leise |
+| `d-spd-2` | Empfohlen | Speed-Modus Normal |
+| `d-spd-3` | Empfohlen | Speed-Modus Sport |
+| `d-spd-bar` | Empfohlen | Speed-Balken |
+| `d-fan` | Empfohlen | Lüfter-Slider |
+| `d-fan-val` | Empfohlen | Lüfter-Prozent-Anzeige |
+| `d-card-speed` | Optional | i18n |
+| `d-card-lightfan` | Optional | i18n |
+| `d-spd-lbl-1` | Optional | i18n |
+| `d-spd-lbl-2` | Optional | i18n |
+| `d-spd-lbl-3` | Optional | i18n |
+| `d-lbl-light` | Optional | i18n |
+
+**CSS-Klassen:** `.lbl-feed`, `.lbl-unload` (AMS-Bereich)
+
+---
+
+## Dashboard – AMS
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `ams-slots` | **Pflicht** | Container für dynamische Slot-Kacheln |
+| `ams-slot-sel` | Empfohlen | Slot-Auswahl für Feed/Unload |
+| `ams-slot-label` | Optional | Nur HTML-oninput Label |
+| `ams-no-data` | Optional | Platzhalter (wird durch JS ersetzt) |
+| `btn-unload` | Optional | Nur HTML |
+| `d-card-ams` | Optional | i18n |
+| `d-card-cam` | Optional | i18n |
+
+---
+
+## Einstellungen (`#settings-modal`)
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `settings-modal` | **Pflicht** | Modal open/close (`.classList`) |
+| `s-printer-name` | Empfohlen | Config-Feld |
+| `s-printer-ip` | **Pflicht** | Config + IP-Hinweis-Listener |
+| `s-mqtt-port` | Empfohlen | Config |
+| `s-username` | Empfohlen | Config |
+| `s-password` | Empfohlen | Config |
+| `s-device-id` | Empfohlen | Config |
+| `s-mode-id` | Empfohlen | Config |
+| `s-default-slot` | Empfohlen | AMS-Standard-Slot |
+| `s-auto-leveling` | Empfohlen | Checkbox Auto-Leveling |
+| `poll-1` | Empfohlen | Poll 1 s |
+| `poll-2` | Empfohlen | Poll 2 s |
+| `poll-5` | Empfohlen | Poll 5 s |
+| `s-version-label` | Empfohlen | Versionsanzeige |
+| `update-status` | Empfohlen | Update-Status-Text |
+| `btn-update-apply` | Empfohlen | Update installieren |
+| `update-changelog` | Empfohlen | Changelog-Anzeige |
+| `btn-save-settings` | Empfohlen | Speichern |
+| `btn-update-check` | Optional | Nur HTML-onclick |
+| `lbl-ip-hint` | Empfohlen | IP-Format-Warnung |
+| `modal-title-settings` | Optional | i18n |
+| `modal-sec-connection` | Optional | i18n |
+| `modal-sec-print` | Optional | i18n |
+| `modal-sec-poll` | Optional | i18n |
+| `modal-sec-version` | Optional | i18n |
+| `lbl-printer-name` … `lbl-mode-id` | Optional | i18n Labels |
+| `lbl-default-slot` | Optional | i18n |
+| `lbl-auto-leveling` | Optional | i18n |
+| `opt-slot-auto` | Optional | i18n |
+| `opt-slot-0` … `opt-slot-3` | Optional | Nur HTML |
+| `lbl-update-check` | Optional | i18n |
+| `lbl-update-apply` | Optional | i18n |
+
+**CSS-Klasse:** `.poll-btn`
+
+---
+
+## AMS-Slot-Dialog (`#slot-edit-modal`)
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `slot-edit-modal` | **Pflicht** | Modal open/close |
+| `slot-edit-title` | Empfohlen | Dialogtitel |
+| `slot-edit-color` | Empfohlen | Farbwähler |
+| `slot-edit-preview` | Empfohlen | Farbvorschau |
+| `slot-edit-mat` | Empfohlen | Material-Text |
+| `slot-mat-btns` | Empfohlen | Preset-Buttons (dynamisch) |
+| `btn-slot-edit-save` | Empfohlen | Speichern |
+| `lbl-slot-color` | Optional | i18n |
+| `lbl-slot-material` | Optional | i18n |
+
+**CSS-Klasse:** `.mat-preset-btn` (dynamisch)
+
+---
+
+## Filament-Druck-Dialog (`#filament-dialog`)
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `filament-dialog` | **Pflicht** | Modal open/close |
+| `fd-title` | Empfohlen | Dateiname im Titel |
+| `fd-slots` | Empfohlen | Kanal→Slot-Zuordnung (dynamisch) |
+
+---
+
+## Drucker hinzufügen (`#add-printer-dialog`)
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `add-printer-dialog` | **Pflicht** | Modal open/close |
+| `apd-ip` | Empfohlen | IP-Eingabe |
+| `apd-name` | Empfohlen | Name optional |
+| `apd-status` | Empfohlen | Status/Fehlermeldung |
+| `apd-confirm` | Empfohlen | Bestätigen |
+| `apd-title` | Optional | i18n |
+| `apd-lbl-ip` | Optional | i18n |
+| `apd-lbl-name` | Optional | i18n |
+| `add-printer-btn-label` | Optional | i18n |
+
+---
+
+## Drucker-Tab
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `printers-grid` | Empfohlen | Container Drucker-Karten |
+| `printers-panel-title` | Optional | i18n |
+
+---
+
+## Datei-Browser
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `store-grid` | Empfohlen | Datei-Karten (dynamisch) |
+| `store-empty` | Empfohlen | Leer-/Kein-Treffer-Hinweis |
+| `store-search` | Empfohlen | Suche |
+| `store-filter` | Empfohlen | Filter Select |
+| `store-sort` | Empfohlen | Sortierung Select |
+| `store-refresh-btn` | Optional | i18n Button-Text |
+| `store-panel-title` | Optional | i18n |
+| `sf-all`, `sf-ok`, `sf-err`, `sf-new` | Optional | i18n Optionen |
+| `ss-date`, `ss-name`, `ss-dur` | Optional | i18n Optionen |
+
+---
+
+## Konsole
+
+| ID | Pflicht | Verwendung |
+|----|---------|------------|
+| `console-log` | Empfohlen | Log-Ausgabe |
+| `log-filter` | Empfohlen | Textfilter |
+| `btn-autoscroll` | Empfohlen | Auto-Scroll Toggle |
+| `logdir-all` | Empfohlen | Filter Alle |
+| `logdir-rx` | Empfohlen | Filter RX |
+| `logdir-tx` | Empfohlen | Filter TX |
+| `ptitle-console` | Optional | i18n |
+| `btn-log-dl` | Optional | Nur HTML – Download-Link `/api/log/download` |
+
+**CSS-Klassen:** `.log-dir-btn`, `.log-topic-btn` (Topic-Buttons nutzen `data-topic`, keine festen IDs)
+
+---
+
+## IDs nur in HTML (nicht in app.js)
+
+Diese IDs sind im Default-Theme vorhanden, werden von `app.js` aber nicht per `getElementById` angesprochen:
+
+| ID | Anmerkung |
+|----|-----------|
+| `settings-btn` | Nur `onclick="openSettings()"` |
+| `printer-dropdown-btn` | Nur onclick |
+| `btn-update-check` | Nur onclick |
+| `opt-slot-0` … `opt-slot-3` | Option-Labels statisch |
+| `cam-wrap` | Layout |
+| `d-ctrl-btns` | Layout |
+| `ams-no-data` | Initial-Platzhalter, wird von JS überschrieben |
+| `ams-slot-label` | Nur inline oninput |
+| `btn-unload` | Nur HTML |
+| `btn-log-dl` | Statischer Download-Link |
+
+---
+
+## Schnell-Check vor Theme-Release
+
+- [ ] Alle vier `panel-*` vorhanden und in `.panel` gewrappt
+- [ ] `lang-btn`, `conn-btn`, `d-light-toggle`, `settings-modal`, `ams-slots` vorhanden
+- [ ] Alle Modals: `settings-modal`, `slot-edit-modal`, `filament-dialog`, `add-printer-dialog`
+- [ ] Navigation: `nb-*` / `bnb-*` für `dashboard`, `printers`, `store`, `console`
+- [ ] Dashboard-Kern: Temps, Progress, Fan, Speed, AMS-Container
+- [ ] Store: `store-grid`, `store-search`, `store-filter`, `store-sort`
+- [ ] Konsole: `console-log`, `log-filter`
+- [ ] `index.html` bindet `/kx/ui/style.css` und `/kx/ui/app.js` ein
+- [ ] Alle `onclick`-Handler aus [THEME-JS-HOOKS.md](./THEME-JS-HOOKS.md) gesetzt oder ersetzt
+
+---
+
+## Siehe auch
+
+- [THEME-JS-HOOKS.md](./THEME-JS-HOOKS.md) – alle JS-Funktionsaufrufe mit Kontext
+- Theme-Ordner: `web/themes/<name>/` mit `index.html`, `style.css`, `app.js`
+- Aktivierung: `--ui-theme <name>` oder `KX_UI_THEME=<name>`