covidtrackerfr / vitemadose-front

Interface utilisateur de l'outil ViteMaDose

Contribuer

Merci :) Ton aide est la bienvenue !

Le guide de contribution se trouve dans le fichier CONTRIBUTING.md

Requirements

You need minimum node@12 to be able to properly run ViteJS

Don't hesitate to install multiple node version in your dev environment using n

Boostrap

Install dependencies : npm ci

Run vite (we're obviously using vitejs for vite-ma-dose !) : npm run dev or vite (see package.json scripts)

Open your browser : http://localhost:3000/ and enjoy live reload / on-the-fly typescript compilation

You can also click on this link in order to open a Gitpod workspace with everything loaded in it.

Alternative: Running with docker

If you don't want to install node.js on your machine, you can isolate it with docker:

Start docker container (that executes npm run dev) : docker-compose up

Docker how-to

The first time docker-compose up is run, it will build the base docker image with npm install inside node:14 docker image.

When the package*.json have changed, you need to rebuild the base image:

docker-compose down --volumes
docker-compose build

.. then start again with docker-compose up.

To inspect what happens inside : docker-compose exec frontend bash

Production

Package for production with vite build : dist directory will contain minified assets for production

For debug purposes, if you want to generate sourcemaps for production build, you can configure vite.config.ts file by changing the build.sourcemap config property to true

Mobile apps

See vitemadose-android and vitemadose-ios.

Development workflow

• main is automatically deployed on https://vitemadose.covidtracker.fr/

  => Push on this branch only when you're ready.

• dev is the development branch, start any new feature/fix from it.

  We generally try to create dedicated feature branches with issue number in it, except when the commit is really small

Stack pointers

We're using :

• Typescript as the main language => typescript for js programmers
• lit-element as the web-component library => https://lit.dev/
• pagejs as our routing library => documentation
• Bootstrap as the CSS library => https://getbootstrap.com/docs/5.0/getting-started/introduction/ (icons)
• SASS as CSS transpiler => documentation
• ViteJS for the development/production build toolchain => guide

vitemadose-front's Issues

Erreur JS Safari

On a des erreurs JS dans Safari, à investiguer

1 Lieu de vaccination "ont" des disponibilités

Peut-on mettre une autre formulation, comme 'avec des disponibilités' ?

insertion de tags Google Analytics / Google Tag Manager

TAG à placer dans le head de chaque page

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KWWTRTX');</script>

TAG à placer juste après le body tag

<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KWWTRTX" height="0" width="0" style="display:none;visibility:hidden"></iframe>

Menu déroulants sous Safari pas homogènes au niveau du rendu

Cf

Enlever le glitch des slots au chargement de la page

Les slots sont affichés brièvement au chargement de la page (le temps que les composants se chargent)

Il faudrait mettre un conteneur en display:none, en s'assurant que cela n'impacte pas les bots d'indexation (s'assurer que les bots indexent le contenu non visible)

Remplacer l'icone commercial-building de Maki par la building de font-awesome

Le site Maki est pas top pour récupérer un SVG unique d'une icone (pouvoir récupérer facilement une icone peut être utile pour plein de bonnes raisons, comme par exemple pouvoir partager avec l'équipe mobile ces icones...)

=> J'aimerais intégrer celle-ci à la place (disponible de base dans fontello) : https://fontawesome.com/icons/building?style=solid

Prendre en compte les départements limitrophes lors de l'activation du tri par distance

Dès lors qu'on active le tri par distance la première fois (pendant qu'on recherche la latng de l'utilisateur) on pourrait :

• Faire une requête pour récupérer tous les centres des départements limitrophes du département sélectionné
• Cette liste de départements limitrophes pourrait être hardcodée chez nous, à partir de listes comme https://afpacp.fr/voir_departements_limitrophes.php

⚠️ Il y a des chances de conflits (niveau implémentation) avec #68
=> Il serait opportun (si possible) d'éviter de développer les issues en parallèle, ou bien le dernièr qui pushera aura perdu :-)

Refresh date vide lorsque < 1 min

Améliorer la mise en forme du contenu "about"

Plusieurs possibilités :

