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

display poi results

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"> <script setup lang="ts">
const queryString = ref("la tour eiffel") const queryString = ref("la tour eiffel")
let selectedPoi = {} let selectedPoi = {}
const {data, pending, refresh} = await useAsyncData(() => { const {data, pending, refresh} = await useAsyncData(() => {
if (queryString.value.length > 3) { 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]}) {watch: [queryString]})
@ -28,29 +30,35 @@
sélectionné: {{selectedPoi.label}} sélectionné: {{selectedPoi.label}}
<input type="text" v-model="selectedPoi.name"> <input type="text" v-model="selectedPoi.name">
</div> </div>
<label for="search_poi" class="text-4xl font-bold"> <div class="search-form">
<!-- Effectuer une recherche-->
🔍 <label for="search_poi" class="text-4xl font-bold">
</label> <!-- Effectuer une recherche-->
<input id="search_poi" 🔍
type="search" </label>
class="h-10 px-6 rounded-md border-2" <input id="search_poi"
placeholder="tour eiffel" type="search"
autofocus="autofocus" class="h-10 px-6 rounded-md border-2"
v-model="queryString"> placeholder="tour eiffel"
<button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white" autofocus="autofocus"
type="submit" v-model="queryString">
@click="useAsyncData()"> <button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white"
Rechercher type="submit"
</button> @click="useAsyncData()">
<div v-if="pending"> Loading ...</div> Rechercher
<div v-if="data?.features.length"> {{data.features.length}} résultats </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"> <div v-for="elem in data.features" :key="elem.properties.id">
<button <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)"> @click="selectPoi(elem)">
<span class="text-md"> <span class="text-md">
@ -70,6 +78,7 @@
<!-- <pre class="text-left"><code>{{ data }}</code></pre>--> <!-- <pre class="text-left"><code>{{ data }}</code></pre>-->
</div> </div>
</div> </div>
</div> </div>
</template> </template>