beoanswer_react/README.md

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

# 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:

# 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

# Development Server starten
npm run dev

# App öffnet sich auf http://localhost:5173
# Mit URL-Parameter: http://localhost:5173/?id=123

Production

# 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

# 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

{
  "version": "1.2.3"
}

Wichtig: Nach Versionänderungen den Development Server neu starten:

npm run dev

🛠 Scripts

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:

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

npm run build:prod

3. Dateien auf Server kopieren

# 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 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:

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:

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"

npm install --save-dev terser

CORS-Fehler im Development

Vite Proxy ist konfiguriert für localhost:8080. Anpassen in vite.config.js:

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 - Detaillierte Deployment-Anweisungen
• .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