77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const queryString = ref("la tour eiffel")
|
|
let selectedPoi = {}
|
|
|
|
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]})
|
|
|
|
function selectPoi(poi) {
|
|
selectedPoi = poi;
|
|
}
|
|
|
|
computed : {
|
|
poi_list : data.features
|
|
}
|
|
|
|
</script>
|
|
|
|
<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>
|
|
<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">
|
|
<button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white"
|
|
type="submit"
|
|
@click="useAsyncData()">
|
|
Rechercher
|
|
</button>
|
|
<div v-if="pending"> Loading ...</div>
|
|
<div v-if="data?.features.length"> {{data.features.length}} résultats
|
|
|
|
Fetch result:
|
|
<div v-for="elem in data.features" :key="elem.properties.id">
|
|
|
|
<button
|
|
class="bg-slate-900 text-slate-100 rounded-md font-medium leading-6 py-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>
|
|
<br>
|
|
<span class="text-sm">
|
|
{{elem.properties.poi}}
|
|
{{elem.properties.city}}
|
|
{{elem.properties.citycode}}
|
|
{{elem.properties.context}}
|
|
</span>
|
|
</button>
|
|
<!-- {{elem.properties.label}}-->
|
|
|
|
</div>
|
|
<!-- <pre class="text-left"><code>{{ data }}</code></pre>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|