feat: use drink api in front and more (#16)

Reviewed-on: #16
Co-authored-by: Clement <c.boesmier@aptatio.com>
Co-committed-by: Clement <c.boesmier@aptatio.com>

Express/barAndCafe/jest.config.js

@@ -1,5 +1,8 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
+  testPathIgnorePatterns: [
+    "<rootDir>/dist/"
+  ],
   testTimeout: 10000,
   preset: 'ts-jest',
   testEnvironment: 'node',

Express/barAndCafe/src/openTripMaps.ts

@@ -136,9 +136,8 @@ export async function getCity(req: express.Request, res: express.Response) {
         radius = "1000"
     }
     const cityPose = await callCity(cityName as string)
-    const poi = await callRadius(cityPose.lon,cityPose.lat, radius as string)
-    res.send( {...poi, ...cityPose})
-}//XXX: refaire test avec city
+    res.send( await callRadius(cityPose.lon,cityPose.lat, radius as string))
+}
 
 /**
  * Handle GET request for radius search route ('/otm/radius').
@@ -184,12 +183,16 @@ export async function getBox(req:express.Request, res: express.Response) {
     const lat1 = req.query["lat1"] as string
     const lon2 = req.query["lon2"] as string
     const lat2 = req.query["lat2"] as string
-    const rate = req.query["rate"] as string
+    let rate = req.query["rate"] as string
     if(!lon1 || !lat1 || !lon2 || !lat2){
         res.status(400).send("Missing Argument")
         return
     }
 
+    if(!rate){
+        rate = "1";
+    }
+
     res.send( await callBox(lon1, lat1, lon2, lat2, rate))
 }
 

Express/barAndCafe/test/openTripMaps.test.ts

@@ -219,6 +219,14 @@ describe("Test the otm city path", () => {
             }
             ]
         }
+        function sleep(milliseconds: number) {
+            const date = Date.now();
+            let currentDate = null;
+            do {
+              currentDate = Date.now();
+            } while (currentDate - date < milliseconds);
+          }
+        sleep(2000);
         request(app)
         .get("/otm/box")
         .query({'lon1':'-1.435199','lon2':'-1.43519', 'lat1':'46.668460', 'lat2':'46.668461'})

Ratrapage_WEB.code-workspace

@@ -0,0 +1,18 @@
+{
+	"folders": [
+		{
+			"name": "Ratrapage_WEB",
+			"path": "."
+		},
+		{
+			"name": "barAndCafe",
+			"path": "Express/barAndCafe"
+		},
+		{
+			"path": "front"
+		}
+	],
+	"settings": {
+		"typescript.tsdk": "node_modules/typescript/lib"
+	}
+}

bruno/OpenData datatourisme/environments/prod.bru

@@ -1,4 +1,8 @@
 vars {
   EXPRESS_API: https://drink-tweb.cb85.fr
-  OTM_KEY: 5ae2e3f221c38a28845f05b6494c021573d9608a4d749ce8af625e0f
+  PB_URL: https://pb-tweb.cb85.fr
+  TRIPMAP_URL: https://api.opentripmap.com/0.1/
 }
+vars:secret [
+  OTM_KEY
+]

bruno/OpenData datatourisme/poketBase_api/connexion.bru

@@ -0,0 +1,18 @@
+meta {
+  name: connexion
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{PB_URL}}/api/collections/users/auth-with-password
+  body: json
+  auth: none
+}
+
+body:json {
+  {
+    "identity": "michel.biche@aptatio.com",
+    "password": "123456789"
+  }
+}

bruno/OpenData datatourisme/poketBase_api/get all poi.bru

@@ -0,0 +1,27 @@
+meta {
+  name: get all poi
+  type: http
+  seq: 5
+}
+
+get {
+  url: {{PB_URL}}/api/collections/user_poi/records?filter=owner='vvy93m1hoaeshwy'&&poi_list='cabkkovmjsfoapa'
+  body: json
+  auth: bearer
+}
+
+query {
+  filter: owner
+  poi_list: 'cabkkovmjsfoapa'
+}
+
+auth:bearer {
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3MTg4Mjg0NzEsImlkIjoidnZ5OTNtMWhvYWVzaHd5IiwidHlwZSI6ImF1dGhSZWNvcmQifQ.pC7u-QaZ_BYqWA5wG8wu1lRbbd4mKuKeAveWe_IBnfU
+}
+
+body:json {
+  {
+    "owner": "vvy93m1hoaeshwy",
+    "poi_list": "sh430u0im37cxm5"
+  }
+}

bruno/OpenData datatourisme/poketBase_api/link user to poi.bru

@@ -0,0 +1,22 @@
+meta {
+  name: link user to poi
+  type: http
+  seq: 3
+}
+
+post {
+  url: {{PB_URL}}/api/collections/user_poi/records
+  body: json
+  auth: bearer
+}
+
+auth:bearer {
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3MTg4Mjg0NzEsImlkIjoidnZ5OTNtMWhvYWVzaHd5IiwidHlwZSI6ImF1dGhSZWNvcmQifQ.pC7u-QaZ_BYqWA5wG8wu1lRbbd4mKuKeAveWe_IBnfU
+}
+
+body:json {
+  {
+    "owner": "vvy93m1hoaeshwy",
+    "poi_list": "sh430u0im37cxm5"
+  }
+}

bruno/OpenData datatourisme/poketBase_api/send a poi.bru

@@ -0,0 +1,40 @@
+meta {
+  name: send a poi
+  type: http
+  seq: 2
+}
+
+post {
+  url: {{PB_URL}}/api/collections/POI/records
+  body: json
+  auth: bearer
+}
+
+auth:bearer {
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3MTg4Mjg0NzEsImlkIjoidnZ5OTNtMWhvYWVzaHd5IiwidHlwZSI6ImF1dGhSZWNvcmQifQ.pC7u-QaZ_BYqWA5wG8wu1lRbbd4mKuKeAveWe_IBnfU
+}
+
+body:json {
+  {
+    "Poi_id": "11472887",
+    "Poi": {
+      "type": "Feature",
+      "id": "11472887",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.0626024,
+          51.4924088
+        ]
+      },
+      "properties": {
+        "xid": "W544344833",
+        "name": "The Blue Anchor",
+        "rate": 2,
+        "osm": "way/544344833",
+        "wikidata": "Q7718716",
+        "kinds": "pubs,foods,shops,marketplaces,tourist_facilities"
+      }
+    }
+  }
+}

bruno/OpenData datatourisme/poketBase_api/send fav to astro.bru

@@ -0,0 +1,37 @@
+meta {
+  name: send fav to astro
+  type: http
+  seq: 4
+}
+
+post {
+  url: http://localhost:3000/maps/save_poi
+  body: json
+  auth: bearer
+}
+
+auth:bearer {
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3MTg4ODY2OTIsImlkIjoidnZ5OTNtMWhvYWVzaHd5IiwidHlwZSI6ImF1dGhSZWNvcmQifQ.R9PBGlHn6aBHt89g6G0NykMh_Vye24OpKEUYtz6R6Og
+}
+
+body:json {
+  {
+      "type": "Feature",
+      "id": "11472888",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.0626024,
+          51.4924088
+        ]
+      },
+      "properties": {
+        "xid": "W544344833",
+        "name": "The Blue Anchor",
+        "rate": 2,
+        "osm": "way/544344833",
+        "wikidata": "Q7718716",
+        "kinds": "pubs,foods,shops,marketplaces,tourist_facilities"
+      }
+  }
+}

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/find_route.astro

@@ -25,12 +25,12 @@ const metadata = {
 </Layout>
 
 <script>
-  import L from 'leaflet'
+  import * as L from 'leaflet'
   import markerShadow from "leaflet/dist/images/marker-shadow.png"
   import markerIcon from "leaflet/dist/images/marker-icon.png"
   import 'leaflet-routing-machine/dist/leaflet-routing-machine.js'
   import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
-
+  
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
   // declare map
@@ -57,7 +57,9 @@ const metadata = {
     //   L.latLng(47.218536, -1.554075)
     // ],
     routeWhileDragging: true,
+    //@ts-ignore
     geocoder: L.Control.Geocoder.nominatim(),
+    //@ts-ignore
     position: 'topleft',
     showAlternatives: true,
     reverseWaypoints: true,

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={[
@@ -32,27 +54,40 @@ 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>
-      <div class="mb-3">
+      <div class="mb-3 grow">
         <p class="text-center text-xl mb-3">Source :</p>
         <CheckBox
           label="Open Trip Maps"
-          name="otm"
+          name="filter"
+          value="otm"
           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>
 
@@ -63,9 +98,14 @@ 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
+  // const BACK_URL = "http://localhost:3001/" //XXX : mettre url de prod
+  const BACK_URL = "https://drink-tweb.cb85.fr/" //XXX : mettre url de prod
 
   // declare map
   const map = L.map('map', {
@@ -95,6 +135,39 @@ 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', async () => {
+      await saveToFav({id:e.id, type:"Feature"},false)
+      document.location.reload()
+    })
+  }
+
+  showFav.forEach(e => {eventGotoFav(e)})
+  trashFav.forEach(e => {eventRemoveFav(e)})
+
   let poiMarkers = new Array<L.Marker>
   let minimalNote = "1"
   let drink = true
@@ -128,7 +201,16 @@ 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 : <input type="checkbox" name="like" id=${element.id}/><p>`)
+            .on("click", () => {
+              document.querySelectorAll<HTMLInputElement>('input[name="like"]').forEach(e => {
+                e.addEventListener("click", () => {
+                  console.log(element)
+                  saveToFav(element, e.checked)
+                  document.location.reload()
+                })
+              })
+            })
           poiMarker.addTo(map)
           poiMarkers.push(poiMarker)
         })
@@ -149,7 +231,7 @@ const metadata = {
     }
   }
   // envent pour lancer la recherche
-  const cooldown = 1000
+  const cooldown = 400
   sender()
   let timeoutHandle = window.setTimeout(sender, cooldown)
   
@@ -168,9 +250,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 +277,5 @@ const metadata = {
       searchBox()
     })
   })
+
 </script>

front/src/pages/maps/save_poi.astro

@@ -0,0 +1,47 @@
+---
+import AstroUtils from "libs/AstroUtils";
+import type { RecordModel } from "pocketbase";
+
+
+const pb = Astro.locals.pb
+
+if(!pb.authStore.isValid){
+		return Astro.redirect("/account")
+}
+
+await AstroUtils.wrap(async () => {
+	if (Astro.request.method !== 'POST') {
+		return
+	}
+  const poiJson = await Astro.request.json()
+
+  const data = {Poi: poiJson.Poi, Poi_id:poiJson.Poi.id}
+
+  let record: RecordModel
+
+  try {
+    record = await pb.collection('POI').create(data);
+  } catch (error) {
+    try{
+      record = await pb.collection('POI').getFirstListItem(`Poi_id="${poiJson.Poi.id}"`)
+    } catch (error2) {
+      console.log("error 1 :")
+      console.log(error)
+      console.log("error 2 :")
+      console.log(error2)
+    }
+  }
+
+  try {
+    if(poiJson.save){
+      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}"`)
+        await pb.collection('user_poi').delete(record.id)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+
+})
+---

front/src/types.d.ts

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