Files

2026-02-22 22:11:52 +01:00

4.3 KiB

Raw Blame History

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

Dependencies installieren:
```
npm install
```
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
```
Datenbank prüfen: Stelle sicher, dass die MySQL-Datenbank läuft und die Tabelle RXF.Werte_BZG existiert.

Entwicklung

Development-Server starten:

npm run dev

Die Anwendung ist dann unter http://localhost:3000 erreichbar.

Produktion

Lokale Produktion

Build erstellen:

npm run build

Produktions-Server starten:

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.

Kurzanleitung:

# 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://<server-ip>: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:

{
  "success": true,
  "data": [...]
}

POST /api/werte

Erstellt einen neuen Eintrag.

Request Body:

{
  "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

Lizenz

Private Nutzung

4.3 KiB Raw Blame History