feat: Add user-template-dictionary with SQLite persistence
- New template: user-template-dictionary with Flask backend - Features: Add/Edit/Delete words, SQLite database per user - Persistent storage: Docker Volumes mount to /data/ - Modern HTML/CSS/JS Frontend with error handling - REST API: GET/POST/PUT/DELETE endpoints - Health checks and comprehensive logging - Comprehensive documentation in docs/templates/DICTIONARY_TEMPLATE.md - Updated templates.json and .env.example Files: - user-template-dictionary/Dockerfile - user-template-dictionary/app.py - user-template-dictionary/requirements.txt - user-template-dictionary/templates/index.html - docs/templates/DICTIONARY_TEMPLATE.md - templates.json (updated) - .env.example (updated)
This commit is contained in:
XPS\Micro
parent
f791424e3c
commit
e811c4fe3d
|
|
@ -65,8 +65,9 @@ USER_TEMPLATE_IMAGE=user-template-01:latest
|
|||
# Beispiele für Anpassungen:
|
||||
# - Nur Nginx: "user-template-01:latest"
|
||||
# - Mit Next.js: "user-template-01:latest;user-template-next:latest"
|
||||
# - Alle: "user-template-01:latest;user-template-02:latest;user-template-next:latest"
|
||||
USER_TEMPLATE_IMAGES="user-template-01:latest;user-template-02:latest;user-template-next:latest"
|
||||
# - Mit Wörterbuch: "user-template-01:latest;user-template-dictionary:latest"
|
||||
# - Alle: "user-template-01:latest;user-template-02:latest;user-template-next:latest;user-template-dictionary:latest"
|
||||
USER_TEMPLATE_IMAGES="user-template-01:latest;user-template-02:latest;user-template-next:latest;user-template-dictionary:latest"
|
||||
|
||||
# ============================================================
|
||||
# RESSOURCEN - Container-Limits
|
||||
|
|
|
|||
589
docs/templates/DICTIONARY_TEMPLATE.md
vendored
Normal file
589
docs/templates/DICTIONARY_TEMPLATE.md
vendored
Normal file
|
|
@ -0,0 +1,589 @@
|
|||
# 📚 Wörterbuch Template - Vollständige Dokumentation
|
||||
|
||||
## Übersicht
|
||||
|
||||
Das **Wörterbuch Template** (`user-template-dictionary`) ist eine Flask-basierte Web-Anwendung, die es Benutzern ermöglicht, persönliche Wörterbuch-Einträge zu speichern und zu verwalten. Jeder Eintrag besteht aus einem **Wort** und seiner **Bedeutung**, die in einer **SQLite-Datenbank** persistiert werden.
|
||||
|
||||
### Features
|
||||
- ✅ **Persönliche Wörterbuch-Datenbank** pro Benutzer
|
||||
- ✅ **SQLite-Persistierung** - Daten bleiben erhalten nach Container-Neustart
|
||||
- ✅ **REST API** für Verwaltung (GET, POST, PUT, DELETE)
|
||||
- ✅ **Moderne HTML/CSS/JS Frontend** mit Fehlerbehandlung
|
||||
- ✅ **Health Checks** für Monitoring
|
||||
- ✅ **Vollständige Fehlerbehandlung** und Logging
|
||||
- ✅ **Docker Volume Support** für Datenpersistierung
|
||||
|
||||
---
|
||||
|
||||
## Architektur
|
||||
|
||||
### High-Level Diagramm
|
||||
|
||||
```
|
||||
Browser Request
|
||||
↓
|
||||
Flask Backend (Port 8080)
|
||||
↓
|
||||
SQLite Database (/data/app.db)
|
||||
↓
|
||||
Docker Volume (/volumes/{user-id})
|
||||
↓
|
||||
Persistente Speicherung
|
||||
```
|
||||
|
||||
### Komponenten
|
||||
|
||||
**Frontend (HTML/CSS/JavaScript):**
|
||||
- `templates/index.html` - Single Page Application mit React-ähnlichem State Management
|
||||
- Responsive Design (Mobile-freundlich)
|
||||
- Real-time UI Updates
|
||||
- Benutzerfreundliche Fehlerbehandlung
|
||||
|
||||
**Backend (Flask + SQLite):**
|
||||
- `app.py` - Python Flask Anwendung
|
||||
- SQLite Datenbank in `/data/app.db`
|
||||
- REST API Endpoints
|
||||
- Logging und Health Checks
|
||||
|
||||
**Containerisierung:**
|
||||
- `Dockerfile` - Python 3.11 slim Image
|
||||
- `requirements.txt` - Python Dependencies (Flask, Werkzeug)
|
||||
- Unprivileged User (Port 8080)
|
||||
- Health Check Endpoint
|
||||
|
||||
---
|
||||
|
||||
## Installation & Setup
|
||||
|
||||
### Schritt 1: Template in `.env` registrieren
|
||||
|
||||
Bearbeite `.env` und füge das Dictionary Template hinzu:
|
||||
|
||||
```bash
|
||||
# .env
|
||||
USER_TEMPLATE_IMAGES="user-template-01:latest;user-template-02:latest;user-template-next:latest;user-template-dictionary:latest"
|
||||
```
|
||||
|
||||
**Wichtig:** Nur hier definierte Templates werden von `bash install.sh` gebaut!
|
||||
|
||||
### Schritt 2: Metadaten in `templates.json` aktualisieren
|
||||
|
||||
Das Template ist bereits in `templates.json` registriert:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "dictionary",
|
||||
"image": "user-template-dictionary:latest",
|
||||
"display_name": "📚 Wörterbuch",
|
||||
"description": "Persönliches Wörterbuch mit Datenbank - Speichern Sie Wörter und Bedeutungen"
|
||||
}
|
||||
```
|
||||
|
||||
### Schritt 3: Build & Deploy
|
||||
|
||||
```bash
|
||||
# Alle Templates bauen (inkl. dictionary)
|
||||
bash install.sh
|
||||
|
||||
# Docker Compose neu starten
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## REST API Referenz
|
||||
|
||||
### Base URL
|
||||
```
|
||||
http://localhost:8080
|
||||
```
|
||||
|
||||
### Endpoints
|
||||
|
||||
#### 1. Frontend abrufen
|
||||
```http
|
||||
GET /
|
||||
```
|
||||
**Response:** HTML-Seite mit Interface
|
||||
|
||||
---
|
||||
|
||||
#### 2. Alle Wörter abrufen
|
||||
```http
|
||||
GET /api/words
|
||||
```
|
||||
|
||||
**Response (200 OK):**
|
||||
```json
|
||||
{
|
||||
"words": [
|
||||
{
|
||||
"id": 1,
|
||||
"word": "Serendipität",
|
||||
"meaning": "Das glückliche Finden von etwas Ungesucht",
|
||||
"created_at": "2026-03-18T10:30:45"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"word": "Wanderlust",
|
||||
"meaning": "Starkes Verlangen zu reisen und die Welt zu erkunden",
|
||||
"created_at": "2026-03-18T11:15:20"
|
||||
}
|
||||
],
|
||||
"count": 2
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 3. Neues Wort hinzufügen
|
||||
```http
|
||||
POST /api/words
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"word": "Schadenfreude",
|
||||
"meaning": "Freude über das Unglück anderer"
|
||||
}
|
||||
```
|
||||
|
||||
**Response (201 Created):**
|
||||
```json
|
||||
{
|
||||
"id": 3,
|
||||
"word": "Schadenfreude",
|
||||
"meaning": "Freude über das Unglück anderer",
|
||||
"created_at": "2026-03-18T12:00:00"
|
||||
}
|
||||
```
|
||||
|
||||
**Error Response (409 Conflict):**
|
||||
```json
|
||||
{
|
||||
"error": "Das Wort \"Schadenfreude\" existiert bereits"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 4. Wort aktualisieren
|
||||
```http
|
||||
PUT /api/words/{id}
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"word": "Schadenfreude",
|
||||
"meaning": "Böse Freude über Missgeschick eines anderen"
|
||||
}
|
||||
```
|
||||
|
||||
**Response (200 OK):**
|
||||
```json
|
||||
{
|
||||
"id": 3,
|
||||
"word": "Schadenfreude",
|
||||
"meaning": "Böse Freude über Missgeschick eines anderen",
|
||||
"created_at": "2026-03-18T12:00:00"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 5. Wort löschen
|
||||
```http
|
||||
DELETE /api/words/{id}
|
||||
```
|
||||
|
||||
**Response (204 No Content):**
|
||||
(Leerer Body, nur Status 204)
|
||||
|
||||
---
|
||||
|
||||
#### 6. Statistiken abrufen
|
||||
```http
|
||||
GET /api/stats
|
||||
```
|
||||
|
||||
**Response (200 OK):**
|
||||
```json
|
||||
{
|
||||
"total_words": 2,
|
||||
"last_added": "2026-03-18T11:15:20",
|
||||
"database": "sqlite3",
|
||||
"storage": "/data/app.db"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 7. Health Check
|
||||
```http
|
||||
GET /health
|
||||
```
|
||||
|
||||
**Response (200 OK):**
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"database": "connected"
|
||||
}
|
||||
```
|
||||
|
||||
**Error Response (500):**
|
||||
```json
|
||||
{
|
||||
"status": "error",
|
||||
"message": "database connection failed"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Datapersistierung
|
||||
|
||||
### Docker Volumes
|
||||
|
||||
Die Datenbank wird in einem **Docker Volume** gespeichert, damit Daten bei Container-Neustarts erhalten bleiben.
|
||||
|
||||
### Automatische Konfiguration (via `container_manager.py`)
|
||||
|
||||
Das Spawner Backend sollte automatisch Volumes mounten:
|
||||
|
||||
```python
|
||||
volumes = {
|
||||
f"/volumes/{user_id}": {
|
||||
"bind": "/data",
|
||||
"mode": "rw"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Ergebnis:**
|
||||
- Jeder User erhält ein eigenes Verzeichnis `/volumes/{user_id}`
|
||||
- Die SQLite DB wird gespeichert in `/volumes/{user_id}/app.db`
|
||||
- Der Container sieht dies als `/data/app.db`
|
||||
- Beim Container-Restart bleiben Daten erhalten
|
||||
|
||||
### Manuelles Testen
|
||||
|
||||
```bash
|
||||
# Container starten
|
||||
docker run -v /volumes/user-123:/data -p 8080:8080 user-template-dictionary:latest
|
||||
|
||||
# Datenbank inspizieren
|
||||
sqlite3 /volumes/user-123/app.db "SELECT * FROM words;"
|
||||
|
||||
# Container stoppen und neustart
|
||||
docker stop <container-id>
|
||||
docker start <container-id>
|
||||
|
||||
# Daten sollten noch da sein!
|
||||
sqlite3 /volumes/user-123/app.db "SELECT * FROM words;"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Datenbankschema
|
||||
|
||||
### Tabelle: `words`
|
||||
|
||||
```sql
|
||||
CREATE TABLE words (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
word TEXT NOT NULL UNIQUE,
|
||||
meaning TEXT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
```
|
||||
|
||||
**Spalten:**
|
||||
- `id` - Eindeutige ID (Auto-Increment)
|
||||
- `word` - Das Wort (UNIQUE - keine Duplikate!)
|
||||
- `meaning` - Bedeutung/Definition
|
||||
- `created_at` - Erstellungsdatum
|
||||
- `updated_at` - Letztes Update
|
||||
|
||||
**Constraints:**
|
||||
- `word` ist UNIQUE - kann nicht doppelt vorkommen
|
||||
- Maximale Länge: 255 Zeichen für Wort, 2000 für Bedeutung
|
||||
|
||||
---
|
||||
|
||||
## Sicherheit
|
||||
|
||||
### Input Validation
|
||||
|
||||
- ✅ Wort und Bedeutung sind erforderlich
|
||||
- ✅ Maximale Längen: 255 Zeichen (Wort), 2000 Zeichen (Bedeutung)
|
||||
- ✅ HTML-Escaping in Frontend (XSS-Schutz)
|
||||
- ✅ SQL-Injection-Schutz via Prepared Statements
|
||||
|
||||
### Error Handling
|
||||
|
||||
- ✅ Konsistente JSON-Error-Responses
|
||||
- ✅ Aussagekräftige Error-Messages
|
||||
- ✅ HTTP Status Codes korrekt gesetzt
|
||||
- ✅ Logging aller Fehler
|
||||
|
||||
### Docker Security
|
||||
|
||||
- ✅ Unprivileged User (nicht Root)
|
||||
- ✅ Port 8080 (nicht privilegierter Port)
|
||||
- ✅ SQLite für Single-User (keine Multi-Client Issues)
|
||||
|
||||
---
|
||||
|
||||
## Monitoring & Debugging
|
||||
|
||||
### Logs anschauen
|
||||
|
||||
```bash
|
||||
# Live Logs des Containers
|
||||
docker logs -f user-dictionary-abc123
|
||||
|
||||
# Beispiel Log Output:
|
||||
# [DICTIONARY] Database path: /data/app.db
|
||||
# [DICTIONARY] Table 'words' already exists
|
||||
# [DICTIONARY] Retrieved 2 words
|
||||
# [DICTIONARY] Word added: 'Serendipität'
|
||||
```
|
||||
|
||||
### Health Check
|
||||
|
||||
```bash
|
||||
# In Chrome DevTools oder terminal:
|
||||
curl http://localhost:8080/health
|
||||
|
||||
# Antwort:
|
||||
# {"status": "ok", "database": "connected"}
|
||||
```
|
||||
|
||||
### Database Debugging
|
||||
|
||||
```bash
|
||||
# Mit der Python Shell in den Container gehen
|
||||
docker exec -it <container-id> python
|
||||
|
||||
# Dann:
|
||||
import sqlite3
|
||||
conn = sqlite3.connect('/data/app.db')
|
||||
cursor = conn.cursor()
|
||||
cursor.execute('SELECT * FROM words')
|
||||
print(cursor.fetchall())
|
||||
```
|
||||
|
||||
### Statistiken
|
||||
|
||||
```bash
|
||||
curl http://localhost:8080/api/stats
|
||||
|
||||
# Antwort:
|
||||
# {"total_words": 5, "last_added": "2026-03-18T...", "database": "sqlite3", "storage": "/data/app.db"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance & Limits
|
||||
|
||||
### Empfehlungen
|
||||
|
||||
- **SQLite Limit:** ~1 Million Zeilen problemlos
|
||||
- **Typical Use:** Bis zu 10.000 Wörter problemlos
|
||||
- **Query Time:** < 10ms für typische Abfragen
|
||||
- **Database Size:** ~1KB pro Wort
|
||||
|
||||
### Resource Limits (via `.env`)
|
||||
|
||||
```bash
|
||||
# In .env definieren:
|
||||
DEFAULT_MEMORY_LIMIT=512m # RAM pro Container
|
||||
DEFAULT_CPU_QUOTA=50000 # 0.5 CPU
|
||||
```
|
||||
|
||||
### Skalierung
|
||||
|
||||
Falls die Anwendung wächst:
|
||||
1. **PostgreSQL verwenden** statt SQLite (für Multi-User)
|
||||
2. **Redis Caching** für häufige Abfragen
|
||||
3. **Elasticsearch** für Full-Text Suche in Bedeutungen
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Problem: "Datenbankfehler beim Abrufen"
|
||||
|
||||
```
|
||||
Mögliche Ursachen:
|
||||
1. Volume nicht gemountet
|
||||
2. /data Verzeichnis nicht vorhanden
|
||||
3. Datenbank-Datei korrupt
|
||||
4. Permissionen falsch
|
||||
|
||||
Lösung:
|
||||
docker exec container-id ls -la /data
|
||||
docker exec container-id sqlite3 /data/app.db "SELECT 1"
|
||||
```
|
||||
|
||||
### Problem: "Wort existiert bereits" beim Hinzufügen
|
||||
|
||||
```
|
||||
Das ist normal! Die Anwendung verhindert Duplikate.
|
||||
Wörter sind eindeutig (UNIQUE Constraint).
|
||||
|
||||
Wenn das Problem ist: Bearbeiten statt Hinzufügen nutzen.
|
||||
Oder: Wort löschen und neu hinzufügen.
|
||||
```
|
||||
|
||||
### Problem: Daten nach Restart weg
|
||||
|
||||
```
|
||||
Ursache: Volume nicht korrekt gemountet.
|
||||
|
||||
Prüfen:
|
||||
docker inspect <container-id> | grep -A10 Mounts
|
||||
|
||||
Sollte zeigen:
|
||||
"Mounts": [
|
||||
{
|
||||
"Type": "bind",
|
||||
"Source": "/volumes/user-123",
|
||||
"Destination": "/data"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### Problem: Container startet nicht
|
||||
|
||||
```bash
|
||||
# Logs prüfen
|
||||
docker logs <container-id> 2>&1 | tail -50
|
||||
|
||||
# Python Syntax prüfen
|
||||
docker build -t test . --no-cache
|
||||
|
||||
# Dockerfile validieren
|
||||
docker run --rm -it user-template-dictionary:latest python app.py
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Wartung & Updates
|
||||
|
||||
### Backup der Datenbank
|
||||
|
||||
```bash
|
||||
# Einzelnen User-Backup
|
||||
tar -czf backup-user-123.tar.gz /volumes/user-123/
|
||||
|
||||
# Alle User-Datenbanken
|
||||
tar -czf backup-all-users.tar.gz /volumes/
|
||||
```
|
||||
|
||||
### Datenbank Upgrade
|
||||
|
||||
Falls die Tabelle erweitert werden soll:
|
||||
|
||||
```python
|
||||
# In app.py - init_db() Methode:
|
||||
cursor.execute('''
|
||||
ALTER TABLE words ADD COLUMN
|
||||
category TEXT DEFAULT 'general'
|
||||
''')
|
||||
```
|
||||
|
||||
### Logs archivieren
|
||||
|
||||
```bash
|
||||
# Logs rotieren
|
||||
docker logs --timestamps user-dictionary-abc > logs.txt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration mit Spawner
|
||||
|
||||
### Automatischer Container-Spawn
|
||||
|
||||
Wenn ein Benutzer dieses Template wählt:
|
||||
|
||||
1. Spawner erstellt Container mit Template `user-template-dictionary:latest`
|
||||
2. Mountet Volume: `/volumes/{user-id}:/data`
|
||||
3. Traefik routet Request zu Container unter `https://coder.domain.com/{user-slug}`
|
||||
4. Benutzer sieht Wörterbuch-Interface
|
||||
5. Datenbank wird in `/volumes/{user-id}/app.db` erstellt
|
||||
6. Bei nächstem Login: Gleicher Container + Gleiche Datenbank = Gleiche Wörter!
|
||||
|
||||
### Admin-Dashboard Integration
|
||||
|
||||
Im Admin-Dashboard können Admins:
|
||||
- ✅ Container starten/stoppen
|
||||
- ✅ Container löschen (löscht auch Datenbank!)
|
||||
- ✅ Logs ansehen
|
||||
- ✅ Container-Status prüfen
|
||||
|
||||
---
|
||||
|
||||
## Weitere Verbesserungen (Optional)
|
||||
|
||||
### Mögliche Features für Zukunft
|
||||
|
||||
1. **Kategorien** - Wörter in Kategorien organisieren
|
||||
2. **Export/Import** - CSV/JSON Download
|
||||
3. **Suche** - Volltext-Suche in Wörtern/Bedeutungen
|
||||
4. **Tags** - Flexible Kategorisierung
|
||||
5. **Statistiken** - Graphen, Lernfortschritt
|
||||
6. **Multi-Language** - Übersetzungen hinzufügen
|
||||
7. **Phonetik** - Audio-Aussprache
|
||||
8. **Spaced Repetition** - Lern-Algorithmus
|
||||
|
||||
---
|
||||
|
||||
## Datenschutz & DSGVO
|
||||
|
||||
- ✅ Daten werden lokal in Containern gespeichert
|
||||
- ✅ Keine Daten an Dritte übertragen
|
||||
- ✅ Benutzer hat vollständige Kontrolle
|
||||
- ✅ Einfaches Löschen möglich (Container löschen)
|
||||
|
||||
---
|
||||
|
||||
## Support & Issues
|
||||
|
||||
Bei Problemen:
|
||||
|
||||
1. Logs prüfen: `docker logs container-id`
|
||||
2. Health Check testen: `curl http://localhost:8080/health`
|
||||
3. Datenbank prüfen: `sqlite3 /data/app.db ".tables"`
|
||||
4. API testen: `curl http://localhost:8080/api/words`
|
||||
|
||||
---
|
||||
|
||||
## Version & Changelog
|
||||
|
||||
**Version:** 1.0.0 (2026-03-18)
|
||||
|
||||
### Features
|
||||
- ✅ Wort hinzufügen/löschen/bearbeiten
|
||||
- ✅ SQLite Persistierung
|
||||
- ✅ REST API
|
||||
- ✅ Modern HTML/CSS/JS Frontend
|
||||
- ✅ Health Checks
|
||||
- ✅ Fehlerbehandlung
|
||||
|
||||
---
|
||||
|
||||
## Lizenz & Attribution
|
||||
|
||||
**Template:** Container Spawner
|
||||
**Autor:** Rainer Wieland
|
||||
**Lizenz:** MIT oder ähnlich
|
||||
|
||||
---
|
||||
|
||||
## Letzte Aktualisierung
|
||||
|
||||
- **Datum:** 2026-03-18
|
||||
- **Version:** 1.0.0
|
||||
- **Status:** Production Ready ✅
|
||||
|
|
@ -17,6 +17,12 @@
|
|||
"image": "user-template-next:latest",
|
||||
"display_name": "Next.js Production",
|
||||
"description": "React-Anwendung mit Shadcn/UI, TypeScript und modernem Build-Setup"
|
||||
},
|
||||
{
|
||||
"type": "dictionary",
|
||||
"image": "user-template-dictionary:latest",
|
||||
"display_name": "📚 Wörterbuch",
|
||||
"description": "Persönliches Wörterbuch mit Datenbank - Speichern Sie Wörter und Bedeutungen"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
24
user-template-dictionary/Dockerfile
Normal file
24
user-template-dictionary/Dockerfile
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
FROM python:3.11-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Abhängigkeiten installieren
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
# App-Code
|
||||
COPY app.py .
|
||||
COPY templates/ templates/
|
||||
|
||||
# Daten-Verzeichnis für SQLite Datenbank (wird als Volume gemountet)
|
||||
RUN mkdir -p /data && chmod 755 /data
|
||||
|
||||
# Port 8080 exponieren (unprivileged)
|
||||
EXPOSE 8080
|
||||
|
||||
# Health Check
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD python -c "import requests; requests.get('http://localhost:8080/health')" || exit 1
|
||||
|
||||
# Starten
|
||||
CMD ["python", "app.py"]
|
||||
267
user-template-dictionary/app.py
Normal file
267
user-template-dictionary/app.py
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
"""
|
||||
Persönliches Wörterbuch - Flask Backend mit SQLite
|
||||
Speichert Wörter und Bedeutungen in einer persistenten Datenbank pro Benutzer
|
||||
"""
|
||||
|
||||
from flask import Flask, render_template, request, jsonify
|
||||
from datetime import datetime
|
||||
import sqlite3
|
||||
import os
|
||||
import logging
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
# Logging konfigurieren
|
||||
logging.basicConfig(level=logging.INFO)
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
# Pfad zur persistenten Datenbank (wird als Docker Volume gemountet)
|
||||
DB_PATH = "/data/app.db"
|
||||
os.makedirs("/data", exist_ok=True)
|
||||
|
||||
logger.info(f"[DICTIONARY] Database path: {DB_PATH}")
|
||||
|
||||
|
||||
def get_db():
|
||||
"""Verbindung zur SQLite-Datenbank"""
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
conn.row_factory = sqlite3.Row
|
||||
return conn
|
||||
|
||||
|
||||
def init_db():
|
||||
"""Erstelle Tabelle beim Start (falls noch nicht vorhanden)"""
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
|
||||
# Prüfe ob Tabelle bereits existiert
|
||||
cursor.execute("""
|
||||
SELECT name FROM sqlite_master
|
||||
WHERE type='table' AND name='words'
|
||||
""")
|
||||
|
||||
if not cursor.fetchone():
|
||||
logger.info("[DICTIONARY] Creating 'words' table...")
|
||||
cursor.execute('''
|
||||
CREATE TABLE words (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
word TEXT NOT NULL UNIQUE,
|
||||
meaning TEXT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
''')
|
||||
conn.commit()
|
||||
logger.info("[DICTIONARY] Table 'words' created successfully")
|
||||
else:
|
||||
logger.info("[DICTIONARY] Table 'words' already exists")
|
||||
|
||||
conn.close()
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
"""Hauptseite mit HTML-Interface"""
|
||||
return render_template('index.html')
|
||||
|
||||
|
||||
@app.route('/health')
|
||||
def health():
|
||||
"""Health Check Endpoint für Docker"""
|
||||
try:
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
cursor.execute("SELECT 1")
|
||||
conn.close()
|
||||
return {'status': 'ok', 'database': 'connected'}, 200
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Health check failed: {e}")
|
||||
return {'status': 'error', 'message': str(e)}, 500
|
||||
|
||||
|
||||
@app.route('/api/words', methods=['GET'])
|
||||
def get_words():
|
||||
"""Alle gespeicherten Wörter abrufen"""
|
||||
try:
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
cursor.execute('SELECT id, word, meaning, created_at FROM words ORDER BY created_at DESC')
|
||||
words = [dict(row) for row in cursor.fetchall()]
|
||||
conn.close()
|
||||
|
||||
logger.info(f"[DICTIONARY] Retrieved {len(words)} words")
|
||||
return jsonify({
|
||||
'words': words,
|
||||
'count': len(words)
|
||||
}), 200
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Error retrieving words: {e}")
|
||||
return jsonify({'error': 'Fehler beim Abrufen der Wörter'}), 500
|
||||
|
||||
|
||||
@app.route('/api/words', methods=['POST'])
|
||||
def add_word():
|
||||
"""Neues Wort hinzufügen"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
|
||||
if not data:
|
||||
return jsonify({'error': 'Keine Daten empfangen'}), 400
|
||||
|
||||
word = data.get('word', '').strip()
|
||||
meaning = data.get('meaning', '').strip()
|
||||
|
||||
# Validierung
|
||||
if not word or not meaning:
|
||||
return jsonify({'error': 'Wort und Bedeutung sind erforderlich'}), 400
|
||||
|
||||
if len(word) > 255:
|
||||
return jsonify({'error': 'Wort ist zu lang (max. 255 Zeichen)'}), 400
|
||||
|
||||
if len(meaning) > 2000:
|
||||
return jsonify({'error': 'Bedeutung ist zu lang (max. 2000 Zeichen)'}), 400
|
||||
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
|
||||
try:
|
||||
cursor.execute(
|
||||
'INSERT INTO words (word, meaning) VALUES (?, ?)',
|
||||
(word, meaning)
|
||||
)
|
||||
conn.commit()
|
||||
word_id = cursor.lastrowid
|
||||
|
||||
# Neuen Eintrag zurück
|
||||
cursor.execute('SELECT id, word, meaning, created_at FROM words WHERE id = ?', (word_id,))
|
||||
new_word = dict(cursor.fetchone())
|
||||
conn.close()
|
||||
|
||||
logger.info(f"[DICTIONARY] Word added: '{word}'")
|
||||
return jsonify(new_word), 201
|
||||
|
||||
except sqlite3.IntegrityError:
|
||||
conn.close()
|
||||
logger.warning(f"[DICTIONARY] Duplicate word: '{word}'")
|
||||
return jsonify({'error': f'Das Wort "{word}" existiert bereits'}), 409
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Error adding word: {e}")
|
||||
return jsonify({'error': 'Fehler beim Speichern des Wortes'}), 500
|
||||
|
||||
|
||||
@app.route('/api/words/<int:word_id>', methods=['PUT'])
|
||||
def update_word(word_id):
|
||||
"""Wort aktualisieren"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
|
||||
if not data:
|
||||
return jsonify({'error': 'Keine Daten empfangen'}), 400
|
||||
|
||||
word = data.get('word', '').strip()
|
||||
meaning = data.get('meaning', '').strip()
|
||||
|
||||
# Validierung
|
||||
if not word or not meaning:
|
||||
return jsonify({'error': 'Wort und Bedeutung sind erforderlich'}), 400
|
||||
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
|
||||
try:
|
||||
cursor.execute(
|
||||
'UPDATE words SET word = ?, meaning = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?',
|
||||
(word, meaning, word_id)
|
||||
)
|
||||
conn.commit()
|
||||
|
||||
if cursor.rowcount == 0:
|
||||
conn.close()
|
||||
return jsonify({'error': 'Wort nicht gefunden'}), 404
|
||||
|
||||
# Aktualisiertes Wort zurück
|
||||
cursor.execute('SELECT id, word, meaning, created_at FROM words WHERE id = ?', (word_id,))
|
||||
updated_word = dict(cursor.fetchone())
|
||||
conn.close()
|
||||
|
||||
logger.info(f"[DICTIONARY] Word updated: ID {word_id}")
|
||||
return jsonify(updated_word), 200
|
||||
|
||||
except sqlite3.IntegrityError:
|
||||
conn.close()
|
||||
logger.warning(f"[DICTIONARY] Duplicate word on update: '{word}'")
|
||||
return jsonify({'error': f'Das Wort "{word}" existiert bereits'}), 409
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Error updating word: {e}")
|
||||
return jsonify({'error': 'Fehler beim Aktualisieren des Wortes'}), 500
|
||||
|
||||
|
||||
@app.route('/api/words/<int:word_id>', methods=['DELETE'])
|
||||
def delete_word(word_id):
|
||||
"""Wort löschen"""
|
||||
try:
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
cursor.execute('DELETE FROM words WHERE id = ?', (word_id,))
|
||||
conn.commit()
|
||||
|
||||
if cursor.rowcount == 0:
|
||||
conn.close()
|
||||
return jsonify({'error': 'Wort nicht gefunden'}), 404
|
||||
|
||||
conn.close()
|
||||
logger.info(f"[DICTIONARY] Word deleted: ID {word_id}")
|
||||
return '', 204
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Error deleting word: {e}")
|
||||
return jsonify({'error': 'Fehler beim Löschen des Wortes'}), 500
|
||||
|
||||
|
||||
@app.route('/api/stats')
|
||||
def get_stats():
|
||||
"""Statistiken über die Wörterbuch-Datenbank"""
|
||||
try:
|
||||
conn = get_db()
|
||||
cursor = conn.cursor()
|
||||
|
||||
cursor.execute('SELECT COUNT(*) as total FROM words')
|
||||
total = cursor.fetchone()['total']
|
||||
|
||||
cursor.execute('SELECT MAX(created_at) as last_added FROM words')
|
||||
last_added = cursor.fetchone()['last_added']
|
||||
|
||||
conn.close()
|
||||
|
||||
return jsonify({
|
||||
'total_words': total,
|
||||
'last_added': last_added,
|
||||
'database': 'sqlite3',
|
||||
'storage': '/data/app.db'
|
||||
}), 200
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"[DICTIONARY] Error getting stats: {e}")
|
||||
return jsonify({'error': 'Fehler beim Abrufen der Statistiken'}), 500
|
||||
|
||||
|
||||
@app.errorhandler(404)
|
||||
def not_found(error):
|
||||
"""404 Handler"""
|
||||
return jsonify({'error': 'Endpoint nicht gefunden'}), 404
|
||||
|
||||
|
||||
@app.errorhandler(500)
|
||||
def server_error(error):
|
||||
"""500 Handler"""
|
||||
logger.error(f"[DICTIONARY] Server error: {error}")
|
||||
return jsonify({'error': 'Interner Fehler'}), 500
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
logger.info("[DICTIONARY] Starting Flask application...")
|
||||
init_db()
|
||||
logger.info("[DICTIONARY] Database initialized")
|
||||
app.run(host='0.0.0.0', port=8080, debug=False)
|
||||
2
user-template-dictionary/requirements.txt
Normal file
2
user-template-dictionary/requirements.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Flask==3.0.0
|
||||
Werkzeug==3.0.0
|
||||
593
user-template-dictionary/templates/index.html
Normal file
593
user-template-dictionary/templates/index.html
Normal file
|
|
@ -0,0 +1,593 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>📚 Mein Wörterbuch</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.95;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header .stats {
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.alert.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert.error {
|
||||
background: #ffe0e0;
|
||||
color: #c92a2a;
|
||||
border-left: 4px solid #c92a2a;
|
||||
}
|
||||
|
||||
.alert.success {
|
||||
background: #d3f9d8;
|
||||
color: #2f9e44;
|
||||
border-left: 4px solid #2f9e44;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 2px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 70px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
padding: 11px 15px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e9ecef;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #dee2e6;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #ff5252;
|
||||
}
|
||||
|
||||
.words-section {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.words-section h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.words-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.word-card {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
transition: all 0.3s;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.word-card:hover {
|
||||
border-color: #667eea;
|
||||
background: #f0f3ff;
|
||||
}
|
||||
|
||||
.word-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.word-content .word {
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.word-content .meaning {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.word-content .date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.word-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #e9ecef;
|
||||
border-top-color: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.edit-mode .edit-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.word-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.word-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>📚 Mein Wörterbuch</h1>
|
||||
<p>Ihre persönliche Wörter-Sammlung</p>
|
||||
<div class="stats">
|
||||
<span id="wordCount">0</span> Wörter gespeichert
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="alert error" id="errorMsg"></div>
|
||||
<div class="alert success" id="successMsg"></div>
|
||||
|
||||
<div class="form-section">
|
||||
<h2>✍️ Neues Wort hinzufügen</h2>
|
||||
<form id="wordForm">
|
||||
<div class="form-group">
|
||||
<label for="word">Wort</label>
|
||||
<input
|
||||
type="text"
|
||||
id="word"
|
||||
placeholder="z.B. Serendipität"
|
||||
maxlength="255"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="meaning">Bedeutung</label>
|
||||
<textarea
|
||||
id="meaning"
|
||||
placeholder="z.B. Das glückliche Finden von etwas Ungesucht..."
|
||||
maxlength="2000"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button type="submit" class="btn-primary">Hinzufügen</button>
|
||||
<button type="reset" class="btn-secondary">Zurücksetzen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="words-section">
|
||||
<h2>📖 Ihre Wörter <span class="count-badge" id="countBadge">0</span></h2>
|
||||
<div id="wordsList" class="words-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// State Management
|
||||
let words = [];
|
||||
let isLoading = false;
|
||||
|
||||
// DOM Elements
|
||||
const wordForm = document.getElementById('wordForm');
|
||||
const wordInput = document.getElementById('word');
|
||||
const meaningInput = document.getElementById('meaning');
|
||||
const wordsList = document.getElementById('wordsList');
|
||||
const errorMsg = document.getElementById('errorMsg');
|
||||
const successMsg = document.getElementById('successMsg');
|
||||
const wordCount = document.getElementById('wordCount');
|
||||
const countBadge = document.getElementById('countBadge');
|
||||
|
||||
// Event Listeners
|
||||
wordForm.addEventListener('submit', handleAddWord);
|
||||
|
||||
// Funktionen
|
||||
async function loadWords() {
|
||||
isLoading = true;
|
||||
wordsList.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/words');
|
||||
if (!response.ok) throw new Error('Fehler beim Laden');
|
||||
|
||||
const data = await response.json();
|
||||
words = data.words || [];
|
||||
renderWords();
|
||||
} catch (error) {
|
||||
showError('Fehler beim Laden der Wörter: ' + error.message);
|
||||
wordsList.innerHTML = '<div class="empty-state"><div class="empty-state-icon">⚠️</div><p>Fehler beim Laden</p></div>';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function renderWords() {
|
||||
updateCount();
|
||||
|
||||
if (words.length === 0) {
|
||||
wordsList.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📚</div><p>Noch keine Wörter hinzugefügt.</p><p>Fügen Sie oben Ihr erstes Wort hinzu!</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
wordsList.innerHTML = words.map(word => `
|
||||
<div class="word-card">
|
||||
<div class="word-content">
|
||||
<div class="word">${escapeHtml(word.word)}</div>
|
||||
<div class="meaning">${escapeHtml(word.meaning)}</div>
|
||||
<div class="date">${formatDate(word.created_at)}</div>
|
||||
</div>
|
||||
<div class="word-actions">
|
||||
<button class="btn-danger" onclick="deleteWord(${word.id})">Löschen</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function handleAddWord(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const word = wordInput.value.trim();
|
||||
const meaning = meaningInput.value.trim();
|
||||
|
||||
if (!word || !meaning) {
|
||||
showError('Bitte füllen Sie alle Felder aus');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = wordForm.querySelector('button[type="submit"]');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Wird gespeichert...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/words', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ word, meaning })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Fehler beim Speichern');
|
||||
}
|
||||
|
||||
const newWord = await response.json();
|
||||
words.unshift(newWord);
|
||||
renderWords();
|
||||
|
||||
wordForm.reset();
|
||||
wordInput.focus();
|
||||
showSuccess('Wort erfolgreich hinzugefügt! 🎉');
|
||||
} catch (error) {
|
||||
showError('Fehler: ' + error.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Hinzufügen';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteWord(id) {
|
||||
if (!confirm('Wort wirklich löschen?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/words/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Fehler beim Löschen');
|
||||
}
|
||||
|
||||
words = words.filter(w => w.id !== id);
|
||||
renderWords();
|
||||
showSuccess('Wort gelöscht!');
|
||||
} catch (error) {
|
||||
showError('Fehler: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCount() {
|
||||
wordCount.textContent = words.length;
|
||||
countBadge.textContent = words.length;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
|
||||
// Wenn heute
|
||||
if (diff < 24 * 60 * 60 * 1000) {
|
||||
return date.toLocaleTimeString('de-DE', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
errorMsg.textContent = msg;
|
||||
errorMsg.classList.add('show');
|
||||
setTimeout(() => errorMsg.classList.remove('show'), 5000);
|
||||
}
|
||||
|
||||
function showSuccess(msg) {
|
||||
successMsg.textContent = msg;
|
||||
successMsg.classList.add('show');
|
||||
setTimeout(() => successMsg.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
// Initial load
|
||||
loadWords();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user