Compare commits
25 Commits
v0.0.1
...
fec885585a
Author | SHA1 | Date | |
---|---|---|---|
fec885585a | |||
98d4e99464 | |||
d0260c292f | |||
032ad34a84 | |||
02e014939b | |||
7a1ebb2f7a | |||
fcd9e3de10 | |||
532b12d4f5 | |||
5bec24dc0c | |||
b8c4c6cf17 | |||
a7dea54dc7 | |||
3d9e2b1977 | |||
aae4f97ff4 | |||
7f9a9965d2 | |||
f4a2e8cbf9 | |||
0fec2417a9 | |||
7f1986e765 | |||
07ee4b9e57 | |||
20ebad74fb | |||
aec568d0c7 | |||
0849ffe42c | |||
e13cb9bbb9 | |||
c348e2b2ac | |||
c93141e68f | |||
2ecc5c86ca |
@ -1,8 +1,5 @@
|
|||||||
/** @type {import('ts-jest').JestConfigWithTsJest} */
|
/** @type {import('ts-jest').JestConfigWithTsJest} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
testPathIgnorePatterns: [
|
|
||||||
"<rootDir>/dist/"
|
|
||||||
],
|
|
||||||
testTimeout: 10000,
|
testTimeout: 10000,
|
||||||
preset: 'ts-jest',
|
preset: 'ts-jest',
|
||||||
testEnvironment: 'node',
|
testEnvironment: 'node',
|
||||||
|
@ -13,7 +13,7 @@ const key = process.env.OPEN_TRIP_MAPS_KEY
|
|||||||
* @param {string} lat2 Latitude of the 2nd point of the box
|
* @param {string} lat2 Latitude of the 2nd point of the box
|
||||||
* @returns {FeatureCollection} a list of POIs with their type, id, etc. (cf: [opentripmap](https://dev.opentripmap.org/docs#))
|
* @returns {FeatureCollection} a list of POIs with their type, id, etc. (cf: [opentripmap](https://dev.opentripmap.org/docs#))
|
||||||
*/
|
*/
|
||||||
async function callBox(lon1:string, lat1:string, lon2: string, lat2: string, rate: string) {
|
async function callBox(lon1:string, lat1:string, lon2: string, lat2: string) {
|
||||||
const lonMin = Math.min(parseFloat(lon1), parseFloat(lon2))
|
const lonMin = Math.min(parseFloat(lon1), parseFloat(lon2))
|
||||||
const lonMax = Math.max(parseFloat(lon1), parseFloat(lon2))
|
const lonMax = Math.max(parseFloat(lon1), parseFloat(lon2))
|
||||||
const latMin = Math.min(parseFloat(lat1), parseFloat(lat2))
|
const latMin = Math.min(parseFloat(lat1), parseFloat(lat2))
|
||||||
@ -27,7 +27,6 @@ async function callBox(lon1:string, lat1:string, lon2: string, lat2: string, rat
|
|||||||
lon_max: lonMax,
|
lon_max: lonMax,
|
||||||
lat_min: latMin,
|
lat_min: latMin,
|
||||||
lat_max: latMax,
|
lat_max: latMax,
|
||||||
rate: rate,
|
|
||||||
apikey: key,
|
apikey: key,
|
||||||
kinds: 'bars,cafes,pubs,biergartens'
|
kinds: 'bars,cafes,pubs,biergartens'
|
||||||
},
|
},
|
||||||
@ -136,8 +135,9 @@ export async function getCity(req: express.Request, res: express.Response) {
|
|||||||
radius = "1000"
|
radius = "1000"
|
||||||
}
|
}
|
||||||
const cityPose = await callCity(cityName as string)
|
const cityPose = await callCity(cityName as string)
|
||||||
res.send( await callRadius(cityPose.lon,cityPose.lat, radius as string))
|
const poi = await callRadius(cityPose.lon,cityPose.lat, radius as string)
|
||||||
}
|
res.send( {...poi, ...cityPose})
|
||||||
|
}//XXX: refaire test avec city
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle GET request for radius search route ('/otm/radius').
|
* Handle GET request for radius search route ('/otm/radius').
|
||||||
@ -183,16 +183,11 @@ export async function getBox(req:express.Request, res: express.Response) {
|
|||||||
const lat1 = req.query["lat1"] as string
|
const lat1 = req.query["lat1"] as string
|
||||||
const lon2 = req.query["lon2"] as string
|
const lon2 = req.query["lon2"] as string
|
||||||
const lat2 = req.query["lat2"] as string
|
const lat2 = req.query["lat2"] as string
|
||||||
let rate = req.query["rate"] as string
|
|
||||||
if(!lon1 || !lat1 || !lon2 || !lat2){
|
if(!lon1 || !lat1 || !lon2 || !lat2){
|
||||||
res.status(400).send("Missing Argument")
|
res.status(400).send("Missing Argument")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!rate){
|
res.send( await callBox(lon1, lat1, lon2, lat2))
|
||||||
rate = "1";
|
|
||||||
}
|
|
||||||
|
|
||||||
res.send( await callBox(lon1, lat1, lon2, lat2, rate))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -219,14 +219,6 @@ 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)
|
request(app)
|
||||||
.get("/otm/box")
|
.get("/otm/box")
|
||||||
.query({'lon1':'-1.435199','lon2':'-1.43519', 'lat1':'46.668460', 'lat2':'46.668461'})
|
.query({'lon1':'-1.435199','lon2':'-1.43519', 'lat1':'46.668460', 'lat2':'46.668461'})
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"folders": [
|
|
||||||
{
|
|
||||||
"name": "Ratrapage_WEB",
|
|
||||||
"path": "."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "barAndCafe",
|
|
||||||
"path": "Express/barAndCafe"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "front"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"settings": {
|
|
||||||
"typescript.tsdk": "node_modules/typescript/lib"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,8 +1,3 @@
|
|||||||
vars {
|
vars {
|
||||||
EXPRESS_API: https://drink-tweb.cb85.fr
|
EXPRESS_API: https://drink-tweb.cb85.fr
|
||||||
PB_URL: https://pb-tweb.cb85.fr
|
|
||||||
TRIPMAP_URL: https://api.opentripmap.com/0.1/
|
|
||||||
}
|
}
|
||||||
vars:secret [
|
|
||||||
OTM_KEY
|
|
||||||
]
|
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,27 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,22 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,40 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,37 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,30 +0,0 @@
|
|||||||
---
|
|
||||||
import type { Input as Props } from 'types';
|
|
||||||
|
|
||||||
const {value, checked ,name, label, autocomplete, placeholder, divClass, inputClass} = Astro.props;
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<>
|
|
||||||
{
|
|
||||||
name && (
|
|
||||||
<div class={"flex flex-row items-center " + divClass}>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name={name}
|
|
||||||
id={name}
|
|
||||||
checked={checked}
|
|
||||||
value={value}
|
|
||||||
autocomplete={autocomplete}
|
|
||||||
placeholder={placeholder}
|
|
||||||
class={"mr-2 size-5 " + inputClass}
|
|
||||||
/>
|
|
||||||
{label && (
|
|
||||||
<label for={name} class="block text-lg font-medium">
|
|
||||||
{label}
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</>
|
|
@ -1,19 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
values: Array<{label:String, name:string, checked?:boolean | undefined}>
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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} checked={value.checked}>
|
|
||||||
<label for={value.name} class="ml-1">{value.label}</label><br>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
@ -18,14 +18,16 @@ const metadata = {
|
|||||||
<div class="w-full h-96 grow" id="map" />
|
<div class="w-full h-96 grow" id="map" />
|
||||||
<Button id="test-btn">test</Button>
|
<Button id="test-btn">test</Button>
|
||||||
</div>
|
</div>
|
||||||
<!-- TODO: faire en sort que le style soit propre -->
|
|
||||||
|
<script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
|
||||||
|
|
||||||
<!-- for remouve footer -->
|
<!-- for remouve footer -->
|
||||||
<!-- <div slot="footer"></div> -->
|
<!-- <div slot="footer"></div> -->
|
||||||
<!-- penser a rm 11 au rem au dessus pour la taille -->
|
<!-- penser a rm 11 au rem au dessus pour la taille -->
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as L from 'leaflet'
|
import L, { geoJSON, Icon, Popup, type LatLngTuple } from 'leaflet'
|
||||||
import markerShadow from "leaflet/dist/images/marker-shadow.png"
|
import markerShadow from "leaflet/dist/images/marker-shadow.png"
|
||||||
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
||||||
import 'leaflet-routing-machine/dist/leaflet-routing-machine.js'
|
import 'leaflet-routing-machine/dist/leaflet-routing-machine.js'
|
||||||
@ -33,6 +35,11 @@ const metadata = {
|
|||||||
|
|
||||||
const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
|
const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
|
||||||
|
|
||||||
|
// const BACK_URL = "https://drink-tweb.cb85.fr/"
|
||||||
|
const BACK_URL = "http://localhost:3001/"
|
||||||
|
|
||||||
|
let mapsCenter : L.LatLngTuple
|
||||||
|
|
||||||
// declare map
|
// declare map
|
||||||
const map = L.map('map', {
|
const map = L.map('map', {
|
||||||
center: [51.5, -0.09],
|
center: [51.5, -0.09],
|
||||||
@ -57,9 +64,7 @@ const metadata = {
|
|||||||
// L.latLng(47.218536, -1.554075)
|
// L.latLng(47.218536, -1.554075)
|
||||||
// ],
|
// ],
|
||||||
routeWhileDragging: true,
|
routeWhileDragging: true,
|
||||||
//@ts-ignore
|
|
||||||
geocoder: L.Control.Geocoder.nominatim(),
|
geocoder: L.Control.Geocoder.nominatim(),
|
||||||
//@ts-ignore
|
|
||||||
position: 'topleft',
|
position: 'topleft',
|
||||||
showAlternatives: true,
|
showAlternatives: true,
|
||||||
reverseWaypoints: true,
|
reverseWaypoints: true,
|
||||||
@ -79,6 +84,7 @@ const metadata = {
|
|||||||
console.log("route trouvé")
|
console.log("route trouvé")
|
||||||
console.log(e)
|
console.log(e)
|
||||||
})
|
})
|
||||||
|
const pouet = "pouet"
|
||||||
document.querySelector<HTMLButtonElement>('#test-btn')?.addEventListener('click', () => {
|
document.querySelector<HTMLButtonElement>('#test-btn')?.addEventListener('click', () => {
|
||||||
routing.setWaypoints(
|
routing.setWaypoints(
|
||||||
[L.latLng(46.6705431, -1.4269698),L.latLng(47.218536, -1.554075)]
|
[L.latLng(46.6705431, -1.4269698),L.latLng(47.218536, -1.554075)]
|
||||||
|
@ -2,110 +2,45 @@
|
|||||||
import Layout from 'layouts/PageLayout.astro'
|
import Layout from 'layouts/PageLayout.astro'
|
||||||
import 'leaflet/dist/leaflet.css'
|
import 'leaflet/dist/leaflet.css'
|
||||||
import 'leaflet-geosearch/dist/geosearch.css'
|
import 'leaflet-geosearch/dist/geosearch.css'
|
||||||
import CheckBox from 'components/CheckBox.astro'
|
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'
|
||||||
import Radios from 'components/Radios.astro'
|
import FormContainer from 'components/ui/Form.astro'
|
||||||
import ListResult, { type RecordModel } from 'pocketbase'
|
import Input from 'components/Input.astro'
|
||||||
import { Expand, Trash } from 'lucide-astro'
|
import Button from 'components/ui/Button.astro'
|
||||||
|
|
||||||
const pb = Astro.locals.pb
|
|
||||||
const connected = pb.authStore.isValid
|
|
||||||
|
|
||||||
const metadata = {
|
const metadata = {
|
||||||
title: 'Maps',
|
title: 'Maps',
|
||||||
ignoreTitleTemplate: true,
|
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}>
|
<Layout metadata={metadata}>
|
||||||
|
|
||||||
<div class="h-[calc(100vh-5rem)] flex flex-row">
|
<div class="h-[calc(100vh-16rem)] flex flex-col">
|
||||||
<div class="w-1/5 flex flex-col">
|
<div class="w-full h-96 grow" id="map" />
|
||||||
<p id="message" class="hidden text-center mb-3">pouet</p>
|
|
||||||
<p class="text-center text-2xl mb-3">Filtre :</p>
|
|
||||||
<div class="">
|
|
||||||
<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="filter"
|
|
||||||
value="drink"
|
|
||||||
checked
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3 grow">
|
|
||||||
<p class="text-center text-xl mb-3">Source :</p>
|
<script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
|
||||||
<CheckBox
|
|
||||||
label="Open Trip Maps"
|
|
||||||
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 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 -->
|
<!-- for remouve footer -->
|
||||||
<div slot="footer"></div>
|
<!-- <div slot="footer"></div> -->
|
||||||
<!-- penser a rm 11 au rem au dessus pour la taille -->
|
<!-- penser a rm 11 au rem au dessus pour la taille -->
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import L, {Popup} from 'leaflet'
|
import L, { geoJSON, Icon, Popup, type LatLngTuple } from 'leaflet'
|
||||||
import markerShadow from "leaflet/dist/images/marker-shadow.png"
|
import markerShadow from "leaflet/dist/images/marker-shadow.png"
|
||||||
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
||||||
import { OpenStreetMapProvider } from 'leaflet-geosearch'
|
import { OpenStreetMapProvider } from 'leaflet-geosearch'
|
||||||
import { GeoSearchControl } from 'leaflet-geosearch'
|
import { GeoSearchControl } from 'leaflet-geosearch'
|
||||||
|
import 'leaflet-routing-machine/dist/leaflet-routing-machine.js'
|
||||||
const showFav = document.querySelectorAll(".poi-favori")
|
import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
|
||||||
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 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 = "https://drink-tweb.cb85.fr/"
|
||||||
const BACK_URL = "https://drink-tweb.cb85.fr/" //XXX : mettre url de prod
|
const BACK_URL = "http://localhost:3001/"
|
||||||
|
|
||||||
|
let mapsCenter : L.LatLngTuple
|
||||||
|
|
||||||
// declare map
|
// declare map
|
||||||
const map = L.map('map', {
|
const map = L.map('map', {
|
||||||
@ -122,7 +57,8 @@ console.log(fav);
|
|||||||
// move zoom ctl to bottom
|
// move zoom ctl to bottom
|
||||||
L.control.zoom({
|
L.control.zoom({
|
||||||
position: 'bottomleft'
|
position: 'bottomleft'
|
||||||
}).addTo(map)
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
const provider = new OpenStreetMapProvider()
|
const provider = new OpenStreetMapProvider()
|
||||||
|
|
||||||
@ -135,89 +71,64 @@ console.log(fav);
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
async function saveToFav(element: any, save: boolean){
|
L.Routing.control({
|
||||||
const url = '/maps/save_poi';
|
routeWhileDragging: true,
|
||||||
const options = {
|
geocoder: L.Control.Geocoder.nominatim(),
|
||||||
method: 'POST',
|
position: 'topleft',
|
||||||
body: JSON.stringify({Poi : element, save: save})
|
showAlternatives: true,
|
||||||
};
|
reverseWaypoints: true,
|
||||||
|
routeWhileDragging: true,
|
||||||
try {
|
altLineOptions: {
|
||||||
const response = await fetch(url, options);
|
missingRouteTolerance: 50,
|
||||||
const data = await response.json();
|
extendToWaypoints: true,
|
||||||
console.log(data);
|
styles: [
|
||||||
} catch (error) {
|
{color: 'black', opacity: 0.15, weight: 9},
|
||||||
console.error(error);
|
{color: 'white', opacity: 0.2, weight: 6},
|
||||||
|
{color: 'blue', opacity: 5, weight: 2}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}).addTo(map).on('routeselected', (e) => {
|
||||||
|
console.log(e)
|
||||||
function eventGotoFav(e: Element){
|
}).on('routesfound', () =>{
|
||||||
e.addEventListener('click', () =>{
|
console.log("test")
|
||||||
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 poiMarkers = new Array<L.Marker>
|
||||||
let minimalNote = "1"
|
|
||||||
let drink = true
|
|
||||||
let otm = true
|
|
||||||
|
|
||||||
// run api search
|
// run api search
|
||||||
function searchBox(){
|
function searchBox(){
|
||||||
const nordWest = map.getBounds().getNorthWest()
|
const nordWest = map.getBounds().getNorthWest()
|
||||||
const southEast = map.getBounds().getSouthEast()
|
const southEast = map.getBounds().getSouthEast()
|
||||||
const params: URLSearchParams = new URLSearchParams()
|
const params: URLSearchParams = new URLSearchParams();
|
||||||
|
|
||||||
params.append("lon1", nordWest.lng.toString())
|
params.append("lon1", nordWest.lng.toString())
|
||||||
params.append("lat1", nordWest.lat.toString())
|
params.append("lat1", nordWest.lat.toString())
|
||||||
params.append("lon2", southEast.lng.toString())
|
params.append("lon2", southEast.lng.toString())
|
||||||
params.append("lat2", southEast.lat.toString())
|
params.append("lat2", southEast.lat.toString())
|
||||||
params.append("rate", minimalNote)
|
|
||||||
|
|
||||||
if(drink && otm){
|
|
||||||
fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
|
fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
|
||||||
return response.json()
|
return response.json();
|
||||||
}).then(function (data) {
|
}).then(function (data) {
|
||||||
poiMarkers.forEach(element => {
|
poiMarkers.forEach(element => {
|
||||||
element.remove()
|
element.remove();
|
||||||
})
|
});
|
||||||
console.log(data)
|
|
||||||
data.features.forEach(element => {
|
data.features.forEach(element => {
|
||||||
const prop = element.properties
|
const prop = element.properties
|
||||||
const popup: Popup = new Popup()
|
const popup: Popup = new Popup()
|
||||||
let tags = new String()
|
let tags = new String()
|
||||||
prop.kinds.split(",").forEach(element => {
|
prop.kinds.split(",").forEach(element => {
|
||||||
tags += "- " + element + "<br/>"
|
tags += "- " + element + "<br/>"
|
||||||
})
|
});
|
||||||
const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon)
|
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 : <input type="checkbox" name="like" id=${element.id}/><p>`)
|
.bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags}`)
|
||||||
.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)
|
poiMarker.addTo(map)
|
||||||
poiMarkers.push(poiMarker)
|
poiMarkers.push(poiMarker);
|
||||||
})
|
});
|
||||||
}).catch(function (err) {
|
}).catch(function (err) {
|
||||||
console.warn('Something went wrong.', err)
|
console.warn('Something went wrong.', err);
|
||||||
})
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// fonciton pour lancer la recherche de box sur l'api
|
// fonciton pour lancer la recherche de box sur l'api
|
||||||
@ -225,57 +136,52 @@ console.log(fav);
|
|||||||
if(map.getZoom() >= 13){
|
if(map.getZoom() >= 13){
|
||||||
console.log("zoom OKAY")
|
console.log("zoom OKAY")
|
||||||
//TODO: mettre un message de recherche en cour
|
//TODO: mettre un message de recherche en cour
|
||||||
searchBox()
|
searchBox();
|
||||||
}else{
|
}else{
|
||||||
console.log("zoom more to see result")
|
console.log("zoom more to see result");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// envent pour lancer la recherche
|
// envent pour lancer la recherche
|
||||||
const cooldown = 400
|
const cooldown = 1000;
|
||||||
sender()
|
sender()
|
||||||
let timeoutHandle = window.setTimeout(sender, cooldown)
|
let timeoutHandle = window.setTimeout(sender, cooldown)
|
||||||
|
|
||||||
window.clearTimeout(timeoutHandle)
|
window.clearTimeout(timeoutHandle);
|
||||||
|
|
||||||
map.addEventListener("move",() =>{
|
map.addEventListener("move",() =>{
|
||||||
window.clearTimeout(timeoutHandle)
|
window.clearTimeout(timeoutHandle);
|
||||||
timeoutHandle = window.setTimeout(sender, cooldown)
|
timeoutHandle = window.setTimeout(sender, cooldown);
|
||||||
})
|
})
|
||||||
|
|
||||||
map.addEventListener("zoom", () => {
|
map.addEventListener("zoom", () => {
|
||||||
if(map.getZoom() <= 11){
|
if(map.getZoom() <= 11){
|
||||||
poiMarkers.forEach(element => {
|
poiMarkers.forEach(element => {
|
||||||
element.remove()
|
element.remove()
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
document.querySelectorAll<HTMLInputElement>("input[name='filter']").forEach(e =>{
|
function search() {
|
||||||
e.addEventListener("click", () => {
|
const params: URLSearchParams = new URLSearchParams();
|
||||||
switch (e.value) {
|
params.append("name", input!.value)
|
||||||
case "drink":
|
|
||||||
drink = e.checked
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "otm":
|
fetch(`${BACK_URL}otm/city?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
|
||||||
otm = e.checked
|
// The API call was successful!
|
||||||
break;
|
return response.json();
|
||||||
|
}).then(function (data) {
|
||||||
default:
|
console.log(data);
|
||||||
break;
|
mapsCenter = [data.lat, data.lon]
|
||||||
|
marker.setLatLng(mapsCenter)
|
||||||
|
map.setView(mapsCenter)
|
||||||
|
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)
|
||||||
|
});
|
||||||
|
}).catch(function (err) {
|
||||||
|
console.warn('Something went wrong.', err);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
poiMarkers.forEach(element => {
|
|
||||||
element.remove()
|
|
||||||
})
|
|
||||||
searchBox()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
document.querySelectorAll<HTMLInputElement>('input[name="note-min"]').forEach(e => {
|
|
||||||
e.addEventListener("click", () => {
|
|
||||||
minimalNote = e.value
|
|
||||||
searchBox()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,47 +0,0 @@
|
|||||||
---
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
---
|
|
4
front/src/types.d.ts
vendored
4
front/src/types.d.ts
vendored
@ -162,15 +162,13 @@ export interface Testimonial {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface Input {
|
export interface Input {
|
||||||
type?: HTMLInputTypeAttribute
|
type: HTMLInputTypeAttribute
|
||||||
name: string
|
name: string
|
||||||
label?: string
|
label?: string
|
||||||
autocomplete?: string
|
autocomplete?: string
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
divClass?: string
|
divClass?: string
|
||||||
inputClass?: string
|
inputClass?: string
|
||||||
checked?: bool
|
|
||||||
value?:string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Textarea {
|
export interface Textarea {
|
||||||
|
Reference in New Issue
Block a user