Nouveau mode de fonctionnement en prévision de l'éligibilité 18+ : introduction du calendrier des créneaux

fcamblor commented 3 years ago

Cette Pull Request est

[ ] Un correctif
[X] Une nouvelle fonctionnalité

Description

L'idée de cette PR est de fournir plusieurs changements sur le formulaire de recherche VMD du fait de l'ouverture à un public bien plus large à la vaccination le 31 Mai.

Les changements majeurs effectués dans cette PR :

Affichage d'un bandeau affichant les créneaux disponibles par jour, et permettant de sélectionner un jour en particulier pour la prise de rdv (par défaut, le jour le plus proche avec des disponibilités est sélectionné)
Du fait de ce nouveau champ, suppression du critère de tri (lorsqu'on est en recherche par commune, il n'est plus opportun de laisser le choix à l'utilisateur de trier par date de première dispo puisqu'il a dorénavant le calendrier qui auto-sélectionne le premier jour avec des créneaux disponibles)
Affichage d'un filtre supplémentaire permettant de sélectionner un type de vaccin spécifique à la tranche 18-55 (vaccins à base d'ARNm) versus "tous les vaccins". Étant donné que le plus gros des utilisateurs à venir seront vraisemblablement dans la tranche 18-55, pré-selection de ce critère. À noter : si aucun calendrier n'est fourni dans le JSON (c'est le cas pour la plupart des communes, sauf celles du 33 et du 17 ainsi que leur départements limitrophes), le bandeau des jours ainsi que le filtre sur le type de vaccin n'apparaîtront pas car il est alors impossible de connaître une répartition par jours des créneaux de type ARNm/Tous
Le bandeau jours + le critère type de vaccin ne sont évidemment pas affichés sur l'onglet chronodose, qui a une configuration spécifique pour ça (créneaux sur aujourd'hui+demain, et vaccins ARNs uniquement)
Un filtre permettant d'ajuster la distance de recherche a été mis à disposition, sur les 2 onglets recherche standard / chronodose

Fonctionnalités visibles ici : https://dev.vitemado.se/disponibilite-generale/

Vaccination_COVID-19_à_Villenave-d_Ornon_33140

⚠️ Pour le moment, le back ne mettant pas à disposition les données, un mock de ces dernières (dans le format évoqué dans https://github.com/CovidTrackerFr/vitemadose/issues/519) a été hardcodé sur cette branche. Ça signifie que les données n'évolueront pas dans le temps, et cela explique aussi pourquoi vous verrez sûrement un calendrier avec des dates dans le passé (dans la vraie vie, ça ne se passera pas comme ça)

Fix #96

fcamblor commented 3 years ago

J'ai des problèmes sur mobile où le slider ne s'affiche / ne fonctionne pas :(

EDIT: fixé dans c5a968f

francoisBouchet commented 3 years ago

hier soir je m'étais amusé à faire les blocs jours, si des fois il y a des trucs qui peuvent t'intéresser pour "raffiner" Frédéric, enjoy.

html Day2Day-Francois.zip

fcamblor commented 3 years ago

@francoisBouchet j'ai fait quelques modifs ce soir pour intégrer tes remarques remontées dans mattermost : cf 1ad3b85 4860c7b 79775d0

Ça donne ça :

fcamblor commented 3 years ago

J'ai force-push pour m'aligner sur les derniers développements de dev (notamment avec la suppression des chronodoses, qui entrait en conflit avec le nouveau mode 18_55 introduit ici)

Luwangel commented 3 years ago

Je n'ai pas encore regardé le code, mais en jouant avec la fonctionnalité sur staging, j'ai remarqué un petit problème de design :

Sélection_006

On utilise le même code couleur et visuel pour deux blocs qui ne se comportent pas de la même manière : le bouton prendre rendez-vous, et le jour sélectionné dans le calendrier).

PS : il ne faut pas prendre en compte les couleurs de ma capture d'écran, elles déconnent.

francoisBouchet commented 3 years ago

oui j'ai fait plusieurs tests de couleurs, j'avais même passé la date active en rouge... mais c'était pas terrible. et le plus visible pour la date sélectionnée restait encore de colorier tout le bloc date.

en fait ce qu'il nous manque dans la CSS actuelle, c'est une couleur "active". parce qu'on pourrait très bien avoir une couleur de bouton "default-state" et une couleur "active" / onClick plus sombre... (ce qui était le cas sur ma créa, mais en créa tout est plus facile :)

fcamblor commented 3 years ago

Tant que j'y pense, 2 points à faire sur le code actuel :

[x] Changer les counts (https://mattermost.covidtracker.fr/covidtracker/pl/67rtja4bqtba7mguxgjqpaoeya)
[x] Fixer le bug qui fait que lorsqu'on switch le filtre de distance jusqu'à ne plus avoir aucun résultat, ça continue d'en afficher dans le panel bas

fcamblor commented 3 years ago

On utilise le même code couleur et visuel pour deux blocs qui ne se comportent pas de la même manière : le bouton prendre rendez-vous, et le jour sélectionné dans le calendrier).

@francoisBouchet @Luwangel Que dites-vous de :

Peut-être un poil trop pâle non ?

(en effet, avoir une couleur différente du mauve, mais sans opacité, serait sûrement mieux ... des idées ?)

Luwangel commented 3 years ago

On utilise le même code couleur et visuel pour deux blocs qui ne se comportent pas de la même manière : le bouton prendre rendez-vous, et le jour sélectionné dans le calendrier).

@francoisBouchet @Luwangel Que dites-vous de :

Peut-être un poil trop pâle non ?

(en effet, avoir une couleur différente du mauve, mais sans opacité, serait sûrement mieux ... des idées ?)

En fait tu n'as pas besoin d'indiquer en couleur le jour courant, puisqu'il s'agit par défaut du jour le plus à gauche libre. La même interface que ce que tu proposes sans le mauve autours du vendredi me semble parfaite.

Sur airbnb, les jours non réservables sont de la même couleur que les jours dans le passé. Et ça me semble assez clair finalement.

Sélection_001

fcamblor commented 3 years ago

Le jour en mauve foncé c'est pas le jour courant, c'est le jour sélectionné :-)

Légende :

gris = 0 créneaux
mauve foncé = jour sélectionné
blanc = jour sélectionnable
blanc avec contour mauve clair = hover sur jour sélectionnable

mccob commented 3 years ago

Bonsoir,

Cette PR est-elle toujours prévue ?

fcamblor commented 3 years ago

Oui, mais elle nécessite pas mal d'alignements (prise en compte du nouveau fichier sur tous les scrappers de toutes les plateformes) sur le back (et bloque pas mal les développements sur le front en attendant, vu les impacts que cela a)

fcamblor commented 3 years ago

Merci @Floby pour les propositions :)

fcamblor commented 3 years ago

Je viens de pusher une nouvelle version de la feature :

Suppression du critère de recherche sur le type de vaccin (car aujourd'hui, plus aucune injection d'AZ ne semble faite, et J&J reste extrêmement minoritaire dans son utilisation)
J'ai fait en sorte de "fusionner" les jours sans créneau dispos dans le calendrier dès lors :
- Qu'on a au moins 3j consécutifés sans créneau dispo
- Le premier jour restera systématiquement affiché
- Les jours suivants seront remplacés par une entrée "Jours sans créneaux", cliquable (si cliquée, les jours sans créneau sont alors affichés)

Une fois cliqué :

CovidTrackerFr / vitemadose-front

Nouveau mode de fonctionnement en prévision de l'éligibilité 18+ : introduction du calendrier des créneaux #233

Description