9 Commits
v3.0 ... main

Author SHA1 Message Date
a11eca38ab Update app.js 2026-06-06 16:04:33 +02:00
ee6c690645 Clean app.js: Remove all merge conflicts and duplicate classes
Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-06 12:47:37 +00:00
23c83ef4d1 Fix: Event-Delegation für Tee-Karten-Buttons statt individueller Event-Listener
- Ein Event-Listener am Container statt mehrfacher Listener an jedem Button
- Funktioniert für alle aktuellen und zukünftigen Buttons
- Keine Probleme mit mehrfachen Event-Listenern
- Einfacherer, robusterer Code

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-06 11:37:29 +00:00
b2f632c07f Fix: Alle inline onclick-Handler durch programmatische Event-Listener ersetzt
- Bearbeiten- und Löschen-Buttons in Tee-Karten verwenden jetzt data-Attributes und Event-Listener
- 'Erste Tee hinzufügen'-Button verwendet jetzt Event-Listener
- setupTeaCardEventListeners() Methode hinzugefügt
- Keine Abhängigkeit mehr von globalem app-Scope in HTML

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-06 11:31:30 +00:00
b586eb3804 Fix: Doppelte App-Initialisierung entfernt - Buttons funktionieren wieder
Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-06 11:28:14 +00:00
2544a102d9 Fix: Statistiken werden nicht angezeigt, Tee-Sorten Editieren funktioniert nicht
- Fix updateStats() um renderDetailedStats() korrekt aufzurufen
- Fix Stats-Period-Filter Event-Listener hinzugefügt
- Verbesserte LocalFileStorage-Klasse mit besserer Fehlerbehandlung
- .htaccess-Datei für Apache-Server hinzugefügt
- SERVER_SETUP.md mit Anleitungen für Server-Konfiguration
- data/-Verzeichnis mit .gitkeep hinzugefügt
- app-Variable als window.app global verfügbar gemacht

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-06 11:15:48 +00:00
b47e2bd7d0 Merge pull request #2 from trevor1969/vibe/version4-local-storage-a924f1
Version 4.0: Lokale Dateispeicherung im data/-Verzeichnis
2026-06-06 10:55:53 +02:00
3f228b6007 Version 4.0: Lokale Dateispeicherung im data/-Verzeichnis, Nextcloud-Integration entfernt
- NextcloudStorage-Klasse durch LocalFileStorage ersetzt
- Daten werden im data/-Verzeichnis gespeichert (falls lokaler Server läuft)
- Automatischer Fallback auf localStorage falls Dateispeicherung nicht verfügbar
- Nextcloud-Einstellungen aus UI entfernt
- README.md aktualisiert mit neuer Speicherbeschreibung
- Export/Import-Funktionen behalten für Datensicherung

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-06-05 21:20:32 +00:00
24336b9711 Merge pull request #1 from trevor1969/v3.0
v3.0: Tea-Timer Feature
2026-06-05 22:54:53 +02:00
6 changed files with 327 additions and 2239 deletions

38
.htaccess Normal file
View File

@ -0,0 +1,38 @@
# TeeTracker .htaccess Configuration
# Enable PUT and DELETE methods for the data directory
# Required for file-based storage to work on Apache servers
<IfModule mod_rewrite.c>
RewriteEngine On
# Allow PUT and DELETE for data directory
RewriteCond %{REQUEST_METHOD} ^(PUT|DELETE)$
RewriteCond %{REQUEST_URI} ^/data/ [NC]
RewriteRule ^ - [L]
</IfModule>
# Enable all HTTP methods for the data directory
<Limit GET POST PUT DELETE OPTIONS>
Require all granted
</Limit>
<LimitExcept GET POST PUT DELETE OPTIONS>
Require all denied
</LimitExcept>
# Set proper MIME types for JSON files
<IfModule mod_mime.c>
AddType application/json .json
</IfModule>
# Disable caching for data files
<FilesMatch "\.(json|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
</FilesMatch>

178
README.md
View File

