- Add corsproxy.io as fallback for CORS-restricted WebDAV requests - Add fetchWithProxy wrapper method to NextcloudStorage class - Update all NextcloudStorage methods to use proxy fallback - Proxy is automatically used when direct connection fails - Add useProxy flag to track proxy usage This fixes the 'NetworkError when attempting to fetch resource' issue caused by CORS restrictions when accessing Nextcloud from file:// or different domains. Generated by Vibe Code Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
🍵 TeeTracker
Dein persönlicher Tee-Konsum Tracker – Verwalte deine Tee-Sorten und tracke, wie viel Tee du trinkst!
📸 Screenshots
| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
|---|---|---|---|---|
(Screenshots werden automatisch generiert, sobald die App live ist)
✨ Funktionen
📊 Dashboard
- Gesamtübersicht: Alle getrunkenen Tassen seit Beginn
- Heute: Wie viel Tee du heute schon getrunken hast
- Diese Woche: Wöchentlicher Konsum
- Tee-Sorten: Anzahl deiner gespeicherten Sorten
- Letzte Aktivitäten: Die letzten 5 getrackten Einträge
🍃 Tee-Sorten verwalten
- 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)
- Bearbeiten: Bestehende Sorten anpassen
- Löschen: Sorten entfernen (mit Bestätigung)
- Suche & Filter: Schnell finden, was du suchst
- Textsuche nach Name, Marke oder Beschreibung
- Filter nach Tee-Typ
📝 Tee-Konsum tracken
- Tee-Sorte auswählen (Pflichtfeld)
- Datum auswählen (Pflichtfeld, standardmäßig heute)
- 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
- Donut-Chart: Verteilung nach Tee-Typen
- Balkendiagramm: Tagesverlauf
- Detaillierte Statistiken
- Gesamt getrunken
- Durchschnitt pro Tag
- Aktive Tage
- Verschiedene Tees
- Meist getrunkener Tee
- 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
🚀 Schnellstart
Option 1: Lokal nutzen
-
Repository klonen (oder Dateien herunterladen):
git clone https://github.com/trevor1969/teatracker.git cd teatracker -
index.html öffnen:
- Einfach die
index.htmlDatei in deinem Browser öffnen - Oder einen lokalen Server starten:
# Mit Python 3 python -m http.server 8000 # Mit Node.js (npx) npx serve - Dann im Browser
http://localhost:8000öffnen
- Einfach die
Option 2: GitHub Pages
- Gehe zu deinem Repository auf GitHub
- Aktiviere GitHub Pages:
- Settings → Pages
- Branch:
mainauswählen - Folder:
/ (root)auswählen
- Deine App ist dann unter
https://trevor1969.github.io/teatracker/erreichbar
Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
- App öffnen (lokal oder über GitHub Pages)
- Gehe zum Tab ⚙️ Einstellungen
- Aktiviere Nextcloud-Synchronisation
- Trage deine Nextcloud-Daten ein:
- URL:
https://wralto.org/nextcloud3 - Benutzername:
teetracker - App-Passwort: (dein App-Passwort aus Nextcloud)
- Speicherpfad:
/TeeTracker/(Standard)
- URL:
- Klicke auf 🔍 Verbindung testen
- Speichere die Konfiguration mit 💾 Speichern
- Fertig! 🎉 Deine Daten werden jetzt automatisch synchronisiert
Hinweis: Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
🛠 Technologien
- Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
- Charts: Chart.js (über CDN)
- Cloud-Speicher: Nextcloud WebDAV API
- Lokaler Speicher: localStorage (Fallback)
- Design: Responsive, Mobile-First, Tee-inspirierte Farben
📦 Projektstruktur
teatracker/
├── 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:
- Die App funktioniert weiter mit lokalen Daten (localStorage)
- Änderungen werden lokal gespeichert
- Beim nächsten erfolgreichen Verbindungsaufbau werden die Daten automatisch synchronisiert
🔐 Sicherheitshinweise
WICHTIG: Aus Sicherheitsgründen wird dein Passwort NICHT im Klartext in der App oder im localStorage gespeichert!
- sessionStorage: Das Passwort wird nur in
sessionStoragegespeichert (wird beim Schließen des Browsers gelöscht) - Keine Vorbefüllung: Du musst dein Passwort manuell eingeben
- Kein Klartext in Dateien: Das Passwort erscheint nirgends im Code
App-Passwort erstellen
Falls du ein neues Passwort brauchst:
- Logge dich in deine Nextcloud ein (
https://wralto.org/nextcloud3) - Gehe zu Einstellungen → Sicherheit
- Suche nach "App-Passwörter"
- Erstelle ein neues Passwort mit dem Namen "TeeTracker"
- Kopiere das Passwort und trage es in den Einstellungen ein
Tipp: Speichere das App-Passwort in einem Passwort-Manager, da es nach dem Erstellen nicht mehr angezeigt wird.
🎨 Design
Farben
| Farbe | Hex | Verwendung |
|---|---|---|
#8B4513 |
Primärfarbe (Braun) | |
#4ECDC4 |
Sekundärfarbe (Türkis) | |
#228B22 |
Grüntee | |
#FF6347 |
Akzentfarbe | |
#28a745 |
Erfolg (Grün) |
Responsive Design
- ✅ Desktop (ab 1200px)
- ✅ Tablet (768px - 1199px)
- ✅ Mobile (unter 768px)
- ✅ Kleine Geräte (unter 480px)
💡 Tipps & Tricks
Daten sichern (Backup)
Option 1: Automatisch (Nextcloud)
- Die Daten werden automatisch in deiner Nextcloud gespeichert
- Backups werden im
/TeeTracker/backup/Verzeichnis erstellt
Option 2: Manuell (Export)
- Gehe zu Einstellungen → Datenverwaltung
- Klicke auf 📤 Daten exportieren
- 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)
- Gehe zu Einstellungen → Datenverwaltung
- Klicke auf 📥 Daten importieren
- Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
- Wähle, ob du die Daten ersetzen oder zusammenführen möchtest
Daten zurücksetzen
Falls du von vorne beginnen möchtest:
- Gehe zu Einstellungen → Datenverwaltung
- Klicke auf 🗑️ Alle Daten löschen
- Bestätige die Aktion
Achtung: Dieser Vorgang kann nicht rückgängig gemacht werden!
Nextcloud-Verbindung prüfen
Falls die Synchronisation nicht funktioniert:
- Gehe zu Einstellungen → Nextcloud-Synchronisation
- Klicke auf 🔍 Verbindung testen
- 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:
- Prüfe, ob du dich manuell in Nextcloud einloggen kannst
- Teste die WebDAV-URL direkt im Browser:
https://wralto.org/nextcloud3/remote.php/dav/ - Erstelle ein neues App-Passwort in Nextcloud
- Versuche einen anderen Browser
- 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:
- Prüfe deine Internetverbindung
- Lade die Seite neu
- Warte einige Minuten und versuche es erneut
- Prüfe die Browser-Konsole auf Fehler
- Versuche, die Daten manuell zu exportieren/importieren
❌ Daten sind verschwunden
Keine Sorge! Die Daten sind an mehreren Orten gespeichert:
- Nextcloud (falls verbunden)
- localStorage (Fallback)
Lösungen:
- Lade die Seite neu
- Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
- Gehe zu Einstellungen → Daten exportieren und sichere deine Daten
- Falls nötig: Importiere deine exportierten Daten
🤝 Mitwirken
Beiträge sind willkommen! Wenn du Ideen für Verbesserungen hast oder Fehler findest:
- Fork das Repository
- Erstelle einen neuen Branch (
git checkout -b feature/amazing-feature) - Commit deine Änderungen (
git commit -m 'Add amazing feature') - Push zum Branch (
git push origin feature/amazing-feature) - Öffne einen Pull Request
📜 Lizenz
Dieses Projekt steht unter der MIT License – sieh die LICENSE Datei für Details.
🙏 Danksagung
- Chart.js – Für die tollen Diagramme
- Nextcloud – Für die sichere Cloud-Speicherung
- Alle Tee-Liebhaber da draußen! ☕🍵
📞 Kontakt & Support
Fragen oder Feedback? Öffne einfach ein Issue oder einen Pull Request.
🎉 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