Merge branch 'dev' - MEP pour les 5-11 ans + nouvelle source de données pour la page centres

Author: fcamblor

index.html

@@ -174,7 +174,7 @@ <h2 class="h5">Quels sont les différents types de vaccins contre le coronavirus
                 <h2 class="h1">Carte des centres de vaccination contre la Covid-19</h2>
 
                 <p>
-                    Il y a en France plus de 2&nbsp;500 centres ou lieux de vaccination contre la Covid-19. Ces centres peuvent être des vaccinodromes,
+                    Il y a en France plus de 5&nbsp;800 centres ou lieux de vaccination contre la Covid-19. Ces centres peuvent être des vaccinodromes,
                     des espaces publics, des pharmacies, des cabinets médicaux ou tout autre espace proposé par un professionnel de santé.
                     Ils sont répartis sur l’ensemble du territoire.
                 </p>
@@ -197,8 +197,8 @@ <h3>Prendre rendez-vous pour se faire vacciner</h3>
                 </p>
 
                 <p>
-                    Les données affichées sur cette carte proviennent du Ministère des Solidarités et de la Santé. La carte est actualisée plusieurs fois par jour
-                    afin de vous proposer les informations les plus précises possibles.
+                    Les données affichées sur cette carte proviennent des différentes plateformes que nous interrogeons. La carte est actualisée plusieurs fois par jour
+                    afin de vous proposer les informations les plus précises et à jour possibles.
                 </p>
             </div>
 

public/sitemaps/sitemap-01.xml

