front/src/components/Radios.astro

@@ -1,7 +1,7 @@
 ---
 
 export interface Props {
-  values: Array<{label:String, name:string}>
+  values: Array<{label:String, name:string, checked?:boolean | undefined}>
 }
 
 
@@ -12,7 +12,7 @@ const fields = Astro.props.values
 <>
   <div class="flex, flex-col">
     {fields.map(value => (
-          <input type="radio" id={value.name} name="note-min" value={value.name}>
+          <input type="radio" id={value.name} name="note-min" value={value.name} checked={value.checked}>
           <label for={value.name} class="ml-1">{value.label}</label><br>
     ))}
   </div>

front/src/pages/maps/find_route.astro

@@ -18,7 +18,7 @@ const metadata = {
     <div class="w-full h-96 grow" id="map" />
     <Button id="test-btn">test</Button>
   </div>
-
+  <!-- TODO: faire en sort que le style soit propre -->
   <!-- for remouve footer -->
   <!-- <div slot="footer"></div> -->
   <!-- penser a rm  11 au rem au dessus pour la taille -->
@@ -77,7 +77,6 @@ const metadata = {
     console.log("route trouvé")
     console.log(e)
   })
-  const pouet = "pouet"
   document.querySelector<HTMLButtonElement>('#test-btn')?.addEventListener('click', () => {
     routing.setWaypoints(
       [L.latLng(46.6705431, -1.4269698),L.latLng(47.218536, -1.554075)]

front/src/pages/maps/index.astro

@@ -2,9 +2,8 @@
 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'
+import CheckBox from 'components/CheckBox.astro'
+import Radios from 'components/Radios.astro'
 
 const metadata = {
   title: 'Maps',
@@ -14,8 +13,40 @@ const metadata = {
 
 <Layout metadata={metadata}>
 
-  <div class="h-[calc(100vh-16rem)] flex flex-col">
-    <div class="w-full h-96 grow" id="map" />
+  <div class="h-[calc(100vh-16rem)] 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">
+        <p>note minimal :</p>
+        <Radios
+          values={[
+              {name: "1", label: "1", checked: true},
+              {name: "2", label: "2"},
+              {name: "3", label: "3"},
+              {name: "1h", label: "1h"},
+              {name: "2h", label: "2h"},
+              {name: "3h", label: "3h"},
+            ]}
+        />
+        <p class="text-center text-xl mb-3">Type POI :</p>
+        <CheckBox
+          label="Bar, Pub, Café,..."
+          name="drink"
+        />
+      </div>
+      <div class="mb-3">
+        <p class="text-center text-xl mb-3">Source :</p>
+        <CheckBox
+          label="Open Trip Maps"
+          name="otm"
+          checked
+        />
+      </div>
+    </div>
+    <div class="flex flex-col grow">
+      <div class="w-full h-96 grow" id="map" />
+    </div>
   </div>
   <!-- TODO: faire en sort que le style soit propre -->
 
@@ -25,7 +56,7 @@ const metadata = {
 </Layout>
 
 <script>
-  import L, { geoJSON, Icon, Popup, type LatLngTuple } from 'leaflet'
+  import L, {Popup} 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'
@@ -33,9 +64,7 @@ const metadata = {
 
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
-  const BACK_URL = "http://localhost:3001/"
-
-  let mapsCenter : L.LatLngTuple
+  const BACK_URL = "http://localhost:3001/" //XXX : mettre url de prod
 
   // declare map
   const map = L.map('map', {
@@ -54,7 +83,6 @@ const metadata = {
     position: 'bottomleft'
   }).addTo(map);
 
-
   const provider = new OpenStreetMapProvider()
   
   map.addControl(
@@ -67,7 +95,7 @@ const metadata = {
   )
 
   let poiMarkers = new Array<L.Marker>
-
+  let minimalNote = "1";
   // run api search
   function searchBox(){
     const nordWest = map.getBounds().getNorthWest()
@@ -78,6 +106,9 @@ const metadata = {
     params.append("lat1", nordWest.lat.toString())
     params.append("lon2", southEast.lng.toString())
     params.append("lat2", southEast.lat.toString())
+    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();
@@ -85,6 +116,7 @@ const metadata = {
       poiMarkers.forEach(element => {
         element.remove();
       });
+      console.log(data)
       data.features.forEach(element => {
         const prop = element.properties
         const popup: Popup = new Popup()
@@ -131,4 +163,18 @@ const metadata = {
       });
     }
   })
+
+  document.querySelectorAll("input").forEach(e =>{
+    e.addEventListener("click", () => {
+      console.log("checked : ", e.checked)
+      console.log("val ", e.value)
+      console.log("name: ", e.name)
+    })
+  })
+
+  document.querySelectorAll<HTMLInputElement>('input[name="note-min"]').forEach(e => {
+    e.addEventListener("click", () => {
+      minimalNote = e.value
+    })
+  })
 </script>