Ajout de la fonctionnalité permettant de choisir le type de vaccin

src/components/vmd-button-switch.component.ts

@@ -38,7 +38,8 @@ export class VmdButtonSwitchComponent extends LitElement {
               ${repeat(this.options, option => option.code, option => html`
                 <button type="button" 
                         class="option ${classMap({ 'active': option.code===this.codeSelectionne })}" 
-                        @click="${() => this.valeurSelectionnee(option.code)}">
+                        @click="${() => this.valeurSelectionnee(option.code)}"
+                        title="${option.title}">
                   ${option.libelle}
                 </button>
               `)}

src/routing/Router.ts

@@ -1,7 +1,7 @@
 import page from "page";
 import { TemplateResult } from "lit-html";
 import {html} from "lit-element";
-import {CodeTriCentre, State} from "../state/State";
+import {CodeTriCentre, State, CodeTypeVaccin} from "../state/State";
 import {Analytics} from "../utils/Analytics";
 
 export type SlottedTemplateResultFactory = (subViewSlot: TemplateResult) => TemplateResult;
@@ -50,22 +50,23 @@ class Routing {
                 `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/age-:trancheAge/`,
                 `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/ville-:codeVille-:nomVille/age-:trancheAge/`,
                 // Proper URL really used
-                `/centres-vaccination-covid-dpt:codeDpt-:nomDpt`
+                `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/vaccin-:typeVaccin`,
             ], analyticsViewName: 'search_results_by_department',
             viewContent: (params) => (subViewSlot) =>
-                html`<vmd-rdv-par-departement codeDepartementSelectionne="${params[`codeDpt`]}">${subViewSlot}</vmd-rdv-par-departement>`,
+                html`<vmd-rdv-par-departement codeDepartementSelectionne="${params[`codeDpt`]}" typeVaccin="${params[`typeVaccin`]}">${subViewSlot}</vmd-rdv-par-departement>`,
             pageTitleProvider: (params) =>
                 State.current.chercheDepartementParCode(params[`codeDpt`])
                     .then(nomDpt => `Vaccination COVID-19 en ${nomDpt.nom_departement} ${params[`codeDpt`]}`)
         });
         this.declareRoutes({
-            pathPattern: `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/commune:codeCommune-:codePostal-:nomCommune/en-triant-par-:codeTriCentre`,
+            pathPattern: `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/commune:codeCommune-:codePostal-:nomCommune/en-triant-par-:codeTriCentre/vaccin-:typeVaccin`,
             analyticsViewName: 'search_results_by_city',
             viewContent: (params) => (subViewSlot) =>
                 html`<vmd-rdv-par-commune
                     codeCommuneSelectionne="${params[`codeCommune`]}"
                     codePostalSelectionne="${params[`codePostal`]}"
-                    critèreDeTri="${params[`codeTriCentre`]}">
+                    critèreDeTri="${params[`codeTriCentre`]}"
+                    typeVaccin="${params[`typeVaccin`]}">
                   ${subViewSlot}
                 </vmd-rdv-par-commune>`,
             pageTitleProvider: (params) =>
@@ -133,12 +134,12 @@ class Routing {
         this.navigateToHome();
     }
 
-    public navigateToRendezVousAvecDepartement(codeDepartement: string, pathLibelleDepartement: string) {
-        page(`${this.basePath}centres-vaccination-covid-dpt${codeDepartement}-${pathLibelleDepartement}`);
+    public navigateToRendezVousAvecDepartement(codeDepartement: string, pathLibelleDepartement: string,typeVaccin: CodeTypeVaccin) {
+        page(`${this.basePath}centres-vaccination-covid-dpt${codeDepartement}-${pathLibelleDepartement}/vaccin-${typeVaccin}`);
     }
 
-    public navigateToRendezVousAvecCommune(codeTriCentre: CodeTriCentre, codeDepartement: string, pathLibelleDepartement: string, codeCommune: string, codePostal: string, pathLibelleCommune: string) {
-        page(`${this.basePath}centres-vaccination-covid-dpt${codeDepartement}-${pathLibelleDepartement}/commune${codeCommune}-${codePostal}-${pathLibelleCommune}/en-triant-par-${codeTriCentre}`);
+    public navigateToRendezVousAvecCommune(codeTriCentre: CodeTriCentre, codeDepartement: string, pathLibelleDepartement: string, codeCommune: string, codePostal: string, pathLibelleCommune: string,typeVaccin: CodeTypeVaccin) {
+        page(`${this.basePath}centres-vaccination-covid-dpt${codeDepartement}-${pathLibelleDepartement}/commune${codeCommune}-${codePostal}-${pathLibelleCommune}/en-triant-par-${codeTriCentre}/vaccin-${typeVaccin}`);
     }
 
     navigateToHome() {

src/state/State.ts

@@ -16,10 +16,27 @@ export type TriCentre = {
     libelle: string;
 };
 export const TRIS_CENTRE: Map<CodeTriCentre, TriCentre> = new Map([
-    ['distance', { codeTriCentre: 'distance', libelle: "Au plus proche" }],
-    ['date', { codeTriCentre: 'date', libelle: "Disponible au plus vite" }],
+    ['distance', { codeTriCentre: 'distance', libelle: "Au plus proche", title:"Les lieux de vaccination les plus proches" }],
+    ['date', { codeTriCentre: 'date', libelle: "Disponible au plus vite", title:"Les créneaux au plus vite" }],
 ]);
 
+export type CodeTypeVaccin = 'tous' | 'arnm' | 'adenovirus';
+export const FILTRE_TYPE_VACCIN: Map<CodeTypeVaccin, {codeTypeVaccin: CodeTypeVaccin, libelle: string, title: string}> = new Map([
+    ['tous', {codeTypeVaccin: 'tous', libelle: "Tous", title: "Tous les vaccins" }],
+    ['arnm', {codeTypeVaccin: 'arnm', libelle: "Pfizer-BioNTech/Moderna", title: "ARN messager" }],
+    ['adenovirus', {codeTypeVaccin: 'adenovirus', libelle:"AstraZeneca/Janssen", title: "à base d'adénovirus" }],
+]);
+
+
+export type TypeVaccin = 'AstraZeneca'|'Pfizer-BioNTech'|'Moderna'|'Johnson'|'Janssen';
+export const TYPES_VACCIN: Record<TypeVaccin, CodeTypeVaccin> = {
+    "AstraZeneca": 'adenovirus',
+    "Pfizer-BioNTech": 'arnm',
+    "Moderna": 'arnm',
+    "Johnson": 'adenovirus',
+    "Janssen": 'adenovirus',
+};
+
 const USE_RAW_GITHUB = false
 const VMD_BASE_URL = USE_RAW_GITHUB
   ? "https://raw.githubusercontent.com/CovidTrackerFr/vitemadose/data-auto/data/output"

src/utils/Analytics.ts

@@ -81,4 +81,11 @@ export class Analytics {
         });
     }
 
+    critereTypeVaccinMisAJour(typeVaccin: CodeTypeVaccin) {
+        window.dataLayer.push({
+            'event': 'type_change',
+            'type_changed_to' : typeVaccin,
+        });
+    }
+
 }

src/views/vmd-home.view.ts

@@ -42,7 +42,7 @@ export class VmdHomeView extends LitElement {
 
     rechercherRdv() {
         if(this.departementSelectione) {
-            Router.navigateToRendezVousAvecDepartement(this.departementSelectione.code_departement, libelleUrlPathDuDepartement(this.departementSelectione));
+            Router.navigateToRendezVousAvecDepartement(this.departementSelectione.code_departement, libelleUrlPathDuDepartement(this.departementSelectione),'tous');
             return;
         }
 
@@ -57,7 +57,8 @@ export class VmdHomeView extends LitElement {
             departement.code_departement,
             libelleUrlPathDuDepartement(departement),
             this.communeSelectionee!.code, this.communeSelectionee!.codePostal,
-            libelleUrlPathDeCommune(this.communeSelectionee!)
+            libelleUrlPathDeCommune(this.communeSelectionee!),
+            'tous'
         )
     }
 

src/views/vmd-rdv.view.ts

@@ -15,7 +15,10 @@ import {
     Lieu, LieuAffichableAvecDistance, LieuxAvecDistanceParDepartement,
     LieuxParDepartement,
     State, TriCentre,
-    TRIS_CENTRE
+    TRIS_CENTRE,
+    CodeTypeVaccin,
+    FILTRE_TYPE_VACCIN,
+    TYPES_VACCIN,
 } from "../state/State";
 import {Dates} from "../utils/Dates";
 import {Strings} from "../utils/Strings";
@@ -125,7 +128,8 @@ export abstract class AbstractVmdRdvView extends LitElement {
                 libelleUrlPathDuDepartement(departement!),
                 commune.code,
                 commune.codePostal,
-                libelleUrlPathDeCommune(commune)
+                libelleUrlPathDeCommune(commune),
+                'tous'
             );
             return;
         }
@@ -144,7 +148,7 @@ export abstract class AbstractVmdRdvView extends LitElement {
 
     async departementSelected(departement: Departement, triggerNavigation: boolean): Promise<void> {
         if(this.communeSelectionnee) {
-            Router.navigateToRendezVousAvecDepartement(departement.code_departement, libelleUrlPathDuDepartement(departement));
+            Router.navigateToRendezVousAvecDepartement(departement.code_departement, libelleUrlPathDuDepartement(departement),this.typeVaccin);
             return;
         }
 
@@ -184,6 +188,18 @@ export abstract class AbstractVmdRdvView extends LitElement {
                         </vmd-commune-or-departement-selector>
                     </div>
                 </div>
+                <div class="rdvForm-fields row align-items-center">
+                    <label class="col-sm-24 col-md-auto mb-md-3">
+                     Je recherche un vaccin de type :
+                    </label>
+                    <div class="col">
+                        <vmd-button-switch class="mb-3"
+                              codeSelectionne="${this.typeVaccin}"
+                              .options="${Array.from(FILTRE_TYPE_VACCIN.values()).map(tc => ({code: tc.codeTypeVaccin, libelle: tc.libelle, title: tc.title }))}"
+                              @changed="${(event: ValueStrCustomEvent<CodeTypeVaccin>) => this.critereVaccinUpdated(event.detail.value)}">
+                        </vmd-button-switch>
+                    </div>
+                </div>
                 ${this.renderAdditionnalSearchCriteria()}
             </div>
 
@@ -352,7 +368,7 @@ export abstract class AbstractVmdRdvView extends LitElement {
         }
 
         if (this.codeDepartementSelectionne) {
-            Router.navigateToRendezVousAvecDepartement(this.codeDepartementSelectionne, libelleUrlPathDuDepartement(this.departementSelectionne!));
+            Router.navigateToRendezVousAvecDepartement(this.codeDepartementSelectionne, libelleUrlPathDuDepartement(this.departementSelectionne!),this.typeVaccin);
         }
     }
 
@@ -404,6 +420,34 @@ export abstract class AbstractVmdRdvView extends LitElement {
             throw new Error(`Unsupported tri : ${tri}`);
         }
     }
+
+    protected filterTypeVaccin(vaccine_type: String, typeVaccin: CodeTypeVaccin) {
+        if(typeVaccin === 'tous') {
+            return true;
+        } else {
+            if(vaccine_type && vaccine_type.length)
+            {
+                if(vaccine_type.indexOf(',')!==-1)
+                {
+                    const arrayVaccinne = vaccine_type.split(',');
+                    arrayVaccinne.forEach(function(item){
+                        if(TYPES_VACCIN[item.trim()]==typeVaccin)
+                        {
+                            return true;
+                        }
+                    });
+                }else if(TYPES_VACCIN[vaccine_type.trim()]==typeVaccin)
+                {
+                    return true;
+                }
+				// all vaccines at this center are not corresponding to the filtered type
+                return false;
+            }else{
+                // hidding vaccine center of vaccine type is unknown. see discussion : https://github.com/CovidTrackerFr/vitemadose-front/pull/143#issuecomment-831373020
+                return false;
+            }
+        }
+    }
 
     abstract libelleLieuSelectionne(): TemplateResult;
     abstract afficherLieuxParDepartement(lieuxParDepartement: LieuxParDepartement): LieuxAvecDistanceParDepartement;
@@ -414,7 +458,8 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
     @property({type: String}) codeCommuneSelectionne: string | undefined = undefined;
     @property({type: String}) codePostalSelectionne: string | undefined = undefined;
 
-    @property({type: String}) critèreDeTri: 'date' | 'distance' = 'distance'
+    @property({type: String}) critèreDeTri: 'date' | 'distance' = 'distance';
+    @property({type: String}) typeVaccin: 'tous' | 'arnm' | 'adenovirus' = 'tous';
 
     preventRafraichissementLieux() {
         return !this.communeSelectionnee;
@@ -436,7 +481,7 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
     _onRefreshPageWhenValidParams() {
         // To be overriden
         if(this.departementSelectionne && this.communeSelectionnee && this.codePostalSelectionne) {
-            Router.navigateToRendezVousAvecCommune(this.critèreDeTri, this.departementSelectionne.code_departement, libelleUrlPathDuDepartement(this.departementSelectionne), this.communeSelectionnee.code, this.communeSelectionnee.codePostal, libelleUrlPathDeCommune(this.communeSelectionnee));
+            Router.navigateToRendezVousAvecCommune(this.critèreDeTri, this.departementSelectionne.code_departement, libelleUrlPathDuDepartement(this.departementSelectionne), this.communeSelectionnee.code, this.communeSelectionnee.codePostal, libelleUrlPathDeCommune(this.communeSelectionnee),this.typeVaccin);
             return 'return';
         }
 
@@ -525,6 +570,7 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
                 .concat([...lieuxIndisponibles].map(l => ({...l, disponible: false})))
                 .map(l => ({...l, distance: distanceAvec(l) }))
                 .filter(l => !l.distance || l.distance < MAX_DISTANCE_CENTRE_IN_KM)
+                .filter(l => this.filterTypeVaccin(l.vaccine_type,this.typeVaccin))
                 .sortBy(l => this.extraireFormuleDeTri(l, this.critèreDeTri))
                 .build()
         };
@@ -538,6 +584,14 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
         this.refreshPageWhenValidParams();
     }
 
+    critereVaccinUpdated(typeVaccin: CodeTypeVaccin) {
+        this.typeVaccin = typeVaccin;
+
+        Analytics.INSTANCE.critereTypeVaccinMisAJour(typeVaccin);
+
+        this.refreshPageWhenValidParams();
+    }
+
     renderAdditionnalSearchCriteria(): TemplateResult {
         return html`
           <div class="rdvForm-fields row align-items-center">
@@ -547,7 +601,7 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
             <div class="col">
               <vmd-button-switch class="mb-3"
                      codeSelectionne="${this.critèreDeTri}"
-                     .options="${Array.from(TRIS_CENTRE.values()).map(tc => ({code: tc.codeTriCentre, libelle: tc.libelle }))}"
+                     .options="${Array.from(TRIS_CENTRE.values()).map(tc => ({code: tc.codeTriCentre, libelle: tc.libelle, title: tc.title }))}"
                      @changed="${(event: ValueStrCustomEvent<CodeTriCentre>) => this.critereTriUpdated(event.detail.value)}">
               </vmd-button-switch>
             </div>
@@ -559,6 +613,8 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
 @customElement('vmd-rdv-par-departement')
 export class VmdRdvParDepartementView extends AbstractVmdRdvView {
 
+    @property({type: String}) typeVaccin: 'tous' | 'arnm' | 'adenovirus' = 'tous';
+
     async onceStartupPromiseResolved() {
         if(this.codeDepartementSelectionne) {
             const departementSelectionne = this.departementsDisponibles.find(d => d.code_departement === this.codeDepartementSelectionne);
@@ -590,8 +646,17 @@ export class VmdRdvParDepartementView extends AbstractVmdRdvView {
             lieuxAffichables: ArrayBuilder.from([...lieuxDisponibles].map(l => ({...l, disponible: true})))
                 .concat([...lieuxIndisponibles].map(l => ({...l, disponible: false})))
                 .map(l => ({...l, distance: undefined }))
+                .filter(l => this.filterTypeVaccin(l.vaccine_type,this.typeVaccin))
                 .sortBy(l => this.extraireFormuleDeTri(l, 'date'))
                 .build()
         };
     }
+
+    critereVaccinUpdated(typeVaccin: CodeTypeVaccin) {
+        this.typeVaccin = typeVaccin;
+
+        Analytics.INSTANCE.critereTypeVaccinMisAJour(typeVaccin);
+
+        this.refreshPageWhenValidParams();
+    }
 }