feat(search): also on osm api

components/SearchInput.vue

@@ -1,53 +1,89 @@
 <template>
   <main>
     <section>
-      <!--    <p class="content"><b>Selected:</b> {{ selected }}</p>-->
+      Résultats possibles: {{ data.length }}
+      <div v-if="select && select.properties" class="selected">
+        <p class="content"><b>Selected:</b> {{ select.properties.name }}</p>
+      </div>
+
       <b-field label="Trouver mon Commerce par nom ou par SIREN">
         <b-autocomplete
+          v-model="searchQuery"
           :data="data"
           placeholder="ex: Chambre du commerce d'Evry"
           field="title"
           :loading="isFetching"
           icon="magnify"
+          autofocus="autofocus"
           @typing="getAsyncData"
-          @select="(option) => (selected = option)"
+          @select="
+            (option) => {
+              selectChoice(option)
+            }
+          "
         >
-          <!--          <template slot-scope="props">-->
+          <template slot-scope="props">
-          <!--            <div class="media">-->
+            <div class="media">
-          <!--              <div class="media-left"></div>-->
+              <div class="media-left"></div>
-          <!--              <div class="media-content">-->
+              <div class="media-content">
-          <!--                {{ props.name }}-->
+                <h2>
-          <!--                <br />-->
+                  {{ props.option.properties.name }}
-          <!--                <small>-->
+                </h2>
-          <!--                  Released at {{ props.option.release_date }}, rated-->
-          <!--                  <b>{{ props.option.vote_average }}</b>-->
-          <!--                </small>-->
-          <!--              </div>-->
-          <!--            </div>-->
-          <!--          </template>-->
-        </b-autocomplete>
-      </b-field>
-      Résultats possibles: {{ data.length }}
-      <div v-if="data.length">
-        <ul>
-          <li v-for="item in data" :key="item.properties.id">
                 <div class="columns">
                   <div class="column">
-                {{ item.properties.name }}
+                    <strong v-if="props.option.properties.poi">
+                      {{ props.option.properties.poi }}
+                    </strong>
                   </div>
                   <div class="column">
-                {{ item.properties.context }}
+                    {{ props.option.properties.context }}
+                  </div>
+                  <div class="column">
+                    {{ props.option.properties.type }}
                   </div>
                 </div>
-          </li>
+              </div>
-        </ul>
+            </div>
+          </template>
+        </b-autocomplete>
+      </b-field>
+
+      <div v-if="data.length">
+        <!--        <ul>-->
+        <!--          <li-->
+        <!--            v-for="item in data"-->
+        <!--            :key="item.properties.id"-->
+        <!--            class="clickable"-->
+        <!--            @click="-->
+        <!--              (event) => {-->
+        <!--                select = item-->
+        <!--                selectChoice(item)-->
+        <!--              }-->
+        <!--            "-->
+        <!--          >-->
+        <!--            <div class="columns">-->
+        <!--              <div class="column">-->
+        <!--                <strong>-->
+        <!--                  {{ item.properties.name }}-->
+        <!--                </strong>-->
+        <!--              </div>-->
+        <!--              <div class="column">-->
+        <!--                {{ item.properties.context }}-->
+        <!--              </div>-->
+        <!--              <div class="column">-->
+        <!--                {{ item.properties.type }}-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </li>-->
+        <!--        </ul>-->
       </div>
     </section>
     <section class="map">
       <br />
-      <img src="~assets/carte_demo.png" alt="logo osm" />
+      ( ici une carte )
+      <!--      <img src="~assets/carte_demo.png" alt="logo osm" />-->
     </section>
-    <section v-if="mockAddok" class="result">
+    <section v-if="select && select.properties" class="result">
       <div class="card-content">
         <div class="media">
           <div class="media-left">
@@ -60,38 +96,33 @@
           </div>
           <div class="media-content">
             <p class="title is-4">
-              {{ mockAddok.features[0].properties.denominationunitelegale }}
+              {{ select.properties.denominationunitelegale }}
-              | {{ mockAddok.features[0].properties.enseigne1etablissement }}
+              | {{ select.properties.enseigne1etablissement }}
             </p>
             <p class="subtitle is-6">
-              {{ mockAddok.features[0].properties.context }}
+              {{ select.properties.context }}
             </p>
             <p class="title is-6">
-              {{ mockAddok.features[0].properties.longitude }} ,
+              {{ select.properties.longitude }} ,
-              {{ mockAddok.features[0].properties.latitude }}
+              {{ select.properties.latitude }}
             </p>
           </div>
         </div>
 
         <div class="content">
           NAF:
