ajout map et filtrage des formations par celle visible sur la map

riot/app.riot

@@ -252,6 +252,8 @@
         })
       },
 
+
+
       calcule(){
         this.getSelectivite(this.state.statistique.records)
         this.getMoyenne(this.state.statistique.records)

riot/maMap.riot

@@ -0,0 +1,91 @@
+<maMap>
+  <script>
+    export default function maMap() {
+      let markers = [];
+      let map;
+
+      return {
+        onBeforeMount(props, state) {
+          // création de la carte Leaflet
+          map = L.map("map");
+
+          map.fitWorld();
+
+          // ajout d'un calque de tuiles OpenStreetMap
+          L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "© OpenStreetMap contributors",
+          }).addTo(map);
+
+          // écouteur pour l'événement "moveend"
+          map.on("moveend", this.onMoveEnd);
+        },
+
+        onUpdated() {
+          if (this.props.records) {
+            this.removeMarks();
+            this.afficheMarks(this.getLoc(this.props.records));
+            this.onMoveEnd();
+          }
+        },
+
+        removeMarks() {
+          markers.forEach((marker) => {
+            marker.remove();
+          });
+        },
+
+        afficheMarks(loc) {
+          loc.forEach((coord) => {
+            var marker = L.marker([coord[0], coord[1]]).addTo(map);
+            markers.push(marker);
+          });
+        },
+
+        getVisibleMarkers() {
+          let visibleMarkers = [];
+
+          map.eachLayer((layer) => {
+            if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
+              visibleMarkers.push(layer);
+            }
+          });
+
+          return visibleMarkers;
+
+        },
+
+        getLoc(records) {
+          let loc = [];
+          records.forEach((formation) => {
+            loc.push(formation.fields.g_olocalisation_des_formations);
+          });
+          return loc;
+        },
+
+        // méthode pour gérer l'événement "moveend"
+        onMoveEnd() {
+          let visibleMarkers = this.getVisibleMarkers();
+
+            // filtrer les éléments du tableau records qui ont une localisation correspondant à un marker visible
+            let recordsWithLoc = this.props.records.filter((record) => {
+                let loc = record.fields.g_olocalisation_des_formations;
+                for (let marker of visibleMarkers) {
+                if (marker.getLatLng().equals(L.latLng(loc[0], loc[1]))) {
+                    return true;
+                }
+                }
+                return false;
+            });
+
+            let fin=[];
+
+            recordsWithLoc.forEach((forma) => {
+                fin.push(forma.recordid)
+            })
+
+            this.props.modifyByLoc(fin);
+        },
+      };
+    }
+  </script>
+</maMap>

riot/tableuFormation.riot

@@ -1,5 +1,6 @@
 <tableuFormation>
-
+<div id="map"></div>
+        <maMap if={props.records} records={props.records} modifyByLoc={modifyByLoc}></maMap>
 <div class="field is-flex is-justify-content-space-between mt-5" >
     <input class="input" type="search" placeholder="nom de l'établissement" id="myInput" oninput={search}>
 </div>
@@ -51,7 +52,7 @@
             </tr>
         </thead>
         <tbody each={item in props.records}>
-            <tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;" if={item.fields.lib_comp_voe_ins.includes(state.recherche)} onclick={() => afficherModal(item)}>
+            <tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;" if={item.fields.lib_comp_voe_ins.includes(state.recherche) && locInclude(item.recordid)} onclick={() => afficherModal(item)}>
                 <td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td>
                     <progress-bar select="{getSelectivite(item)}">
                         <div class="columns is-mobile is-vcentered">
@@ -90,7 +91,8 @@ export default function todos() {
             recherche: '',
             trie: '',
             records: '',
-            modal: ''
+            modal: '',
+            loc: []
         };
         },
 
@@ -235,6 +237,17 @@ export default function todos() {
                     modal: item.fields
                 })
             }
+        },
+
+        modifyByLoc(newRecords){
+            this.update({
+                loc: newRecords
+            });
+        },
+
+        locInclude(geolocalisation){
+
+            return this.state.loc.find((str) => str === geolocalisation);
         }
     }