guyg1474andClaude Opus 5.5
f16c8c73c6
- Neue Prüfart "Server-Auslastung (P42-S.M.)": Adresse + Token (Token bleibt im Backend, wird nie an den Browser gegeben) - Karte zeigt CPU, RAM, vollste Platte, Load, Temperatur, Uptime - Klick öffnet große Ansicht: Kacheln, Platten, Threads, Temperaturen, Netzwerk, Verlaufsdiagramme (6 h / 24 h / 2 Tage) mit Tooltip und Tabelle - Hintergrund-Task speichert jede Minute einen Mittelwert (monitor_samples, 2 Tage), unabhängig davon, ob die Seite offen ist - Docker: zusätzlich im Netz p42, update-docker.sh legt es bei Bedarf an Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
212 lines
9.9 KiB
Markdown
212 lines
9.9 KiB
Markdown
# P42 Dashboard
|
||
|
||
Persönliche Startseite mit Konten, universeller Sendungsverfolgung, Projekt-Artikeln,
|
||
gemeinsamer Vorrats- und Einkaufsliste (mit Rezeptabgleich), Reise-Weltkarte, Kanban-Boards,
|
||
Schnellzugriff auf Jellyfin, Audiobookshelf und Homer sowie Server-Monitoring.
|
||
Zwei umschaltbare Designs: Matrix und Blackwall.
|
||
|
||
- **Backend:** Python (FastAPI) – `backend/`
|
||
- **Frontend:** React (Vite, React Router, TipTap-Editor) – `frontend/`
|
||
|
||
## Starten
|
||
|
||
```bash
|
||
./start.sh
|
||
```
|
||
|
||
Danach im Browser: http://localhost:3000
|
||
|
||
Das Skript legt beim ersten Mal die Python-Umgebung an, installiert die Pakete,
|
||
baut das Frontend (und baut es neu, sobald sich etwas in `frontend/src` ändert)
|
||
und startet den Server. Voraussetzungen: Python ≥ 3.11 und Node.js ≥ 20.
|
||
|
||
### Auf einem Server (Docker)
|
||
|
||
```bash
|
||
./deploy/update-docker.sh
|
||
```
|
||
|
||
Der Container öffnet nur einen internen Port (Standard `127.0.0.1:3000`), den ein nginx per HTTPS
|
||
nach außen gibt. Daten (`data/`) und Einstellungen (`config.json`) liegen außerhalb des Containers.
|
||
Einrichtung, Port-Optionen und nginx-Einstellungen: [DEPLOY.md](DEPLOY.md).
|
||
|
||
### Entwicklung (mit Live-Reload)
|
||
|
||
Zwei Terminals:
|
||
|
||
```bash
|
||
cd backend && RELOAD=1 .venv/bin/python -m app # API auf Port 3000
|
||
cd frontend && npm run dev # Oberfläche auf http://localhost:5173
|
||
```
|
||
|
||
Vite leitet `/api` und `/uploads` automatisch ans Backend weiter.
|
||
Die API-Dokumentation gibt es unter http://localhost:3000/api/docs.
|
||
|
||
## Konfiguration (`config.json`)
|
||
|
||
| Feld | Bedeutung |
|
||
|---|---|
|
||
| `port` | Port des Servers (Standard 3000) |
|
||
| `links` | Nur Startwerte für die Links des ersten Kontos (falls es keine alten Daten gibt) |
|
||
| `tracking.seventeenTrackApiKey` | API-Key von 17TRACK – universell, über 2000 Paketdienste |
|
||
| `tracking.dhlApiKey` | API-Key der DHL Shipment Tracking API (optional, für DHL-Sendungen) |
|
||
| `reisen.wikipediaKontakt` | Kontaktadresse, die bei Abrufen von Wikipedia/Wikidata mitgesendet wird (von Wikimedia verlangt). Leer = keine Wikipedia-Texte auf der Reise-Karte |
|
||
|
||
Nach Änderungen an `config.json` den Server neu starten.
|
||
|
||
## Konten
|
||
|
||
Die ganze Seite ist nur nach Anmeldung erreichbar.
|
||
|
||
- Beim allerersten Aufruf legst du das **erste Konto** an. Es wird Administrator und
|
||
übernimmt die bisherigen Projekte (als Autor) und Links.
|
||
- Weitere Konten legt ein Administrator unter **Menü → Benutzer verwalten** an
|
||
(dort auch: Passwort zurücksetzen, Admin-Rechte vergeben, Konten löschen).
|
||
- Unter **Menü → Mein Konto** ändert jeder seinen Anzeigenamen und sein Passwort.
|
||
- Pro Konto eigenständig: **Links** auf der Startseite, **Monitoring** und die **Reise-Karte**.
|
||
- Gemeinsam für alle Konten: **Vorrat & Einkauf** und **Kanban**.
|
||
- **Artikel** sind gemeinsam: alle Konten können sie lesen und bearbeiten; angezeigt wird,
|
||
wer ihn geschrieben und wer ihn zuletzt geändert hat. Löschen dürfen nur der Autor und
|
||
Administratoren.
|
||
|
||
Passwort vergessen und kein anderer Admin vorhanden? Im Ordner `backend/`:
|
||
|
||
```bash
|
||
.venv/bin/python -m app.reset_password BENUTZERNAME
|
||
```
|
||
|
||
### Schnellzugriff-Links (Jellyfin, Audiobookshelf, Homer)
|
||
|
||
Jedes Konto hinterlegt seine eigenen Adressen auf der Startseite über
|
||
„✎ Links bearbeiten“ (oder durch Klick auf eine Kachel ohne Link).
|
||
|
||
### Monitoring
|
||
|
||
Jedes Konto pflegt seine eigene Serverliste. Geprüft wird alle 30 Sekunden:
|
||
|
||
- **Webseite (HTTP):** online, wenn die Adresse antwortet (auch mit Anmeldeseite o. Ä.).
|
||
- **Port (TCP):** online, wenn der Port Verbindungen annimmt, z. B. `192.168.0.10:22`.
|
||
- **Server-Auslastung (P42-S.M.):** CPU, RAM, Platten, Load und Temperatur direkt auf der Karte.
|
||
Klick auf die Karte öffnet die große Ansicht mit allen Werten (alle 5 s aktualisiert) und dem Verlauf
|
||
der letzten 6 h, 24 h oder 2 Tage. Adresse `http://p42-sm:9142` (Agent auf demselben Server), dazu der
|
||
Token aus der `.env` von P42-S.M. Der Token wird nur im Backend gespeichert und nie an den Browser gegeben.
|
||
Für den Verlauf speichert das Dashboard jede Minute einen Mittelwert (Tabelle `monitor_samples`,
|
||
2 Tage lang) – auch wenn niemand die Seite offen hat.
|
||
|
||
Die Prüfung läuft vom Dashboard-Server aus – Adressen müssen also von dort erreichbar sein.
|
||
|
||
### Sendungsverfolgung
|
||
|
||
Ohne API-Key erkennt die Seite anhand des Nummernformats den wahrscheinlichen
|
||
Paketdienst und zeigt Links zur jeweiligen Tracking-Seite.
|
||
|
||
Für Live-Daten (Paketdienst, Status, voraussichtliche Ankunft, Verlauf):
|
||
|
||
- **17TRACK** (empfohlen, deckt DHL, Hermes, DPD, GLS, UPS, Post usw. ab):
|
||
Konto unter https://api.17track.net anlegen und den Key eintragen.
|
||
Der kostenlose Tarif hat ein begrenztes Kontingent an Sendungsnummern.
|
||
- **DHL** (optional, kostenlos): unter https://developer.dhl.com die API
|
||
„Shipment Tracking – Unified“ freischalten. DHL-Nummern werden dann direkt bei
|
||
DHL abgefragt, alles andere über 17TRACK.
|
||
|
||
### Projekte
|
||
|
||
Jedes Projekt ist ein Artikel mit Titelbild, Titel, Kurzbeschreibung, Status und
|
||
formatiertem Text (Überschriften, Listen, Zitate, Links, Bilder). Über „Bearbeiten“
|
||
wird der Artikel direkt auf der Seite geändert. Bilder lassen sich per Button,
|
||
Einfügen (Strg+V) oder Drag & Drop in den Text setzen.
|
||
|
||
Nicht mehr verwendete Bilder werden automatisch gelöscht. Der Artikeltext wird beim
|
||
Speichern serverseitig bereinigt.
|
||
|
||
### Vorrat & Einkauf
|
||
|
||
Gemeinsame Liste mit zwei Bereichen: **Vorrat** (was da ist) und **Einkaufen** (was fehlt).
|
||
Beim Eintippen schlägt die Seite bekannte Produkte vor, damit Namen einheitlich bleiben
|
||
("milch" wird automatisch zu "Milch"). Mengen als Anzahl, kg oder Liter.
|
||
|
||
- Haken bei „Gekauft“ übernimmt einen Eintrag in den Vorrat; −‑Klick bei der letzten Einheit
|
||
im Vorrat setzt ihn auf die Einkaufsliste.
|
||
- **Rezept abgleichen:** Link zu einer Rezeptseite (z. B. Chefkoch) oder eine Zutatenliste
|
||
einfügen, Personenzahl angeben. Die Seite rechnet die Mengen um, vergleicht mit dem Vorrat
|
||
und setzt Fehlendes auf die Einkaufsliste. Eiweiß/Eigelb werden zu Eiern.
|
||
Abgerufen wird nur die eingefügte Seite (schema.org-Rezeptdaten); Links ins eigene Netz
|
||
werden abgelehnt.
|
||
|
||
### Reisen
|
||
|
||
Weltkarte pro Konto: Städte, in denen man war, als Punkte; besuchte Länder ausgemalt.
|
||
Klick auf Land oder Punkt zoomt hin und zeigt unten links Infos (Länderdaten lokal,
|
||
Texte aus Wikipedia, Einwohner aus Wikidata, Orte über Open-Meteo/GeoNames).
|
||
|
||
### Kanban
|
||
|
||
Beliebig viele Projekte mit je einem Board (Offen, In Arbeit, Wartet, Erledigt). Aufgaben
|
||
haben Titel, Beschreibung, Status und Bearbeiter; verschieben per Drag & Drop oder im Dialog.
|
||
Projekte lassen sich mit Artikeln aus „P42 Projekte“ verknüpfen, abschließen, wieder öffnen
|
||
und löschen (löschen: wer angelegt hat und Administratoren).
|
||
|
||
### Designs
|
||
|
||
Im Menü unter **Design** umschaltbar, gespeichert pro Browser:
|
||
|
||
| Design | Stil |
|
||
|---|---|
|
||
| Matrix | rotes Retro-Terminal mit Matrix-Regen (Standard) |
|
||
| Blackwall | Cyberpunk-Netrunner: Pink-Rot mit Cyan, leuchtende Datenwand, abgeschrägte Panels |
|
||
|
||
„Animation: an/aus“ im Menü stoppt alle Hintergrund-Animationen; bei „Bewegung reduzieren“
|
||
im Betriebssystem sind sie automatisch aus. Die Designs sind von den Vorbildern inspiriert,
|
||
ohne Original-Logos; alle Schriften sind frei (OFL) und lokal eingebunden.
|
||
Quellen und Lizenzen: `docs/CREDITS.md`.
|
||
|
||
## Daten & Backup
|
||
|
||
Alles liegt im Ordner `data/`: die Datenbank `p42.db` (Konten, Projekte, Links,
|
||
Monitoring, Vorrat, Reisen, Kanban) und die Bilder in `uploads/`. Neue Tabellen und
|
||
Spalten legt der Server beim Start selbst an (Migrationen in `backend/app/db.py`). Für ein Backup den Server kurz stoppen und
|
||
den Ordner `data/` sichern. Ältere `projects.json`/`links.json` werden beim ersten Start
|
||
automatisch übernommen und danach in `*.importiert` umbenannt.
|
||
|
||
## Aufbau
|
||
|
||
```
|
||
start.sh Einrichten + Starten (lokal, ohne Docker)
|
||
Dockerfile, docker-compose.yml Betrieb auf dem Server, siehe DEPLOY.md
|
||
deploy/update-docker.sh Container bauen/aktualisieren
|
||
config.json Einstellungen (nicht ins Git)
|
||
data/ Datenbank und Bilder (nicht ins Git)
|
||
|
||
backend/
|
||
requirements.txt
|
||
app/main.py FastAPI: API-Routen, Uploads, Auslieferung des Frontends
|
||
app/config.py liest config.json
|
||
app/db.py SQLite-Schema, Übernahme alter JSON-Daten
|
||
app/auth.py Konten, Anmeldung, Benutzerverwaltung
|
||
app/projects.py Projekte/Artikel, Bild-Uploads, HTML-Bereinigung
|
||
app/links.py Schnellzugriff-Links pro Konto
|
||
app/monitoring.py Monitoring pro Konto (HTTP/TCP-Prüfung, P42-S.M.-Auslastung + Verlauf)
|
||
app/haushalt.py Vorrat & Einkauf, Produktkatalog, Einheiten
|
||
app/rezept.py Rezeptabgleich (Seite abrufen, Zutaten zerlegen, zuordnen)
|
||
app/reisen.py Reise-Karte, Städtesuche, Infos aus Wikipedia/Wikidata
|
||
app/kanban.py Kanban-Projekte, Aufgaben, Artikel-Verknüpfungen
|
||
app/tracking/ Paketdienst-Erkennung, 17TRACK, DHL
|
||
|
||
frontend/
|
||
src/main.jsx Routen
|
||
src/api.js API-Aufrufe, Bild-Upload
|
||
src/auth.jsx Anmeldestatus
|
||
src/styles.css Grund-Styling und Matrix-Design (responsiv, volle Breite)
|
||
src/themes.css Blackwall (überschreibt styles.css)
|
||
src/theme.js, motion.js Design-Auswahl, Animations-Schalter
|
||
src/components/ Layout + Menü, Hintergründe der Designs, Editor, Weltkarte, …
|
||
src/pages/ Login, Start, Projekte, Artikel, Vorrat, Reisen, Kanban, Monitoring, …
|
||
src/components/ServerDetail.jsx, LineChart.jsx Große Server-Ansicht, Verlaufsdiagramme (SVG)
|
||
src/data/laender.json Länderdaten (aus world-countries, ODbL)
|
||
public/maps/ Weltkarte (Natural Earth über world-atlas)
|
||
|
||
docs/ Design-Brief, Bibliotheken, Quellen & Lizenzen
|
||
```
|
||
|
||
`_alt-node/` (nur lokal, nicht im Repository) enthält die frühere Node.js-Version und kann gelöscht werden.
|