|
|
|
|
@ -1,22 +1,40 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
|
|
|
|
|
const queryString = ref("la tour eiffel")
|
|
|
|
|
let selectedPoi = {}
|
|
|
|
|
import {Ref} from "#imports";
|
|
|
|
|
|
|
|
|
|
const queryString: Ref<String> = ref("la tour eiffel")
|
|
|
|
|
let selectedPoi: any = ref({})
|
|
|
|
|
|
|
|
|
|
const {data, pending, refresh} = await useAsyncData(() => {
|
|
|
|
|
if (queryString.value.length > 3) {
|
|
|
|
|
return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{watch: [queryString]})
|
|
|
|
|
let osmNodeData = {};
|
|
|
|
|
|
|
|
|
|
function selectPoi(poi) {
|
|
|
|
|
selectedPoi = poi;
|
|
|
|
|
const {data, refresh, pending} = await useAsyncData('/api/hello',
|
|
|
|
|
() => $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`),
|
|
|
|
|
{watch: [queryString] })
|
|
|
|
|
|
|
|
|
|
function setPoi(newPoi){
|
|
|
|
|
selectedPoi = newPoi
|
|
|
|
|
}
|
|
|
|
|
function submitForm(){
|
|
|
|
|
console.log('envoi du form')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
computed : {
|
|
|
|
|
poi_list : data.features
|
|
|
|
|
async function getOSMNodeData(url:string) {
|
|
|
|
|
if (!url.length) {
|
|
|
|
|
this.fetchedData.osm_data = []
|
|
|
|
|
}
|
|
|
|
|
console.log('url', url)
|
|
|
|
|
if (url.includes('node')) {
|
|
|
|
|
const boom = url.split('/')
|
|
|
|
|
const objectNumber = boom[boom.length - 1]
|
|
|
|
|
let response = await useAsyncData('/api/hello',
|
|
|
|
|
() => $fetch(`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`))
|
|
|
|
|
osmNodeData = response.data._rawValue.elements[0]
|
|
|
|
|
console.log('osmNodeData', osmNodeData )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
console.log('l url donnée n a pas de node ', url)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
@ -24,14 +42,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="card mt-10">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="selectedPoi" v-if="selectedPoi">
|
|
|
|
|
sélectionné: {{selectedPoi.label}}
|
|
|
|
|
<input type="text" v-model="selectedPoi.name">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="search-form">
|
|
|
|
|
|
|
|
|
|
<label for="search_poi" class="text-4xl font-bold">
|
|
|
|
|
<!-- Effectuer une recherche-->
|
|
|
|
|
🔍
|
|
|
|
|
@ -42,43 +53,106 @@
|
|
|
|
|
placeholder="tour eiffel"
|
|
|
|
|
autofocus="autofocus"
|
|
|
|
|
v-model="queryString">
|
|
|
|
|
<button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white"
|
|
|
|
|
type="submit"
|
|
|
|
|
@click="useAsyncData()">
|
|
|
|
|
Rechercher
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="states">
|
|
|
|
|
<div v-if="pending"> Loading ...</div>
|
|
|
|
|
<span class="mx-2" v-if="data?.features.length"> {{data.features.length}} résultats </span>
|
|
|
|
|
<span class="mx-2" v-if="data">
|
|
|
|
|
{{data?.features?.length}} résultats
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="my-2">
|
|
|
|
|
<div class="my-2" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-for="elem in data.features" :key="elem.properties.id">
|
|
|
|
|
<div v-for="poiFeatures in data?.features" :key="poiFeatures.id" >
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="bg-slate-900 hover:bg-slate-700 text-slate-100 rounded-md font-medium leading-6 py-1 mb-1 ring-1 ring-inset ring-slate-900/5 mx-auto p-2 px-4 w-1/2"
|
|
|
|
|
@click="selectPoi(elem)">
|
|
|
|
|
<span class="text-md">
|
|
|
|
|
|
|
|
|
|
{{elem.properties.name}}
|
|
|
|
|
</span>
|
|
|
|
|
class="bg-slate-600 hover:bg-slate-700
|
|
|
|
|
text-slate-100 rounded-md
|
|
|
|
|
font-medium py-1 mb-1 ring-1
|
|
|
|
|
ring-inset ring-slate-900/5
|
|
|
|
|
text-left p-2 px-4 w-1/2"
|
|
|
|
|
:class="{'bg-slate-900': poiFeatures.id === selectedPoi?.id}"
|
|
|
|
|
@click="selectedPoi = poiFeatures">
|
|
|
|
|
<span class="text-md">
|
|
|
|
|
|
|
|
|
|
✏️ {{poiFeatures.properties.name}}
|
|
|
|
|
</span>
|
|
|
|
|
<br>
|
|
|
|
|
<span class="text-sm">
|
|
|
|
|
{{elem.properties.poi}}
|
|
|
|
|
{{elem.properties.city}}
|
|
|
|
|
{{elem.properties.citycode}}
|
|
|
|
|
{{elem.properties.context}}
|
|
|
|
|
</span>
|
|
|
|
|
<span class="text-sm">
|
|
|
|
|
{{poiFeatures.properties.poi}}
|
|
|
|
|
{{poiFeatures.properties.city}}
|
|
|
|
|
{{poiFeatures.properties.citycode}}
|
|
|
|
|
{{poiFeatures.properties.context}}
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<!-- {{elem.properties.label}}-->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <pre class="text-left"><code>{{ data }}</code></pre>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<div class="selectedPoi bg-slate-400 p-4" v-if="selectedPoi.properties">
|
|
|
|
|
<!-- <PoiForm :currentPoi="selectedPoi"/>-->
|
|
|
|
|
<h1 class="text-5xl">
|
|
|
|
|
|
|
|
|
|
Point d'intérêt sélectionné
|
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
<form @submit="submitForm" v-if="selectedPoi.properties?.name">
|
|
|
|
|
<label for="prop_name" class="font-medium">Nom</label>
|
|
|
|
|
<input
|
|
|
|
|
class="p-4 rounded w-full h-10 mb-10"
|
|
|
|
|
id="prop_name"
|
|
|
|
|
type="text" v-model="selectedPoi.properties.name">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input class="bg-slate-800 text-white rounded my-4 p-4 w-full" type="submit" value="modifier"/>
|
|
|
|
|
</form>
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
<a class="bg-slate-800 text-white rounded mt-10 p-4 w-auto" :href="selectedPoi.properties?.id">
|
|
|
|
|
🗺️ voir ce point sur OpenStreetMap</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full">
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
Lat , Lon:
|
|
|
|
|
{{selectedPoi?.geometry?.coordinates[0]}},
|
|
|
|
|
{{selectedPoi?.geometry?.coordinates[1]}}
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="debug">-->
|
|
|
|
|
|
|
|
|
|
<!-- sélectionné:-->
|
|
|
|
|
<!-- <pre>-->
|
|
|
|
|
<!-- {{selectedPoi}}-->
|
|
|
|
|
<!-- </pre>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- debug:-->
|
|
|
|
|
|
|
|
|
|
<!-- <pre>-->
|
|
|
|
|
<!-- {{data}}-->
|
|
|
|
|
<!-- </pre>-->
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<button class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"
|
|
|
|
|
@click="getOSMNodeData('https://osm.org/node/330414112')">
|
|
|
|
|
|
|
|
|
|
Get OSM data example
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="node-data" v-if="osmNodeData">
|
|
|
|
|
<pre>
|
|
|
|
|
{{osmNodeData}}
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
