274 lines
5.8 KiB
Markdown
274 lines
5.8 KiB
Markdown
# BeoAnswer React App
|
|
|
|
Eine React-Anwendung zur Nachbearbeitung von Sonderführungen mit Backend-Integration.
|
|
|
|
## 📋 Features
|
|
|
|
- **Interaktive Formulare** für Führungsnachbearbeitung
|
|
- **Backend-Integration** mit PHP über FormData
|
|
- **HTTP Basic Authentication** Support
|
|
- **Professionelle Modal-Dialoge** anstatt Browser-Alerts
|
|
- **Intelligente Navigation** mit Zurück-Button
|
|
- **Automatisches Fenster schließen** nach Aktionen
|
|
- **Environment-Variable Konfiguration**
|
|
- **Responsive Design**
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Voraussetzungen
|
|
|
|
- Node.js (v16 oder höher)
|
|
- npm oder yarn
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Repository klonen
|
|
git clone <repository-url>
|
|
cd beoanswer_react
|
|
|
|
# Dependencies installieren
|
|
npm install
|
|
|
|
# Terser für Production Builds installieren
|
|
npm install --save-dev terser
|
|
|
|
# Environment-Datei erstellen
|
|
cp .env.example .env
|
|
```
|
|
|
|
### Konfiguration
|
|
|
|
Erstelle eine `.env` Datei und passe die Werte an:
|
|
|
|
```env
|
|
# Backend API Configuration
|
|
VITE_API_URL=/api/intern/sofue/php/sofueDB.php
|
|
|
|
# HTTP Basic Authentication für geschütztes Backend
|
|
VITE_API_USERNAME=dein_username
|
|
VITE_API_PASSWORD=dein_passwort
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
# Development Server starten
|
|
npm run dev
|
|
|
|
# App öffnet sich auf http://localhost:5173
|
|
# Mit URL-Parameter: http://localhost:5173/?id=123
|
|
```
|
|
|
|
### Production
|
|
|
|
```bash
|
|
# Production Build erstellen
|
|
npm run build:prod
|
|
|
|
# Production Preview
|
|
npm run preview:prod
|
|
|
|
# Build-Dateien befinden sich in ./dist/
|
|
```
|
|
|
|
## 📦 Versionsverwaltung
|
|
|
|
Die App zeigt automatisch die Version aus der `package.json` und das aktuelle Build-Datum an.
|
|
|
|
### Version erhöhen
|
|
|
|
```bash
|
|
# Patch-Version erhöhen (1.0.0 → 1.0.1)
|
|
npm version patch
|
|
|
|
# Minor-Version erhöhen (1.0.0 → 1.1.0)
|
|
npm version minor
|
|
|
|
# Major-Version erhöhen (1.0.0 → 2.0.0)
|
|
npm version major
|
|
```
|
|
|
|
### Manuell in package.json
|
|
|
|
```json
|
|
{
|
|
"version": "1.2.3"
|
|
}
|
|
```
|
|
|
|
**Wichtig:** Nach Versionänderungen den Development Server neu starten:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
## 🛠 Scripts
|
|
|
|
```bash
|
|
npm run dev # Development Server
|
|
npm run build # Standard Build
|
|
npm run build:prod # Production Build
|
|
npm run preview # Preview des Builds
|
|
npm run preview:prod # Preview des Production Builds
|
|
npm run lint # Code Linting
|
|
```
|
|
|
|
## 🌐 Deployment
|
|
|
|
### 1. Environment Variables setzen
|
|
|
|
Für Production eine `.env.production` erstellen:
|
|
|
|
```env
|
|
VITE_API_URL=https://dein-server.com/intern/sofue/php/sofueDB.php
|
|
VITE_API_USERNAME=production_user
|
|
VITE_API_PASSWORD=production_password
|
|
```
|
|
|
|
### 2. Build erstellen
|
|
|
|
```bash
|
|
npm run build:prod
|
|
```
|
|
|
|
### 3. Dateien auf Server kopieren
|
|
|
|
```bash
|
|
# Beispiel mit rsync
|
|
rsync -avz dist/ user@server:/var/www/html/beoanswer/
|
|
|
|
# Oder mit scp
|
|
scp -r dist/* user@server:/var/www/html/beoanswer/
|
|
```
|
|
|
|
### 4. Webserver konfigurieren
|
|
|
|
Siehe [DEPLOYMENT.md](./DEPLOYMENT.md) für detaillierte Anweisungen.
|
|
|
|
## 📱 Verwendung
|
|
|
|
### URL-Parameter
|
|
|
|
Die App erwartet einen `id` URL-Parameter:
|
|
|
|
```
|
|
https://dein-server.com/beoanswer/?id=123
|
|
```
|
|
|
|
### Workflow
|
|
|
|
1. **Link aus E-Mail** öffnen
|
|
2. **Formular ausfüllen**:
|
|
- Ja/Nein ob Führung stattfand
|
|
- Bei "Ja": Besucherzahl, Spenden-Art, etc.
|
|
- Bei "Nein": Absage oder Verschiebung
|
|
3. **Daten speichern** - Fenster schließt automatisch
|
|
|
|
### Navigation
|
|
|
|
- **Zurück-Button**: Schrittweise Navigation rückwärts
|
|
- **Abbruch**: Bestätigung mit Modal, dann Fenster schließen
|
|
- **Anleitung**: Hilfe-Modal mit Workflow-Beschreibung
|
|
|
|
## 🔧 Entwicklung
|
|
|
|
### Projektstruktur
|
|
|
|
```
|
|
src/
|
|
├── App.jsx # Hauptkomponente mit Routing-Logik
|
|
├── FormContext.jsx # Globaler State für Formulardaten
|
|
├── main.jsx # React App Entry Point
|
|
├── App.css # Haupt-Styling
|
|
├── components/
|
|
│ ├── BesucherBar.jsx # Eingabe für Besucher/Betrag
|
|
│ ├── Bemerkungen.jsx # Textarea für Bemerkungen
|
|
│ ├── FandStattVer.jsx # Radio-Button Komponente
|
|
│ ├── LastButtons.jsx # Abbruch/Anleitung/Senden Buttons
|
|
│ ├── LastLine.jsx # Version/Datum Anzeige
|
|
│ ├── Modal.jsx # Standard Modal Dialog
|
|
│ ├── ConfirmModal.jsx # Bestätigungs Modal
|
|
│ ├── Spende.jsx # Spenden-Art Auswahl
|
|
│ └── Verschoben.jsx # Datum-Eingabe für Verschiebung
|
|
```
|
|
|
|
### FormContext
|
|
|
|
Zentrale State-Verwaltung für alle Formulardaten:
|
|
|
|
```javascript
|
|
const { formData, updateFormData, resetFormData } = useFormData()
|
|
|
|
// Daten setzen
|
|
updateFormData('besucher', '15')
|
|
|
|
// Daten lesen
|
|
console.log(formData.besucher)
|
|
|
|
// Formular zurücksetzen
|
|
resetFormData()
|
|
```
|
|
|
|
### Backend Integration
|
|
|
|
Die App sendet Daten via FormData an das PHP Backend:
|
|
|
|
```javascript
|
|
const backendData = new FormData()
|
|
backendData.append('cmd', 'UPDATEAFTER')
|
|
backendData.append('id', id)
|
|
backendData.append('besucher', formData.besucher)
|
|
// ...weitere Felder
|
|
```
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Build-Fehler: "terser not found"
|
|
|
|
```bash
|
|
npm install --save-dev terser
|
|
```
|
|
|
|
### CORS-Fehler im Development
|
|
|
|
Vite Proxy ist konfiguriert für `localhost:8080`. Anpassen in `vite.config.js`:
|
|
|
|
```javascript
|
|
proxy: {
|
|
'/api': 'http://localhost:8080'
|
|
}
|
|
```
|
|
|
|
### Environment Variables werden nicht geladen
|
|
|
|
1. Development Server neu starten
|
|
2. Variablen müssen mit `VITE_` beginnen
|
|
3. `.env` Datei im Projektroot erstellen
|
|
|
|
### Modal-Buttons haben keinen Abstand
|
|
|
|
Browser-Cache leeren oder Hard-Refresh (`Ctrl+F5`).
|
|
|
|
## 📄 Weitere Dokumentation
|
|
|
|
- [DEPLOYMENT.md](./DEPLOYMENT.md) - Detaillierte Deployment-Anweisungen
|
|
- [.env.example](./.env.example) - Environment Variable Template
|
|
|
|
## 🤝 Beitragen
|
|
|
|
1. Feature Branch erstellen
|
|
2. Änderungen committen
|
|
3. Version mit `npm version` erhöhen
|
|
4. Build testen: `npm run build:prod`
|
|
5. Pull Request erstellen
|
|
|
|
## 📝 Lizenz
|
|
|
|
Private Projekt - Alle Rechte vorbehalten.
|
|
|
|
---
|
|
|
|
**Version:** Automatisch aus package.json
|
|
**Build-Datum:** Automatisch generiert
|
|
**Letztes Update:** Oktober 2025
|