'Senden'-Button kam zu früh - ist behoben
Anleitung als HTML extern
This commit is contained in:
275
README.md
275
README.md
@@ -1,16 +1,273 @@
|
||||
# React + Vite
|
||||
# BeoAnswer React App
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
Eine React-Anwendung zur Nachbearbeitung von Sonderführungen mit Backend-Integration.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## 📋 Features
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
- **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**
|
||||
|
||||
## React Compiler
|
||||
## 🚀 Quick Start
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
### Voraussetzungen
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
- Node.js (v16 oder höher)
|
||||
- npm oder yarn
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
### 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
|
||||
|
||||
Reference in New Issue
Block a user