feat: c'est pas propre de ouf mais sa passe

front/src/pages/maps/index.astro

@@ -4,20 +4,42 @@ import 'leaflet/dist/leaflet.css'
 import 'leaflet-geosearch/dist/geosearch.css'
 import CheckBox from 'components/CheckBox.astro'
 import Radios from 'components/Radios.astro'
+import ListResult, { type RecordModel } from 'pocketbase'
+import { Expand, Trash } from 'lucide-astro'
+
+const pb = Astro.locals.pb
+const connected = pb.authStore.isValid
 
 const metadata = {
   title: 'Maps',
   ignoreTitleTemplate: true,
 }
+
+let fav = new Array<any>
+
+if(connected){
+  try {
+    const request = await pb.collection('user_poi').getList(1,10,{filter:`owner="${pb.authStore.model!.id}"`, expand:"poi_list"})
+    request.items.forEach(element => {
+      fav.push(element.expand!.poi_list.Poi)
+    });
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+console.log(fav);
+
+
 ---
 
 <Layout metadata={metadata}>
 
-  <div class="h-[calc(100vh-16rem)] flex flex-row">
+  <div class="h-[calc(100vh-5rem)] flex flex-row">
     <div class="w-1/5 flex flex-col">
       <p id="message" class="hidden text-center mb-3">pouet</p>
       <p class="text-center text-2xl mb-3">Filtre :</p>
-      <div class="grow">
+      <div class="">
         <p>note minimal :</p>
         <Radios
           values={[
@@ -37,7 +59,7 @@ const metadata = {
           checked
         />
       </div>
-      <div class="mb-3">
+      <div class="mb-3 grow">
         <p class="text-center text-xl mb-3">Source :</p>
         <CheckBox
           label="Open Trip Maps"
@@ -46,15 +68,26 @@ const metadata = {
           checked
         />
       </div>
+      {connected && (
+      <div class="mb-2">
+        <p class="text-center text-xl mb-3">Favori :</p>
+        {fav.map(val =>(
+          <div class="ml-2 flex flex-row mb-1" id="fav-div">
+            <p class="grow poi-favori" id={val.id} data-pos={val.geometry.coordinates}>{val.properties.name}</p>
+            <Trash id={val.id} class="poi-trash"/>
+          </div>
+        ))}
+      </div>
+      )}
     </div>
-    <div class="flex flex-col grow">
-      <div class="w-full h-96 grow" id="map" />
+    <div class="flex flex-col h-full grow">
+      <div class="w-full h-full grow" id="map" />
     </div>
   </div>
   <!-- TODO: faire en sort que le style soit propre -->
 
   <!-- for remouve footer -->
-  <!-- <div slot="footer"></div> -->
+  <div slot="footer"></div>
   <!-- penser a rm  11 au rem au dessus pour la taille -->
 </Layout>
 
@@ -65,6 +98,10 @@ const metadata = {
   import { OpenStreetMapProvider } from 'leaflet-geosearch'
   import { GeoSearchControl } from 'leaflet-geosearch'
 
+  const showFav = document.querySelectorAll(".poi-favori")
+  const trashFav = document.querySelectorAll(".poi-trash")
+  const favDiv = document.querySelector('#fav-div')
+
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
   const BACK_URL = "http://localhost:3001/" //XXX : mettre url de prod
@@ -97,6 +134,38 @@ const metadata = {
     }),
   )
 
+  async function saveToFav(element: any, save: boolean){
+    const url = '/maps/save_poi';
+    const options = {
+      method: 'POST',
+      body: JSON.stringify({Poi : element, save: save})
+    };
+
+    try {
+      const response = await fetch(url, options);
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function eventGotoFav(e: Element){
+    e.addEventListener('click', () =>{
+      const pose = e.getAttribute('data-pos')?.split(',')
+      map.panTo(new L.LatLng(parseFloat(pose![1]),parseFloat(pose![0])))
+    })
+  }
+
+  function eventRemoveFav(e: Element){
+    e.addEventListener('click', () => {
+      saveToFav({id:e.id, type:"Feature"},false)
+    })
+  }
+
+  showFav.forEach(e => {eventGotoFav(e)})
+  trashFav.forEach(e => {eventRemoveFav(e)})
+
   let poiMarkers = new Array<L.Marker>
   let minimalNote = "1"
   let drink = true
@@ -130,11 +199,12 @@ 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} <p>favori : <p> <input type="checkbox" name="like" id=${element.id}/>`)
+            .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags} <p>favori : <input type="checkbox" name="like" id=${element.id}/><p>`)
             .on("click", () => {
               document.querySelectorAll<HTMLInputElement>('input[name="like"]').forEach(e => {
                 e.addEventListener("click", () => {
-                  console.log("poeut");
+                  console.log(element)
+                  saveToFav(element, e.checked)
                 })
               })
             })

front/src/pages/maps/save_poi.astro

@@ -34,10 +34,10 @@ await AstroUtils.wrap(async () => {
 
   try {
     if(poiJson.save){
-        pb.collection('user_poi').create({owner: pb.authStore.model!.id, poi_list:record!.id})
+      await pb.collection('user_poi').create({owner: pb.authStore.model!.id, poi_list:record!.id})
       }else{
         record = await pb.collection('user_poi').getFirstListItem(`poi_list="${record!.id}"&&owner="${pb.authStore.model!.id}"`)
-        pb.collection('user_poi').delete(record.id)
+        await pb.collection('user_poi').delete(record.id)
     }
   } catch (error) {
     console.log(error)