191 lines
6.7 KiB
Markdown
191 lines
6.7 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 con **animazione smooth sliding**
|
|
- [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 barra visiva (30s)
|
|
- [x] **Pulsante "Annulla" nella schermata badge non trovato**
|
|
- [x] **Badge diverso durante errore "non trovato" → ricarica nuovo utente/errore**
|
|
- [x] **Notifica badge validatore ignorato**
|
|
- [x] NumLockBanner
|
|
- [x] `SuccessModal.tsx` - conferma ingresso con carosello:
|
|
- [x] **Carosello fullwidth** (nessun troncamento testo)
|
|
- [x] **Scorrimento lento** (più rilassato, meno ansioso)
|
|
- [x] **Durata aumentata 8s**
|
|
- [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] **Polling periodico (30s) per verificare server restart**
|
|
- [x] Timeout sessione 30 minuti
|
|
- [x] Timeout utente 60 secondi
|
|
- [x] **Timeout badge non trovato 30 secondi**
|
|
- [x] **Ignora stesso badge passato più volte** (no ricaricamento)
|
|
- [x] Cambio rapido badge partecipante
|
|
- [x] **Badge durante success modal chiude modal e carica nuovo utente** (fix dipendenze useCallback)
|
|
- [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] **Animazione smooth sliding** (slide up/down)
|
|
- [x] Scorrimento automatico lento (più rilassato)
|
|
- [x] Modale fullscreen verde
|
|
- [x] **Contenitore fullwidth** (nessun troncamento testo lungo)
|
|
- [x] **Durata totale: 8 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 | Convocato | ✅ Sì |
|
|
| `0007399575` | Laura Rossi | Invitato | ✅ Sì |
|
|
| `0000514162` | Giuseppe Verdi | Tecnico | ❌ No |
|
|
| `0006478281` | - | - | ⚠️ Non nel DB |
|
|
|
|
---
|
|
|
|
## 🧪 TODO: Test Automatici
|
|
|
|
### Test da Implementare
|
|
|
|
- [ ] **Test RFID Scanner:**
|
|
- [ ] Rilevamento pattern US (`;` → `?`)
|
|
- [ ] Rilevamento pattern IT (`ò` → `_`)
|
|
- [ ] Timeout scansione incompleta
|
|
- [ ] ESC annulla scansione
|
|
- [ ] Enter post-completamento ignorato
|
|
|
|
- [ ] **Test Flow Validatore:**
|
|
- [ ] Login con password corretta
|
|
- [ ] Login con password errata
|
|
- [ ] Sessione persistente in localStorage
|
|
- [ ] Invalidazione sessione al riavvio server
|
|
- [ ] Logout manuale
|
|
|
|
- [ ] **Test Flow Partecipante:**
|
|
- [ ] Badge trovato ammesso → mostra card verde
|
|
- [ ] Badge trovato non ammesso → mostra card rossa + warning
|
|
- [ ] Badge non trovato → mostra schermata errore con countdown
|
|
- [ ] Stesso badge passato più volte → ignorato
|
|
- [ ] Badge diverso passato → cambia utente visualizzato
|
|
- [ ] Timeout 60s → torna in attesa
|
|
|
|
- [ ] **Test Conferma Ingresso:**
|
|
- [ ] Badge validatore su utente ammesso → success modal
|
|
- [ ] Badge validatore su utente NON ammesso → notifica ignorato
|
|
- [ ] Badge validatore senza utente → notifica ignorato
|
|
- [ ] **⚠️ IMPORTANTE:** Simulare bug che bypassa frontend → backend DEVE bloccare
|
|
|
|
- [ ] **Test Success Modal:**
|
|
- [ ] Carosello scorre tutte le lingue
|
|
- [ ] Durata corretta (8s)
|
|
- [ ] Badge durante modal → chiude modal e carica nuovo utente
|
|
|
|
---
|
|
|
|
## ✅ FRONTEND COMPLETATO
|
|
|
|
Tutte le funzionalità principali sono state implementate. Rimangono da sviluppare i test automatici.
|
|
|