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

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

@@ -9,6 +9,7 @@ export type ValueStrCustomEvent<T extends string> = CustomEvent<{value: T}>;
 export type Option = {
     code: string;
     libelle: string;
+    title: string;
 };
 
 @customElement('vmd-button-switch')
@@ -38,7 +39,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/components/vmd-selector.component.ts

@@ -7,6 +7,7 @@ export type ValueStrCustomEvent<T extends string> = CustomEvent<{value: T}>;
 export type Option = {
     code: string;
     libelle: string;
+    title: string;
 };
 
 @customElement('vmd-selector')

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;
@@ -44,20 +44,60 @@ class Routing {
             viewContent: (params) => (subViewSlot) =>
                 html`<vmd-home>${subViewSlot}</vmd-home>`
         });
+        this.declareRoutes({
+            pathPattern: [
+                `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/vaccin-:typeVaccin`
+            ], analyticsViewName: 'search_results_by_department',
+            viewContent: (params) => (subViewSlot) =>
+                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: [
                 // Legacy URLs with tranche age inside ... used only for old URLs referenced by Google
                 `/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`,
             ], analyticsViewName: 'search_results_by_department',
             viewContent: (params) => (subViewSlot) =>
                 html`<vmd-rdv-par-departement codeDepartementSelectionne="${params[`codeDpt`]}">${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: [
+                // Legacy URLs with tranche age inside ... used only for old URLs referenced by Google
+                `/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>`,
+            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/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`]}"
+                    typeVaccin="${params[`typeVaccin`]}">
+                  ${subViewSlot}
+                </vmd-rdv-par-commune>`,
+            pageTitleProvider: (params) =>
+                State.current.chercheCommuneParCode(Router.basePath, params['codePostal'], params['codeCommune'])
+                    .then(commune => `Vaccination COVID-19 à ${commune.nom} ${commune.codePostal}`)
+        });
         this.declareRoutes({
             pathPattern: `/centres-vaccination-covid-dpt:codeDpt-:nomDpt/commune:codeCommune-:codePostal-:nomCommune/en-triant-par-:codeTriCentre`,
             analyticsViewName: 'search_results_by_city',
@@ -133,12 +173,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

@@ -14,12 +14,31 @@ export type CodeTriCentre = 'date' | 'distance';
 export type TriCentre = {
     codeTriCentre: CodeTriCentre;
     libelle: string;
+    title: 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 ou Moderna", title: "ARN messager" }],
+    ['adenovirus', {codeTypeVaccin: 'adenovirus', libelle:"AstraZeneca ou Janssen", title: "à base d'adénovirus" }],
+]);
+
+
+export type TypeVaccin = 'AstraZeneca'|'Pfizer-BioNTech'|'Pfizer'|'Moderna'|'Johnson'|'Janssen';
+export const TYPES_VACCIN: Record<TypeVaccin, CodeTypeVaccin> = {
+    "AstraZeneca": 'adenovirus',
+    "Pfizer-BioNTech": 'arnm',
+    "Pfizer": '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"
@@ -294,4 +313,4 @@ export class State {
             return statsLieu;
         }
     }
-}
+}

src/utils/Analytics.ts

@@ -1,5 +1,5 @@
 import {
-    CodeDepartement, CodeTriCentre,
+    CodeDepartement, CodeTriCentre,CodeTypeVaccin,
     Commune,
     Lieu,
     LieuxAvecDistanceParDepartement, typeActionPour,
@@ -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.scss

@@ -95,3 +95,6 @@ vmd-appointment-card {
     }
 }
 
+.typev > div > .mb-3{
+    font-size: 0.65em;
+}

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, TypeVaccin
 } from "../state/State";
 import {Dates} from "../utils/Dates";
 import {Strings} from "../utils/Strings";
@@ -55,6 +58,8 @@ export abstract class AbstractVmdRdvView extends LitElement {
     @property({type: Array, attribute: false}) lieuxParDepartementAffiches: LieuxAvecDistanceParDepartement | undefined = undefined;
     @property({type: Boolean, attribute: false}) searchInProgress: boolean = false;
     @property({type: Boolean, attribute: false}) miseAJourDisponible: boolean = false;
+
+    @property({type: String}) typeVaccin: 'tous' | 'arnm' | 'adenovirus' = 'tous';
 
     protected derniereCommuneSelectionnee: Commune|undefined = undefined;
     protected lieuBackgroundRefreshIntervalId: number|undefined = undefined;
@@ -125,7 +130,8 @@ export abstract class AbstractVmdRdvView extends LitElement {
                 libelleUrlPathDuDepartement(departement!),
                 commune.code,
                 commune.codePostal,
-                libelleUrlPathDeCommune(commune)
+                libelleUrlPathDeCommune(commune),
+                'tous'
             );
             return;
         }
@@ -144,7 +150,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;
         }
 
@@ -185,6 +191,18 @@ export abstract class AbstractVmdRdvView extends LitElement {
                     </div>
                 </div>
                 ${this.renderAdditionnalSearchCriteria()}
+                <div class="rdvForm-fields row align-items-center typev">
+                    <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>
             </div>
 
             <div class="spacer mt-5 mb-5"></div>
@@ -352,7 +370,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 +422,27 @@ 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) {
+                return false;
+            }
+            return vaccine_type.split(",")
+                .map((typeStr) => TYPES_VACCIN[typeStr.trim() as TypeVaccin])
+                .indexOf(typeVaccin) !== -1;
+        }
+    }
+
+    critereVaccinUpdated(typeVaccin: CodeTypeVaccin) {
+        this.typeVaccin = typeVaccin;
+
+        Analytics.INSTANCE.critereTypeVaccinMisAJour(typeVaccin);
+
+        this.refreshPageWhenValidParams();
+    }
 
     abstract libelleLieuSelectionne(): TemplateResult;
     abstract afficherLieuxParDepartement(lieuxParDepartement: LieuxParDepartement): LieuxAvecDistanceParDepartement;
@@ -414,7 +453,7 @@ 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';
 
     preventRafraichissementLieux() {
         return !this.communeSelectionnee;
@@ -436,7 +475,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 +564,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()
         };
@@ -547,7 +587,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>
@@ -590,6 +630,7 @@ 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()
         };