feat(search): also on osm api

This commit is contained in:
tykayn 2020-12-19 00:05:38 +01:00 committed by Baptiste Lemoine
parent ef62875a57
commit 97b76c7f35
3 changed files with 291 additions and 111 deletions

View File

@ -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">-->
<!-- <div class="media">-->
<!-- <div class="media-left"></div>-->
<!-- <div class="media-content">-->
<!-- {{ props.name }}-->
<!-- <br />-->
<!-- <small>-->
<!-- 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">
<template slot-scope="props">
<div class="media">
<div class="media-left"></div>
<div class="media-content">
<h2>
{{ props.option.properties.name }}
</h2>
<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>
</ul>
</div>
</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 }}
| {{ mockAddok.features[0].properties.enseigne1etablissement }}
{{ select.properties.denominationunitelegale }}
| {{ 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 }} ,
{{ mockAddok.features[0].properties.latitude }}
{{ select.properties.longitude }} ,
{{ select.properties.latitude }}
</p>
</div>
</div>
<div class="content">
NAF:
{{
mockAddok.features[0].properties
.nomenclatureactiviteprincipaleunitelegale
}}
siret : {{ mockAddok.features[0].properties.siret }}
{{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
siret : {{ select.properties.siret }}
<br />
activité principale
{{
mockAddok.features[0].properties.activiteprincipaleetablissement
}}, source {{ mockAddok.features[0].properties.source }},
{{ select.properties.activiteprincipaleetablissement }}, source
{{ select.properties.source }},
<time datetime="2016-1-1">
enregistré le
{{ mockAddok.features[0].properties.anneeeffectifsetablissement }},
entreprise créé le {{ mockAddok.features[0].properties.datedebut }},
dernirèe mise à jour
{{ mockAddok.features[0].properties.updated_at }}
{{ select.properties.anneeeffectifsetablissement }}, entreprise créé
le {{ select.properties.datedebut }}, dernirèe mise à jour
{{ select.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>

View File

@ -1,72 +1,109 @@
// example response
export default {
source: 'SIRENE / INSEE',
derniere_maj: '2020-10-01',
licence: 'Licence Ouverte 2.0',
nb_resultats: 1,
type: 'Featurecollection',
type: 'FeatureCollection',
version: 'draft',
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,
}

View File

@ -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',
},
},
],
}