display list of fetched choices

.gitignore

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

osm_my_commerce/app.vue

@@ -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>

osm_my_commerce/components/AppFooter.vue

@@ -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>
 

osm_my_commerce/components/HeaderMenu.vue

@@ -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>
 

osm_my_commerce/components/PoiForm.vue

@@ -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>

osm_my_commerce/components/SearchLand.vue

@@ -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>