forked from tykayn/osm_my_commerce
feat(search): also on osm api
This commit is contained in:
parent
ef62875a57
commit
97b76c7f35
@ -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>
|
||||
|
||||
159
mocks/addok.js
159
mocks/addok.js
@ -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,
|
||||
}
|
||||
|
||||
33
mocks/tour_eiffel_osm_api.js
Normal file
33
mocks/tour_eiffel_osm_api.js
Normal 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',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user