# 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/` ## Zugehöriges Projekt: P42-S.M. Die Server-Auslastung im Monitoring liefert der Agent **P42-S.M.** – ein eigenes Repository, das auf dem zu überwachenden Server läuft: **https://github.com/guyg1474/p42.s-m** Einrichtung dort in der README; danach hier im Monitoring eintragen (siehe [Monitoring](#monitoring)). ## 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** (die Städte der anderen lassen sich auf der Karte einblenden). - Gemeinsam für alle Konten: **Kanban**. - **Vorrat & Einkauf** in Listen (z. B. Zuhause, Urlaub): wer eine Liste anlegt, bestimmt, ob alle Konten sie sehen oder nur ausgewählte. - **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.](https://github.com/guyg1474/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 Oben wählst du die **Liste**, z. B. „Zuhause“ oder „Urlaub“. Jede Liste hat zwei eigene Bereiche: **Vorrat** (was da ist) und **Einkaufen** (was fehlt) – im Urlaub gibt es also einen eigenen Bestand und einen eigenen Einkaufszettel. - **Neue Liste:** „+ Neue Liste“ legt Vorrat und Einkauf zusammen neu an. Dabei festlegen, wer sie sieht: **alle Konten** oder **nur ausgewählte**. Der Ersteller sieht seine Liste immer. Name, Sichtbarkeit und Löschen („✎ Liste bearbeiten“) nur für den Ersteller und Administratoren – Administratoren aber nur bei Listen, die sie sehen. Löschen entfernt Vorrat und Einkauf der Liste. - Beim Update werden der bisherige Vorrat und die bisherige Einkaufsliste zur Liste „Zuhause“ (für alle sichtbar). - Welche Liste gewählt ist, merkt sich der Browser. Gekauft, aufgebraucht, Nachkaufen und der Rezeptabgleich wirken immer innerhalb der gewählten Liste. - **Einkaufen:** Abhaken legt ein Produkt „in den Wagen“ – es rutscht nach unten, bleibt aber auf der Einkaufsliste (für alle sichtbar, die die Liste sehen; erneut klicken nimmt den Haken zurück). **„Einkauf beenden“** übernimmt alle abgehakten Produkte auf einmal in den Vorrat. −‑Klick bei der letzten Einheit im Vorrat setzt ein Produkt 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). Der Schalter **Städte anderer zeigen** (über der Karte) blendet die Städte der übrigen Konten ein – je Person in einer eigenen Farbe, einzelne Personen lassen sich über ihre Schaltfläche aus- und einblenden (gemerkt pro Browser). Fremde Städte kann man nur ansehen, nicht ändern. Alle angemeldeten Konten können die Städte der anderen sehen. ### 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 | | Fabrik | Industrie-Inventar à la Satisfactory: Stahlplatten mit Schrauben, gelb leuchtende Buttons, orange Mengen-Zähler, Warnstreifen, drehende Zahnräder | „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 Listen (je Vorrat + Einkauf) mit Sichtbarkeit, 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 und Fabrik (überschreiben 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.