• Intégrer ce qu'a fait @alexandreGUY sur la branche dev (facilement dispo donc) :
  

• Intégrer la version 1 du Figma (nécessite un peu de rework de la part d' @alexandreGUY )

• Intégrer la version 3 du Figma (nécessite un peu de rework de la part d' @alexandreGUY )

J'ai besoin d'une validation pour savoir sur quelle option partir.

PS: il faudra homogénéiser le choix de mise en forme sur la page Centre

Rajouter les horaires de centres en affichage "smart"

C'est une réflexion, pas sûr que ce soit vraiment pertinent d'afficher les horaires d'ouverture des centre dès le site vitemadose :

• ces infos sont affichées sur la plateforme au moment de la prise de rdv
• ce sont des infos qui prennent de la place, surtout en mode mobile

Dans le cas où il faudrait les afficher, je pense qu'il faut faire un affichage "smart", à savoir des données comme :

Lundi | 09:00 - 17:00
Mardi | 09:00 - 17:00
Mercredi | 09:00 - 17:00
Jeudi | 09:00 - 17:00
Vendredi | 09:00 - 12:00
Samedi | fermé
Dimanche | fermé

gagneraient à être affichées de la manière suivante (plus compacte, les horaires variant généralement rarement d'un jour à l'autre de la semaine) :

Lu -> Je | 09:00 - 17:00
Vendredi | 09:00 - 12:00
Sa -> Di | Fermé

SEO - besoin de balises title personnalisées par "pages"

Balise TITLE homepage :
Vite Ma Dose : trouvez un créneau de vaccination COVID-19

Balise TITLE page département
pattern : "Vaccination COVID-19 en [NOM-DPT] [DPT-ID]"
Vaccination COVID-19 en Alpes de Hautes Provence 04

index : retirer les balises <a href=""> vides sur chacun des logos

on a des liens vides (et donc inutiles) sur chacun des logos des plateformes de santé listés sur la homepage.

--> à retirer ! (les liens vides, pas les logos ;P)

merci.

Formater les nombres en français

Je lance une petite proposition mineure, ça serait peut-être mieux de formater les nombres à la notation française ? par ex: "1031" -> "1 031", 10200 -> "10 200"

Nombre d'affichages de centres

Lorsque beaucoup de centres sont répertoriés, ils sont tous affichés sur la meme page.

Pourquoi pas mettre en place un systeme de "pages" avec un nombre de centres affichés maximum à l'écran (10 par ex)

Pas de page 404

Les 404 sont vides, avec juste l'en-tête du site, il faudrait sans doute prévoir un message informatif au minimum, ou alors de rediriger systématiquement sur la page d'accueil ?

Le bouton "vérifier le centre" sur les centres indisponibles est cliquable et ne fait rien

Il faudrait enlever ce bouton quand on n'a pas d'url associée au centre indisponible

Compatibilité IE 11 ?

Nous avons eu des retours comme quoi le site ne fonctionnait pas sous IE 11

Il faudrait voir si c'est un problème de fond (par exemple, lié à lit-element) ou si ce n'est que quelques appels à des fonctions JS non supportées, qui posent problème.

Choisir une license

Depuis qu'on link sur le github depuis la home, il serait opportun de définir une license pour le repository

=> MIT, Apache v2 ?

Le site ne fonctionne pas quand servi sur un contextPath qui n'est pas /

Il faudrait adapter le code/le build pour gérer ce cas de figure, car on risque de vouloir servir le site en lieu et place de https://covidtracker.fr/vitemadose/

Retirer le critère d'age dans l'url de la page de résultats

Exemple d'url actuelle : https://vitemadose.covidtracker.fr/centres-vaccination-covid-dpt05-hautes-alpes/age-plus75ans/

Il faut utiliser plutôt utiliser https://vitemadose.covidtracker.fr/centres-vaccination-covid-dpt05-hautes-alpes.

age-plus75ans/ prête à confusion et certains utilisateurs ont pensé qu'ils n'étaient pas éligibles.

On supportera les deux urls le temps du déploiement. Une fois le déploiement effectué, il faut mettre en place une redirection 301 de l'ancienne url vers la nouvelle pour éviter une duplication de service du contenu qui pourrait dégrader le référencement.

Permettre de sélectionner une commune en guise d'alternative à la géo-localisation

Certains utilisateurs peuvent ne pas vouloir utiliser la localisation
D'autres voudraient pouvoir regarder les centres à proximité d'une commune pour effectuer une simulation pour un proche

Demande originale : https://twitter.com/Chapy92/status/1382023064406290432?s=20

Mise en place de tests automatisés

Il pourrait être intéressant de tester sur chaque PR que le build est vert et mettre en place un cadre pour exécuter des tests unitaires.

Ce projet utilise déjà GitHub Actions pour effectuer le déploiement, on pourrait le paramétrer pour également tester le build sur les PRs.

Le framework pour exécuter les tests unitaires est à définir.

Trigger automatiquement la recherche à la selection d'un département

Le bouton "Rechercher" est là pour deux raison :

• Pour l'accessibilité (bon, en vrai, je suis pas sûr qu'on soit ultra accessible sur la recherche... ce serait un point à adresser)
• Parce qu'initialement, on avait 2 critères de recherche (tranche age + departement) et ça devenait alors "un peu plus pertinent" (pas "complètement ^^; ) de ne pas auto-trigger une recherche.

Ce qu'il faudrait faire, c'est trigger la recherche dès lors qu'on a tous les critères de remplis.

Retours design

• Mettre un placeholder dans l’input des départements « Choisir… » ou « Sélectionner… »

• Mettre les boutons violets des blocs « VaccinTracker » et « Cartes des centres » à gauche

• Utiliser les bonnes tailles et couleurs pour les polices

• Avoir le même height pour les blocs « VaccinTracker » et « Cartes des centres »

• Utiliser la bonne couleur de fond pour les blocs (F6F6F6)

• Toujours avoir ce résultat même avec une plus grande largeur :

• Mettre l’ancre « En savoir plus »

• Avoir le même padding sur le côté gauche que haut/bas sur l'input de recherche de département
  

• Avoir les bons rounded corners un peu partout

• Augmenter l'espacement entre le séparateur et les liens du coin haut/droit
  

Si il y a besoin d'assets/infos n'hésitez pas :)

