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

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/type-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/type-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}/type-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}/type-vaccin-${typeVaccin}`);
     }
 
     navigateToHome() {

src/state/State.ts

@@ -20,6 +20,22 @@ export const TRIS_CENTRE: Map<CodeTriCentre, TriCentre> = new Map([
     ['date', { codeTriCentre: 'date', libelle: "Disponible au plus vite" }],
 ]);
 
+export type CodeTypeVaccin = 'all' | 'arnm' | 'adenovirus';
+export const FILTRE_TYPE_VACCIN: Map<CodeTypeVaccin> = new Map([
+    ['all', {codeTypeVaccin: 'all', libelle: "Tous" }],
+    ['arnm', {codeTypeVaccin: 'arnm', libelle: "ARN messager" }],
+    ['adenovirus', {codeTypeVaccin: 'adenovirus', libelle: "à base d'adénovirus" }],
+]);
+
+
+export type TypeVaccin = 'AstraZeneca'|'Pfizer-BioNTech'|'Moderna'|'Johnson';
+export const TYPES_VACCIN: {[k in TypeVaccin]: string} = {
+    "AstraZeneca": 'adenovirus',
+    "Pfizer-BioNTech": 'arnm',
+    "Moderna": 'arnm',
+    "Johnson": '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),'all');
             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!),
+            'all'
         )
     }
 

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),
+                'all'
             );
             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 }))}"
+                              @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,40 @@ export abstract class AbstractVmdRdvView extends LitElement {
             throw new Error(`Unsupported tri : ${tri}`);
         }
     }
+
+    protected filterTypeVaccin(vaccine_type: Array, typeVaccin: CodeTypeVaccin) {
+        if(typeVaccin === 'all') {
+            return true;
+        } else {
+            let result = false;
+
+            if(vaccine_type && vaccine_type.length)
+            {
+                if(vaccine_type.indexOf(',')!==-1)
+                {
+                    let arrayVaccinne = vaccine_type.split(',');
+
+                    arrayVaccinne.forEach(function(item){
+                        if(TYPES_VACCIN[item.trim()]==typeVaccin)
+                        {
+                            result = true;
+                        }
+                    });
+                }else{
+                    if(TYPES_VACCIN[vaccine_type.trim()]==typeVaccin)
+                    {
+                        result = true;
+                    }
+                }
+                return result;
+            }else{
+                // Not hidding vaccine center of vaccine type is unknown
+                result = true;
+            }
+
+         return result;
+        }
+    }
 
     abstract libelleLieuSelectionne(): TemplateResult;
     abstract afficherLieuxParDepartement(lieuxParDepartement: LieuxParDepartement): LieuxAvecDistanceParDepartement;
@@ -414,7 +464,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: 'all' | 'arnm' | 'adenovirus' = 'all';
 
     preventRafraichissementLieux() {
         return !this.communeSelectionnee;
@@ -436,7 +487,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 +576,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 +590,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">
@@ -559,6 +619,8 @@ export class VmdRdvParCommuneView extends AbstractVmdRdvView {
 @customElement('vmd-rdv-par-departement')
 export class VmdRdvParDepartementView extends AbstractVmdRdvView {
 
+    @property({type: String}) typeVaccin: 'all' | 'arnm' | 'adenovirus' = 'all';
+
     async onceStartupPromiseResolved() {
         if(this.codeDepartementSelectionne) {
             const departementSelectionne = this.departementsDisponibles.find(d => d.code_departement === this.codeDepartementSelectionne);
@@ -590,8 +652,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();
+    }
 }