tykayn/osm_my_commerce
1
0
Fork 1
Code Issues 4 Pull Requests Projects Releases Wiki Activity

display poi results

Browse Source
This commit is contained in:
Tykayn 2023-03-02 13:58:07 +01:00 committed by tykayn
parent 9ed186a06c
commit 99df39d89a
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
osm_my_commerce/.yarn/install-state.gz
View File

Binary file not shown.

49
osm_my_commerce/components/SearchLand.vue
View File

@ -1,10 +1,12 @@
<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}`)
return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
}
},
{watch: [queryString]})
@ -28,29 +30,35 @@
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
<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">
<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>
</div>
<div class="my-2">
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"
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">
@ -70,6 +78,7 @@
<!-- <pre class="text-left"><code>{{ data }}</code></pre>-->
</div>
</div>
</div>
</template>