-          {{
+          {{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
-            mockAddok.features[0].properties
+          siret : {{ select.properties.siret }}
-              .nomenclatureactiviteprincipaleunitelegale
-          }}
-          siret : {{ mockAddok.features[0].properties.siret }}
           <br />
 
           activité principale
-          {{
+          {{ select.properties.activiteprincipaleetablissement }}, source
-            mockAddok.features[0].properties.activiteprincipaleetablissement
+          {{ select.properties.source }},
-          }}, source {{ mockAddok.features[0].properties.source }},
           <time datetime="2016-1-1">
             enregistré le
-            {{ mockAddok.features[0].properties.anneeeffectifsetablissement }},
+            {{ select.properties.anneeeffectifsetablissement }}, entreprise créé
-            entreprise créé le {{ mockAddok.features[0].properties.datedebut }},
+            le {{ select.properties.datedebut }}, dernirèe mise à jour
-            dernirèe mise à jour
+            {{ select.properties.updated_at }}
-            {{ mockAddok.features[0].properties.updated_at }}
           </time>
         </div>
       </div>
@@ -151,6 +182,39 @@
         {{ xml.tags.opening_hours }}
       </div>
 
+      <section class="comparaison">
+        <h2>Comparaison des tags</h2>
+        <table>
+          <thead>
+            <tr>
+              <td>API OSM</td>
+              <td>API addok</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div v-for="(value, name) in xml.tags" :key="name">
+                  {{ name }} :
+                  {{ value }}
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td v-if="osm_data && osm_data.elements">
+                <div
+                  v-for="(value, name) in osm_data.elements[0].tags"
+                  :key="name"
+                >
+                  {{ name }} :
+                  {{ value }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
       <button class="btn button has-background-success">Enregistrer</button>
     </section>
   </main>
@@ -166,15 +230,17 @@ export default {
   data() {
     return {
       data: [],
+      osm_data: [],
       xml: nodeInfo.default.elements[0],
       mockEntreprise: resultsEntreprise.default,
       mockAddok: resultsAddok.default,
-      selected: null,
+      select: {},
+      searchQuery: 'tour montparnasse',
       isFetching: false,
     }
   },
   mounted() {
-    this.getAsyncData('larome')
+    this.getAsyncData('tour eiffel')
   },
   methods: {
     // You have to install and import debounce to use it,
@@ -212,6 +278,50 @@ export default {
       //     this.isFetching = false
       //   })
     }, 500),
+    selectChoice(option) {
+      console.log('option', option)
+      this.select = option
+      if (option && option.properties.id) {
+        this.getOSMNodeData(option.properties.id)
+      }
+    },
+    getOSMNodeData(url) {
+      if (!url.length) {
+        this.osm_data = []
+      }
+      console.log('url', url)
+      if (url.includes('node')) {
+        const boom = url.split('/')
+        const objectNumber = boom[boom.length - 1]
+        this.isFetching = true
+        this.$axios
+          .get(
+            `https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
+          )
+          .then(({ data }) => {
+            console.log('OSM data', data)
+            this.osm_data = data
+          })
+          .catch((error) => {
+            this.osm_data = []
+            throw error
+          })
+          .finally(() => {
+            this.isFetching = false
+          })
+      } else {
+        console.log('l url donnée n a pas de node ', url)
+      }
+    },
   },
 }
 </script>
+<style>
+.clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  background: #d8e9ba;
+}
+</style>

mocks/addok.js

@@ -1,72 +1,109 @@
 // example response
 export default {
-  source: 'SIRENE / INSEE',
+  type: 'FeatureCollection',
-  derniere_maj: '2020-10-01',
+  version: 'draft',
-  licence: 'Licence Ouverte 2.0',
-  nb_resultats: 1,
-  type: 'Featurecollection',
   features: [
     {
       type: 'Feature',
-      properties: {
-        name: "L'AROME",
-        context: '17 Rue du Docteur Babin 91470 Forges-les-Bains',
-        siren: '803240084',
-        nic: '00019',
-        siret: '80324008400019',
-        statutdiffusionetablissement: 'O',
-        datecreationetablissement: '2014-07-02',
-        trancheeffectifsetablissement: '03',
-        anneeeffectifsetablissement: '2018',
-        datederniertraitementetablissement: '2020-08-25T11:13:11',
-        etablissementsiege: 'true',
-        nombreperiodesetablissement: '2',
-        numerovoieetablissement: '17',
-        typevoieetablissement: 'RUE',
-        libellevoieetablissement: 'DU DOCTEUR BABIN',
-        codepostaletablissement: '91470',
-        libellecommuneetablissement: 'FORGES-LES-BAINS',
-        codecommuneetablissement: '91249',
-        datedebut: '2018-09-01',
-        etatadministratifetablissement: 'A',
-        enseigne1etablissement: "L'AROME",
-        denominationusuelleetablissement: "L'AROME",
-        activiteprincipaleetablissement: '56.10A',
-        nomenclatureactiviteprincipaleetablissement: 'NAFRev2',
-        caractereemployeuretablissement: 'O',
-        longitude: 2.101847,
-        latitude: 48.627719,
-        geo_score: 0.94,
-        geo_type: 'housenumber',
-        geo_adresse: '17 Rue du Docteur Babin 91470 Forges-les-Bains',
-        geo_id: '91249_0130_00017',
-        geo_ligne: 'G',
-        geo_l4: '17 RUE DU DOCTEUR BABIN',
-        geom: {
-          type: 'Point',
-          coordinates: [2.101847, 48.627719],
-        },
-        statutdiffusionunitelegale: 'O',
-        datecreationunitelegale: '2014-07-02',
-        trancheeffectifsunitelegale: '03',
-        anneeeffectifsunitelegale: '2018',
-        datederniertraitementunitelegale: '2020-08-25T11:13:11',
-        nombreperiodesunitelegale: '3',
-        categorieentreprise: 'PME',
-        anneecategorieentreprise: '2018',
-        etatadministratifunitelegale: 'A',
-        denominationunitelegale: 'FURCIA',
-        categoriejuridiqueunitelegale: '5710',
-        activiteprincipaleunitelegale: '56.10A',
-        nomenclatureactiviteprincipaleunitelegale: 'NAFRev2',
-        nicsiegeunitelegale: '00019',
-        economiesocialesolidaireunitelegale: 'N',
-        caractereemployeurunitelegale: 'O',
-      },
       geometry: {
         type: 'Point',
-        coordinates: [2.101847, 48.627719],
+        coordinates: [2.2930286, 48.8599019],
+      },
+      properties: {
+        label: 'Tour-Eiffel (Terminal de ferry) Paris',
+        score: 0.8272727272727273,
+        id: 'https://osm.org/node/4532598850',
+        type: 'poi',
+        poi: 'ferry_terminal',
+        name: 'Tour-Eiffel (Terminal de ferry)',
+        city: 'Paris',
+        citycode: '75056',
+        context: 'Paris, Île-de-France',
+        importance: 0.1,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [2.294499, 48.8582609],
+      },
+      properties: {
+        label: 'Tour Eiffel (Patrimoine national) Paris',
+        score: 0.8256748866716437,
+        id: 'https://osm.org/way/5013364',
+        type: 'poi',
+        poi: '3',
+        name: 'Tour Eiffel (Patrimoine national)',
+        city: 'Paris',
+        citycode: '75056',
+        context: 'Paris, Île-de-France',
+        importance: 0.08242375338808132,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [2.2944981, 48.8582612],
+      },
+      properties: {
+        label: 'Tour Eiffel 2e étage (Point de vue) Paris',
+        score: 0.8234125145631099,
+        id: 'https://osm.org/relation/4114842',
+        type: 'poi',
+        poi: 'viewpoint',
+        name: 'Tour Eiffel 2e étage (Point de vue)',
+        city: 'Paris',
+        citycode: '75056',
+        context: 'Paris, Île-de-France',
+        importance: 0.05753766019421038,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [2.294497, 48.858262],
+      },
+      properties: {
+        label: 'Tour Eiffel 3e étage (Point de vue) Paris',
+        score: 0.8230710683162721,
+        id: 'https://osm.org/relation/4114841',
+        type: 'poi',
+        poi: 'viewpoint',
+        name: 'Tour Eiffel 3e étage (Point de vue)',
+        city: 'Paris',
+        citycode: '75056',
+        context: 'Paris, Île-de-France',
+        importance: 0.053781751478993375,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [7.1975933, 47.9235422],
+      },
+      properties: {
+        label: "Tour Eiffel miniature (Œuvre d'art) Buhl",
+        score: 0.8227272727272726,
+        id: 'https://osm.org/node/6511604415',
+        type: 'poi',
+        poi: 'artwork',
+        name: "Tour Eiffel miniature (Œuvre d'art)",
+        city: 'Buhl',
+        citycode: '68058',
+        context: 'Haut-Rhin, Grand Est',
+        importance: 0.05,
       },
     },
   ],
+  attribution: 'BANO+OSM POI',
+  licence: 'ODbL 1.0',
+  query: 'tour eiffel',
+  filters: {
+    type: 'poi',
+  },
+  limit: 5,
 }

mocks/tour_eiffel_osm_api.js

@@ -0,0 +1,33 @@
+export default {
+  version: '0.6',
+  generator: 'CGImap 0.8.3 (1572842 spike-08.openstreetmap.org)',
+  copyright: 'OpenStreetMap and contributors',
+  attribution: 'http://www.openstreetmap.org/copyright',
+  license: 'http://opendatacommons.org/licenses/odbl/1-0/',
+  elements: [
+    {
+      type: 'node',
+      id: 1801503207,
+      lat: 48.8429112,
+      lon: 2.3235502,
+      timestamp: '2018-10-23T19:35:44Z',
+      version: 4,
+      changeset: 63808506,
+      user: 'tiguillom',
+      uid: 704748,
+      tags: {
+        access: 'yes',
+        amenity: 'parking',
+        fee: 'yes',
+        layer: '-1',
+        name: 'Tour Montparnasse',
+        opening_hours: '24/7',
+        operator: 'InterParking Group',
+        parking: 'underground',
+        'payment:bank_card': 'yes',
+        'payment:cash': 'yes',
+        supervised: 'yes',
+      },
+    },
+  ],
+}