# Werte Next.js - Gesundheitsdaten Tracking Eine moderne Next.js-Anwendung zur Erfassung und Verwaltung von Gesundheitsdaten, basierend auf dem ursprünglichen Werte-Projekt. ## Features - ✅ **Eingabeformular** für Gesundheitsdaten: - Datum und Zeit - Blutzucker (mg/dl) - Mahlzeiten-Informationen - Gewicht (kg) - Blutdruck (systolisch/diastolisch in mmHg) - Puls - ✅ **Anzeige der letzten 10 Einträge** mit Löschfunktion - ✅ **Responsive Design** mit Tailwind CSS - ✅ **TypeScript** für Type-Safety - ✅ **MySQL-Datenbankanbindung** (Docker-Container) ## Technologie-Stack - **Framework**: Next.js 16.x (App Router) - **Sprache**: TypeScript - **Styling**: Tailwind CSS - **Datenbank**: MySQL 5.6 (Docker) - **ORM**: mysql2 ## Voraussetzungen - Node.js 18.x oder höher - Docker (für MySQL-Container) - Die MySQL-Datenbank muss bereits laufen (siehe docker-compose.yml im übergeordneten Verzeichnis) ## Installation 1. **Dependencies installieren**: ```bash npm install ``` 2. **Umgebungsvariablen konfigurieren**: Die Datei `.env.local` ist bereits mit den korrekten Datenbankzugangsdaten angelegt: ``` DB_HOST=mydbase_mysql DB_USER=root DB_PASS=SFluorit DB_NAME=RXF ``` 3. **Datenbank prüfen**: Stelle sicher, dass die MySQL-Datenbank läuft und die Tabelle `RXF.Werte_BZG` existiert. ## Entwicklung Development-Server starten: ```bash npm run dev ``` Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar. ## Produktion ### Lokale Produktion Build erstellen: ```bash npm run build ``` Produktions-Server starten: ```bash npm start ``` ### Docker Deployment Für das Deployment auf einem externen Server ist die Anwendung vollständig containerisiert. Alle Details zur Installation und Verwaltung finden Sie in der **[DEPLOYMENT.md](DEPLOYMENT.md)**. Kurzanleitung: ```bash # Docker-Container bauen und starten docker-compose up -d --build # Status prüfen docker-compose ps # Logs anschauen docker-compose logs -f ``` Die Anwendung ist dann unter `http://:3000` erreichbar. ## Projekt-Struktur ``` werte_next/ ├── app/ │ ├── api/ │ │ └── werte/ │ │ ├── route.ts # GET/POST API für Einträge │ │ └── [id]/ │ │ └── route.ts # DELETE API für einzelne Einträge │ ├── layout.tsx # Root Layout │ ├── page.tsx # Hauptseite │ └── globals.css # Globale Styles ├── components/ │ ├── WerteForm.tsx # Eingabeformular │ └── WerteList.tsx # Liste der letzten Einträge ├── lib/ │ └── db.ts # Datenbankverbindung ├── types/ │ └── werte.ts # TypeScript-Typen ├── .env.local # Umgebungsvariablen (lokal, gitignored) └── package.json ``` ## API-Endpunkte ### GET /api/werte Holt die letzten N Einträge aus der Datenbank. **Query Parameters**: - `limit` (optional): Anzahl der Einträge (Standard: 10) **Response**: ```json { "success": true, "data": [...] } ``` ### POST /api/werte Erstellt einen neuen Eintrag. **Request Body**: ```json { "Datum": "2026-02-21", "Zeit": "14:30", "Zucker": 120, "Essen": "nüchtern", "Gewicht": 75.5, "DruckS": 130, "DruckD": 85, "Puls": 72 } ``` ### DELETE /api/werte/[id] Löscht einen Eintrag anhand der ID. ## Design Das Design orientiert sich am ursprünglichen Werte-Projekt: - **Hintergrundfarbe**: #FFFFDD (hellgelb) - **Eingabebereich**: #CCCCFF (hellblau) - **Buttons**: #85B7D7 (blau) - **Schriftarten**: Arial, Verdana, Helvetica ## Unterschiede zum Original - **Modernes Framework**: Next.js statt PHP - **TypeScript**: Type-Safety für bessere Wartbarkeit - **React**: Komponentenbasierte Architektur - **API Routes**: RESTful API statt direkter PHP-Skripte - **Vereinfachte Features**: Fokus auf Eingabe und letzte 10 Einträge (Listen- und Statistik-Tabs wurden weggelassen wie gewünscht) ## Bekannte Einschränkungen - Die Tabs "Liste" und "Statistik" aus dem Original wurden bewusst nicht implementiert - Die jqGrid-Funktionalität wurde durch eine einfache Tabelle ersetzt ## Support Bei Fragen oder Problemen: [rxf@gmx.de](mailto:rxf@gmx.de) ## Lizenz Private Nutzung