make search work

front/src/components/widgets/Footer.astro

@@ -26,7 +26,7 @@ export interface Props {
 const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light' } = Astro.props;
 ---
 
-<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose, mt-auto']}>
+<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose, mt-auto, h-{11rem}']}>
   <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">

front/src/components/widgets/Header.astro

@@ -55,7 +55,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
 <header
 	class:list={[
 		{ sticky: isSticky, relative: !isSticky, dark: isDark },
-		'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
+		'top-0 z-[1001] h-[5rem] bg-page flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
 	]}
 	{...isSticky ? { 'data-aw-sticky-header': true } : {}}
 	{...id ? { id } : {}}
@@ -88,7 +88,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
 			aria-label="Main navigation"
 		>
 			<ul
-				class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
+				class="flex flex-col bg-page md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
 			>
 				{
 					links.map(({ text, href, links }) => (

front/src/pages/maps.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from 'layouts/PageLayout.astro'
 import 'leaflet/dist/leaflet.css'
+import 'leaflet-geosearch/dist/geosearch.css'
 import FormContainer from 'components/ui/Form.astro'
 import Input from 'components/Input.astro'
 import Button from 'components/ui/Button.astro'
@@ -13,23 +14,24 @@ const metadata = {
 
 <Layout metadata={metadata}>
 
-  <div class="flex flex-row justify-between align-center max-w-xl mx-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow p-4 sm:p-6 lg:p-8 w-full">
+  <div class="h-[calc(100vh-16rem)] flex flex-col">
-    <Input type='text' name='search' placeholder='Paris' divClass='grow mr-4'/>
+    <div class="w-full h-96 grow" id="map" />
-    <Button variant="primary" id='search-btn' class='grow-4'>rechercher</Button>
   </div>
   
-  <div class="w-full h-96" id="map" />
 
 
+  <!-- for remouve footer -->
+  <!-- <div slot="footer"></div> -->
+  <!-- penser a rm  11 au rem au dessus pour la taille -->
 </Layout>
 
 <script>
-  import L, { geoJSON, Icon, type LatLngTuple } from 'leaflet'
+  import L, { geoJSON, Icon, Popup, type LatLngTuple } from 'leaflet'
   import markerShadow from "leaflet/dist/images/marker-shadow.png"
   import markerIcon from "leaflet/dist/images/marker-icon.png"
+  import { OpenStreetMapProvider } from 'leaflet-geosearch'
+  import { GeoSearchControl } from 'leaflet-geosearch';
 
-  const btn = document.querySelector('#search-btn')
-  const input = document.querySelector<HTMLInputElement>('#search')
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
   // const BACK_URL = "https://drink-tweb.cb85.fr/"
@@ -42,14 +44,79 @@ const metadata = {
     zoom: 13,
     preferCanvas: true
   })
+
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   }).addTo(map)
 
-  let marker = L.marker([51.5, -0.09],icon).addTo(map)
+  const provider = new OpenStreetMapProvider()
-  marker.bindPopup("test")
   
+  map.addControl(
+    GeoSearchControl({
+      notFoundMessage: 'Adresse introuvable !',
+      provider,
+      showMarker: false,
+      style: 'bar',
+    }),
+  )
+
+  let poiMarkers = new Array<L.Marker>
+
+  // run api search
+  function searchBox(){
+    const nordWest = map.getBounds().getNorthWest()
+    const southEast = map.getBounds().getSouthEast()
+    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())
+    
+    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()
+        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(prop.name + "\n" + prop.rate + "\n" + prop.kinds)
+        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
+  function sender(){
+    console.log("SEND")
+    if(map.getZoom() >= 13){
+      console.log("zoom OKAY")
+      //TODO: mettre un message de recherche en cour
+      searchBox();
+    }else{
+      console.log("zoom more to see result");
+      //TODO: faire en sorte d'avoir un message
+    }
+  }
+  // envent pour lancer la recherche
+  const cooldown = 1000;
+  sender()
+  let timeoutHandle = window.setTimeout(sender, cooldown)
+  
+  window.clearTimeout(timeoutHandle);
+  
+  map.addEventListener("move",() =>{
+    console.log("move")
+    window.clearTimeout(timeoutHandle);
+    timeoutHandle = window.setTimeout(sender, cooldown);
+  })//searchBox)
 
   function search() {
     const params: URLSearchParams = new URLSearchParams();
@@ -64,8 +131,9 @@ const metadata = {
       marker.setLatLng(mapsCenter)
       map.setView(mapsCenter)
       data.features.forEach(element => {
-        console.log(element)
+        const prop = element.properties
-        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(element.properties)
+        const popup: Popup = new Popup()
+        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(prop.name + "\n" + prop.rate + "\n" + prop.kinds)
         poiMarker.addTo(map)
       });
     }).catch(function (err) {
@@ -73,18 +141,4 @@ const metadata = {
     });
   }
 
-  btn?.addEventListener('click',search)
-  input?.addEventListener('keypress',(e) =>{
-    if(e.key == 'Enter'){
-      search()
-    }
-  })
-
-    // marker.setLatLng(mapsCenter)
-    // map.setView(mapsCenter)
-    // const mark2 = map.getBounds().getNorthWest()
-    // const mark3 = map.getBounds().getSouthEast()
-    // let marker2 = L.marker(mark2,icon).addTo(map)
-    // let marker3 = L.marker(mark3,icon).addTo(map)
-
 </script>