get osm node data in object

osm_my_commerce/app.vue

@@ -9,12 +9,6 @@
           Renseignez votre commerce sur OSM
         </h2>
         <SearchLand />
-
-        <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"/>
-
-        <PoiForm />
-
       </div>
     </main>
   </div>

osm_my_commerce/components/PoiForm.vue

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

@@ -1,22 +1,40 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 
-  const queryString = ref("la tour eiffel")
+  import {Ref} from "#imports";
-  let selectedPoi = {}
 
+  const queryString: Ref<String> = ref("la tour eiffel")
+  let selectedPoi: any = ref({})
 
-  const {data, pending, refresh} = await useAsyncData(() => {
+  let osmNodeData = {};
-      if (queryString.value.length > 3) {
-        return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
-      }
-    },
-    {watch: [queryString]})
 
-  function selectPoi(poi) {
+  const {data, refresh, pending} = await useAsyncData('/api/hello',
-    selectedPoi = poi;
+    () => $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`),
+    {watch: [queryString] })
+
+  function setPoi(newPoi){
+    selectedPoi = newPoi
+  }
+  function submitForm(){
+    console.log('envoi du form')
   }
 
-  computed : {
+  async function getOSMNodeData(url:string) {
-    poi_list : data.features
+    if (!url.length) {
+      this.fetchedData.osm_data = []
+    }
+    console.log('url', url)
+    if (url.includes('node')) {
+      const boom = url.split('/')
+      const objectNumber = boom[boom.length - 1]
+       let response = await useAsyncData('/api/hello',
+        () => $fetch(`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`))
+      osmNodeData = response.data._rawValue.elements[0]
+      console.log('osmNodeData', osmNodeData )
+
+
+    } else {
+      console.log('l url donnée n a pas de node ', url)
+    }
   }
 
 </script>
@@ -24,14 +42,7 @@
 <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>
       <div class="search-form">
-
         <label for="search_poi" class="text-4xl font-bold">
           <!--          Effectuer une recherche-->
           🔍
@@ -42,43 +53,106 @@
                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>
+        <span class="mx-2" v-if="data">
+          {{data?.features?.length}} résultats
+        </span>
       </div>
-      <div class="my-2">
+      <div class="my-2" >
 
 
-        <div v-for="elem in data.features" :key="elem.properties.id">
+        <div v-for="poiFeatures in data?.features" :key="poiFeatures.id" >
 
           <button
-            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"
+            class="bg-slate-600 hover:bg-slate-700
-            @click="selectPoi(elem)">
+            text-slate-100 rounded-md
-            <span class="text-md">
+             font-medium py-1 mb-1 ring-1
+             ring-inset ring-slate-900/5
+             text-left p-2 px-4 w-1/2"
+            :class="{'bg-slate-900': poiFeatures.id === selectedPoi?.id}"
+            @click="selectedPoi = poiFeatures">
+                  <span class="text-md">
 
-            {{elem.properties.name}}
+                  ✏️ {{poiFeatures.properties.name}}
-            </span>
+                  </span>
             <br>
-            <span class="text-sm">
+                        <span class="text-sm">
-          {{elem.properties.poi}}
+                            {{poiFeatures.properties.poi}}
-          {{elem.properties.city}}
+                            {{poiFeatures.properties.city}}
-          {{elem.properties.citycode}}
+                            {{poiFeatures.properties.citycode}}
-          {{elem.properties.context}}
+                            {{poiFeatures.properties.context}}
-            </span>
+                              </span>
           </button>
-          <!--          {{elem.properties.label}}-->
 
         </div>
-        <!--        <pre class="text-left"><code>{{ data }}</code></pre>-->
       </div>
     </div>
 
+    <section>
+      <div class="selectedPoi bg-slate-400 p-4" v-if="selectedPoi.properties">
+        <!--        <PoiForm :currentPoi="selectedPoi"/>-->
+                <h1 class="text-5xl">
+
+        Point d'intérêt sélectionné
+                </h1>
+
+                <form @submit="submitForm"  v-if="selectedPoi.properties?.name">
+                  <label for="prop_name" class="font-medium">Nom</label>
+                  <input
+                    class="p-4 rounded w-full h-10 mb-10"
+                    id="prop_name"
+                    type="text" v-model="selectedPoi.properties.name">
+
+
+                  <input class="bg-slate-800  text-white rounded my-4 p-4 w-full" type="submit" value="modifier"/>
+                </form>
+<div>
+
+        <a  class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"  :href="selectedPoi.properties?.id">
+          🗺️ voir ce point sur OpenStreetMap</a>
+</div>
+        <div  class="w-full">
+
+        <p>
+          Lat , Lon:
+          {{selectedPoi?.geometry?.coordinates[0]}},
+          {{selectedPoi?.geometry?.coordinates[1]}}
+        </p>
+
+        </div>
+        <!--        <div class="debug">-->
+
+        <!--          sélectionné:-->
+<!--                  <pre>-->
+<!--                  {{selectedPoi}}-->
+<!--                  </pre>-->
+        <!--        </div>-->
+      </div>
+
+<!--      debug:-->
+
+<!--      <pre>-->
+<!--                  {{data}}-->
+<!--                  </pre>-->
+
+    </section>
+
+    <section>
+      <button class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"
+              @click="getOSMNodeData('https://osm.org/node/330414112')">
+
+      Get OSM data example
+      </button>
+
+      <div class="node-data" v-if="osmNodeData">
+        <pre>
+          {{osmNodeData}}
+        </pre>
+      </div>
+    </section>
+
   </div>
 </template>
 

osm_my_commerce/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.4.1",
+    "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.13",
     "nuxt": "^3.2.3",
     "postcss": "^8.4.21",

osm_my_commerce/yarn.lock

@@ -1544,6 +1544,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/typography@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "@tailwindcss/typography@npm:0.5.9"
+  dependencies:
+    lodash.castarray: ^4.4.0
+    lodash.isplainobject: ^4.0.6
+    lodash.merge: ^4.6.2
+    postcss-selector-parser: 6.0.10
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: b98e21bdd1798d7e4683499893c5c20ad43fcc8955d5d6eefbe1d30e98e9b6c28949ae8f276d39be9a66fafe843597717196bc5a0a2ac0f87ef86aa051ab9611
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -4829,6 +4843,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -4878,6 +4899,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.merge@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "lodash.merge@npm:4.6.2"
+  checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
+  languageName: node
+  linkType: hard
+
 "lodash.pick@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.pick@npm:4.4.0"
@@ -6375,6 +6403,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: 46afaa60e3d1998bd7adf6caa374baf857cc58d3ff944e29459c9a9e4680a7fe41597bd5b755fc81d7c388357e9bf67c0251d047c640a09f148e13606b8a8608
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.11
   resolution: "postcss-selector-parser@npm:6.0.11"
@@ -6787,6 +6825,7 @@ __metadata:
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
     "@nuxtjs/tailwindcss": ^6.4.1
+    "@tailwindcss/typography": ^0.5.9
     autoprefixer: ^10.4.13
     nuxt: ^3.2.3
     postcss: ^8.4.21