front/src/pages/maps/index.astro

@@ -33,6 +33,7 @@ const metadata = {
         <CheckBox
           label="Bar, Pub, Café,..."
           name="drink"
+          checked
         />
       </div>
       <div class="mb-3">
@@ -81,7 +82,7 @@ const metadata = {
   // move zoom ctl to bottom
   L.control.zoom({
     position: 'bottomleft'
-  }).addTo(map);
+  }).addTo(map)
 
   const provider = new OpenStreetMapProvider()
   
@@ -95,43 +96,46 @@ const metadata = {
   )
 
   let poiMarkers = new Array<L.Marker>
-  let minimalNote = "1";
+  let minimalNote = "1"
+  let drink = true
+  let otm = true
+  
   // run api search
   function searchBox(){
     const nordWest = map.getBounds().getNorthWest()
     const southEast = map.getBounds().getSouthEast()
-    const params: URLSearchParams = new URLSearchParams();
+    const params: URLSearchParams = new URLSearchParams()
 
     params.append("lon1", nordWest.lng.toString())
     params.append("lat1", nordWest.lat.toString())
     params.append("lon2", southEast.lng.toString())
     params.append("lat2", southEast.lat.toString())
-    params.append("rate", minimalNote);
+    params.append("rate", minimalNote)
 
-    console.log(params);
-    
-    fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
-      return response.json();
-    }).then(function (data) {
-      poiMarkers.forEach(element => {
-        element.remove();
-      });
-      console.log(data)
-      data.features.forEach(element => {
-        const prop = element.properties
-        const popup: Popup = new Popup()
-        let tags = new String()
-        prop.kinds.split(",").forEach(element => {
-          tags += "- " + element + "<br/>"
-        });
-        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon)
-          .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags}`)
-        poiMarker.addTo(map)
-        poiMarkers.push(poiMarker);
-      });
-    }).catch(function (err) {
-      console.warn('Something went wrong.', err);
-    });
+    if(drink && otm){
+      fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
+        return response.json()
+      }).then(function (data) {
+        poiMarkers.forEach(element => {
+          element.remove()
+        })
+        console.log(data)
+        data.features.forEach(element => {
+          const prop = element.properties
+          const popup: Popup = new Popup()
+          let tags = new String()
+          prop.kinds.split(",").forEach(element => {
+            tags += "- " + element + "<br/>"
+          })
+          const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon)
+            .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags}`)
+          poiMarker.addTo(map)
+          poiMarkers.push(poiMarker)
+        })
+      }).catch(function (err) {
+        console.warn('Something went wrong.', err)
+      })
+    }
   }
 
   // fonciton pour lancer la recherche de box sur l'api
@@ -139,36 +143,49 @@ const metadata = {
     if(map.getZoom() >= 13){
       console.log("zoom OKAY")
       //TODO: mettre un message de recherche en cour
-      searchBox();
+      searchBox()
     }else{
-      console.log("zoom more to see result");
+      console.log("zoom more to see result")
     }
   }
   // envent pour lancer la recherche
-  const cooldown = 1000;
+  const cooldown = 1000
   sender()
   let timeoutHandle = window.setTimeout(sender, cooldown)
   
-  window.clearTimeout(timeoutHandle);
+  window.clearTimeout(timeoutHandle)
   
   map.addEventListener("move",() =>{
-    window.clearTimeout(timeoutHandle);
-    timeoutHandle = window.setTimeout(sender, cooldown);
+    window.clearTimeout(timeoutHandle)
+    timeoutHandle = window.setTimeout(sender, cooldown)
   })
 
   map.addEventListener("zoom", () => {
     if(map.getZoom() <= 11){
       poiMarkers.forEach(element => {
         element.remove()
-      });
+      })
     }
   })
 
-  document.querySelectorAll("input").forEach(e =>{
+  document.querySelectorAll<HTMLInputElement>("input[type='checkbox']").forEach(e =>{
     e.addEventListener("click", () => {
-      console.log("checked : ", e.checked)
-      console.log("val ", e.value)
-      console.log("name: ", e.name)
+      switch (e.name) {
+        case "drink":
+          drink = e.checked
+        break;
+      
+        case "otm":
+          otm = e.checked
+        break;
+
+        default:
+          break;
+      }
+      poiMarkers.forEach(element => {
+          element.remove()
+      })
+      searchBox()
     })
   })
 
@@ -176,5 +193,6 @@ const metadata = {
     e.addEventListener("click", () => {
       minimalNote = e.value
     })
+    searchBox()
   })
 </script>