Centre indisponibles : rajouter numéro de tel + implémenter un tri

Le numéro de téléphone est une information qui semble être utile sur les centres indisponibles, il serait intéressant de les afficher.

D'autre part, après discussions avec Maijin du back, il apparaît que certaines plateformes (Doctolib à minima) considèrent le téléphone comme le seul MOYEN de prise de rendez-vous sur certains centres :

ce message n'apparaissant pas par manque de créneaux de réservation sur le centre, mais bel et bien parce que c'est le MOYEN de prise de rdv pour le centre

Il semble que le back puisse être en mesure de pouvoir détecter ces cas de figure.
Si c'est bien le cas : il faudrait s'interroger sur la possibilité d'afficher différemment le bloc centre indisponible.
Par exemple en considérant que l'url du centre devrait être ignorée (cette règle pourrait être implémentée coté back) et en affichant un bloc suggérant d'appeler le centre au numéro de ce dernier, en lieu et place du bouton permettant de naviguer sur la page du centre sur la plateforme (et qui n'afficherait rien de plus qu'un message préconisant d'appeler le numéro)
=> On éviterait ainsi un clic inutile pour l'utilisateur, tout en allégeant un affichage de page sans grosse plu-value coté plateforme.

En tout état de cause, il faudrait changer le tri des centres indisponibles pour trier dans l'ordre suivant :

• Les centres indispos disposant d'un lien
• Les centres indispos sans lien mais avec un numéro de téléphone (en affichant peut-être en premier les centres où la prise de rdv par tel est le MOYEN de prise de rendez-vous principal, cf cas évoqué précédemment)
• Les centres indispos sans lien ni numéro de téléphone

Scrollbar horizontale sur tel mobile (android)

On a une scrollbar horizontale qui est apparue sur tel mobile depuis peu

Il n'est pas impossible que cela soit dû à l'ajout du lien "A propos" dans le header ?

Changer la branche par défaut de main vers dev

Je propose de changer la branche par défaut de main à dev pour faciliter le processus de développement et de déploiement comme indiqué dans le README :

dev is the development branch, start any new feature/fix from it.

Cela pourrait faciliter les contributions en ouvrant par défaut les PR sur dev et éviterait un besoin de changer la branche de destination comme c'est le cas sur certaines contributions :

• #22
• #38

Proposition : créneaux d'ouverture des lieux de vaccination

Une proposition de design pour les créneaux d'ouverture

L'important (pour moi) est d'avoir quelque chose le plus compacte possible (d'où les règles de simplifications sur les jours à créneaux identiques)

Après, il reste à peser le pour et le contre de l'ajout de cette info : utilité vs bruit

Remplacer les icones bootstrap-icons par des icones custom sur fontello

Ça permettrait d'améliorer grandement la taille du bundle final (bootstrap-icon représente environ 200Kb...)

Fontello permet de construire des set de font-icons en allant piocher juste celles dont on a besoin ... et ainsi diminuer drastiquement la taille des assets utilisés

Pour connaître l'ensemble des icones utilisées, il suffit de faire une recherche sur "bi-*" dans les sources

Équivalent des icones utilisées au 11/04/2021 :

Utilisation icone	Icone bootstrap	Icone fontello
Location	geo-alt	location (from: MFG Labs)
Telephone	telephone-fill	phone (from: elusive)
Type lieu vaccination	bag-plus-fill	commercial-building (from: Maki)
Arrow up-right pour lien externe	arrow-up-right	pas trouvé, mais faisable manuellement
Immeuble, pour stats du nombre de lieux de vaccination avec dispo	bi-building	réutiliser commercial-building (from: Maki) ?
Check circle pour les stats de proportion de lieux avec dispos	bi-check-circle	ok-circled2 (from: Elusive)
Calendrier avec checkmark OK	calendar-check-fill	calendar-check (from: font-awesome)
Calendrier avec cross mark	calendar-x-fill	calendar-time (from: font-awesome)

Prendre en compte les metadata des centres

On a de nouvelles infos au niveau des centres, il faudrait les afficher sous forme de petits composants pour avoir un rendu similaire à :

Idées :

• Considérer une notion de "Metadata de centre". On aurait un ensemble de types de metadata, chaque type ayant une donnée et une icone spécifique (ex: le tel avec l'icone telephone)
• Toutes ces metadata devraient être affichées (uniquement quand elles sont disponibles pour la plateforme visée)
• Devrait-on considérer le nom du centre et son adresse comme une metadata (il y a une icone d'un marker qui pourrait lui être associée). Si c'est le cas, il faudrait distinguer des "tailles" de metadata, l'adresse étant une "grande metadata" (qui prend toute la largeur, même en mode desktop) à l'inverse des "petites" metadata qui ont un style plus orienté flexbox

Externaliser le about sur une page dédiée

L'idée est d'avoir une page dédiée permettant d'afficher le contenu du slot about, afin que les applis mobile puissent rediriger dessus.

• On conserverait la déclaration du about dans le index.html (pour le SEO)
• On intègrerait le slot non plus sur la home, mais sur une nouvelle page "a propos" dédiée

Rendre cliquable le num de tel

Pour mettre un intent tel / map sur mobile sur ces 2 champs

(je sais pas si c'est quelque chose de portable au desktop, si non portable, faire attention à ne l'activer que lorsqu'on détecte que le device est un mobile)

Intégrer le type de vaccin dans les metadata

Icone seringue :
seringue.tar.gz

S'occuper du SEO

Je quote @rozierguillaume :

Pour l’intégration du front, niveau SEO il faudrait :

Mettre en haut du site un <title>, une meta-description, ainsi qu’un <H1>

Puis en bas de la page il faudrait faire quelques paragraphes avec des titres <h2> et des paragraphes <p>

Remplacer le copyright du footer

Remplacer avec un lien vers le github

Créer une page dédiée aux Crédits, pour remercier tous les contributeurs

Crédits à ne pas oublier :

• Design d'@adrochet
• Liste exhaustive des contributeurs au code récupérable par API Github ???
• SEO par @francoisBouchet
• Liste exhaustive des contributeurs aux issues récupérable par API Github ???

Afficher l’heure de mise à jour en relatif ?

C’est une suggestion. : je trouverais ça plus lisible d’avoir l’heure de mise à jour des donnés en relatif. Plutôt « il y a 5 minutes » que l’heure précise.

Ordoclic - Pharmacie sans doses affichées

https://app.ordoclic.fr/app/pharmacie/pharmacie-de-la-pyramide-macon.

Per @gaelbenoit "En fait je ne peux pas toujours discriminer les centres au moment de l'iterator. Pour mapharma par exemple j'ai un endpoint qui me donne la liste des pharmacies et en même temps s'il y a des doses dispos. Pour ordoclic j'ai un endpoint qui me renvoie la liste des pharmacies, et après pour chaque pharmacie je vérifie la dispo au moment de fetch_slots. Donc quand je yield sur l'iterator je ne sais pas s'il y a de la dispo

bien entendu je peux vérifier les slots au moment de l'iterator mais ce serait encore plus simple de filtrer au niveau du front et de ne pas afficher les pharma à 0"

Afficher le lien lorsqu'on mouseover sur un centre

Select departement sous FF / Edge : texte clair dans les options tant qu'aucune option sélectionnée

Lors de l'introduction des placeholders sur les select (e6a7956) et de l'utilisation d'une couleur un peu plus claire sur ces derniers (da3a94c), le trick utilisé ne fonctionne pas complètement sous Firebase & Edge

En effet, tant qu'aucune option n'est sélectionnée, toutes les options prennent la valeur claire du placeholder :
https://user-images.githubusercontent.com/603815/114286835-a162a080-9a62-11eb-92e0-78e2fb3f32ac.mp4

A voir s'il est possible de trouver un workaround à ce problème..

Les cards de réservation ne sont pas focusables

Actuellement

Lorsque j'appuie sur tab après avoir fait la recherche le focus est mis sur la liste déroulante, si je ré-appuie sur tab s'arrive en bas de page sur le bouton du 1er centre sans créneaux de vaccination

Suggestion

Après la recherche avoir le focus directement sur le 1er rdv disponible et si je continues à appuyer sur tab alors je descends dans la liste des rdv.
Voir si je passe avant par la nouvelle fonctionnalité " de distance"

Rajouter un flag général pour activer/désactiver la saisir de la tranche d'age

Pour l'instant, j'ai commenté le code, c'est dommage !

Sémantique : remplacer toutes les occurences de "Centre" par "Lieu"

Depuis qu'on peut vacciner en pharmacie / chez le généraliste, il vaut mieux être plus générique au niveau sémantique

Proposition de modifier le "sélectionner" dans le champ de sélection du département

Etant donné que la phrase d'accroche est votre vacc[...], je propose deux pistes :

1. écrire "sélectionnez" en lieu et place de "sélectionner..."
2. supprimer "Mon département :" et remplacer par "Sélectionner votre département" dans le champ (je ne sais plus comment ça s'appelle)

Rendre cliquable l'adresse

Avec un geo:latng

Attention : ça ne fonctionne visiblement pas sous Safari, cf #47

Forwarder toutes les URLs vers le index.html

Actuellement, un refresh sur le site ne fonctionne pas (par exemple https://vitemado.se/33/plus75/rendez-vous), car les requêtes autres que celles sur / ne servent pas le index.html

Ajouter logo MaPharma sur l'index

Ajouter logo MaPharma sur l'index.

Réduire la taille des logos

Actuellement, on a une empreinte d'environs 200Ko pour les logos

François est en train de nous diminuer ces derniers.

Breakpoint media sur 1200px qui réduit la plupart des composants

@alexandreGUY il existe pas mal d'entrées css avec un @include media-breakpoint-up(xl) qui "réduisent" la taille de certains élément dès lors qu'on passe sur une résolution >1200px

Par exemple :

• Le menu de sélection du département
• Le titre h1 de la home
• La taille des cards rdv

Est-ce fait sciemment ?

Add PandaLab and MaPharma support (logo etc.)