display list of fetched choices
This commit is contained in:
parent
63dc24551b
commit
9ed186a06c
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,6 +6,7 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.yarn
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
|
||||
@ -4,29 +4,16 @@
|
||||
<main class="bg-neutral-200">
|
||||
|
||||
<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">
|
||||
Renseignez votre commerce sur OSM
|
||||
</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"/>
|
||||
<div class="card mt-10">
|
||||
|
||||
<p>
|
||||
<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>
|
||||
<PoiForm />
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Component: AppFooter
|
||||
OSM My Commerce par Tykayn
|
||||
<a href="https://forge.chapril.org/tykayn/osm_my_commerce">
|
||||
sources
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,25 +1,19 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<nav class="bg-lime-900 p-1 px-6">
|
||||
<h1 class="font-semibold text-gray-50" >Menu</h1>
|
||||
|
||||
<ul class="text-center li-inline">
|
||||
<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>
|
||||
|
||||
<NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/index">index</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="font-semibold text-gray-50">⛯ Menu</h1>
|
||||
<ul class="text-center li-inline">
|
||||
<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>
|
||||
<NuxtLink class="font-semibold text-gray-50 hover:text-gray-400 duration-100" to="/index">index</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
24
osm_my_commerce/components/PoiForm.vue
Normal file
24
osm_my_commerce/components/PoiForm.vue
Normal 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>
|
||||
76
osm_my_commerce/components/SearchLand.vue
Normal file
76
osm_my_commerce/components/SearchLand.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user