Réservations de sorties en pirogue (Alpine.js)

README.md · 3.3 Ko

# Réservations de sorties en pirogue et en bateau (Alpine.js, niveau avancé)

## Cas d'usage
Une petite entreprise d'Antalaha propose des sorties (tour de la baie, mangroves, pêche au large, journée plage). Son responsable gère les réservations : il consulte des statistiques, ajoute une réservation avec validation, filtre et trie la liste, modifie une réservation en ligne, la confirme, l'annule ou la supprime (avec confirmation). Tout est sauvegardé dans le navigateur quand c'est possible. Prix et clients sont fictifs.

## Arborescence
```
alpine-reservations/
├── index.html           structure de la page, attributs Alpine commentés un à un
├── css/style.css        apparence (mobile d'abord, dialogue, notifications)
├── js/
│   ├── outils.js        fonctions pures : dates, Ariary, identifiants, stockage sûr
│   ├── store.js         Alpine.store « ui » (notifications) et « reservations » (données, validation, stats)
│   ├── extensions.js    magics $ariary et $dateFr, directive x-avatar
│   └── composants.js    Alpine.data (onglets, formulaire, liste, dialogue) et Alpine.bind (boutonOnglet, champValide)
├── medias/              illustration d'en-tête (SVG libre de droits)
├── site.json            titre, description, étiquettes
└── README.md            ce fichier
```
Ordre de chargement dans `index.html` : `outils.js`, `store.js`, `extensions.js`, `composants.js`, puis `alpine.min.js` (tous `defer`).

## Notions Alpine abordées
- `Alpine.store()` : état partagé entre composants, `init()` d'un store, `$store`
- `Alpine.data()` : composants réutilisables, enregistrés dans `alpine:init`
- `Alpine.bind()` et `x-bind` avec un objet (clés `@click`, `:class`, `:aria-*`…)
- `$dispatch` et événements personnalisés (`.window` pour communiquer entre composants non imbriqués)
- `Alpine.directive()` (`x-avatar`) et `Alpine.magic()` (`$ariary`, `$dateFr`)
- `x-effect` et `Alpine.effect()` (sauvegarde automatique)
- `$watch`, `$nextTick`, `$refs` / `x-ref`, `$root`, `$el`, `$event`
- `x-for` + `:key`, `x-if`, `x-show`, `x-transition`, `x-cloak`
- `x-model` (`.number`, `.debounce`), validation de formulaire, modification en ligne
- accessibilité : onglets ARIA et flèches du clavier, dialogue modal avec piège à focus et touche Échap

## Pièges de l'environnement
- **Bac à sable** : `localStorage` lève une `SecurityError` ; `Outils.lire/ecrire` utilisent `try/catch` et un repli en mémoire (un avertissement s'affiche).
- **Ordre des scripts** : tout ce qui s'enregistre dans `alpine:init` doit être chargé avant Alpine.
- **`alert`/`confirm`** ne sont pas utilisés : le dialogue est maison.
- `<select x-model>` rempli par `x-for` : on ajoute `:selected` sur les `<option>` pour que la valeur de départ soit sélectionnée.

## Idées d'exercices
1. Ajouter un champ « acompte versé » et afficher le reste à payer.
2. Ajouter une sortie « Observation des baleines » (tarif et capacité à choisir) dans `store.js`.
3. Ajouter un bouton « Exporter en CSV » qui génère un fichier téléchargeable (lien `download` + `Blob`).
4. Écrire une directive `x-focus-si="condition"` qui donne le focus à un élément.
5. Empêcher la surréservation : refuser un ajout si plus de 12 personnes sont déjà prévues le même jour pour le bateau.