Sprint 7: React-PWA-Frontend (Offline-Härtung) + Flutter-Android-Grundgerüst
CI / backend-tests (push) Successful in 54s
CI / backend-tests (push) Successful in 54s
React/Vite-PWA (frontend/):
- Login, Objektliste (Prompt 11 Screen 1), Kontroll-Screen (Screens 2-6 kompakt:
Start/Objekt-Sperre-Übernahme, Positionserfassung, Abschluss/Abbruch)
- Offline-Härtung (Prompt 17): IndexedDB-Queue (src/offline/queue.ts) puffert
Positions-PUTs lokal, automatische Übertragung bei Reconnect + periodischem
Sync-Versuch, Statusanzeige je Position (nicht gespeichert/wird übertragen/
gespeichert/Fehler), Abschluss-Button bleibt gesperrt bis alles gespeichert
- Nutzt aus, dass PUT /kontrollen/{id}/positionen/{material_id} backend-seitig
idempotent ist (Upsert) - Queue kann beliebig oft retryen ohne Duplikate
- Service Worker via vite-plugin-pwa für App-Shell-Caching (Start im Feld ohne
Cold-Load); PWA-Icons als TODO vermerkt (noch keine echten Bilddateien)
- Client-Fehler (4xx) werden nicht automatisch wiederholt, nur Netzwerkfehler
Flutter-Android-Grundgerüst (flutter_app/), auf Nutzerwunsch parallel begonnen:
- Gleiche API als zweiter Client (Prompt 19 API-first), Login/Objektliste/
Kontroll-Screen als Dart-Äquivalent zur PWA
- Bewusst OHNE Offline-Queue in dieser ersten Fassung (siehe flutter_app/README.md)
- Plattform-Ordner (android/, ios/) nicht von Hand erzeugt - müssen auf dem
Zielsystem per `flutter create .` nachgezogen werden, sonst zu fehleranfällig
ohne Testlauf
Offen: Playwright-E2E (Testphase 4), Praktiker-Session, PWA-Icons, Flutter-
Offline-Queue - brauchen laufendes Deployment bzw. sind kein reiner Code-Schritt.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt
This commit is contained in:
Claude Sonnet 5
@@ -1350,3 +1350,59 @@ Keine Commits in dieser Session.
|
|||||||
- backend/tests/test_mindermenge.py | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
- backend/tests/test_mindermenge.py | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
---
|
---
|
||||||
|
## 2026-09-03 23:53 – 23:59 (6m)
|
||||||
|
**Beschreibung:** Claude Code Session
|
||||||
|
**Projekt:** asb-material
|
||||||
|
|
||||||
|
### Commits
|
||||||
|
- aba991b Sprint 6: Dashboard-Kennzahlen, Ablaufdaten-Warnungen, E-Mail-Benachrichtigung
|
||||||
|
|
||||||
|
### Geänderte Dateien
|
||||||
|
- DEVLOG.md | 46 +++++++++++++++++++++
|
||||||
|
- backend/alembic/versions/0003_add_benutzer_email.py | 26 ++++++++++++
|
||||||
|
- backend/app/api/v1/api.py | 2 +
|
||||||
|
- backend/app/api/v1/endpoints/benutzer.py | 3 ++
|
||||||
|
- backend/app/api/v1/endpoints/dashboard.py | 27 ++++++++++++
|
||||||
|
- backend/app/api/v1/endpoints/fehlbestaende.py | 20 ++++++++-
|
||||||
|
- backend/app/core/app_settings.py | 10 +++++
|
||||||
|
- backend/app/core/email.py | 35 ++++++++++++++++
|
||||||
|
- backend/app/models/auth.py | 1 +
|
||||||
|
- backend/app/schemas/benutzer.py | 4 ++
|
||||||
|
- backend/app/schemas/dashboard.py | 20 +++++++++
|
||||||
|
- backend/app/services/benachrichtigung.py | 59 +++++++++++++++++++++++++++
|
||||||
|
- backend/app/services/dashboard.py | 91 +++++++++++++++++++++++++++++++++++++++++
|
||||||
|
- backend/app/services/kontrolle.py | 2 +
|
||||||
|
- backend/pyproject.toml | 1 +
|
||||||
|
- backend/tests/conftest.py | 1 +
|
||||||
|
- backend/tests/test_dashboard.py | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
- backend/tests/test_email.py | 68 +++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
|
---
|
||||||
|
## 2026-09-03 23:59 – 23:59 (0m)
|
||||||
|
**Beschreibung:** Claude Code Session
|
||||||
|
**Projekt:** asb-material
|
||||||
|
|
||||||
|
### Commits
|
||||||
|
Keine Commits in dieser Session.
|
||||||
|
|
||||||
|
### Geänderte Dateien
|
||||||
|
- DEVLOG.md | 46 +++++++++++++++++++++
|
||||||
|
- backend/alembic/versions/0003_add_benutzer_email.py | 26 ++++++++++++
|
||||||
|
- backend/app/api/v1/api.py | 2 +
|
||||||
|
- backend/app/api/v1/endpoints/benutzer.py | 3 ++
|
||||||
|
- backend/app/api/v1/endpoints/dashboard.py | 27 ++++++++++++
|
||||||
|
- backend/app/api/v1/endpoints/fehlbestaende.py | 20 ++++++++-
|
||||||
|
- backend/app/core/app_settings.py | 10 +++++
|
||||||
|
- backend/app/core/email.py | 35 ++++++++++++++++
|
||||||
|
- backend/app/models/auth.py | 1 +
|
||||||
|
- backend/app/schemas/benutzer.py | 4 ++
|
||||||
|
- backend/app/schemas/dashboard.py | 20 +++++++++
|
||||||
|
- backend/app/services/benachrichtigung.py | 59 +++++++++++++++++++++++++++
|
||||||
|
- backend/app/services/dashboard.py | 91 +++++++++++++++++++++++++++++++++++++++++
|
||||||
|
- backend/app/services/kontrolle.py | 2 +
|
||||||
|
- backend/pyproject.toml | 1 +
|
||||||
|
- backend/tests/conftest.py | 1 +
|
||||||
|
- backend/tests/test_dashboard.py | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
- backend/tests/test_email.py | 68 +++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
|
---
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
.dart_tool/
|
||||||
|
.packages
|
||||||
|
build/
|
||||||
|
.flutter-plugins
|
||||||
|
.flutter-plugins-dependencies
|
||||||
|
android/
|
||||||
|
ios/
|
||||||
|
*.iml
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
# MABEA Android-App (Flutter) – erstes Grundgerüst
|
||||||
|
|
||||||
|
Zweiter Client derselben API (Prompt 19 API-first-Prinzip) neben der React-PWA
|
||||||
|
(`frontend/`). Deckt Login, Objektliste, Kontroll-Screen (Start/Sperre-Übernahme/
|
||||||
|
Positionen/Abschluss/Abbruch) ab.
|
||||||
|
|
||||||
|
## Wichtig: Plattform-Ordner fehlen noch
|
||||||
|
|
||||||
|
Dieses Verzeichnis enthält nur `lib/`, `pubspec.yaml`, `analysis_options.yaml` -
|
||||||
|
die von `flutter create` generierten Plattform-Ordner (`android/`, `ios/`, Gradle-
|
||||||
|
Konfiguration etc.) wurden bewusst NICHT von Hand nachgebaut, da das ohne
|
||||||
|
Testlauf zu fehleranfällig wäre. Erstinbetriebnahme auf dem Zielsystem (mit
|
||||||
|
Flutter-SDK installiert):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd flutter_app
|
||||||
|
flutter create . --platforms android --org de.perlbach24 --project-name mabea_app
|
||||||
|
# überschreibt pubspec.yaml NICHT automatisch mit *nix cp -n, ggf. lib/-Inhalt
|
||||||
|
# und pubspec.yaml-Dependencies danach gegen diese Version abgleichen
|
||||||
|
flutter pub get
|
||||||
|
flutter build apk
|
||||||
|
```
|
||||||
|
|
||||||
|
## API-Adresse
|
||||||
|
|
||||||
|
`lib/main.dart`: `kApiBaseUrl` ist aktuell fest auf den Deployment-Server
|
||||||
|
(`192.168.1.238`) gesetzt. Für Produktivbetrieb auf `--dart-define` umstellen
|
||||||
|
oder zumindest vor jedem Build prüfen/anpassen.
|
||||||
|
|
||||||
|
## Bewusst noch nicht umgesetzt (Unterschied zur React-PWA)
|
||||||
|
|
||||||
|
- **Keine Offline-Queue**: anders als die PWA (`frontend/src/offline/queue.ts`,
|
||||||
|
IndexedDB) sendet diese erste Fassung Positionen direkt; bei Netzwerkfehler
|
||||||
|
erscheint nur eine "erneut versuchen"-Meldung, keine automatische
|
||||||
|
Zwischenspeicherung/Sync bei Reconnect. Nachziehen, sobald die App über das
|
||||||
|
Grundgerüst hinauswächst - gleiches Muster wie in der PWA übertragbar
|
||||||
|
(z. B. `sqflite` oder `hive` statt IndexedDB).
|
||||||
|
- Kein QR-/Barcode-Kamera-Scan (Karte 10, Roadmap).
|
||||||
|
- Keine Tests (Flutter-Widget-/Integrationstests) - Sprintplan sieht Testphase 4
|
||||||
|
primär für die PWA vor (Playwright); Android-Testabdeckung ist noch offen.
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
include: package:flutter_lints/flutter.yaml
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import 'dart:convert';
|
||||||
|
|
||||||
|
import 'package:http/http.dart' as http;
|
||||||
|
import 'package:shared_preferences/shared_preferences.dart';
|
||||||
|
|
||||||
|
/// Gleiche Basis-Idee wie im React-Client (frontend/src/api/client.ts):
|
||||||
|
/// gemeinsamer JSON-Wrapper, Token aus persistentem Speicher, ApiException
|
||||||
|
/// mit HTTP-Status, damit aufrufender Code gezielt reagieren kann (z.B. 409
|
||||||
|
/// bei Objekt-Sperre).
|
||||||
|
class ApiException implements Exception {
|
||||||
|
final int status;
|
||||||
|
final dynamic detail;
|
||||||
|
ApiException(this.status, this.detail);
|
||||||
|
|
||||||
|
@override
|
||||||
|
String toString() => 'ApiException($status, $detail)';
|
||||||
|
}
|
||||||
|
|
||||||
|
class ApiClient {
|
||||||
|
ApiClient({required this.baseUrl});
|
||||||
|
|
||||||
|
final String baseUrl;
|
||||||
|
String? _token;
|
||||||
|
|
||||||
|
Future<void> ladeToken() async {
|
||||||
|
final prefs = await SharedPreferences.getInstance();
|
||||||
|
_token = prefs.getString('mabea_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> setzeToken(String? token) async {
|
||||||
|
_token = token;
|
||||||
|
final prefs = await SharedPreferences.getInstance();
|
||||||
|
if (token == null) {
|
||||||
|
await prefs.remove('mabea_token');
|
||||||
|
} else {
|
||||||
|
await prefs.setString('mabea_token', token);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bool get istEingeloggt => _token != null;
|
||||||
|
|
||||||
|
Future<String> login(String username, String password) async {
|
||||||
|
final response = await http.post(
|
||||||
|
Uri.parse('$baseUrl/auth/login'),
|
||||||
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||||
|
body: {'username': username, 'password': password},
|
||||||
|
);
|
||||||
|
if (response.statusCode != 200) {
|
||||||
|
throw ApiException(response.statusCode, _tryDecode(response.body));
|
||||||
|
}
|
||||||
|
final data = jsonDecode(response.body) as Map<String, dynamic>;
|
||||||
|
final token = data['access_token'] as String;
|
||||||
|
await setzeToken(token);
|
||||||
|
return token;
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<dynamic> request(
|
||||||
|
String path, {
|
||||||
|
String method = 'GET',
|
||||||
|
Object? body,
|
||||||
|
}) async {
|
||||||
|
final uri = Uri.parse('$baseUrl$path');
|
||||||
|
final headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
if (_token != null) 'Authorization': 'Bearer $_token',
|
||||||
|
};
|
||||||
|
final encodedBody = body != null ? jsonEncode(body) : null;
|
||||||
|
|
||||||
|
late http.Response response;
|
||||||
|
switch (method) {
|
||||||
|
case 'POST':
|
||||||
|
response = await http.post(uri, headers: headers, body: encodedBody);
|
||||||
|
break;
|
||||||
|
case 'PUT':
|
||||||
|
response = await http.put(uri, headers: headers, body: encodedBody);
|
||||||
|
break;
|
||||||
|
case 'PATCH':
|
||||||
|
response = await http.patch(uri, headers: headers, body: encodedBody);
|
||||||
|
break;
|
||||||
|
case 'DELETE':
|
||||||
|
response = await http.delete(uri, headers: headers);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
response = await http.get(uri, headers: headers);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.statusCode >= 400) {
|
||||||
|
throw ApiException(response.statusCode, _tryDecode(response.body));
|
||||||
|
}
|
||||||
|
if (response.body.isEmpty) return null;
|
||||||
|
return jsonDecode(response.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
dynamic _tryDecode(String body) {
|
||||||
|
try {
|
||||||
|
return jsonDecode(body);
|
||||||
|
} catch (_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'api/api_client.dart';
|
||||||
|
import 'screens/login_screen.dart';
|
||||||
|
import 'screens/objekt_list_screen.dart';
|
||||||
|
|
||||||
|
// API-Basis-URL fest im Code statt .env: Flutter-Umgebungsvariablen brauchen
|
||||||
|
// --dart-define beim Build, unpraktisch für den ersten Wurf. Vor Produktivbetrieb
|
||||||
|
// hier auf die echte Backend-Adresse setzen bzw. auf --dart-define umstellen.
|
||||||
|
const String kApiBaseUrl = 'http://192.168.1.238/api/v1';
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
runApp(const MabeaApp());
|
||||||
|
}
|
||||||
|
|
||||||
|
class MabeaApp extends StatefulWidget {
|
||||||
|
const MabeaApp({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<MabeaApp> createState() => _MabeaAppState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _MabeaAppState extends State<MabeaApp> {
|
||||||
|
final _apiClient = ApiClient(baseUrl: kApiBaseUrl);
|
||||||
|
bool _bereit = false;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_apiClient.ladeToken().then((_) => setState(() => _bereit = true));
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return MaterialApp(
|
||||||
|
title: 'MABEA',
|
||||||
|
theme: ThemeData(colorSchemeSeed: const Color(0xFF0B5394), useMaterial3: true),
|
||||||
|
home: !_bereit
|
||||||
|
? const Scaffold(body: Center(child: CircularProgressIndicator()))
|
||||||
|
: _apiClient.istEingeloggt
|
||||||
|
? ObjektListScreen(apiClient: _apiClient)
|
||||||
|
: LoginScreen(apiClient: _apiClient),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../api/api_client.dart';
|
||||||
|
|
||||||
|
/// Prompt 11 Screens 2-6 (kompakt). Erste Android-Fassung ohne Offline-Queue
|
||||||
|
/// (siehe flutter_app/README.md) - Positionen werden direkt gesendet, bei
|
||||||
|
/// Netzwerkfehler erscheint eine Fehlermeldung mit Wiederholen-Button statt
|
||||||
|
/// automatischer Zwischenspeicherung wie in der React-PWA (Prompt 17).
|
||||||
|
class KontrollScreen extends StatefulWidget {
|
||||||
|
const KontrollScreen({super.key, required this.apiClient, required this.objektId});
|
||||||
|
final ApiClient apiClient;
|
||||||
|
final int objektId;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<KontrollScreen> createState() => _KontrollScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PositionZustand {
|
||||||
|
_PositionZustand({required this.position, required this.material});
|
||||||
|
final Map<String, dynamic> position;
|
||||||
|
final Map<String, dynamic>? material;
|
||||||
|
String status = 'unbestaetigt'; // unbestaetigt | wird_gesendet | gespeichert | fehler
|
||||||
|
String? fehlerText;
|
||||||
|
late final TextEditingController eingabeController =
|
||||||
|
TextEditingController(text: position['sollmenge_effektiv'] as String);
|
||||||
|
}
|
||||||
|
|
||||||
|
class _KontrollScreenState extends State<KontrollScreen> {
|
||||||
|
Map<String, dynamic>? _objekt;
|
||||||
|
Map<String, dynamic>? _kontrolle;
|
||||||
|
Map<String, dynamic>? _sperre;
|
||||||
|
List<_PositionZustand> _positionen = [];
|
||||||
|
String? _startFehler;
|
||||||
|
String? _abschlussFehler;
|
||||||
|
bool _wirdAbgeschlossen = false;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_ladeObjekt();
|
||||||
|
_starteKontrolle(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _ladeObjekt() async {
|
||||||
|
final objekt = await widget.apiClient.request('/objekte/${widget.objektId}');
|
||||||
|
if (mounted) setState(() => _objekt = objekt as Map<String, dynamic>);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _starteKontrolle(bool uebernehmen) async {
|
||||||
|
setState(() {
|
||||||
|
_startFehler = null;
|
||||||
|
_sperre = null;
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
final kontrolle = await widget.apiClient.request(
|
||||||
|
'/objekte/${widget.objektId}/kontrollen',
|
||||||
|
method: 'POST',
|
||||||
|
body: {'uebernehmen': uebernehmen},
|
||||||
|
);
|
||||||
|
setState(() => _kontrolle = kontrolle as Map<String, dynamic>);
|
||||||
|
await _ladePositionen();
|
||||||
|
} on ApiException catch (error) {
|
||||||
|
if (error.status == 409) {
|
||||||
|
setState(() => _sperre = error.detail as Map<String, dynamic>?);
|
||||||
|
} else {
|
||||||
|
setState(() => _startFehler = 'Kontrolle konnte nicht gestartet werden.');
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
setState(() => _startFehler = 'Keine Verbindung.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _ladePositionen() async {
|
||||||
|
final kontrolle = _kontrolle;
|
||||||
|
if (kontrolle == null) return;
|
||||||
|
final positionen = await widget.apiClient
|
||||||
|
.request('/objekte/${kontrolle['objekt_id']}/positionen') as List<dynamic>;
|
||||||
|
final materialien =
|
||||||
|
await widget.apiClient.request('/materialien') as List<dynamic>;
|
||||||
|
final materialById = {for (final m in materialien) m['id'] as int: m as Map<String, dynamic>};
|
||||||
|
|
||||||
|
setState(() {
|
||||||
|
_positionen = positionen
|
||||||
|
.cast<Map<String, dynamic>>()
|
||||||
|
.where((p) => p['ist_status'] == 'aktiv')
|
||||||
|
.map((p) => _PositionZustand(position: p, material: materialById[p['material_id']]))
|
||||||
|
.toList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _positionSenden(_PositionZustand zustand) async {
|
||||||
|
final kontrolle = _kontrolle;
|
||||||
|
if (kontrolle == null) return;
|
||||||
|
setState(() {
|
||||||
|
zustand.status = 'wird_gesendet';
|
||||||
|
zustand.fehlerText = null;
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
await widget.apiClient.request(
|
||||||
|
'/kontrollen/${kontrolle['id']}/positionen/${zustand.position['material_id']}',
|
||||||
|
method: 'PUT',
|
||||||
|
body: {'istmenge': zustand.eingabeController.text},
|
||||||
|
);
|
||||||
|
setState(() => zustand.status = 'gespeichert');
|
||||||
|
} catch (_) {
|
||||||
|
setState(() {
|
||||||
|
zustand.status = 'fehler';
|
||||||
|
zustand.fehlerText = 'Senden fehlgeschlagen - erneut versuchen, sobald wieder Verbindung besteht.';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bool get _alleUebertragen =>
|
||||||
|
_positionen.isNotEmpty && _positionen.every((p) => p.status == 'gespeichert');
|
||||||
|
|
||||||
|
Future<void> _abschliessen() async {
|
||||||
|
final kontrolle = _kontrolle;
|
||||||
|
if (kontrolle == null) return;
|
||||||
|
setState(() {
|
||||||
|
_wirdAbgeschlossen = true;
|
||||||
|
_abschlussFehler = null;
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
await widget.apiClient.request('/kontrollen/${kontrolle['id']}/abschliessen', method: 'POST');
|
||||||
|
if (mounted) Navigator.of(context).pop();
|
||||||
|
} on ApiException catch (error) {
|
||||||
|
setState(() {
|
||||||
|
_abschlussFehler = error.status == 409
|
||||||
|
? 'Nicht alle Positionen wurden erfasst.'
|
||||||
|
: 'Abschluss fehlgeschlagen.';
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
if (mounted) setState(() => _wirdAbgeschlossen = false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _abbrechen() async {
|
||||||
|
final kontrolle = _kontrolle;
|
||||||
|
if (kontrolle == null) return;
|
||||||
|
await widget.apiClient
|
||||||
|
.request('/kontrollen/${kontrolle['id']}/abbrechen', method: 'POST', body: {});
|
||||||
|
if (mounted) Navigator.of(context).pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
if (_sperre != null) {
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(title: const Text('Objekt gesperrt')),
|
||||||
|
body: Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Wird gerade kontrolliert von ${_sperre!['benutzer'] ?? 'unbekannt'}, '
|
||||||
|
'seit ${_sperre!['seit'] ?? ''}.',
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
FilledButton(
|
||||||
|
onPressed: () => _starteKontrolle(true),
|
||||||
|
child: const Text('Trotzdem übernehmen'),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_startFehler != null) {
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(title: const Text('Fehler')),
|
||||||
|
body: Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Text(_startFehler!, style: const TextStyle(color: Colors.red)),
|
||||||
|
TextButton(onPressed: () => _starteKontrolle(false), child: const Text('Erneut versuchen')),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(title: Text(_objekt?['name'] as String? ?? 'Kontrolle')),
|
||||||
|
body: ListView.builder(
|
||||||
|
itemCount: _positionen.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final zustand = _positionen[index];
|
||||||
|
return Card(
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
zustand.material?['name'] as String? ??
|
||||||
|
'Material ${zustand.position['material_id']}',
|
||||||
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||||
|
),
|
||||||
|
_StatusChip(status: zustand.status),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Text('Soll: ${zustand.position['sollmenge_effektiv']} ${zustand.material?['einheit'] ?? ''}'),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: TextField(
|
||||||
|
controller: zustand.eingabeController,
|
||||||
|
keyboardType: TextInputType.number,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
FilledButton(
|
||||||
|
onPressed: () => _positionSenden(zustand),
|
||||||
|
child: const Text('Bestätigen'),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
if (zustand.status == 'fehler' && zustand.fehlerText != null)
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 8),
|
||||||
|
child: Text(zustand.fehlerText!, style: const TextStyle(color: Colors.red)),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
bottomNavigationBar: SafeArea(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
if (_abschlussFehler != null)
|
||||||
|
Text(_abschlussFehler!, style: const TextStyle(color: Colors.red)),
|
||||||
|
SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: FilledButton(
|
||||||
|
onPressed: _alleUebertragen && !_wirdAbgeschlossen ? _abschliessen : null,
|
||||||
|
child: Text(_alleUebertragen ? 'Kontrolle abschließen' : 'Noch nicht alle Positionen gespeichert…'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
TextButton(onPressed: _abbrechen, child: const Text('Kontrolle abbrechen')),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _StatusChip extends StatelessWidget {
|
||||||
|
const _StatusChip({required this.status});
|
||||||
|
final String status;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final konfiguration = {
|
||||||
|
'unbestaetigt': ('offen', Colors.grey),
|
||||||
|
'wird_gesendet': ('wird gesendet…', Colors.orange),
|
||||||
|
'gespeichert': ('gespeichert', Colors.green),
|
||||||
|
'fehler': ('Fehler', Colors.red),
|
||||||
|
};
|
||||||
|
final (text, farbe) = konfiguration[status] ?? ('?', Colors.grey);
|
||||||
|
return Text(text, style: TextStyle(color: farbe, fontWeight: FontWeight.bold));
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../api/api_client.dart';
|
||||||
|
import 'objekt_list_screen.dart';
|
||||||
|
|
||||||
|
class LoginScreen extends StatefulWidget {
|
||||||
|
const LoginScreen({super.key, required this.apiClient});
|
||||||
|
final ApiClient apiClient;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<LoginScreen> createState() => _LoginScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _LoginScreenState extends State<LoginScreen> {
|
||||||
|
final _loginController = TextEditingController();
|
||||||
|
final _passwortController = TextEditingController();
|
||||||
|
String? _fehler;
|
||||||
|
bool _ladeVorgang = false;
|
||||||
|
|
||||||
|
Future<void> _anmelden() async {
|
||||||
|
setState(() {
|
||||||
|
_fehler = null;
|
||||||
|
_ladeVorgang = true;
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
await widget.apiClient.login(_loginController.text, _passwortController.text);
|
||||||
|
if (!mounted) return;
|
||||||
|
Navigator.of(context).pushReplacement(
|
||||||
|
MaterialPageRoute(builder: (_) => ObjektListScreen(apiClient: widget.apiClient)),
|
||||||
|
);
|
||||||
|
} catch (_) {
|
||||||
|
setState(() => _fehler = 'Login oder Passwort falsch');
|
||||||
|
} finally {
|
||||||
|
if (mounted) setState(() => _ladeVorgang = false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
body: Center(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(24),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
const Text('MABEA', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
|
||||||
|
const SizedBox(height: 24),
|
||||||
|
TextField(
|
||||||
|
controller: _loginController,
|
||||||
|
decoration: const InputDecoration(labelText: 'Login'),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
TextField(
|
||||||
|
controller: _passwortController,
|
||||||
|
decoration: const InputDecoration(labelText: 'Passwort'),
|
||||||
|
obscureText: true,
|
||||||
|
),
|
||||||
|
if (_fehler != null) ...[
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
Text(_fehler!, style: const TextStyle(color: Colors.red)),
|
||||||
|
],
|
||||||
|
const SizedBox(height: 24),
|
||||||
|
FilledButton(
|
||||||
|
onPressed: _ladeVorgang ? null : _anmelden,
|
||||||
|
child: Text(_ladeVorgang ? 'Wird geprüft…' : 'Anmelden'),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../api/api_client.dart';
|
||||||
|
import 'kontroll_screen.dart';
|
||||||
|
|
||||||
|
/// Prompt 11 Screen 1: Standort/Objekt wählen. Kamera-Scan (Karte 10) ist Roadmap -
|
||||||
|
/// das Suchfeld nimmt schon jetzt einen gescannten Code entgegen, sobald ein
|
||||||
|
/// Scanner-Plugin ergänzt wird.
|
||||||
|
class ObjektListScreen extends StatefulWidget {
|
||||||
|
const ObjektListScreen({super.key, required this.apiClient});
|
||||||
|
final ApiClient apiClient;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<ObjektListScreen> createState() => _ObjektListScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ObjektListScreenState extends State<ObjektListScreen> {
|
||||||
|
List<dynamic> _objekte = [];
|
||||||
|
String _suche = '';
|
||||||
|
String? _fehler;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_laden();
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _laden() async {
|
||||||
|
try {
|
||||||
|
final ergebnis = await widget.apiClient.request('/objekte');
|
||||||
|
setState(() => _objekte = ergebnis as List<dynamic>);
|
||||||
|
} catch (_) {
|
||||||
|
setState(() => _fehler = 'Objektliste konnte nicht geladen werden.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final gefiltert = _objekte.where((o) {
|
||||||
|
final name = (o['name'] as String).toLowerCase();
|
||||||
|
final code = (o['code'] as String).toLowerCase();
|
||||||
|
final suche = _suche.toLowerCase();
|
||||||
|
return name.contains(suche) || code.contains(suche);
|
||||||
|
}).toList();
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(title: const Text('Objekte')),
|
||||||
|
body: Column(
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: TextField(
|
||||||
|
decoration: const InputDecoration(labelText: 'Suche oder Code scannen…'),
|
||||||
|
onChanged: (wert) => setState(() => _suche = wert),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (_fehler != null) Text(_fehler!, style: const TextStyle(color: Colors.red)),
|
||||||
|
Expanded(
|
||||||
|
child: ListView.builder(
|
||||||
|
itemCount: gefiltert.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final objekt = gefiltert[index];
|
||||||
|
return ListTile(
|
||||||
|
title: Text(objekt['name'] as String),
|
||||||
|
subtitle: Text(objekt['code'] as String),
|
||||||
|
onTap: () => Navigator.of(context).push(
|
||||||
|
MaterialPageRoute(
|
||||||
|
builder: (_) => KontrollScreen(
|
||||||
|
apiClient: widget.apiClient,
|
||||||
|
objektId: objekt['id'] as int,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
name: mabea_app
|
||||||
|
description: MABEA - Digitales Materialmanagement Rettungsdienst/KatS (Android-Client)
|
||||||
|
publish_to: "none"
|
||||||
|
version: 0.1.0+1
|
||||||
|
|
||||||
|
environment:
|
||||||
|
sdk: ">=3.3.0 <4.0.0"
|
||||||
|
|
||||||
|
dependencies:
|
||||||
|
flutter:
|
||||||
|
sdk: flutter
|
||||||
|
http: ^1.2.2
|
||||||
|
shared_preferences: ^2.3.2
|
||||||
|
|
||||||
|
dev_dependencies:
|
||||||
|
flutter_test:
|
||||||
|
sdk: flutter
|
||||||
|
flutter_lints: ^4.0.0
|
||||||
|
|
||||||
|
flutter:
|
||||||
|
uses-material-design: true
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
dev-dist/
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
# MABEA Frontend – Sprint 7
|
||||||
|
|
||||||
|
React + Vite PWA. Deckt Prompt 11 Screens 1-6 (kompakt zusammengefasst: Objektliste,
|
||||||
|
Kontrolle mit Positionserfassung, Abschluss/Abbruch) und Prompt 17 (Offline-Härtung:
|
||||||
|
IndexedDB-Queue, Statusanzeige je Position, Abschluss blockiert bis alles gespeichert) ab.
|
||||||
|
|
||||||
|
## Setup (auf dem Zielsystem, nicht lokal)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
cp example.env .env
|
||||||
|
# .env: VITE_API_BASE_URL auf die Backend-URL setzen
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
`npm run build` erzeugt `dist/` inkl. Service Worker (vite-plugin-pwa) - dieser Ordner
|
||||||
|
wird vom Reverse-Proxy (nginx) ausgeliefert, siehe `deploy/`.
|
||||||
|
|
||||||
|
## Fehlende Assets vor Produktivbetrieb
|
||||||
|
|
||||||
|
- `public/icon-192.png`, `public/icon-512.png` (PWA-Manifest-Icons) müssen noch ergänzt
|
||||||
|
werden - aktuell nur in `vite.config.ts` referenziert, keine echten Bilddateien vorhanden.
|
||||||
|
|
||||||
|
## Architektur-Entscheidungen (Sprint 7)
|
||||||
|
|
||||||
|
- **Offline-Queue** (`src/offline/queue.ts`): IndexedDB statt reinem Service-Worker-Cache,
|
||||||
|
weil tatsächliche Formulardaten (Ist-Mengen) über Reload/Absturz hinweg erhalten bleiben
|
||||||
|
müssen. Der Service Worker selbst cached nur den App-Shell (Assets), keine API-Requests.
|
||||||
|
- **Idempotenz**: `PUT /kontrollen/{id}/positionen/{material_id}` ist backend-seitig ein
|
||||||
|
Upsert (siehe `backend/app/services/kontrolle.py`) - die Queue kann denselben Eintrag
|
||||||
|
beliebig oft erneut senden, ohne doppelte Kontrollpositionen/Fehlbestände zu erzeugen.
|
||||||
|
- **Statusanzeige**: jede Position zeigt "nicht gespeichert" / "wird übertragen…" /
|
||||||
|
"gespeichert" / "Fehler" - kein stiller Datenverlust bei Verbindungsabbruch (Prompt 17.5).
|
||||||
|
- **Abschluss-Sperre**: der Abschließen-Button ist deaktiviert, solange auch nur eine
|
||||||
|
Position nicht bestätigt gespeichert ist.
|
||||||
|
- Client-Fehler (4xx, z. B. Objekt-Sperre durch Übernahme) werden NICHT automatisch
|
||||||
|
wiederholt - der Mitarbeiter sieht den Fehler und muss bewusst reagieren.
|
||||||
|
|
||||||
|
## Noch nicht umgesetzt (bewusst außerhalb Sprint 7)
|
||||||
|
|
||||||
|
- QR-/Barcode-Kamera-Scan (Karte 10, Roadmap) - Objektsuche ist vorbereitet (Textfeld
|
||||||
|
akzeptiert auch einen gescannten Code), aber kein Kamera-Zugriff verdrahtet.
|
||||||
|
- Playwright-E2E-Tests und Praktiker-Explorations-Session (Testphase 4) - dafür wird ein
|
||||||
|
laufendes Test-Deployment gebraucht, kein reiner Code-Schritt.
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
VITE_API_BASE_URL=http://192.168.1.238/api/v1
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
|
<meta name="theme-color" content="#0b5394" />
|
||||||
|
<title>MABEA</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "mabea-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"idb-keyval": "^6.2.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^6.26.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.3",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"typescript": "^5.5.4",
|
||||||
|
"vite": "^5.4.6",
|
||||||
|
"vite-plugin-pwa": "^0.20.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { Navigate, Route, Routes } from "react-router-dom";
|
||||||
|
|
||||||
|
import { AuthProvider, useAuth } from "./auth/AuthContext";
|
||||||
|
import { KontrollPage } from "./pages/KontrollPage";
|
||||||
|
import { LoginPage } from "./pages/LoginPage";
|
||||||
|
import { ObjektListPage } from "./pages/ObjektListPage";
|
||||||
|
|
||||||
|
function GeschuetzteRoute({ children }: { children: ReactNode }) {
|
||||||
|
const { eingeloggt } = useAuth();
|
||||||
|
if (!eingeloggt) {
|
||||||
|
return <Navigate to="/login" replace />;
|
||||||
|
}
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
<Route
|
||||||
|
path="/objekte"
|
||||||
|
element={
|
||||||
|
<GeschuetzteRoute>
|
||||||
|
<ObjektListPage />
|
||||||
|
</GeschuetzteRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/objekte/:objektId/kontrolle"
|
||||||
|
element={
|
||||||
|
<GeschuetzteRoute>
|
||||||
|
<KontrollPage />
|
||||||
|
</GeschuetzteRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route path="*" element={<Navigate to="/objekte" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</AuthProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "/api/v1";
|
||||||
|
|
||||||
|
let authToken: string | null = localStorage.getItem("mabea_token");
|
||||||
|
|
||||||
|
export function setAuthToken(token: string | null): void {
|
||||||
|
authToken = token;
|
||||||
|
if (token) {
|
||||||
|
localStorage.setItem("mabea_token", token);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("mabea_token");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAuthToken(): string | null {
|
||||||
|
return authToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
status: number;
|
||||||
|
detail: unknown;
|
||||||
|
|
||||||
|
constructor(status: number, detail: unknown) {
|
||||||
|
super(`API-Fehler ${status}`);
|
||||||
|
this.status = status;
|
||||||
|
this.detail = detail;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RequestOptions {
|
||||||
|
method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
|
||||||
|
body?: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generischer JSON-Client. Wirft ApiError bei Nicht-2xx-Antworten, damit
|
||||||
|
* aufrufender Code (insb. die Offline-Queue) gezielt auf HTTP-Status reagieren
|
||||||
|
* kann (z. B. 409 bei Objekt-Sperre nicht wie ein Netzwerkfehler behandeln).
|
||||||
|
*/
|
||||||
|
export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
|
||||||
|
const headers: Record<string, string> = { "Content-Type": "application/json" };
|
||||||
|
if (authToken) {
|
||||||
|
headers["Authorization"] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`${BASE_URL}${path}`, {
|
||||||
|
method: options.method ?? "GET",
|
||||||
|
headers,
|
||||||
|
body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
let detail: unknown = null;
|
||||||
|
try {
|
||||||
|
detail = await response.json();
|
||||||
|
} catch {
|
||||||
|
// Antwort ohne JSON-Body (z. B. 204) - detail bleibt null.
|
||||||
|
}
|
||||||
|
throw new ApiError(response.status, detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.status === 204) {
|
||||||
|
return undefined as T;
|
||||||
|
}
|
||||||
|
return (await response.json()) as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function login(username: string, password: string): Promise<string> {
|
||||||
|
const body = new URLSearchParams({ username, password });
|
||||||
|
const response = await fetch(`${BASE_URL}/auth/login`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||||
|
body,
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new ApiError(response.status, await response.json().catch(() => null));
|
||||||
|
}
|
||||||
|
const data = (await response.json()) as { access_token: string };
|
||||||
|
return data.access_token;
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
export interface Objekt {
|
||||||
|
id: number;
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
objekttyp_id: number;
|
||||||
|
vorlage_id: number | null;
|
||||||
|
standort_id: number;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Objektposition {
|
||||||
|
id: string;
|
||||||
|
objekt_id: number;
|
||||||
|
material_id: number;
|
||||||
|
sollmenge_override: string | null;
|
||||||
|
sollmenge_effektiv: string;
|
||||||
|
ist_status: string;
|
||||||
|
istmenge: string;
|
||||||
|
seriennummer: string | null;
|
||||||
|
ablaufdatum: string | null;
|
||||||
|
chargennummer: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Kontrolle {
|
||||||
|
id: string;
|
||||||
|
objekt_id: number;
|
||||||
|
benutzer_id: number;
|
||||||
|
status: "nicht_gestartet" | "in_bearbeitung" | "abgeschlossen" | "abgebrochen";
|
||||||
|
gestartet_am: string;
|
||||||
|
beendet_am: string | null;
|
||||||
|
abbruch_grund: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Kontrollposition {
|
||||||
|
id: string;
|
||||||
|
kontrolle_id: string;
|
||||||
|
material_id: number;
|
||||||
|
sollmenge_snapshot: string;
|
||||||
|
istmenge_erfasst: string;
|
||||||
|
abweichung: boolean;
|
||||||
|
fehlbestand_id: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Material {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
einheit: string;
|
||||||
|
materialtyp: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
|
||||||
|
|
||||||
|
import { getAuthToken, login as apiLogin, setAuthToken } from "../api/client";
|
||||||
|
|
||||||
|
interface AuthContextValue {
|
||||||
|
eingeloggt: boolean;
|
||||||
|
login: (username: string, password: string) => Promise<void>;
|
||||||
|
logout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||||
|
|
||||||
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||||
|
const [eingeloggt, setEingeloggt] = useState<boolean>(getAuthToken() !== null);
|
||||||
|
|
||||||
|
const value = useMemo<AuthContextValue>(
|
||||||
|
() => ({
|
||||||
|
eingeloggt,
|
||||||
|
login: async (username: string, password: string) => {
|
||||||
|
const token = await apiLogin(username, password);
|
||||||
|
setAuthToken(token);
|
||||||
|
setEingeloggt(true);
|
||||||
|
},
|
||||||
|
logout: () => {
|
||||||
|
setAuthToken(null);
|
||||||
|
setEingeloggt(false);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[eingeloggt]
|
||||||
|
);
|
||||||
|
|
||||||
|
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth(): AuthContextValue {
|
||||||
|
const ctx = useContext(AuthContext);
|
||||||
|
if (!ctx) {
|
||||||
|
throw new Error("useAuth muss innerhalb von AuthProvider verwendet werden");
|
||||||
|
}
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import { createStore, del, entries, set } from "idb-keyval";
|
||||||
|
|
||||||
|
import { apiRequest, ApiError } from "../api/client";
|
||||||
|
import type { Kontrollposition } from "../api/types";
|
||||||
|
|
||||||
|
// Prompt 17: Eingaben werden lokal zwischengespeichert, sobald eingegeben - nicht
|
||||||
|
// erst bei Übertragung an den Server verworfen, wenn die Verbindung kurz fehlt.
|
||||||
|
// IndexedDB statt reinem Service-Worker-Cache, weil hier tatsächliche Nutzdaten
|
||||||
|
// (Ist-Mengen) über einen Neustart/Tab-Wechsel hinweg erhalten bleiben müssen.
|
||||||
|
const store = createStore("mabea-offline-queue", "kontrollpositionen");
|
||||||
|
|
||||||
|
export type QueueStatus = "wartet" | "wird_uebertragen" | "fehler";
|
||||||
|
|
||||||
|
export interface QueueItem {
|
||||||
|
key: string; // `${kontrolleId}:${materialId}`
|
||||||
|
kontrolleId: string;
|
||||||
|
materialId: number;
|
||||||
|
istmenge: string;
|
||||||
|
status: QueueStatus;
|
||||||
|
fehlerText: string | null;
|
||||||
|
fehlbestandId: string | null; // wird nach erfolgreicher Übertragung befüllt
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyFor(kontrolleId: string, materialId: number): string {
|
||||||
|
return `${kontrolleId}:${materialId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function enqueue(kontrolleId: string, materialId: number, istmenge: string): Promise<void> {
|
||||||
|
const key = keyFor(kontrolleId, materialId);
|
||||||
|
const item: QueueItem = {
|
||||||
|
key,
|
||||||
|
kontrolleId,
|
||||||
|
materialId,
|
||||||
|
istmenge,
|
||||||
|
status: "wartet",
|
||||||
|
fehlerText: null,
|
||||||
|
fehlbestandId: null,
|
||||||
|
};
|
||||||
|
await set(key, item, store);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function alleEintraege(): Promise<QueueItem[]> {
|
||||||
|
const all = await entries<string, QueueItem>(store);
|
||||||
|
return all.map(([, value]) => value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function eintraegeFuerKontrolle(kontrolleId: string): Promise<QueueItem[]> {
|
||||||
|
const all = await alleEintraege();
|
||||||
|
return all.filter((item) => item.kontrolleId === kontrolleId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Prompt 16: Abschluss darf erst möglich sein, wenn nichts mehr unbestätigt in
|
||||||
|
* der Warteschlange liegt (weder "wartet" noch "wird_uebertragen"). Ein
|
||||||
|
* "fehler"-Eintrag blockiert ebenfalls - der Mitarbeiter muss ihn sehen und
|
||||||
|
* bewusst erneut versuchen, kein stiller Datenverlust. */
|
||||||
|
export async function hatUnbestaetigtePositionen(kontrolleId: string): Promise<boolean> {
|
||||||
|
const eintraege = await eintraegeFuerKontrolle(kontrolleId);
|
||||||
|
return eintraege.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendeEintrag(item: QueueItem): Promise<void> {
|
||||||
|
await set(item.key, { ...item, status: "wird_uebertragen" as QueueStatus }, store);
|
||||||
|
try {
|
||||||
|
const ergebnis = await apiRequest<Kontrollposition>(
|
||||||
|
`/kontrollen/${item.kontrolleId}/positionen/${item.materialId}`,
|
||||||
|
{ method: "PUT", body: { istmenge: item.istmenge } }
|
||||||
|
);
|
||||||
|
// Erfolgreich übertragen (idempotent - ein erneutes Senden desselben Werts
|
||||||
|
// durch die Queue vor einem Absturz führt zu keinem doppelten Fehlbestand,
|
||||||
|
// siehe Backend app/services/kontrolle.py erfasse_position) -> aus Queue entfernen.
|
||||||
|
void ergebnis;
|
||||||
|
await del(item.key, store);
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof ApiError && error.status >= 400 && error.status < 500) {
|
||||||
|
// Client-Fehler (z. B. 403 Objekt-Sperre an anderen Benutzer übergegangen,
|
||||||
|
// 404 Kontrolle nicht mehr aktiv) - erneutes Senden würde nichts ändern,
|
||||||
|
// aber der Eintrag bleibt sichtbar in der Queue, bis der Mitarbeiter reagiert.
|
||||||
|
await set(
|
||||||
|
item.key,
|
||||||
|
{
|
||||||
|
...item,
|
||||||
|
status: "fehler" as QueueStatus,
|
||||||
|
fehlerText: `Server hat abgelehnt (${error.status}) - bitte Kontrolle neu prüfen.`,
|
||||||
|
},
|
||||||
|
store
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Netzwerkfehler - bleibt "wartet", nächster Sync-Versuch übernimmt wieder.
|
||||||
|
await set(item.key, { ...item, status: "wartet" as QueueStatus }, store);
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Wird bei Reconnect (online-Event) und periodisch aufgerufen. Sendet alle
|
||||||
|
* wartenden Einträge, bricht bei Netzwerkfehlern early ab (weitere Versuche
|
||||||
|
* würden ohnehin scheitern, solange keine Verbindung besteht). */
|
||||||
|
export async function synchronisiereQueue(): Promise<void> {
|
||||||
|
const eintraege = await alleEintraege();
|
||||||
|
for (const item of eintraege) {
|
||||||
|
if (item.status === "fehler") continue; // braucht bewusste Nutzer-Aktion, kein Auto-Retry
|
||||||
|
try {
|
||||||
|
await sendeEintrag(item);
|
||||||
|
} catch (error) {
|
||||||
|
if (!(error instanceof ApiError)) {
|
||||||
|
return; // vermutlich offline - restliche Queue in Ruhe lassen, nicht durchhämmern
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function entferneFehlerEintrag(kontrolleId: string, materialId: number): Promise<void> {
|
||||||
|
await del(keyFor(kontrolleId, materialId), store);
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import { synchronisiereQueue } from "./queue";
|
||||||
|
|
||||||
|
/** Prompt 17: bei wiederhergestellter Verbindung automatische Übertragung der
|
||||||
|
* zwischengespeicherten Eingaben, ohne dass der Mitarbeiter erneut eintippt. */
|
||||||
|
export function useOnlineStatus(): boolean {
|
||||||
|
const [online, setOnline] = useState(navigator.onLine);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleOnline = () => {
|
||||||
|
setOnline(true);
|
||||||
|
void synchronisiereQueue();
|
||||||
|
};
|
||||||
|
const handleOffline = () => setOnline(false);
|
||||||
|
|
||||||
|
window.addEventListener("online", handleOnline);
|
||||||
|
window.addEventListener("offline", handleOffline);
|
||||||
|
|
||||||
|
// Periodischer Versuch: "online" laut Browser heißt nicht zwingend, dass der
|
||||||
|
// Backend-Server erreichbar ist (z. B. WLAN ohne Internet). 15s ist ein
|
||||||
|
// pragmatischer Kompromiss zwischen Akkuverbrauch und Reaktionszeit.
|
||||||
|
const interval = window.setInterval(() => {
|
||||||
|
if (navigator.onLine) {
|
||||||
|
void synchronisiereQueue();
|
||||||
|
}
|
||||||
|
}, 15000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("online", handleOnline);
|
||||||
|
window.removeEventListener("offline", handleOffline);
|
||||||
|
window.clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return online;
|
||||||
|
}
|
||||||
@@ -0,0 +1,271 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
import { apiRequest, ApiError } from "../api/client";
|
||||||
|
import type { Kontrolle, Material, Objekt, Objektposition } from "../api/types";
|
||||||
|
import { useOnlineStatus } from "../offline/useOnlineStatus";
|
||||||
|
import { enqueue, eintraegeFuerKontrolle, entferneFehlerEintrag, synchronisiereQueue } from "../offline/queue";
|
||||||
|
import type { QueueStatus } from "../offline/queue";
|
||||||
|
|
||||||
|
type PositionStatus = "unbestaetigt" | QueueStatus | "gespeichert";
|
||||||
|
|
||||||
|
interface PositionZustand {
|
||||||
|
position: Objektposition;
|
||||||
|
material: Material | undefined;
|
||||||
|
status: PositionStatus;
|
||||||
|
eingabe: string;
|
||||||
|
fehlerText: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Sperrmeldung {
|
||||||
|
benutzer: string | null;
|
||||||
|
seit: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prompt 11 Screens 2-6 (kompakt zusammengefasst) + Prompt 17 Offline-Härtung:
|
||||||
|
// Start -> Positionen erfassen (über die lokale Queue, nie direkt blockierend) ->
|
||||||
|
// Abschluss erst möglich, wenn nichts mehr in der Queue unbestätigt liegt.
|
||||||
|
export function KontrollPage() {
|
||||||
|
const { objektId } = useParams<{ objektId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const online = useOnlineStatus();
|
||||||
|
|
||||||
|
const [objekt, setObjekt] = useState<Objekt | null>(null);
|
||||||
|
const [kontrolle, setKontrolle] = useState<Kontrolle | null>(null);
|
||||||
|
const [sperre, setSperre] = useState<Sperrmeldung | null>(null);
|
||||||
|
const [positionen, setPositionen] = useState<PositionZustand[]>([]);
|
||||||
|
const [startFehler, setStartFehler] = useState<string | null>(null);
|
||||||
|
const [wirdAbgeschlossen, setWirdAbgeschlossen] = useState(false);
|
||||||
|
const [abschlussFehler, setAbschlussFehler] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!objektId) return;
|
||||||
|
apiRequest<Objekt>(`/objekte/${objektId}`).then(setObjekt).catch(() => undefined);
|
||||||
|
}, [objektId]);
|
||||||
|
|
||||||
|
async function starteKontrolle(uebernehmen: boolean) {
|
||||||
|
if (!objektId) return;
|
||||||
|
setStartFehler(null);
|
||||||
|
try {
|
||||||
|
const neueKontrolle = await apiRequest<Kontrolle>(`/objekte/${objektId}/kontrollen`, {
|
||||||
|
method: "POST",
|
||||||
|
body: { uebernehmen },
|
||||||
|
});
|
||||||
|
setKontrolle(neueKontrolle);
|
||||||
|
setSperre(null);
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof ApiError && error.status === 409) {
|
||||||
|
const detail = error.detail as { benutzer?: string; seit?: string } | null;
|
||||||
|
setSperre({ benutzer: detail?.benutzer ?? null, seit: detail?.seit ?? "" });
|
||||||
|
} else {
|
||||||
|
setStartFehler("Kontrolle konnte nicht gestartet werden (keine Verbindung?).");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void starteKontrolle(false);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [objektId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
Promise.all([
|
||||||
|
apiRequest<Objektposition[]>(`/objekte/${kontrolle.objekt_id}/positionen`),
|
||||||
|
apiRequest<Material[]>("/materialien"),
|
||||||
|
]).then(([positionsListe, materialListe]) => {
|
||||||
|
const materialById = new Map(materialListe.map((m) => [m.id, m]));
|
||||||
|
setPositionen(
|
||||||
|
positionsListe
|
||||||
|
.filter((p) => p.ist_status === "aktiv")
|
||||||
|
.map((p) => ({
|
||||||
|
position: p,
|
||||||
|
material: materialById.get(p.material_id),
|
||||||
|
status: "unbestaetigt",
|
||||||
|
eingabe: p.sollmenge_effektiv,
|
||||||
|
fehlerText: null,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}, [kontrolle]);
|
||||||
|
|
||||||
|
// Reconciliation-Loop: gleicht lokalen Anzeigezustand mit der Offline-Queue ab.
|
||||||
|
// Ein Eintrag, der aus der Queue verschwunden ist, wurde erfolgreich übertragen
|
||||||
|
// (queue.ts entfernt Einträge ausschließlich bei Erfolg, siehe dort).
|
||||||
|
useEffect(() => {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
const interval = window.setInterval(async () => {
|
||||||
|
const eintraege = await eintraegeFuerKontrolle(kontrolle.id);
|
||||||
|
const byMaterial = new Map(eintraege.map((e) => [e.materialId, e]));
|
||||||
|
setPositionen((bisherige) =>
|
||||||
|
bisherige.map((zustand) => {
|
||||||
|
const inQueue = byMaterial.get(zustand.position.material_id);
|
||||||
|
if (inQueue) {
|
||||||
|
return { ...zustand, status: inQueue.status, fehlerText: inQueue.fehlerText };
|
||||||
|
}
|
||||||
|
if (zustand.status === "wartet" || zustand.status === "wird_uebertragen") {
|
||||||
|
return { ...zustand, status: "gespeichert", fehlerText: null };
|
||||||
|
}
|
||||||
|
return zustand;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, 2000);
|
||||||
|
return () => window.clearInterval(interval);
|
||||||
|
}, [kontrolle]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (online) void synchronisiereQueue();
|
||||||
|
}, [online]);
|
||||||
|
|
||||||
|
function eingabeAendern(materialId: number, wert: string) {
|
||||||
|
setPositionen((bisherige) =>
|
||||||
|
bisherige.map((z) => (z.position.material_id === materialId ? { ...z, eingabe: wert } : z))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function positionSenden(materialId: number, istmenge: string) {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
await enqueue(kontrolle.id, materialId, istmenge);
|
||||||
|
setPositionen((bisherige) =>
|
||||||
|
bisherige.map((z) => (z.position.material_id === materialId ? { ...z, status: "wartet" } : z))
|
||||||
|
);
|
||||||
|
void synchronisiereQueue();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fehlerErneutVersuchen(materialId: number, istmenge: string) {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
await entferneFehlerEintrag(kontrolle.id, materialId);
|
||||||
|
await positionSenden(materialId, istmenge);
|
||||||
|
}
|
||||||
|
|
||||||
|
const alleUebertragen = useMemo(
|
||||||
|
() => positionen.length > 0 && positionen.every((p) => p.status === "gespeichert"),
|
||||||
|
[positionen]
|
||||||
|
);
|
||||||
|
|
||||||
|
async function abschliessen() {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
setWirdAbgeschlossen(true);
|
||||||
|
setAbschlussFehler(null);
|
||||||
|
try {
|
||||||
|
await apiRequest(`/kontrollen/${kontrolle.id}/abschliessen`, { method: "POST" });
|
||||||
|
navigate("/objekte");
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof ApiError && error.status === 409) {
|
||||||
|
setAbschlussFehler("Nicht alle Positionen wurden erfasst.");
|
||||||
|
} else {
|
||||||
|
setAbschlussFehler("Abschluss fehlgeschlagen (keine Verbindung?).");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setWirdAbgeschlossen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function abbrechen() {
|
||||||
|
if (!kontrolle) return;
|
||||||
|
const grund = window.prompt("Grund für den Abbruch (optional):") ?? undefined;
|
||||||
|
await apiRequest(`/kontrollen/${kontrolle.id}/abbrechen`, { method: "POST", body: { grund } });
|
||||||
|
navigate("/objekte");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sperre) {
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||||
|
<h1>Objekt gesperrt</h1>
|
||||||
|
<p>
|
||||||
|
Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
|
||||||
|
</p>
|
||||||
|
<button onClick={() => starteKontrolle(true)} style={{ padding: "0.75rem 1.5rem" }}>
|
||||||
|
Trotzdem übernehmen
|
||||||
|
</button>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startFehler) {
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||||
|
<p style={{ color: "crimson" }}>{startFehler}</p>
|
||||||
|
<button onClick={() => starteKontrolle(false)}>Erneut versuchen</button>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||||
|
<h1>{objekt?.name ?? "Kontrolle"}</h1>
|
||||||
|
{!online && (
|
||||||
|
<p style={{ background: "#fff3cd", padding: "0.5rem", borderRadius: 4 }}>
|
||||||
|
Kein Netz - Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<ul style={{ listStyle: "none", padding: 0 }}>
|
||||||
|
{positionen.map((zustand) => (
|
||||||
|
<li
|
||||||
|
key={zustand.position.id}
|
||||||
|
style={{
|
||||||
|
border: "1px solid #ccc",
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: "0.75rem",
|
||||||
|
marginBottom: "0.5rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||||
|
<strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
|
||||||
|
<StatusBadge status={zustand.status} />
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.85rem", color: "#666" }}>
|
||||||
|
Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={zustand.eingabe}
|
||||||
|
onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
|
||||||
|
style={{ width: "5rem", fontSize: "1.1rem", padding: "0.5rem" }}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
|
||||||
|
style={{ flex: 1, fontSize: "1.1rem" }}
|
||||||
|
>
|
||||||
|
Bestätigen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{zustand.status === "fehler" && (
|
||||||
|
<div style={{ marginTop: "0.5rem" }}>
|
||||||
|
<p style={{ color: "crimson", margin: 0 }}>{zustand.fehlerText}</p>
|
||||||
|
<button onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}>
|
||||||
|
Erneut versuchen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{abschlussFehler && <p style={{ color: "crimson" }}>{abschlussFehler}</p>}
|
||||||
|
<button
|
||||||
|
onClick={abschliessen}
|
||||||
|
disabled={!alleUebertragen || wirdAbgeschlossen}
|
||||||
|
style={{ width: "100%", padding: "1rem", fontSize: "1.2rem" }}
|
||||||
|
>
|
||||||
|
{alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
|
||||||
|
</button>
|
||||||
|
<button onClick={abbrechen} style={{ width: "100%", padding: "0.75rem", marginTop: "0.5rem" }}>
|
||||||
|
Kontrolle abbrechen
|
||||||
|
</button>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusBadge({ status }: { status: PositionStatus }) {
|
||||||
|
const konfiguration: Record<PositionStatus, { text: string; farbe: string }> = {
|
||||||
|
unbestaetigt: { text: "offen", farbe: "#999" },
|
||||||
|
wartet: { text: "nicht gespeichert", farbe: "#e0a800" },
|
||||||
|
wird_uebertragen: { text: "wird übertragen…", farbe: "#e0a800" },
|
||||||
|
gespeichert: { text: "gespeichert", farbe: "#2e7d32" },
|
||||||
|
fehler: { text: "Fehler", farbe: "#c62828" },
|
||||||
|
};
|
||||||
|
const { text, farbe } = konfiguration[status];
|
||||||
|
return <span style={{ color: farbe, fontWeight: "bold" }}>{text}</span>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import { useState, type FormEvent } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import { useAuth } from "../auth/AuthContext";
|
||||||
|
|
||||||
|
export function LoginPage() {
|
||||||
|
const { login } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [fehler, setFehler] = useState<string | null>(null);
|
||||||
|
const [wirdGeladen, setWirdGeladen] = useState(false);
|
||||||
|
|
||||||
|
async function handleSubmit(event: FormEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
setFehler(null);
|
||||||
|
setWirdGeladen(true);
|
||||||
|
try {
|
||||||
|
await login(username, password);
|
||||||
|
navigate("/objekte");
|
||||||
|
} catch {
|
||||||
|
setFehler("Login oder Passwort falsch");
|
||||||
|
} finally {
|
||||||
|
setWirdGeladen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: 320, margin: "4rem auto", padding: "0 1rem" }}>
|
||||||
|
<h1>MABEA</h1>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<label>
|
||||||
|
Login
|
||||||
|
<input
|
||||||
|
style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
autoComplete="username"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label style={{ display: "block", marginTop: "1rem" }}>
|
||||||
|
Passwort
|
||||||
|
<input
|
||||||
|
style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
autoComplete="current-password"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
{fehler && <p style={{ color: "crimson" }}>{fehler}</p>}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={wirdGeladen}
|
||||||
|
style={{ marginTop: "1rem", width: "100%", fontSize: "1.2rem", padding: "0.75rem" }}
|
||||||
|
>
|
||||||
|
{wirdGeladen ? "Wird geprüft…" : "Anmelden"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
import { apiRequest } from "../api/client";
|
||||||
|
import type { Objekt } from "../api/types";
|
||||||
|
|
||||||
|
// Prompt 11 Screen 1: Standort/Objekt wählen. QR-/Barcode-Scan (Karte 10) ist
|
||||||
|
// Roadmap - dieser Screen bietet bewusst schon die Code-Suche als Textfeld an,
|
||||||
|
// ein späterer Kamera-Scan kann denselben Code einfach in dasselbe Feld schreiben.
|
||||||
|
export function ObjektListPage() {
|
||||||
|
const [objekte, setObjekte] = useState<Objekt[]>([]);
|
||||||
|
const [suche, setSuche] = useState("");
|
||||||
|
const [ladefehler, setLadefehler] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiRequest<Objekt[]>("/objekte")
|
||||||
|
.then(setObjekte)
|
||||||
|
.catch(() => setLadefehler("Objektliste konnte nicht geladen werden."));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const gefiltert = objekte.filter(
|
||||||
|
(o) =>
|
||||||
|
o.name.toLowerCase().includes(suche.toLowerCase()) ||
|
||||||
|
o.code.toLowerCase().includes(suche.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||||
|
<h1>Objekte</h1>
|
||||||
|
<input
|
||||||
|
placeholder="Suche oder Code scannen…"
|
||||||
|
value={suche}
|
||||||
|
onChange={(e) => setSuche(e.target.value)}
|
||||||
|
style={{ width: "100%", fontSize: "1.2rem", padding: "0.75rem", marginBottom: "1rem" }}
|
||||||
|
/>
|
||||||
|
{ladefehler && <p style={{ color: "crimson" }}>{ladefehler}</p>}
|
||||||
|
<ul style={{ listStyle: "none", padding: 0 }}>
|
||||||
|
{gefiltert.map((objekt) => (
|
||||||
|
<li key={objekt.id} style={{ marginBottom: "0.5rem" }}>
|
||||||
|
<Link
|
||||||
|
to={`/objekte/${objekt.id}/kontrolle`}
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
padding: "1rem",
|
||||||
|
border: "1px solid #ccc",
|
||||||
|
borderRadius: 8,
|
||||||
|
textDecoration: "none",
|
||||||
|
color: "inherit",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<strong>{objekt.name}</strong>
|
||||||
|
<div style={{ fontSize: "0.9rem", color: "#666" }}>{objekt.code}</div>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
Vendored
+9
@@ -0,0 +1,9 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_API_BASE_URL: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import { VitePWA } from "vite-plugin-pwa";
|
||||||
|
|
||||||
|
// MABEA PWA (Sprint 7 / Prompt 17): Service Worker cached App-Shell für schnellen
|
||||||
|
// Start im Einsatzumfeld. Die eigentliche Offline-Pufferung von Kontroll-Eingaben
|
||||||
|
// läuft NICHT über den Service Worker, sondern über eine IndexedDB-Queue
|
||||||
|
// (src/offline/queue.ts) - Service Worker allein reicht für Formular-Requests
|
||||||
|
// nicht aus, ohne Background-Sync-Komplexität einzuführen.
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: "autoUpdate",
|
||||||
|
workbox: {
|
||||||
|
globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
|
||||||
|
},
|
||||||
|
manifest: {
|
||||||
|
name: "MABEA",
|
||||||
|
short_name: "MABEA",
|
||||||
|
description: "Digitales Materialmanagement Rettungsdienst/KatS",
|
||||||
|
theme_color: "#0b5394",
|
||||||
|
background_color: "#ffffff",
|
||||||
|
display: "standalone",
|
||||||
|
start_url: "/",
|
||||||
|
icons: [
|
||||||
|
{ src: "icon-192.png", sizes: "192x192", type: "image/png" },
|
||||||
|
{ src: "icon-512.png", sizes: "512x512", type: "image/png" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user