@ -7,7 +7,7 @@
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&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)] [![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)] [![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)]
--- ---
@ -65,11 +65,10 @@
- **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt - **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt
### ⚙️ Einstellungen (NEU!) ### ⚙️ Einstellungen (NEU!)
- **Nextcloud-Synchronisation** 🌐 - **Lokale Dateispeicherung** 💾
- Verbindung zu deiner Nextcloud-Instanz herstellen - Daten werden im `data/`-Verzeichnis gespeichert (falls ein lokaler Server läuft)
- Automatische Synchronisation zwischen Geräten - Automatischer Fallback auf Browser-Speicher (localStorage)
- Verbindungstest - Export/Import-Funktionen für Datensicherung
- Synchronisationsstatus-Anzeige
- **Datenverwaltung** - **Datenverwaltung**
- 📤 **Daten exportieren** (JSON-Datei herunterladen) - 📤 **Daten exportieren** (JSON-Datei herunterladen)
- 📥 **Daten importieren** (JSON-Datei hochladen) - 📥 **Daten importieren** (JSON-Datei hochladen)
@ -112,21 +111,27 @@
- 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: Mit Nextcloud-Synchronisation (empfohlen!) ### Option 2: Mit lokalem Server (empfohlen für Dateispeicherung)
1. **App öffnen** (lokal oder über GitHub Pages) 1. **Repository klonen** (oder Dateien herunterladen):
2. Gehe zum Tab **⚙️ Einstellungen** ```bash
3. Aktiviere **Nextcloud-Synchronisation** git clone https://github.com/trevor1969/teatracker.git
4. Trage deine Nextcloud-Daten ein: cd teatracker
- **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
**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage). 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.
--- ---
@ -134,7 +139,7 @@
- **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)
- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html) - **Lokale Speicherung**: Dateisystem (data/-Verzeichnis) oder Browser localStorage
- **Lokaler Speicher**: localStorage (Fallback) - **Lokaler Speicher**: localStorage (Fallback)
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben - **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
@ -146,62 +151,67 @@
teatracker/ teatracker/
├── index.html # Haupt-HTML-Datei mit allen Tabs ├── index.html # Haupt-HTML-Datei mit allen Tabs
├── styles.css # Alle Styles und Design ├── styles.css # Alle Styles und Design
├── app.js # gesamte Anwendungslogik + Nextcloud-Integration ├── app.js # gesamte Anwendungslogik + lokale Dateispeicherung
├── README.md # Diese Datei ├── README.md # Diese Datei
└── LICENSE # MIT License └── LICENSE # MIT License
``` ```
--- ---
## 🌐 Nextcloud-Integration ## 💾 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 ### Wie es funktioniert
Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern: Die App speichert Daten als JSON-Dateien im lokalen Dateisystem:
``` ```
/TeeTracker/ data/
├── teas.json # Deine Tee-Sorten ├── teas.json # Deine Tee-Sorten
├── entries.json # Deine Tracking-Einträge ├── entries.json # Deine Tracking-Einträge
└── backup/ # Automatische Backups └── backup/ # Manuelle Backups (optional)
└── teetracker_backup_2024-06-05T10-30-00.json └── 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 ### Vorteile
| Vorteil | Beschreibung | | Vorteil | Beschreibung |
|---------|--------------| |---------|--------------|
| **🌍 Plattformübergreifend** | Zugriff von allen Geräten mit Internetverbindung | | **📁 Einfache Dateispeicherung** | Daten liegen direkt bei den Programmdateien |
| **🔄 Echtzeit-Sync** | Änderungen werden sofort synchronisiert | | **🔄 Automatische Erkennung** | Erkennt automatisch, ob Dateispeicherung möglich ist |
| **💾 Automatische Backups** | Daten bleiben in Nextcloud erhalten | | **💾 Fallback auf localStorage** | Funktioniert auch ohne Server |
| **⚡ Schnell** | Keine Datenbank nötig, einfache Dateispeicherung | | **⚡ Schnell** | Keine externe Abhängigkeiten, einfache JSON-Dateien |
| **🔒 Sicher** | HTTPS-Verschlüsselung, App-Passwort (nicht Hauptpasswort) | | **🔒 Privatsphäre** | Alle Daten bleiben lokal auf deinem Gerät |
### Fallback-Mechanismus ### Daten sichern (Backup)
Falls Nextcloud nicht erreichbar ist: **Option 1: Automatisch (Dateisystem)**
1. Die App **funktioniert weiter** mit lokalen Daten (localStorage) - Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
2. Änderungen werden **lokal gespeichert** - Einfach das gesamte `data/`-Verzeichnis sichern
3. Beim nächsten erfolgreichen Verbindungsaufbau werden die Daten **automatisch synchronisiert**
### 🔐 Sicherheitshinweise **Option 2: Manuell (Export)**
1. Gehe zu **Einstellungen → Datenverwaltung**
2. Klicke auf **📤 Daten exportieren**
3. Speichere die JSON-Datei an einem sicheren Ort
**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert! ### Daten wiederherstellen (Restore)
- **sessionStorage**: Das Passwort wird nur in `sessionStorage` gespeichert (wird beim Schließen des Browsers gelöscht) **Option 1: Automatisch (Dateisystem)**
- **Keine Vorbefüllung**: Du musst dein Passwort manuell eingeben - Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
- **Kein Klartext in Dateien**: Das Passwort erscheint nirgends im Code - Starte die App neu
### App-Passwort erstellen **Option 2: Manuell (Import)**
1. Gehe zu **Einstellungen → Datenverwaltung**
Falls du ein neues Passwort brauchst: 2. Klicke auf **📥 Daten importieren**
1. Logge dich in deine Nextcloud ein (`https://wralto.org/nextcloud3`) 3. ge deine exportierten Daten ein oder lade die JSON-Datei hoch
2. Gehe zu **Einstellungen → Sicherheit** 4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest
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.
--- ---
@ -228,9 +238,9 @@ Falls du ein neues Passwort brauchst:
### Daten sichern (Backup) ### Daten sichern (Backup)
**Option 1: Automatisch (Nextcloud)** **Option 1: Automatisch (Dateisystem)**
- Die Daten werden automatisch in deiner Nextcloud gespeichert - Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt - Einfach das gesamte `data/`-Verzeichnis kopieren
**Option 2: Manuell (Export)** **Option 2: Manuell (Export)**
1. Gehe zu **Einstellungen → Datenverwaltung** 1. Gehe zu **Einstellungen → Datenverwaltung**
@ -239,9 +249,9 @@ Falls du ein neues Passwort brauchst:
### Daten wiederherstellen (Restore) ### Daten wiederherstellen (Restore)
**Option 1: Automatisch (Nextcloud)** **Option 1: Automatisch (Dateisystem)**
- Einfach die App auf einem neuen Gerät öffnen - Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
- Die Daten werden automatisch von Nextcloud geladen - Starte die App neu
**Option 2: Manuell (Import)** **Option 2: Manuell (Import)**
1. Gehe zu **Einstellungen → Datenverwaltung** 1. Gehe zu **Einstellungen → Datenverwaltung**
@ -258,59 +268,46 @@ Falls du von vorne beginnen möchtest:
**Achtung:** Dieser Vorgang kann nicht rückgängig gemacht werden! **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 ## 🔧 Problembehebung
### ❌ Verbindung zu Nextcloud fehlgeschlagen ### ❌ Dateispeicherung funktioniert nicht
**Mögliche Ursachen:** **Mögliche Ursachen:**
- Falsche URL (muss mit `https://` beginnen) - App wird direkt als Datei geöffnet (ohne lokalen Server)
- Falscher Benutzername oder Passwort - Keine Schreibrechte im Verzeichnis
- Nextcloud ist nicht erreichbar - Browser-Beschränkungen für Fetch-API
- WebDAV ist deaktiviert (standardmäßig aktiv)
- CORS-Probleme (Browser-Beschränkungen)
**Lösungen:** **Lösungen:**
1. Prüfe, ob du dich manuell in Nextcloud einloggen kannst 1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
2. Teste die WebDAV-URL direkt im Browser: 2. Öffne die App über `http://localhost:8000`
``` 3. Prüfe, ob das `data/`-Verzeichnis existiert und beschreibbar ist
https://wralto.org/nextcloud3/remote.php/dav/ 4. Falls nötig: Nutze die Export/Import-Funktionen für manuelles Speichern
```
3. Erstelle ein neues App-Passwort in Nextcloud
4. Versuche einen anderen Browser
5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler 5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
### ❌ Daten werden nicht synchronisiert ### ❌ Daten werden nicht gespeichert
**Mögliche Ursachen:** **Mögliche Ursachen:**
- Nextcloud ist offline - App wird direkt als Datei geöffnet (ohne lokalen Server)
- Browser blockiert die Verbindung - Keine Schreibrechte im `data/`-Verzeichnis
- Zu viele Anfragen in kurzer Zeit - Browser blockiert Fetch-Anfragen
**Lösungen:** **Lösungen:**
1. Prüfe deine Internetverbindung 1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
2. Lade die Seite neu 2. Öffne die App über `http://localhost:8000`
3. Warte einige Minuten und versuche es erneut 3. Prüfe die Browser-Konsole auf Fehler
4. Prüfe die Browser-Konsole auf Fehler 4. Nutze die Export/Import-Funktionen als Alternative
5. Versuche, die Daten manuell zu exportieren/importieren
### ❌ Daten sind verschwunden ### ❌ Daten sind verschwunden
**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert: **Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
1. **Nextcloud** (falls verbunden) 1. **Dateisystem** (`data/`-Verzeichnis, falls Server läuft)
2. **localStorage** (Fallback) 2. **localStorage** (Fallback)
**Lösungen:** **Lösungen:**
1. Lade die Seite neu 1. Lade die Seite neu
2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist 2. Prüfe, ob das `data/`-Verzeichnis existiert
3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten 3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
4. Falls nötig: Importiere deine exportierten Daten 4. Falls nötig: Importiere deine exportierten Daten
@ -337,7 +334,7 @@ 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! ☕🍵
--- ---
@ -352,8 +349,8 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
### 🆕 Neueste Änderungen ### 🆕 Neueste Änderungen
- **🌐 Nextcloud-Integration** Plattformübergreifende Synchronisation via WebDAV - **💾 Lokale Dateispeicherung** Daten werden im `data/`-Verzeichnis gespeichert (Version 4.0)
- **⚙️ Einstellungen-Tab** Nextcloud-Konfiguration, Daten-Export/Import - **⚙️ Einstellungen-Tab** Datenverwaltung, Export/Import, Hintergrundbild
- **🌱 Bio-Checkbox** Kennzeichnung für Bio-Tees - **🌱 Bio-Checkbox** Kennzeichnung für Bio-Tees
- **📅 Zeitraum "Heute"** Filter für aktuelle Tagesdaten in Statistiken - **📅 Zeitraum "Heute"** Filter für aktuelle Tagesdaten in Statistiken
- **📝 Letzte 10 Einträge** Anzeige auf der Tracken-Seite - **📝 Letzte 10 Einträge** Anzeige auf der Tracken-Seite
@ -362,6 +359,7 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
| Version | Datum | Änderungen | | 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.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.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 | | 1.0.0 | Juni 2024 | Erste Version mit Dashboard, Tee-Verwaltung, Tracking, Statistiken |

