alfy
e68f299feb
- Aggiunto supporto multi-pattern RFID (US/IT layout) - Implementata invalidazione sessioni al restart del server - Schermata "badge non trovato" con countdown 30s - Notifica quando badge validatore passato senza utente - Database aggiornato con badge reali di test - Layout ottimizzato per tablet orizzontale - Banner NumLock per desktop - Toggle visibilità password - Carosello benvenuto multilingua (10 lingue) - Pagina debug RFID (/debug)
139 lines
4.5 KiB
Markdown
139 lines
4.5 KiB
Markdown
# 📋 Piano Sviluppo Frontend
|
|
|
|
## Obiettivo
|
|
|
|
Applicazione React per tablet che gestisce il flusso di accesso ai varchi votazione, con lettura badge RFID.
|
|
Ottimizzata per tablet in orizzontale.
|
|
|
|
---
|
|
|
|
## Checklist Sviluppo
|
|
|
|
### 1. Setup Progetto
|
|
|
|
- [x] Inizializzare Vite + React + TypeScript
|
|
- [x] Installare Tailwind CSS 4
|
|
- [x] Configurare `tsconfig.json`
|
|
- [x] Configurare `vite.config.ts` con proxy API
|
|
- [x] Configurare `.gitignore`
|
|
- [x] Path relativi per build (base: './')
|
|
- [x] Output build in `frontend/dist/`
|
|
- [x] Favicon con logo Focolari
|
|
|
|
### 2. Design System
|
|
|
|
- [x] Configurare colori custom in Tailwind
|
|
- [x] `focolare-blue: #0072CE`
|
|
- [x] `focolare-orange: #F5A623`
|
|
- [x] `focolare-yellow: #FFD700`
|
|
- [x] Stili globali in `index.css`
|
|
- [x] Animazioni custom (fade-in, slide-up, pulse-error, blink)
|
|
- [x] Classe `.glass` per effetto glassmorphism
|
|
|
|
### 3. Tipi TypeScript (`types/index.ts`)
|
|
|
|
- [x] `RoomInfo` - info sala + **server_start_time**
|
|
- [x] `User` - dati utente
|
|
- [x] `LoginRequest/Response`
|
|
- [x] `EntryRequest/Response` (SENZA welcome_message)
|
|
- [x] `AppState` - stati applicazione
|
|
- [x] `ValidatorSession` - sessione validatore + **serverStartTime**
|
|
- [x] `RFIDScannerState` - stato scanner
|
|
- [x] `RFIDScanResult` - risultato scan
|
|
|
|
### 4. API Service (`services/api.ts`)
|
|
|
|
- [x] Classe `ApiError` custom
|
|
- [x] Funzione `apiFetch` generica con error handling
|
|
- [x] `getRoomInfo()` - GET /info-room
|
|
- [x] `loginValidator()` - POST /login-validate
|
|
- [x] `getUserByBadge()` - GET /anagrafica/{badge}
|
|
- [x] `requestEntry()` - POST /entry-request
|
|
- [x] Logging con prefisso `[API]`
|
|
- [x] Path relativi (proxy Vite in dev, stesso server in prod)
|
|
|
|
### 5. Hook RFID Scanner (`hooks/useRFIDScanner.ts`)
|
|
|
|
- [x] Supporto pattern multipli (US: `;?`, IT: `ò_`)
|
|
- [x] Rilevamento automatico pattern in uso
|
|
- [x] Gestione Enter post-completamento
|
|
- [x] Timeout 2.5s per scansioni accidentali
|
|
- [x] ESC annulla scansione in corso
|
|
- [x] Logging avanzato con prefisso `[RFID]`
|
|
- [x] Export `keyLog` per debug
|
|
|
|
### 6. Componenti UI (`components/`)
|
|
|
|
- [x] `Logo.tsx` - logo Focolari
|
|
- [x] `Button.tsx` - varianti primary/secondary/danger
|
|
- [x] `Input.tsx` - campo input styled + **toggle password visibility**
|
|
- [x] `Modal.tsx` - modale base
|
|
- [x] `RFIDStatus.tsx` - indicatore stato scanner
|
|
- [x] `UserCard.tsx` - card utente con foto e ruolo
|
|
- [x] `CountdownTimer.tsx` - timer con progress bar
|
|
- [x] `WelcomeCarousel.tsx` - carosello messaggi multilingua
|
|
- [x] `NumLockBanner.tsx` - avviso NumLock per desktop
|
|
|
|
### 7. Schermate (`screens/`)
|
|
|
|
- [x] `LoadingScreen.tsx` - caricamento iniziale + ping automatico
|
|
- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner
|
|
- [x] `ActiveGateScreen.tsx` - varco attivo:
|
|
- [x] Card utente (layout largo per tablet)
|
|
- [x] **Schermata "badge non trovato"** con countdown 30s
|
|
- [x] **Notifica badge validatore ignorato**
|
|
- [x] NumLockBanner
|
|
- [x] `SuccessModal.tsx` - conferma ingresso con carosello
|
|
- [x] `ErrorModal.tsx` - errore fullscreen
|
|
- [x] `DebugScreen.tsx` - pagina diagnostica RFID
|
|
|
|
### 8. State Machine (`App.tsx`)
|
|
|
|
- [x] Stati applicazione gestiti
|
|
- [x] Integrazione `useRFIDScanner`
|
|
- [x] Gestione sessione validatore (localStorage)
|
|
- [x] **Qualsiasi badge può essere validatore** (verificato con password)
|
|
- [x] Password salvata in sessione per conferme ingresso
|
|
- [x] **Invalidazione sessione se server riparte** (serverStartTime)
|
|
- [x] Timeout sessione 30 minuti
|
|
- [x] Timeout utente 60 secondi
|
|
- [x] **Timeout badge non trovato 30 secondi**
|
|
- [x] Cambio rapido badge partecipante
|
|
- [x] Conferma con badge validatore (quello della sessione)
|
|
- [x] **Notifica se badge validatore rippassato senza utente**
|
|
- [x] Logging transizioni con prefisso `[FLOW]`
|
|
|
|
### 9. Modale Successo - Carosello Internazionale
|
|
|
|
- [x] Componente `WelcomeCarousel.tsx`
|
|
- [x] 10 lingue supportate
|
|
- [x] Scorrimento automatico ogni 800ms
|
|
- [x] Modale fullscreen verde
|
|
- [x] Durata totale: 5 secondi
|
|
|
|
### 10. Debug & Diagnostica
|
|
|
|
- [x] Pagina `/debug` dedicata
|
|
- [x] Logging console strutturato `[RFID]`, `[FLOW]`, `[API]`
|
|
|
|
### 11. Routing
|
|
|
|
- [x] React Router
|
|
- [x] Route principale `/`
|
|
- [x] Route debug `/debug`
|
|
|
|
---
|
|
|
|
## Badge di Test
|
|
|
|
| Badge | Nome | Ruolo | Ammesso |
|
|
|--------------|----------------|---------|---------------|
|
|
| `0008988288` | Marco Bianchi | Votante | ✅ Sì |
|
|
| `0007399575` | Laura Rossi | Votante | ✅ Sì |
|
|
| `0000514162` | Giuseppe Verdi | Tecnico | ❌ No |
|
|
| `0006478281` | - | - | ⚠️ Non nel DB |
|
|
|
|
---
|
|
|
|
## ✅ FRONTEND COMPLETATO
|