@@ -4,7 +4,7 @@ import {Strings} from "../utils/Strings";
 export const rechercheDepartementDescriptor = {
     routerUrl: '/centres-vaccination-covid-dpt:codeDpt-:nomDpt/recherche-:typeRecherche',
     urlGenerator: ({codeDepartement, nomDepartement}: {codeDepartement: string, nomDepartement: string}) => {
-        return ['standard', /* '18_55' */, 'dose_rappel', 'dose_1_ou_2'].map(typeRecherche => {
+        return ['standard', /* '18_55' */, 'dose_rappel', 'dose_1_enfants', 'dose_1_ou_2'].map(typeRecherche => {
             return `/centres-vaccination-covid-dpt${codeDepartement}-${Strings.toReadableURLPathValue(nomDepartement)}/recherche-${typeRecherche}`;
         });
     }
@@ -13,7 +13,7 @@ export const rechercheDepartementDescriptor = {
 export const rechercheCommuneDescriptor = {
     routerUrl: '/centres-vaccination-covid-dpt:codeDpt-:nomDpt/commune:codeCommune-:codePostal-:nomCommune/recherche-:typeRecherche/en-triant-par-:codeTriCentre',
     urlGenerator: ({codeDepartement, nomDepartement, codeCommune, codePostal, nomCommune, tri}: {codeDepartement: string, nomDepartement: string, codeCommune: string, codePostal: string, nomCommune: string, tri: CodeTriCentre}) => {
-        return ['standard', /* '18_55' */, 'dose_rappel', 'dose_1_ou_2'].map(typeRecherche => {
+        return ['standard', /* '18_55' */, 'dose_rappel', 'dose_1_enfants', 'dose_1_ou_2'].map(typeRecherche => {
             return `/centres-vaccination-covid-dpt${codeDepartement}-${Strings.toReadableURLPathValue(nomDepartement)}/commune${codeCommune}-${codePostal}-${Strings.toReadableURLPathValue(nomCommune)}/recherche-${typeRecherche}/en-triant-par-${tri}`;
         })
     }

public/sitemaps/sitemap-02.xml

@@ -151,7 +151,7 @@ function transformLieu(rawLieu: any): Lieu {
 
 export type Coordinates = { latitude: number, longitude: number }
 export type Location = Coordinates & {city: string, cp: string}
-export type TagCreneau = /*"preco18_55"|*/"all"|"first_or_second_dose"|"third_dose";
+export type TagCreneau = /*"preco18_55"|*/"all"|"first_or_second_dose"|"third_dose"|"kids_first_dose";
 export type StatsCreneauxQuotidienParTag = {
     tag: TagCreneau;
     creneaux: number;
@@ -293,7 +293,7 @@ export const VACCINE_CATEGORIES: VaccineCategory[] = [
 ];
  */
 
-export type SearchType = "standard" /*| "18_55"|*/ |"dose_rappel"|"dose_1_ou_2";
+export type SearchType = "standard" /*| "18_55"|*/ |"dose_rappel"|"dose_1_ou_2"|"dose_1_enfants";
 export const TYPE_RECHERCHE_PAR_DEFAUT: SearchType = "dose_rappel";
 
 export type SearchTypeConfig = {
@@ -383,6 +383,23 @@ const SEARCH_TYPE_CONFIGS: {[type in SearchType]: SearchTypeConfig & {type: type
             searchResultsByDepartement: 'search_results_by_department_first_or_second_shot',
             searchResultsByCity: 'search_results_by_city_first_or_second_shot'
         }
+    },
+    'dose_1_enfants': {
+        type: 'dose_1_enfants',
+        tagCreneau: 'kids_first_dose',
+        cardAppointmentsExtractor: (lieu, daySelectorDisponible, creneauxParLieux) => daySelectorDisponible
+            ?creneauxParLieux.find(cpl => cpl.lieu === lieu.internal_id)?.creneaux || 0
+            :lieu.appointment_count,
+        lieuConsidereCommeDisponible: (lieu, creneauxParLieu) => lieu.appointment_by_phone_only || (creneauxParLieu?.creneaux || 0) > 0,
+        pathParam: 'dose_1_enfants',
+        standardTabSelected: true,
+        excludeAppointmentByPhoneOnly: false,
+        jourSelectionnable: true,
+        theme: 'standard',
+        analytics: {
+            searchResultsByDepartement: 'search_results_by_department_first_kids_shot',
+            searchResultsByCity: 'search_results_by_city_first_kids_shot'
+        }
     }
 };
 export function searchTypeConfigFromPathParam(pathParams: Record<string,string>): SearchTypeConfig & {type: SearchType} {

public/sitemaps/sitemap-03.xml

@@ -1,25 +1,26 @@
 import {css, customElement, html, LitElement, unsafeCSS} from 'lit-element';
-import {Icon, map, marker, tileLayer} from 'leaflet'
+import {Icon, LatLngTuple, map, Marker, marker, tileLayer} from 'leaflet'
 import leafletCss from 'leaflet/dist/leaflet.css';
 import leafletMarkerCss from 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 // @ts-ignore
 import {MarkerClusterGroup}  from 'leaflet.markercluster'
 import {Router} from "../routing/Router";
 import {CSS_Global} from "../styles/ConstructibleStyleSheets";
+import {State} from "../state/State";
 
 // Code imported (and refactored a little bit)
 // from https://github.com/rozierguillaume/covidtracker-tools/blob/main/src/ViteMaDose/carteCentres.html
 
-type Lieu = {
+type LieuCarte = {
     nom: string;
     longitude: number;
     latitude: number;
     reservation: string;
-    date_ouverture: string;
-    rdv_tel: string;
-    modalites: string;
-    adresse: string;
-    maj: string;
+    date_ouverture: string|undefined;
+    rdv_tel: string|undefined;
+    modalites: string|undefined;
+    adresse: string|undefined;
+    maj: string|undefined;
 };
 
 @customElement('vmd-lieux')
@@ -51,132 +52,40 @@ export class VmdLieuxView extends LitElement {
         this.requestUpdate().then(() => this.loadMap());
     }
 
-    private loadMap() {
-        const mymap = map(this.shadowRoot!.querySelector("#mapid") as HTMLElement).setView([46.505, 3], 6);
-        const url="https://www.data.gouv.fr/fr/datasets/r/5cb21a85-b0b0-4a65-a249-806a040ec372"
-
-        fetch(url)
-            .then(response => response.arrayBuffer())
-            .then(buffer => {
-                const decoder = new TextDecoder();
-                const csv = decoder.decode(buffer);
-                const data_array = VmdLieuxView.CSVToArray(csv, ";");
-
-                const lieux: Lieu[] = data_array.slice(1, data_array.length-1).map((value: string[]) => ({
-                    longitude: Number(value[10]),
-                    latitude: Number(value[11]),
-                    nom: value[1],
-                    reservation: (!value[34])?"":value[34].replace("partners.doctolib.fr", "www.doctolib.fr"),
-                    date_ouverture: value[33],
-                    rdv_tel: value[35],
-                    modalites: value[37],
-                    adresse: value[5] + " " + value[6] + ", " + value[7] + " " + value[9],
-                    maj: value[22].slice(0, 16),
-                }))
-
-                const markers = VmdLieuxView.creer_pins(lieux);
-                mymap.addLayer(markers);
-            })
-            .catch(function () {
-                // this.dataError = true;
-                console.log("error1")
-            });
+    private async loadMap() {
+        const mymap = map(this.shadowRoot!.querySelector("#mapid") as HTMLElement, {
+
+        }).setView([46.505, 3], 6);
+
+        const departements = await State.current.departementsDisponibles();
+        const resultatsRechercheLieux = await State.current.lieuxPour(departements.map(d => d.code_departement).filter(code => code !== 'om'));
+        const lieuxCarte = resultatsRechercheLieux.lieuxDisponibles.concat(resultatsRechercheLieux.lieuxIndisponibles)
+            .filter(lieu => !!lieu.location && !!lieu.location.longitude && lieu.location.latitude)
+            // We have some location which have silly locations, like longitude=6786471059425410 (missing comma)
+            .filter(lieu => lieu.location.latitude >= -90 && lieu.location.latitude <= 90 && lieu.location.longitude >= -180 && lieu.location.longitude <= 180)
+            .map<LieuCarte>(lieu => ({
+                nom: lieu.nom,
+                longitude: lieu.location.longitude,
+                latitude: lieu.location.latitude,
+                reservation: lieu.url,
+                date_ouverture: undefined,
+                rdv_tel: lieu?.metadata?.phone_number,
+                modalites: undefined,
+                adresse: lieu?.metadata?.address,
+                maj: undefined,
+            }));
 
         tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(mymap);
-    }
-
-    // ref: http://stackoverflow.com/a/1293163/2343
-    // This will parse a delimited string into an array of
-    // arrays. The default delimiter is the comma, but this
-    // can be overriden in the second argument.
-    private static CSVToArray(strData: string, strDelimiter: string ): string[][]{
-        // Check to see if the delimiter is defined. If not,
-        // then default to comma.
-        strDelimiter = (strDelimiter || ",");
-
-        // Create a regular expression to parse the CSV values.
-        let objPattern = new RegExp(
-            (
-                // Delimiters.
-                "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
-
-                // Quoted fields.
-                "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
-
-                // Standard fields.
-                "([^\"\\" + strDelimiter + "\\r\\n]*))"
-            ),
-            "gi"
-        );
-
-
-        // Create an array to hold our data. Give the array
-        // a default empty first row.
-        let arrData = [[]] as string[][];
-
-        // Create an array to hold our individual pattern
-        // matching groups.
-        let arrMatches = null;
-
-
-        // Keep looping over the regular expression matches
-        // until we can no longer find a match.
-        while (arrMatches = objPattern.exec( strData )){
-
-            // Get the delimiter that was found.
-            let strMatchedDelimiter = arrMatches[ 1 ];
-
-            // Check to see if the given delimiter has a length
-            // (is not the start of string) and if it matches
-            // field delimiter. If id does not, then we know
-            // that this delimiter is a row delimiter.
-            if (
-                strMatchedDelimiter.length &&
-                strMatchedDelimiter !== strDelimiter
-            ){
-
-                // Since we have reached a new row of data,
-                // add an empty row to our data array.
-                arrData.push( [] );
 
-            }
-
-            let strMatchedValue;
-
-            // Now that we have our delimiter out of the way,
-            // let's check to see which kind of value we
-            // captured (quoted or unquoted).
-            if (arrMatches[ 2 ]){
-
-                // We found a quoted value. When we capture
-                // this value, unescape any double quotes.
-                strMatchedValue = arrMatches[ 2 ].replace(
-                    new RegExp( "\"\"", "g" ),
-                    "\""
-                );
-
-            } else {
-
-                // We found a non-quoted value.
-                strMatchedValue = arrMatches[ 3 ];
-
-            }
-
-
-            // Now that we have our value string, let's add
-            // it to the data array.
-            arrData[ arrData.length - 1 ].push( strMatchedValue );
-        }
-
-        // Return the parsed data.
-        return arrData;
+        const markers = VmdLieuxView.creer_pins(lieuxCarte);
+        mymap.addLayer(markers);
     }
 
-    private static creer_pins(lieux: Lieu[]){
-        const markers = lieux.reduce((markers: MarkerClusterGroup, lieu) => {
+    private static creer_pins(lieux: LieuCarte[]){
+        const markers = lieux.reduce((markers, lieu) => {
             let reservation_str = ""
             if (typeof lieu.reservation != 'undefined'){
                 if (lieu.reservation.indexOf("http") === 0){
@@ -189,26 +98,29 @@ export class VmdLieuxView extends LitElement {
             const string_popup = `
                 <span style='font-size: 150%;'>${lieu.nom}</span>
                 <br>
-                <b>Adresse :</b> ${lieu.adresse}<br><b>Réservation :</b> ${reservation_str}
-                <br>
-                <b>Tél :</b> <a href:'tel:${lieu.rdv_tel}'>${lieu.rdv_tel}</a>
+                <b>Adresse :</b> ${lieu.adresse || "-"}
                 <br>
-                <b>Date d'ouverture :</b> ${lieu.date_ouverture}<br><b>Modalités :</b> ${lieu.modalites}
+                <b>Réservation :</b> ${reservation_str || "-"}
                 <br>
-                <b>Mise à jour :</b> ${lieu.maj}
+                <b>Tél :</b> ${lieu.rdv_tel?`<a href='tel:${lieu.rdv_tel}'>${lieu.rdv_tel}</a>`:`-`}
             `;
-            const newMarker = marker([lieu.longitude, lieu.latitude], {
+            const newMarker = marker([lieu.latitude, lieu.longitude] as LatLngTuple, {
                 icon: new Icon.Default({imagePath: `${Router.basePath}assets/images/png/`})
             }).bindPopup(string_popup) //.addTo(this.mymap);
             newMarker.on('click', function() {
                 // @ts-ignore
                 this.openPopup();
             });
-            markers.addLayer(newMarker);
 
+            markers.push(newMarker);
             return markers;
-        }, new MarkerClusterGroup({ disableClusteringAtZoom: 9 }));
-        return markers;
+        }, [] as Marker[]);
+
+        const markersGroup = new MarkerClusterGroup({
+            disableClusteringAtZoom: 9, chunkedLoading: true,
+        })
+        markersGroup.addLayers(markers, true);
+        return markersGroup;
     }
 
     disconnectedCallback() {

public/sitemaps/sitemap-04.xml

@@ -288,8 +288,8 @@ export abstract class AbstractVmdRdvView extends LitElement {
                     </label>
                     <div class="col">
                         <vmd-button-switch class="mb-3" style="display: inline-block"
-                                           codeSelectionne="dose_rappel"
-                                           .options="${[{code: 'dose_rappel', libelle: 'Une dose de rappel'}, {code: 'dose_1_ou_2', libelle: 'Une 1ère dose de vaccin'}]}"
+                                           codeSelectionne="${this.currentSearch?.type || 'dose_rappel'}"
+                                           .options="${[{code: 'dose_rappel', libelle: 'Une dose de rappel'}, {code: 'dose_1_enfants', libelle: 'Une dose pour 5-11 ans'}, {code: 'dose_1_ou_2', libelle: 'Une 1ère dose de vaccin'}]}"
                                            @changed="${(e: CustomEvent<{value: SearchType}>) => this.updateSearchTypeTo(e.detail.value)}">
                         </vmd-button-switch>
                     </div>