193
SERVER_SETUP.md Normal file
View File

@ -0,0 +1,193 @@
# TeeTracker Server Setup
## Problem: Dateispeicherung funktioniert nicht
Die TeeTracker-App versucht, Daten im `data/`-Verzeichnis zu speichern, aber auf den meisten Webservern funktioniert das nicht standardmäßig. Hier sind die Lösungen:
---
## Lösung 1: LocalStorage (Empfohlen für Shared Hosting)
**Funktioniert immer, ohne Server-Konfiguration!**
Die App fällt automatisch auf localStorage zurück, wenn die Dateispeicherung nicht verfügbar ist.
- Alle Daten werden im Browser gespeichert
- Funktioniert auf jedem Webserver
- Daten sind nur auf dem aktuellen Gerät/Browser verfügbar
**Status prüfen:**
- Gehe zu "Einstellungen" → "Datenverwaltung"
- Wenn "Lokaler Modus (localStorage)" angezeigt wird, funktioniert die Dateispeicherung nicht
- Wenn "Dateispeicherung aktiv" angezeigt wird, funktioniert die Dateispeicherung
---
## Lösung 2: Apache Server (.htaccess)
Falls dein Server Apache verwendet (häufig bei Shared Hosting):
1. **Stelle sicher, dass die `.htaccess`-Datei aktiv ist:**
- Die Datei liegt bereits im Hauptverzeichnis
- Prüfe, ob `mod_rewrite` aktiviert ist
- Kontaktiere deinen Hosting-Anbieter, falls `.htaccess` ignoriert wird
2. **Erlaube PUT und DELETE Methoden:**
Die `.htaccess`-Datei enthält bereits die notwendigen Regeln:
```apache
<Limit GET POST PUT DELETE OPTIONS>
Require all granted
</Limit>
```
3. **Setze die richtigen Berechtigungen:**
```bash
chmod 755 data/
chmod 644 data/.gitkeep
```
4. **Aktiviere die notwendigen Apache-Module:**
```bash
a2enmod rewrite
a2enmod headers
a2enmod expires
service apache2 restart
```
---
## Lösung 3: PHP-Backend (Alternative)
Falls dein Server PHP unterstützt, kannst du ein einfaches Backend erstellen:
### 1. Erstelle `save_data.php`:
```php
<?php
header('Content-Type: application/json');
$filename = 'data/' . ($_GET['file'] ?? '');
$allowed_files = ['teas.json', 'entries.json'];
if (!in_array(basename($filename), $allowed_files)) {
http_response_code(403);
die(json_encode(['error' => 'Not allowed']));
}
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
if (file_exists($filename)) {
readfile($filename);
} else {
echo '[]';
}
} elseif ($_SERVER['REQUEST_METHOD'] === 'PUT' || $_SERVER['REQUEST_METHOD'] === 'POST') {
$data = file_get_contents('php://input');
file_put_contents($filename, $data);
echo json_encode(['success' => true]);
} elseif ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
if (file_exists($filename)) {
unlink($filename);
}
echo json_encode(['success' => true]);
}
```
### 2. Ändere die `LocalFileStorage`-Klasse:
Ersetze die `fetch()`-Aufrufe durch Aufrufe an dein PHP-Skript.
---
## Lösung 4: Node.js/Express Server
Falls du Node.js verwenden kannst:
```javascript
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.use(express.json());
app.use(express.static('public'));
// Enable PUT and DELETE for data directory
app.use('/data', express.raw({ type: '*/*' }));
app.put('/data/:file', (req, res) => {
const filePath = path.join(__dirname, 'data', req.params.file);
fs.writeFile(filePath, req.body, (err) => {
if (err) return res.status(500).send(err.message);
res.sendStatus(200);
});
});
app.get('/data/:file', (req, res) => {
const filePath = path.join(__dirname, 'data', req.params.file);
if (fs.existsSync(filePath)) {
res.sendFile(filePath);
} else {
res.status(404).send('[]');
}
});
app.delete('/data/:file', (req, res) => {
const filePath = path.join(__dirname, 'data', req.params.file);
if (fs.existsSync(filePath)) {
fs.unlink(filePath, (err) => {
if (err) return res.status(500).send(err.message);
res.sendStatus(200);
});
} else {
res.sendStatus(200);
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
```
---
## Häufige Probleme und Lösungen
### Problem: "405 Method Not Allowed"
**Lösung:** Der Server unterstützt PUT/DELETE nicht. Verwende Lösung 2, 3 oder 4.
### Problem: "403 Forbidden"
**Lösung:** Die Berechtigungen sind falsch. Führe aus:
```bash
chmod 755 data/
chmod 644 data/*
```
### Problem: "404 Not Found" für data/-Dateien
**Lösung:** Das `data/`-Verzeichnis existiert nicht oder die Dateien sind nicht hochgeladen.
### Problem: CORS-Fehler
**Lösung:** Falls du die App von einer anderen Domain lädst, musst du CORS-Header setzen:
```apache
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"
```
---
## Testen der Dateispeicherung
1. Öffne die Browser-Konsole (F12 → Console)
2. Gib ein:
```javascript
fetch('data/test.txt', { method: 'PUT', body: 'test' })
.then(r => r.text())
.then(console.log)
.catch(console.error);
```
3. Wenn du eine erfolgreiche Antwort erhältst, funktioniert die Dateispeicherung
---
## Empfehlung
**Für Shared Hosting:** Verwende einfach localStorage (Lösung 1). Die Daten werden im Browser gespeichert und funktionieren ohne Server-Konfiguration.
**Für eigene Server:** Konfiguriere Apache mit der `.htaccess`-Datei (Lösung 2) oder verwende das PHP-Backend (Lösung 3).
**Für Entwickler:** Verwende den Node.js-Server (Lösung 4) oder einen lokalen Entwicklungsserver wie `python -m http.server`.

