mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
Compare commits
5 Commits
1263a5238b
...
v1.0.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 58e2a70201 | |||
| b3c1041792 | |||
| 233647be4a | |||
| 990ebb134d | |||
| 142a671016 |
236
README.md
236
README.md
@ -7,14 +7,15 @@
|
|||||||
[]
|
[]
|
||||||
[]
|
[]
|
||||||
[]
|
[]
|
||||||
|
[]
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📸 Screenshots
|
## 📸 Screenshots
|
||||||
|
|
||||||
| Dashboard | Tee-Sorten | Tracken | Statistiken |
|
| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
|
||||||
|-----------|------------|---------|-------------|
|
|-----------|------------|---------|-------------|--------------|
|
||||||
|  |  |  |  |
|
|  |  |  |  |  |
|
||||||
|
|
||||||
*(Screenshots werden automatisch generiert, sobald die App live ist)*
|
*(Screenshots werden automatisch generiert, sobald die App live ist)*
|
||||||
|
|
||||||
@ -33,6 +34,7 @@
|
|||||||
- **Hinzufügen**: Neue Tee-Sorten mit allen Details anlegen
|
- **Hinzufügen**: Neue Tee-Sorten mit allen Details anlegen
|
||||||
- Name (Pflichtfeld)
|
- Name (Pflichtfeld)
|
||||||
- Typ (Schwarztee, Grüntee, Weißtee, Oolong, Pu-Erh, Früchtetee, Kräutertee, Sonstiges)
|
- Typ (Schwarztee, Grüntee, Weißtee, Oolong, Pu-Erh, Früchtetee, Kräutertee, Sonstiges)
|
||||||
|
- **Bio-Checkbox** 🌱: Kennzeichnung für Bio-Tees
|
||||||
- Marke (optional)
|
- Marke (optional)
|
||||||
- Beschreibung (optional)
|
- Beschreibung (optional)
|
||||||
- Farbe (für individuelle Darstellung)
|
- Farbe (für individuelle Darstellung)
|
||||||
@ -48,6 +50,7 @@
|
|||||||
- **Uhrzeit** angeben (optional)
|
- **Uhrzeit** angeben (optional)
|
||||||
- **Menge** in Tassen (Pflichtfeld, 1-10)
|
- **Menge** in Tassen (Pflichtfeld, 1-10)
|
||||||
- **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
|
- **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
|
||||||
|
- **Letzte 10 Einträge** werden unter dem Formular angezeigt
|
||||||
|
|
||||||
### 📈 Statistiken
|
### 📈 Statistiken
|
||||||
- **Diagramme**: Visuelle Darstellung deines Konsums
|
- **Diagramme**: Visuelle Darstellung deines Konsums
|
||||||
@ -59,7 +62,22 @@
|
|||||||
- Aktive Tage
|
- Aktive Tage
|
||||||
- Verschiedene Tees
|
- Verschiedene Tees
|
||||||
- Meist getrunkener Tee
|
- 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,21 @@
|
|||||||
- Folder: `/ (root)` auswählen
|
- Folder: `/ (root)` auswählen
|
||||||
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
|
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
|
||||||
|
|
||||||
### Option 3: Netlify/Vercel
|
### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
|
||||||
|
|
||||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)
|
1. **App öffnen** (lokal oder über GitHub Pages)
|
||||||
|
2. Gehe zum Tab **⚙️ Einstellungen**
|
||||||
|
3. Aktiviere **Nextcloud-Synchronisation**
|
||||||
|
4. Trage deine Nextcloud-Daten ein:
|
||||||
|
- **URL**: `https://wralto.org/nextcloud3`
|
||||||
|
- **Benutzername**: `teetracker`
|
||||||
|
- **App-Passwort**: (dein App-Passwort aus Nextcloud)
|
||||||
|
- **Speicherpfad**: `/TeeTracker/` (Standard)
|
||||||
|
5. Klicke auf **🔍 Verbindung testen**
|
||||||
|
6. Speichere die Konfiguration mit **💾 Speichern**
|
||||||
|
7. **Fertig!** 🎉 Deine Daten werden jetzt automatisch synchronisiert
|
||||||
|
|
||||||
Einfach auf den Button klicken und deine eigene Instanz deployen!
|
**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -106,7 +134,8 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
|||||||
|
|
||||||
- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
|
- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
|
||||||
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
|
- **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
|
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
|
||||||
|
|
||||||
---
|
---
|
||||||
@ -115,14 +144,67 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
|||||||
|
|
||||||
```
|
```
|
||||||
teatracker/
|
teatracker/
|
||||||
├── index.html # Haupt-HTML-Datei
|
├── index.html # Haupt-HTML-Datei mit allen Tabs
|
||||||
├── styles.css # Alle Styles und Design
|
├── styles.css # Alle Styles und Design
|
||||||
├── app.js # gesamte Anwendungslogik
|
├── app.js # gesamte Anwendungslogik + Nextcloud-Integration
|
||||||
└── README.md # Diese Datei
|
├── 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**
|
||||||
|
|
||||||
|
### 🔐 Sicherheitshinweise
|
||||||
|
|
||||||
|
**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert!
|
||||||
|
|
||||||
|
- **sessionStorage**: Das Passwort wird nur in `sessionStorage` gespeichert (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:
|
||||||
|
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
|
||||||
|
|
||||||
|
**Tipp:** Speichere das App-Passwort in einem Passwort-Manager, da es nach dem Erstellen nicht mehr angezeigt wird.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 🎨 Design
|
## 🎨 Design
|
||||||
|
|
||||||
### Farben
|
### Farben
|
||||||
@ -132,6 +214,7 @@ teatracker/
|
|||||||
|  `#4ECDC4` | Sekundärfarbe (Türkis) |
|
|  `#4ECDC4` | Sekundärfarbe (Türkis) |
|
||||||
|  `#228B22` | Grüntee |
|
|  `#228B22` | Grüntee |
|
||||||
|  `#FF6347` | Akzentfarbe |
|
|  `#FF6347` | Akzentfarbe |
|
||||||
|
|  `#28a745` | Erfolg (Grün) |
|
||||||
|
|
||||||
### Responsive Design
|
### Responsive Design
|
||||||
- ✅ Desktop (ab 1200px)
|
- ✅ Desktop (ab 1200px)
|
||||||
@ -143,35 +226,93 @@ teatracker/
|
|||||||
|
|
||||||
## 💡 Tipps & Tricks
|
## 💡 Tipps & Tricks
|
||||||
|
|
||||||
### Daten sichern
|
### Daten sichern (Backup)
|
||||||
Da die Daten im localStorage gespeichert werden, sind sie nur in deinem Browser verfügbar. Um ein Backup zu erstellen:
|
|
||||||
|
|
||||||
1. Browser-Konsole öffnen (F12 → Console)
|
**Option 1: Automatisch (Nextcloud)**
|
||||||
2. Folgenden Code ausführen:
|
- Die Daten werden automatisch in deiner Nextcloud gespeichert
|
||||||
```javascript
|
- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
|
||||||
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
|
|
||||||
|
|
||||||
### Daten wiederherstellen
|
**Option 2: Manuell (Export)**
|
||||||
```javascript
|
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||||
const backupTeas = [/* deine gesicherten Tees */];
|
2. Klicke auf **📤 Daten exportieren**
|
||||||
const backupEntries = [/* deine gesicherten Einträge */];
|
3. Speichere die JSON-Datei an einem sicheren Ort
|
||||||
localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
|
|
||||||
localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
|
### Daten wiederherstellen (Restore)
|
||||||
location.reload();
|
|
||||||
```
|
**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
|
### Daten zurücksetzen
|
||||||
|
|
||||||
Falls du von vorne beginnen möchtest:
|
Falls du von vorne beginnen möchtest:
|
||||||
```javascript
|
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||||
localStorage.removeItem('teatracker_teas');
|
2. Klicke auf **🗑️ Alle Daten löschen**
|
||||||
localStorage.removeItem('teatracker_entries');
|
3. Bestätige die Aktion
|
||||||
location.reload();
|
|
||||||
```
|
**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 +337,37 @@ Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) D
|
|||||||
## 🙏 Danksagung
|
## 🙏 Danksagung
|
||||||
|
|
||||||
- [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
|
- [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! ☕🍵
|
- 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).
|
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!** 🍵✨
|
**Viel Spaß beim Tee-Tracken!** 🍵✨
|
||||||
|
|
||||||
*Made with ❤️ and JavaScript*
|
*Made with ❤️ and JavaScript*
|
||||||
|
|||||||
103
index.html
103
index.html
@ -18,6 +18,7 @@
|
|||||||
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
||||||
<button class="tab-button" data-tab="track">Tracken</button>
|
<button class="tab-button" data-tab="track">Tracken</button>
|
||||||
<button class="tab-button" data-tab="stats">Statistiken</button>
|
<button class="tab-button" data-tab="stats">Statistiken</button>
|
||||||
|
<button class="tab-button" data-tab="settings">⚙️ Einstellungen</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="tab-content">
|
<main class="tab-content">
|
||||||
@ -117,6 +118,90 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Einstellungen Tab -->
|
||||||
|
<section id="settings" class="tab-pane">
|
||||||
|
<h2>⚙️ Einstellungen</h2>
|
||||||
|
|
||||||
|
<div class="settings-section">
|
||||||
|
<h3>🌐 Nextcloud-Synchronisation</h3>
|
||||||
|
<p>Verbinde TeeTracker mit deiner Nextcloud-Instanz für plattformübergreifende Synchronisation.</p>
|
||||||
|
|
||||||
|
<div class="form-group checkbox-group">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="nc-enabled">
|
||||||
|
<span class="checkmark"></span>
|
||||||
|
Nextcloud-Synchronisation aktivieren
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="nc-config" style="display: none;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nc-url">Nextcloud-URL *</label>
|
||||||
|
<input type="url" id="nc-url" placeholder="https://deine-nextcloud.de">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nc-username">Benutzername *</label>
|
||||||
|
<input type="text" id="nc-username" placeholder="Dein Nextcloud-Benutzername">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nc-password">App-Passwort *</label>
|
||||||
|
<input type="password" id="nc-password" placeholder="App-Passwort aus Nextcloud" autocomplete="current-password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nc-path">Speicherpfad</label>
|
||||||
|
<input type="text" id="nc-path" placeholder="/TeeTracker/" value="/TeeTracker/">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button id="test-nc-connection" class="btn btn-secondary">🔍 Verbindung testen</button>
|
||||||
|
<button id="save-nc-config" class="btn btn-primary">💾 Speichern</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="nc-status" class="status-message"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-section">
|
||||||
|
<h3>💾 Datenverwaltung</h3>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Synchronisationsstatus</label>
|
||||||
|
<div id="sync-status" class="status-badge">Lokaler Modus</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
|
||||||
|
<button id="import-data" class="btn btn-secondary">📥 Daten importieren</button>
|
||||||
|
<button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings-section">
|
||||||
|
<h3>📊 Statistik</h3>
|
||||||
|
<div class="stats-overview">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Gesamt Tassen:</span>
|
||||||
|
<span id="settings-total-cups">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Tee-Sorten:</span>
|
||||||
|
<span id="settings-total-teas">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Erster Eintrag:</span>
|
||||||
|
<span id="settings-first-entry">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Letzter Eintrag:</span>
|
||||||
|
<span id="settings-last-entry">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Statistiken Tab -->
|
<!-- Statistiken Tab -->
|
||||||
<section id="stats" class="tab-pane">
|
<section id="stats" class="tab-pane">
|
||||||
<h2>Statistiken</h2>
|
<h2>Statistiken</h2>
|
||||||
@ -229,6 +314,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Import Modal -->
|
||||||
|
<div id="import-modal" class="modal">
|
||||||
|
<div class="modal-content" style="max-width: 600px;">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2>Daten importieren</h2>
|
||||||
|
<button id="close-import-modal" class="close-btn">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Füge deine exportierten TeeTracker-Daten hier ein:</p>
|
||||||
|
<textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n \"teas\": [...],\n \"entries\": [...]\n}"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="import-data-btn" class="btn btn-primary" onclick="window.app.handleImportData()">📥 Importieren</button>
|
||||||
|
<button id="cancel-import-btn" class="btn btn-secondary" onclick="window.app.closeImportModal()">Abbrechen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
|||||||
121
styles.css
121
styles.css
@ -815,3 +815,124 @@ header p {
|
|||||||
.organic-badge:hover {
|
.organic-badge:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Settings Section */
|
||||||
|
.settings-section {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section h3 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--text-color);
|
||||||
|
border-bottom: 2px solid var(--primary-light);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section p {
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status Message */
|
||||||
|
.status-message {
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-message.success {
|
||||||
|
background-color: rgba(40, 167, 69, 0.1);
|
||||||
|
color: var(--success-color);
|
||||||
|
border: 1px solid var(--success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-message.error {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
color: var(--danger-color);
|
||||||
|
border: 1px solid var(--danger-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-message.info {
|
||||||
|
background-color: rgba(78, 205, 196, 0.1);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
border: 1px solid var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status Badge */
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.local {
|
||||||
|
background-color: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.connected {
|
||||||
|
background-color: var(--success-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.disconnected {
|
||||||
|
background-color: var(--danger-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.syncing {
|
||||||
|
background-color: var(--warning-color);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Overview */
|
||||||
|
.stats-overview {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal for Import/Export */
|
||||||
|
.modal-textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 12px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user