osm_my_commerce/osm_my_commerce/components/SearchLand.vue

160 lines
4.5 KiB
Vue

<script lang="ts" setup>
import {Ref} from "#imports";
const queryString: Ref<String> = ref("la tour eiffel")
let selectedPoi: any = ref({})
let osmNodeData = {};
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')
}
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>
<template>
<div>
<div class="card mt-10">
<div class="search-form">
<label for="search_poi" class="text-4xl font-bold">
<!-- Effectuer une recherche-->
🔍
</label>
<input id="search_poi"
type="search"
class="h-10 px-6 rounded-md border-2"
placeholder="tour eiffel"
autofocus="autofocus"
v-model="queryString">
</div>
<div class="states">
<div v-if="pending"> Loading ...</div>
<span class="mx-2" v-if="data">
{{data?.features?.length}} résultats
</span>
</div>
<div class="my-2" >
<div v-for="poiFeatures in data?.features" :key="poiFeatures.id" >
<button
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">
{{poiFeatures.properties.poi}}
{{poiFeatures.properties.city}}
{{poiFeatures.properties.citycode}}
{{poiFeatures.properties.context}}
</span>
</button>
</div>
</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>
<style scoped></style>