Initial commit

2026-03-26 22:57:02 +01:00
parent 18e0e04700
commit 8752acd2c4
44 changed files with 10272 additions and 0 deletions
@@ -0,0 +1,400 @@
+# Changelog - Frontend Angular
+
+Tracciamento modifiche specifiche del frontend Angular.
+
+---
+
+## ✅ Completato
+
+### Setup Iniziale
+- [x] Inizializzazione progetto Angular 20
+- [x] Configurazione Vite come bundler
+- [x] Configurazione Tailwind CSS
+- [x] Setup TypeScript 5.8
+- [x] Configurazione RxJS 7.8
+
+### Architettura & Struttura
+
+#### Servizi
+- [x] **ApiService** (`services/api.service.ts`)
+  - Comunicazione HTTP con backend
+  - Base URL configurabile
+  - Metodi per tutte le entità (users, groups, bets, friends)
+  - Gestione errori HTTP
+
+- [x] **DataService** (`services/data.service.ts`)
+  - State management con RxJS signals
+  - Cache dati utente corrente
+  - Cache amici, gruppi, scommesse
+  - Metodi per refresh dati
+  - Observable streams per reactive updates
+
+#### Modelli TypeScript
+- [x] **Bet Model** (`models/bet.model.ts`)
+  - Interface Bet completa
+  - Enum BetStatus (ACTIVE, AWAITING_VALIDATION, COMPLETED)
+  - Enum ParticipantRole (PARTICIPANT, OBSERVER)
+  - Type BetParticipant
+
+- [x] **User Model** (inline nei servizi per ora)
+- [x] **Group Model** (inline nei servizi per ora)
+
+### Componenti Implementati
+
+#### App Component
+- [x] **AppComponent** (`app.component.ts`)
+  - Layout principale con navigation bar
+  - Gestione routing tra viste con signal
+  - Bottom navigation responsive
+  - 5 sezioni: Home, Scopri, Crea Scommessa, Gruppi, Profilo
+  - FAB centrale per creazione scommessa
+
+#### Home Section
+- [x] **HomeComponent** (`components/home/home.component.ts`)
+  - Dashboard principale
+  - Visualizzazione scommesse attive/passate
+  - Toggle tra filtri temporali e per gruppo
+  - Integrazione con sotto-componenti
+
+- [x] **BetsByTimeComponent** (`components/home/bets-by-time/bets-by-time.component.ts`)
+  - Filtro scommesse per periodo temporale
+  - Periodi: Oggi, Questa Settimana, Questo Mese
+  - Indicatore visuale periodo selezionato
+  - Fetch dati da API con filtri
+
+- [x] **BetsByGroupComponent** (`components/home/bets-by-group/bets-by-group.component.ts`)
+  - Filtro scommesse per gruppo
+  - Selezione gruppo da dropdown
+  - Opzione "Tutti i Gruppi"
+  - Fetch dati da API per gruppo specifico
+
+#### Discover Section
+- [x] **DiscoverComponent** (`components/discover/discover.component.ts`)
+  - Esplorazione scommesse pubbliche
+  - Lista scommesse scopribili
+  - Possibilità di entrare come observer
+
+#### Create Bet Section
+- [x] **CreateBetComponent** (`components/create-bet/create-bet.component.ts`)
+  - Form creazione nuova scommessa
+  - Campi: titolo, descrizione, posta in gioco, data fine, gruppo, visibilità
+  - Validazione form
+  - Event emitter per chiusura
+  - Integrazione con API
+
+#### Groups Section
+- [x] **GroupsComponent** (`components/groups/groups.component.ts`)
+  - Lista tutti i gruppi dell'utente
+  - Navigazione verso dettaglio gruppo
+  - Creazione nuovo gruppo
+  - Badge contatore membri
+
+- [x] **GroupDetailComponent** (`components/groups/group-detail/group-detail.component.ts`)
+  - Dettaglio singolo gruppo
+  - Lista membri con avatar
+  - Aggiunta membri al gruppo
+  - Rimozione membri (se admin)
+  - Eliminazione gruppo
+
+#### Profile Section
+- [x] **ProfileComponent** (`components/profile/profile.component.ts`)
+  - Visualizzazione profilo utente
+  - Avatar, nome, email, punteggio
+  - Statistiche personali
+  - Lista richieste di amicizia pending
+  - Bottone modifica profilo
+
+- [x] **EditProfileComponent** (`components/profile/edit-profile/edit-profile.component.ts`)
+  - Form modifica dati profilo
+  - Campi: nome, email, avatar URL
+  - Validazione input
+  - Save/Cancel actions
+
+#### Shared Components
+- [x] **BetCardComponent** (`components/bet-card/bet-card.component.ts`)
+  - Card riutilizzabile per visualizzare scommesse
+  - Badge stato scommessa (Attiva, In Attesa, Completata)
+  - Informazioni partecipanti con avatar
+  - Posta in gioco
+  - Date inizio/fine
+  - Responsive design
+
+### UI/UX
+
+#### Design System
+- [x] Tema dark con palette:
+  - Background: slate-900
+  - Cards: slate-800
+  - Accenti: cyan-400/cyan-500
+  - Testo: white/slate-300
+- [x] Tailwind CSS utilities
+- [x] Responsive layout mobile-first
+- [x] Icone SVG per navigation
+
+#### Navigation
+- [x] Bottom navigation bar sticky
+- [x] 5 tab con icone e label
+- [x] Indicatore visuale tab attiva (color cyan)
+- [x] FAB centrale per azione primaria (Crea Scommessa)
+- [x] Hover states e transitions
+
+#### Interazioni
+- [x] Click handlers per navigazione
+- [x] Form submissions
+- [x] Toggle filters
+- [x] Dropdown selects
+- [x] Event emitters tra parent/child components
+
+### Configurazione
+
+- [x] **package.json** - Dipendenze e scripts
+- [x] **angular.json** - Configurazione Angular CLI
+- [x] **tsconfig.json** - TypeScript configuration
+- [x] **tailwind.config.js** (implicito con Tailwind)
+- [x] **vite.config** (gestito da Angular)
+
+---
+
+## 📋 Da Fare
+
+### Funzionalità Core Mancanti
+
+#### Scommesse
+- [ ] Visualizzazione dettaglio scommessa completo
+  - Modal o pagina dedicata
+  - Cronologia eventi
+  - Commenti (se implementati)
+- [ ] Modifica scommessa esistente
+- [ ] Eliminazione scommessa con conferma
+- [ ] Dichiarazione vincitore
+- [ ] Sistema di votazione vincitore
+- [ ] Join scommessa pubblica come observer
+- [ ] Leave scommessa
+- [ ] Invita amici a scommessa
+
+#### Profilo & Amici
+- [ ] Ricerca utenti
+- [ ] Invio richiesta di amicizia (UI)
+- [ ] Accetta/rifiuta richiesta amicizia (UI)
+- [ ] Lista amici visualizzata nel profilo
+- [ ] Visualizzazione profilo altri utenti
+- [ ] Statistiche avanzate profilo
+  - Win rate
+  - Streak
+  - Classifica generale
+- [ ] Notifiche
+
+#### Gruppi
+- [ ] Modifica info gruppo
+- [ ] Invita utenti al gruppo
+- [ ] Gestione permessi gruppo (admin/membro)
+- [ ] Statistiche gruppo
+- [ ] Ricerca membri
+- [ ] Leave gruppo
+
+### UX Improvements
+
+#### Stati & Feedback
+- [ ] Loading states per tutti i componenti
+  - Skeleton loaders
+  - Spinners
+  - Progress indicators
+- [ ] Error handling UI
+  - Toast notifications
+  - Error messages inline
+  - Retry mechanisms
+- [ ] Empty states
+  - Nessuna scommessa
+  - Nessun amico
+  - Nessun gruppo
+- [ ] Success confirmations
+  - Toast per azioni completate
+  - Feedback visuale
+
+#### Animazioni & Transizioni
+- [ ] Animazioni transizione tra viste
+- [ ] Micro-interazioni su bottoni
+- [ ] Slide/fade effects per modal
+- [ ] Loading animations
+- [ ] Skeleton loading per cards
+
+#### Interattività
+- [ ] Pull-to-refresh
+- [ ] Infinite scroll per liste lunghe
+- [ ] Swipe gestures (elimina, archivia)
+- [ ] Drag and drop (riordino)
+- [ ] Conferme azioni critiche
+  - Modal di conferma eliminazione
+  - Double-tap protection
+
+#### Filtri & Ricerca
+- [ ] Ricerca scommesse per titolo
+- [ ] Filtri avanzati scommesse
+  - Per stato
+  - Per partecipanti
+  - Per data
+  - Per posta in gioco
+- [ ] Ordinamento scommesse
+  - Per data
+  - Per popolarità
+  - Per punteggio
+- [ ] Salvataggio preferenze filtri
+
+### Componenti da Creare
+
+- [ ] **BetDetailModal/Page** - Dettaglio completo scommessa
+- [ ] **ToastNotification** - Notifiche toast
+- [ ] **ConfirmDialog** - Dialog conferma generica
+- [ ] **SearchBar** - Barra di ricerca riutilizzabile
+- [ ] **UserCard** - Card utente riutilizzabile
+- [ ] **EmptyState** - Componente empty state generico
+- [ ] **LoadingSpinner** - Spinner riutilizzabile
+- [ ] **AvatarUpload** - Upload avatar con preview
+- [ ] **DatePicker** - Selettore date customizzato
+- [ ] **FriendsList** - Lista amici con azioni
+- [ ] **NotificationsList** - Lista notifiche
+- [ ] **StatsCard** - Card statistiche riutilizzabile
+
+### Routing & Navigation
+
+- [ ] Implementare Angular Router
+  - Route per ogni vista
+  - Route parametriche (es. /group/:id)
+  - Query parameters per filtri
+  - Route guards
+- [ ] Deep linking
+- [ ] Browser back button handling
+- [ ] Route transition animations
+
+### State Management
+
+- [ ] Migliorare DataService
+  - Gestione stato più robusta
+  - Cache invalidation strategy
+  - Optimistic updates
+  - Rollback on error
+- [ ] Considerare NgRx o Signals API avanzate
+- [ ] Persistent state (localStorage)
+- [ ] Sync state across tabs
+
+### Forms & Validation
+
+- [ ] Reactive forms everywhere
+- [ ] Validatori custom
+- [ ] Error messages user-friendly
+- [ ] Form dirty/pristine tracking
+- [ ] Unsaved changes warning
+- [ ] Auto-save drafts
+
+### Testing
+
+- [ ] Unit test per componenti
+- [ ] Unit test per servizi
+- [ ] Integration test
+- [ ] E2E test con Cypress/Playwright
+- [ ] Coverage almeno 80%
+- [ ] Visual regression testing
+
+### Performance
+
+- [ ] Lazy loading components
+- [ ] Virtual scrolling per liste lunghe
+- [ ] Image lazy loading
+- [ ] OnPush change detection
+- [ ] Memoization expensive computations
+- [ ] Bundle size optimization
+- [ ] Tree shaking
+- [ ] Code splitting
+
+### Accessibilità (a11y)
+
+- [ ] ARIA labels
+- [ ] Keyboard navigation
+- [ ] Focus management
+- [ ] Screen reader support
+- [ ] Contrast ratios WCAG AA
+- [ ] Semantic HTML
+
+### PWA Features
+
+- [ ] Service Worker
+- [ ] Offline mode
+- [ ] App manifest
+- [ ] Install prompt
+- [ ] Push notifications
+- [ ] Background sync
+
+### Internazionalizzazione
+
+- [ ] i18n setup (Angular i18n)
+- [ ] Traduzioni IT/EN
+- [ ] Date/number formatting locale-aware
+- [ ] RTL support (se necessario)
+
+### DevOps & Build
+
+- [ ] Environment files (dev, staging, prod)
+- [ ] Build optimization per production
+- [ ] Source maps
+- [ ] Linting (ESLint)
+- [ ] Formatting (Prettier)
+- [ ] Pre-commit hooks (Husky)
+- [ ] CI/CD pipeline
+
+### Monitoring & Analytics
+
+- [ ] Error tracking (Sentry)
+- [ ] Analytics (Google Analytics / Plausible)
+- [ ] Performance monitoring
+- [ ] User behavior tracking
+
+---
+
+## 🐛 Bug Conosciuti
+
+- [ ] Nessun handling errori API in caso di network failure
+- [ ] Refresh dati non automatico (solo manuale al mount)
+- [ ] Possibili race conditions su multiple API calls
+
+---
+
+## 🔧 Miglioramenti Tecnici Proposti
+
+- [ ] Separare models in file dedicati
+- [ ] Creare barrel exports per organizzazione
+- [ ] Introdurre design patterns (Repository, Facade)
+- [ ] Standardizzare naming conventions
+- [ ] Constants file per magic strings
+- [ ] Utility functions file
+- [ ] Typed HTTP responses
+- [ ] Error types customizzati
+- [ ] Logging service
+- [ ] Configuration service
+
+---
+
+## Note Tecniche
+
+### Dipendenze Principali
+- **@angular/core**: ^20.3.0
+- **@angular/common**: ^20.3.0
+- **@angular/platform-browser**: ^20.3.0
+- **rxjs**: ^7.8.2
+- **tailwindcss**: latest
+- **typescript**: ~5.8.2
+- **vite**: ^6.2.0
+
+### Scripts NPM
+```bash
+npm run dev      # Avvia dev server (porta 4200)
+npm run build    # Build production
+npm run preview  # Preview build production
+```
+
+### Porte
+- Dev server: `4200`
+- API backend: `3000`
+
+### Browser Target
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- ES2022+ support required