# 🍵 TeeTracker

> **Dein persönlicher Tee-Konsum Tracker** – Verwalte deine Tee-Sorten und tracke, wie viel Tee du trinkst!

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)]
[![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)]


---

## 📸 Screenshots

| 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)*

---

## ✨ 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!)
- **Lokale Dateispeicherung** 💾
  - Daten werden im `data/`-Verzeichnis gespeichert (falls ein lokaler Server läuft)
  - Automatischer Fallback auf Browser-Speicher (localStorage)
  - Export/Import-Funktionen für Datensicherung
- **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

1. **Repository klonen** (oder Dateien herunterladen):
   ```bash
   git clone https://github.com/trevor1969/teatracker.git
   cd teatracker
   ```

2. **index.html öffnen**:
   - Einfach die `index.html` Datei in deinem Browser öffnen
   - Oder einen lokalen Server starten:
     ```bash
     # Mit Python 3
     python -m http.server 8000
     
     # Mit Node.js (npx)
     npx serve
     ```
   - Dann im Browser `http://localhost:8000` öffnen

### Option 2: GitHub Pages

1. Gehe zu deinem Repository auf GitHub
2. Aktiviere GitHub Pages:
   - Settings → Pages
   - Branch: `main` auswählen
   - Folder: `/ (root)` auswählen
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar

### Option 2: Mit lokalem Server (empfohlen für Dateispeicherung)

1. **Repository klonen** (oder Dateien herunterladen):
   ```bash
   git clone https://github.com/trevor1969/teatracker.git
   cd teatracker
   ```

2. **Lokalen Server starten**:
   ```bash
   # Mit Python 3
   python -m http.server 8000
   
   # Mit Node.js (npx)
   npx serve
   ```

3. **App öffnen** im Browser: `http://localhost:8000`
4. **Fertig!** 🎉 Deine Daten werden automatisch im `data/`-Verzeichnis gespeichert

**Hinweis:** Die App versucht zunächst, Dateien im `data/`-Verzeichnis zu speichern. Falls das nicht funktioniert (z.B. bei direkter Datei-Öffnung ohne Server), fällt sie automatisch auf localStorage zurück.

---

## 🛠 Technologien

- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
- **Lokale Speicherung**: Dateisystem (data/-Verzeichnis) oder Browser localStorage
- **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 + lokale Dateispeicherung
├── README.md           # Diese Datei
└── LICENSE             # MIT License
```

---

## 💾 Lokale Dateispeicherung (Version 4.0)

Ab Version 4.0 werden die Daten lokal im `data/`-Verzeichnis gespeichert, das sich im selben Verzeichnis wie die Programmdateien befindet.

### Wie es funktioniert

Die App speichert Daten als JSON-Dateien im lokalen Dateisystem:

```
data/
├── teas.json          # Deine Tee-Sorten
├── entries.json       # Deine Tracking-Einträge
└── backup/           # Manuelle Backups (optional)
    └── teetracker_backup_2024-06-05T10-30-00.json
```

### Speichermechanismus

1. **Mit lokalem Server**: Wenn die App über einen lokalen Server (z.B. `python -m http.server`) geöffnet wird, werden die Daten im `data/`-Verzeichnis gespeichert
2. **Ohne Server**: Falls die App direkt als Datei geöffnet wird, fällt sie automatisch auf Browser-Speicher (localStorage) zurück
3. **Export/Import**: Daten können jederzeit als JSON-Datei exportiert und importiert werden

### Vorteile

| Vorteil | Beschreibung |
|---------|--------------|
| **📁 Einfache Dateispeicherung** | Daten liegen direkt bei den Programmdateien |
| **🔄 Automatische Erkennung** | Erkennt automatisch, ob Dateispeicherung möglich ist |
| **💾 Fallback auf localStorage** | Funktioniert auch ohne Server |
| **⚡ Schnell** | Keine externe Abhängigkeiten, einfache JSON-Dateien |
| **🔒 Privatsphäre** | Alle Daten bleiben lokal auf deinem Gerät |

### Daten sichern (Backup)

**Option 1: Automatisch (Dateisystem)**
- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
- Einfach das gesamte `data/`-Verzeichnis sichern

**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 (Dateisystem)**
- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
- Starte die App neu

**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

---

## 🎨 Design

### Farben
| Farbe | Hex | Verwendung |
|-------|-----|------------|
| ![#8B4513](https://via.placeholder.com/20/8B4513/000000?text=+) `#8B4513` | Primärfarbe (Braun) |
| ![#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)
- ✅ Tablet (768px - 1199px)
- ✅ Mobile (unter 768px)
- ✅ Kleine Geräte (unter 480px)

---

## 💡 Tipps & Tricks

### Daten sichern (Backup)

**Option 1: Automatisch (Dateisystem)**
- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
- Einfach das gesamte `data/`-Verzeichnis kopieren

**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 (Dateisystem)**
- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
- Starte die App neu

**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:
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!

---

## 🔧 Problembehebung

### ❌ Dateispeicherung funktioniert nicht

**Mögliche Ursachen:**
- App wird direkt als Datei geöffnet (ohne lokalen Server)
- Keine Schreibrechte im Verzeichnis
- Browser-Beschränkungen für Fetch-API

**Lösungen:**
1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
2. Öffne die App über `http://localhost:8000`
3. Prüfe, ob das `data/`-Verzeichnis existiert und beschreibbar ist
4. Falls nötig: Nutze die Export/Import-Funktionen für manuelles Speichern
5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler

### ❌ Daten werden nicht gespeichert

**Mögliche Ursachen:**
- App wird direkt als Datei geöffnet (ohne lokalen Server)
- Keine Schreibrechte im `data/`-Verzeichnis
- Browser blockiert Fetch-Anfragen

**Lösungen:**
1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
2. Öffne die App über `http://localhost:8000`
3. Prüfe die Browser-Konsole auf Fehler
4. Nutze die Export/Import-Funktionen als Alternative

### ❌ Daten sind verschwunden

**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
1. **Dateisystem** (`data/`-Verzeichnis, falls Server läuft)
2. **localStorage** (Fallback)

**Lösungen:**
1. Lade die Seite neu
2. Prüfe, ob das `data/`-Verzeichnis existiert
3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
4. Falls nötig: Importiere deine exportierten Daten

---

## 🤝 Mitwirken

Beiträge sind willkommen! Wenn du Ideen für Verbesserungen hast oder Fehler findest:

1. Fork das Repository
2. Erstelle einen neuen Branch (`git checkout -b feature/amazing-feature`)
3. Commit deine Änderungen (`git commit -m 'Add amazing feature'`)
4. Push zum Branch (`git push origin feature/amazing-feature`)
5. Öffne einen Pull Request

---

## 📜 Lizenz

Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) Datei für Details.

---

## 🙏 Danksagung

- [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme

- Alle Tee-Liebhaber da draußen! ☕🍵

---

## 📞 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

- **💾 Lokale Dateispeicherung** – Daten werden im `data/`-Verzeichnis gespeichert (Version 4.0)
- **⚙️ Einstellungen-Tab** – Datenverwaltung, Export/Import, Hintergrundbild
- **🌱 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 |
|---------|-------|-----------|
| 4.0.0 | Juni 2025 | Lokale Dateispeicherung im data/-Verzeichnis, Nextcloud-Integration entfernt |
| 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*