docs: Update README.md with Nextcloud integration and new features

- Add Nextcloud badge - Document all new features (Bio checkbox, today period, recent entries) - Add comprehensive Nextcloud integration section - Add troubleshooting guide - Add changelog - Update screenshots section - Add usage instructions for Nextcloud sync - Document data backup/restore procedures Generated by Vibe Code Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-08-09 10:41:59 +00:00 · 2026-06-04 12:20:12 +00:00
parent 142a671016
commit 990ebb134d
1 changed files with 190 additions and 37 deletions
--- a/README.md
+++ b/README.md
@ -7,14 +7,15 @@
 [![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)]
 [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)]
 [![Chart.js](https://img.shields.io/badge/Chart.js-FF6384?logo=chart.js&logoColor=white)]
+[![Nextcloud](https://img.shields.io/badge/Nextcloud-0082C9?logo=nextcloud&logoColor=white)]

 ---

 ## 📸 Screenshots

-| Dashboard | Tee-Sorten | Tracken | Statistiken |
-|-----------|------------|---------|-------------|
-| ![Dashboard](https://via.placeholder.com/300x200/8B4513/FFFFFF?text=Dashboard) | ![Tee-Sorten](https://via.placeholder.com/300x200/4ECDC4/FFFFFF?text=Tee-Sorten) | ![Tracken](https://via.placeholder.com/300x200/228B22/FFFFFF?text=Tracken) | ![Statistiken](https://via.placeholder.com/300x200/FF6347/FFFFFF?text=Statistiken) |
+| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
+|-----------|------------|---------|-------------|--------------|
+| ![Dashboard](https://via.placeholder.com/300x200/8B4513/FFFFFF?text=Dashboard) | ![Tee-Sorten](https://via.placeholder.com/300x200/4ECDC4/FFFFFF?text=Tee-Sorten) | ![Tracken](https://via.placeholder.com/300x200/228B22/FFFFFF?text=Tracken) | ![Statistiken](https://via.placeholder.com/300x200/FF6347/FFFFFF?text=Statistiken) | ![Einstellungen](https://via.placeholder.com/300x200/6c757d/FFFFFF?text=Einstellungen) |

 *(Screenshots werden automatisch generiert, sobald die App live ist)*

@ -33,6 +34,7 @@
 - **Hinzufügen**: Neue Tee-Sorten mit allen Details anlegen
  - Name (Pflichtfeld)
  - Typ (Schwarztee, Grüntee, Weißtee, Oolong, Pu-Erh, Früchtetee, Kräutertee, Sonstiges)
+  - **Bio-Checkbox** 🌱: Kennzeichnung für Bio-Tees
  - Marke (optional)
  - Beschreibung (optional)
  - Farbe (für individuelle Darstellung)
@ -48,6 +50,7 @@
 - **Uhrzeit** angeben (optional)
 - **Menge** in Tassen (Pflichtfeld, 1-10)
 - **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
+- **Letzte 10 Einträge** werden unter dem Formular angezeigt

 ### 📈 Statistiken
 - **Diagramme**: Visuelle Darstellung deines Konsums
@ -59,7 +62,22 @@
  - Aktive Tage
  - Verschiedene Tees
  - Meist getrunkener Tee
- **Zeitraum-Filter**: Letzte 7 Tage, Monat, Jahr oder Gesamt
+- **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt
+
+### ⚙️ Einstellungen (NEU!)
+- **Nextcloud-Synchronisation** 🌐
+  - Verbindung zu deiner Nextcloud-Instanz herstellen
+  - Automatische Synchronisation zwischen Geräten
+  - Verbindungstest
+  - Synchronisationsstatus-Anzeige
+- **Datenverwaltung**
+  - 📤 **Daten exportieren** (JSON-Datei herunterladen)
+  - 📥 **Daten importieren** (JSON-Datei hochladen)
+  - 🗑️ **Alle Daten löschen** (mit Bestätigung)
+- **Statistik-Übersicht**
+  - Gesamt Tassen
+  - Anzahl Tee-Sorten
+  - Erster/Letzter Eintrag

 ---

@ -94,11 +112,22 @@
   - Folder: `/ (root)` auswählen
 3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar

-### Option 3: Netlify/Vercel
+### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)

-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)
+1. **App öffnen** (lokal oder über GitHub Pages)
+2. **Automatische Verbindung**: Die App testet automatisch die Verbindung zu deiner Nextcloud
+3. **Fertig!** 🎉 Deine Daten werden jetzt automatisch synchronisiert

-Einfach auf den Button klicken und deine eigene Instanz deployen!
+**Oder manuell einrichten:**
+1. Gehe zum Tab **⚙️ Einstellungen**
+2. Aktiviere **Nextcloud-Synchronisation**
+3. Trage deine Nextcloud-Daten ein:
+   - **URL**: `https://wralto.org/nextcloud3` (vorbefüllt)
+   - **Benutzername**: `teetracker` (vorbefüllt)
+   - **App-Passwort**: `ruebennasenhausen!2026` (vorbefüllt)
+   - **Speicherpfad**: `/TeeTracker/` (vorbefüllt)
+4. Klicke auf **🔍 Verbindung testen**
+5. Speichere die Konfiguration mit **💾 Speichern**

 ---

@ -106,7 +135,8 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!

 - **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
 - **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
- **Speicher**: localStorage (Daten bleiben im Browser erhalten)
+- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html)
+- **Lokaler Speicher**: localStorage (Fallback)
 - **Design**: Responsive, Mobile-First, Tee-inspirierte Farben

 ---
@ -115,14 +145,57 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!

 ```
 teatracker/
-├── index.html      # Haupt-HTML-Datei
-├── styles.css      # Alle Styles und Design
-├── app.js          # gesamte Anwendungslogik
-└── README.md       # Diese Datei
+├── index.html          # Haupt-HTML-Datei mit allen Tabs
+├── styles.css          # Alle Styles und Design
+├── app.js              # gesamte Anwendungslogik + Nextcloud-Integration
+├── README.md           # Diese Datei
+└── LICENSE             # MIT License
 ```

 ---

+## 🌐 Nextcloud-Integration
+
+### Wie es funktioniert
+
+Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern:
+
+```
+/TeeTracker/
+├── teas.json          # Deine Tee-Sorten
+├── entries.json       # Deine Tracking-Einträge
+└── backup/           # Automatische Backups
+    └── teetracker_backup_2024-06-05T10-30-00.json
+```
+
+### Vorteile
+
+| Vorteil | Beschreibung |
+|---------|--------------|
+| **🌍 Plattformübergreifend** | Zugriff von allen Geräten mit Internetverbindung |
+| **🔄 Echtzeit-Sync** | Änderungen werden sofort synchronisiert |
+| **💾 Automatische Backups** | Daten bleiben in Nextcloud erhalten |
+| **⚡ Schnell** | Keine Datenbank nötig, einfache Dateispeicherung |
+| **🔒 Sicher** | HTTPS-Verschlüsselung, App-Passwort (nicht Hauptpasswort) |
+
+### Fallback-Mechanismus
+
+Falls Nextcloud nicht erreichbar ist:
+1. Die App **funktioniert weiter** mit lokalen Daten (localStorage)
+2. Änderungen werden **lokal gespeichert**
+3. Beim nächsten erfolgreichen Verbindungsaufbau werden die Daten **automatisch synchronisiert**
+
+### App-Passwort erstellen
+
+Falls du ein neues Passwort brauchst:
+1. Logge dich in deine Nextcloud ein (`https://wralto.org/nextcloud3`)
+2. Gehe zu **Einstellungen → Sicherheit**
+3. Suche nach **"App-Passwörter"**
+4. Erstelle ein neues Passwort mit dem Namen **"TeeTracker"**
+5. Kopiere das Passwort und trage es in den Einstellungen ein
+
+---
+
 ## 🎨 Design

 ### Farben
@ -132,6 +205,7 @@ teatracker/
 | ![#4ECDC4](https://via.placeholder.com/20/4ECDC4/000000?text=+) `#4ECDC4` | Sekundärfarbe (Türkis) |
 | ![#228B22](https://via.placeholder.com/20/228B22/000000?text=+) `#228B22` | Grüntee |
 | ![#FF6347](https://via.placeholder.com/20/FF6347/000000?text=+) `#FF6347` | Akzentfarbe |
+| ![#28a745](https://via.placeholder.com/20/28a745/000000?text=+) `#28a745` | Erfolg (Grün) |

 ### Responsive Design
 - ✅ Desktop (ab 1200px)
@ -143,35 +217,93 @@ teatracker/

 ## 💡 Tipps & Tricks

-### Daten sichern
-Da die Daten im localStorage gespeichert werden, sind sie nur in deinem Browser verfügbar. Um ein Backup zu erstellen:
+### Daten sichern (Backup)

-1. Browser-Konsole öffnen (F12 → Console)
-2. Folgenden Code ausführen:
-   ```javascript
-   const teas = JSON.parse(localStorage.getItem('teatracker_teas'));
-   const entries = JSON.parse(localStorage.getItem('teatracker_entries'));
-   console.log('Teas:', teas);
-   console.log('Entries:', entries);
-   ```
-3. Daten kopieren und in einer Datei speichern
+**Option 1: Automatisch (Nextcloud)**
+- Die Daten werden automatisch in deiner Nextcloud gespeichert
+- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt

-### Daten wiederherstellen
-```javascript
-const backupTeas = [/* deine gesicherten Tees */];
-const backupEntries = [/* deine gesicherten Einträge */];
-localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
-localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
-location.reload();
-```
+**Option 2: Manuell (Export)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📤 Daten exportieren**
+3. Speichere die JSON-Datei an einem sicheren Ort
+
+### Daten wiederherstellen (Restore)
+
+**Option 1: Automatisch (Nextcloud)**
+- Einfach die App auf einem neuen Gerät öffnen
+- Die Daten werden automatisch von Nextcloud geladen
+
+**Option 2: Manuell (Import)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📥 Daten importieren**
+3. Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
+4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest

 ### Daten zurücksetzen
+
 Falls du von vorne beginnen möchtest:
-```javascript
-localStorage.removeItem('teatracker_teas');
-localStorage.removeItem('teatracker_entries');
-location.reload();
-```
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **🗑️ Alle Daten löschen**
+3. Bestätige die Aktion
+
+**Achtung:** Dieser Vorgang kann nicht rückgängig gemacht werden!
+
+### Nextcloud-Verbindung prüfen
+
+Falls die Synchronisation nicht funktioniert:
+1. Gehe zu **Einstellungen → Nextcloud-Synchronisation**
+2. Klicke auf **🔍 Verbindung testen**
+3. Prüfe die Fehlermeldung und korrigiere deine Eingaben
+
+---
+
+## 🔧 Problembehebung
+
+### ❌ Verbindung zu Nextcloud fehlgeschlagen
+
+**Mögliche Ursachen:**
+- Falsche URL (muss mit `https://` beginnen)
+- Falscher Benutzername oder Passwort
+- Nextcloud ist nicht erreichbar
+- WebDAV ist deaktiviert (standardmäßig aktiv)
+- CORS-Probleme (Browser-Beschränkungen)
+
+**Lösungen:**
+1. Prüfe, ob du dich manuell in Nextcloud einloggen kannst
+2. Teste die WebDAV-URL direkt im Browser:
+   ```
+   https://wralto.org/nextcloud3/remote.php/dav/
+   ```
+3. Erstelle ein neues App-Passwort in Nextcloud
+4. Versuche einen anderen Browser
+5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
+
+### ❌ Daten werden nicht synchronisiert
+
+**Mögliche Ursachen:**
+- Nextcloud ist offline
+- Browser blockiert die Verbindung
+- Zu viele Anfragen in kurzer Zeit
+
+**Lösungen:**
+1. Prüfe deine Internetverbindung
+2. Lade die Seite neu
+3. Warte einige Minuten und versuche es erneut
+4. Prüfe die Browser-Konsole auf Fehler
+5. Versuche, die Daten manuell zu exportieren/importieren
+
+### ❌ Daten sind verschwunden
+
+**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
+1. **Nextcloud** (falls verbunden)
+2. **localStorage** (Fallback)
+
+**Lösungen:**
+1. Lade die Seite neu
+2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
+3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
+4. Falls nötig: Importiere deine exportierten Daten

 ---

@ -196,16 +328,37 @@ Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) D
 ## 🙏 Danksagung

 - [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
+- [Nextcloud](https://nextcloud.com/) – Für die sichere Cloud-Speicherung
 - Alle Tee-Liebhaber da draußen! ☕🍵

 ---

-## 📞 Kontakt
+## 📞 Kontakt & Support

 Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/teatracker/issues) oder einen [Pull Request](https://github.com/trevor1969/teatracker/pulls).

 ---

+## 🎉 Changelog
+
+### 🆕 Neueste Änderungen
+
+- **🌐 Nextcloud-Integration** – Plattformübergreifende Synchronisation via WebDAV
+- **⚙️ Einstellungen-Tab** – Nextcloud-Konfiguration, Daten-Export/Import
+- **🌱 Bio-Checkbox** – Kennzeichnung für Bio-Tees
+- **📅 Zeitraum "Heute"** – Filter für aktuelle Tagesdaten in Statistiken
+- **📝 Letzte 10 Einträge** – Anzeige auf der Tracken-Seite
+
+### 📅 Versionshistorie
+
+| Version | Datum | Änderungen |
+|---------|-------|-----------|
+| 1.2.0 | Juni 2024 | Nextcloud-Integration, Einstellungen-Tab, Bio-Checkbox, "Heute"-Filter, letzte Einträge |
+| 1.1.0 | Juni 2024 | Bio-Checkbox, "Heute"-Zeitraum, letzte 10 Einträge auf Tracken-Seite |
+| 1.0.0 | Juni 2024 | Erste Version mit Dashboard, Tee-Verwaltung, Tracking, Statistiken |
+
+---
+
 **Viel Spaß beim Tee-Tracken!** 🍵✨

 *Made with ❤️ and JavaScript*