display list of fetched choices

This commit is contained in:
Tykayn 2023-03-02 13:48:56 +01:00 committed by tykayn
parent 63dc24551b
commit 9ed186a06c
6 changed files with 121 additions and 36 deletions

1
.gitignore vendored
View File

@ -6,6 +6,7 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.yarn
# Runtime data # Runtime data
pids pids

View File

@ -4,29 +4,16 @@
<main class="bg-neutral-200"> <main class="bg-neutral-200">
<div class="IBMPlexMono-SemiBold_font__QEQVx p-6 w-3/4 m-auto min-w-max"> <div class="IBMPlexMono-SemiBold_font__QEQVx p-6 w-3/4 m-auto min-w-max">
<h1 class="text-slate-900 text-5xl tracking-tight font-extrabold">OSM My commerce</h1> <h1 class="text-slate-900 text-5xl tracking-tight font-extrabold"> OSM My commerce</h1>
<h2 class="text-slate-900 text-2xl mb-10"> <h2 class="text-slate-900 text-2xl mb-10">
Renseignez votre commerce sur OSM Renseignez votre commerce sur OSM
</h2> </h2>
<SearchLand />
<img src="/img/OSM-FR.svg" alt="OSM fr" width="3em" height="3em"/> <img class="mt-10" src="/img/OSM-FR.svg" alt="OSM fr" width="3em" height="3em"/>
<img class="rounded-2xl" src="/img/carte_demo.png" alt="carte"/> <img class="rounded-2xl" src="/img/carte_demo.png" alt="carte"/>
<div class="card mt-10">
<p> <PoiForm />
<label for="search_poi" class="text-4xl font-bold">
Effectuer une recherche
</label>
</p>
<input id="search_poi"
type="search"
class="h-10 px-6 rounded-md border-2"
placeholder="tour eiffel"
autofocus="autofocus">
<button class="h-10 px-6 rounded-md bg-black text-white" type="submit">
Rechercher
</button>
</div>
</div> </div>
</main> </main>

View File

@ -2,7 +2,10 @@
<template> <template>
<div> <div>
Component: AppFooter OSM My Commerce par Tykayn
<a href="https://forge.chapril.org/tykayn/osm_my_commerce">
sources
</a>
</div> </div>
</template> </template>

View File

@ -1,25 +1,19 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<nav class="bg-lime-900 p-1 px-6"> <nav class="bg-lime-900 p-1 px-6">
<h1 class="font-semibold text-gray-50" >Menu</h1> <h1 class="font-semibold text-gray-50"> Menu</h1>
<ul class="text-center li-inline">
<ul class="text-center li-inline"> <li>
<li> <NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/about">About</NuxtLink>
</li>
<NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/about">About</NuxtLink> <li>
</li> <NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/research">research</NuxtLink>
<li> </li>
<li>
<NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/research">research</NuxtLink> <NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/index">index</NuxtLink>
</li> </li>
<li> </ul>
<NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/index">index</NuxtLink>
</li>
</ul>
</nav> </nav>
</template> </template>

View File

@ -0,0 +1,24 @@
<template>
<div>
<h1 class="text-5xl">
Formulaire de POi
</h1>
<form @submit="submitForm">
<input type="text" v-model="machin">
<button type="submit" value="envoyer" />
</form>
</div>
</template>
<script lang="ts" setup>
const data = {
name: 'machin'
}
const methods = {
submitForm(event:Event){
event.preventDefault()
console.log('submit')
}
}
</script>
<style scoped></style>

View File

@ -0,0 +1,76 @@
<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>