add fav btn+ event

front/src/components/CheckBox.astro

@@ -1,7 +1,7 @@
 ---
 import type { Input as Props } from 'types';
 
-const { checked ,name, label, autocomplete, placeholder, divClass, inputClass} = Astro.props;
+const {value, checked ,name, label, autocomplete, placeholder, divClass, inputClass} = Astro.props;
 
 ---
 
@@ -14,6 +14,7 @@ const { checked ,name, label, autocomplete, placeholder, divClass, inputClass} =
           name={name}
           id={name}
           checked={checked}
+          value={value}
           autocomplete={autocomplete}
           placeholder={placeholder}
           class={"mr-2 size-5 " + inputClass}

front/src/pages/maps/index.astro

@@ -32,7 +32,8 @@ const metadata = {
         <p class="text-center text-xl mb-3">Type POI :</p>
         <CheckBox
           label="Bar, Pub, Café,..."
-          name="drink"
+          name="filter"
+          value="drink"
           checked
         />
       </div>
@@ -40,7 +41,8 @@ const metadata = {
         <p class="text-center text-xl mb-3">Source :</p>
         <CheckBox
           label="Open Trip Maps"
-          name="otm"
+          name="filter"
+          value="otm"
           checked
         />
       </div>
@@ -128,7 +130,14 @@ const metadata = {
             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}`)
+            .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags} <p>favori : <p> <input type="checkbox" name="like" id=${element.id}/>`)
+            .on("click", () => {
+              document.querySelectorAll<HTMLInputElement>('input[name="like"]').forEach(e => {
+                e.addEventListener("click", () => {
+                  console.log("poeut");
+                })
+              })
+            })
           poiMarker.addTo(map)
           poiMarkers.push(poiMarker)
         })
@@ -149,7 +158,7 @@ const metadata = {
     }
   }
   // envent pour lancer la recherche
-  const cooldown = 1000
+  const cooldown = 400
   sender()
   let timeoutHandle = window.setTimeout(sender, cooldown)
   
@@ -168,9 +177,9 @@ const metadata = {
     }
   })
 
-  document.querySelectorAll<HTMLInputElement>("input[type='checkbox']").forEach(e =>{
+  document.querySelectorAll<HTMLInputElement>("input[name='filter']").forEach(e =>{
     e.addEventListener("click", () => {
-      switch (e.name) {
+      switch (e.value) {
         case "drink":
           drink = e.checked
         break;
@@ -195,4 +204,5 @@ const metadata = {
       searchBox()
     })
   })
+
 </script>

front/src/types.d.ts

@@ -162,7 +162,7 @@ export interface Testimonial {
 }
 
 export interface Input {
-  type: HTMLInputTypeAttribute
+  type?: HTMLInputTypeAttribute
   name: string
   label?: string
   autocomplete?: string
@@ -170,6 +170,7 @@ export interface Input {
   divClass?: string
   inputClass?: string
   checked?: bool
+  value?:string
 }
 
 export interface Textarea {