2104
app.js

File diff suppressed because it is too large Load Diff

2
data/.gitkeep Normal file
View File

@ -0,0 +1,2 @@
# This file ensures the data directory exists and is tracked by git
# TeeTracker stores teas.json and entries.json in this directory

View File

@ -147,53 +147,12 @@
<section id="settings" class="tab-pane"> <section id="settings" class="tab-pane">
<h2>⚙️ Einstellungen</h2> <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"> <div class="settings-section">
<h3>💾 Datenverwaltung</h3> <h3>💾 Datenverwaltung</h3>
<p>Daten werden im <code>data/</code>-Verzeichnis gespeichert (falls ein lokaler Server läuft) oder im Browser-Speicher (localStorage).</p>
<div class="form-group"> <div class="form-group">
<label>Synchronisationsstatus</label> <label>Speicherstatus</label>
<div id="sync-status" class="status-badge">Lokaler Modus</div> <div id="sync-status" class="status-badge">Lokaler Modus</div>
</div> </div>
@ -201,7 +160,7 @@
<button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button> <button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
<button id="import-data" class="btn btn-secondary">📥 Daten importieren</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> <button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
</div>
</div> </div>
<div class="settings-section"> <div class="settings-section">
@ -234,7 +193,6 @@
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="settings-section"> <div class="settings-section">
@ -413,6 +371,9 @@
</div> </div>
</div> </div>
<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>