forked from tykayn/osm_my_commerce
328 lines
9.6 KiB
Vue
328 lines
9.6 KiB
Vue
<template>
|
|
<main>
|
|
<section>
|
|
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) => {
|
|
selectChoice(option)
|
|
}
|
|
"
|
|
>
|
|
<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">
|
|
<strong v-if="props.option.properties.poi">
|
|
{{ props.option.properties.poi }}
|
|
</strong>
|
|
</div>
|
|
<div class="column">
|
|
{{ props.option.properties.context }}
|
|
</div>
|
|
<div class="column">
|
|
{{ props.option.properties.type }}
|
|
</div>
|
|
</div>
|
|
</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 />
|
|
( ici une carte )
|
|
<!-- <img src="~assets/carte_demo.png" alt="logo osm" />-->
|
|
</section>
|
|
<section v-if="select && select.properties" class="result">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img
|
|
src="https://bulma.io/images/placeholders/96x96.png"
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-4">
|
|
{{ select.properties.denominationunitelegale }}
|
|
| {{ select.properties.enseigne1etablissement }}
|
|
</p>
|
|
<p class="subtitle is-6">
|
|
{{ select.properties.context }}
|
|
</p>
|
|
<p class="title is-6">
|
|
{{ select.properties.longitude }} ,
|
|
{{ select.properties.latitude }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
NAF:
|
|
{{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
|
|
siret : {{ select.properties.siret }}
|
|
<br />
|
|
|
|
activité principale
|
|
{{ select.properties.activiteprincipaleetablissement }}, source
|
|
{{ select.properties.source }},
|
|
<time datetime="2016-1-1">
|
|
enregistré le
|
|
{{ select.properties.anneeeffectifsetablissement }}, entreprise créé
|
|
le {{ select.properties.datedebut }}, dernirèe mise à jour
|
|
{{ select.properties.updated_at }}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section v-if="xml" class="edit">
|
|
<b-field label="Nom">
|
|
<b-input
|
|
v-model="xml.tags.name"
|
|
placeholder="le nom de votre commerce"
|
|
icon="pencil"
|
|
></b-input>
|
|
</b-field>
|
|
<b-field label="Site web">
|
|
<b-input
|
|
v-model="xml.tags.website"
|
|
placeholder="www.monsite.com"
|
|
icon="planet"
|
|
></b-input>
|
|
</b-field>
|
|
<b-field label="email officiel">
|
|
<b-input
|
|
v-model="xml.tags.mail"
|
|
placeholder="contact@monsite.com"
|
|
icon="enveloppe"
|
|
></b-input>
|
|
</b-field>
|
|
<b-field label="Tel">
|
|
<b-input
|
|
v-model="xml.tags.phone"
|
|
placeholder="012345"
|
|
icon="planet"
|
|
type="tel"
|
|
></b-input>
|
|
</b-field>
|
|
<b-field label="Description de votre activité">
|
|
<b-input
|
|
v-model="xml.tags.description"
|
|
placeholder="description de votre activité"
|
|
icon="planet"
|
|
type="tel"
|
|
></b-input>
|
|
</b-field>
|
|
<b-field>
|
|
<b-switch v-model="xml.tags.takeaway"> Vente à emporter</b-switch>
|
|
<b-switch v-model="xml.tags['parking:velo']"> Parking vélo</b-switch>
|
|
<b-switch v-model="xml.tags['webaccess']"> Accès Internet</b-switch>
|
|
<b-switch v-model="xml.tags['elecborne']">
|
|
borne de recharge électrique sur parking
|
|
</b-switch>
|
|
<b-switch v-model="xml.tags['access:public']">
|
|
Accès autorisé au public
|
|
</b-switch>
|
|
</b-field>
|
|
|
|
<h2 class="title is-2">Horaires d'ouverture</h2>
|
|
<div class="padded">
|
|
{{ 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>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from 'lodash/debounce'
|
|
import * as resultsAddok from '../mocks/addok'
|
|
import * as resultsEntreprise from '../mocks/entreprise'
|
|
import * as nodeInfo from '../mocks/osm_larome'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
data: [],
|
|
osm_data: [],
|
|
xml: nodeInfo.default.elements[0],
|
|
mockEntreprise: resultsEntreprise.default,
|
|
mockAddok: resultsAddok.default,
|
|
select: {},
|
|
searchQuery: 'tour montparnasse',
|
|
isFetching: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getAsyncData('tour eiffel')
|
|
},
|
|
methods: {
|
|
// You have to install and import debounce to use it,
|
|
// it's not mandatory though.
|
|
getAsyncData: debounce(function (name) {
|
|
if (!name.length) {
|
|
this.data = []
|
|
}
|
|
this.isFetching = true
|
|
this.$axios
|
|
.get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
|
|
.then(({ data }) => {
|
|
console.log('data', data)
|
|
this.data = []
|
|
data.features.forEach((item) => this.data.push(item))
|
|
})
|
|
.catch((error) => {
|
|
this.data = []
|
|
throw error
|
|
})
|
|
.finally(() => {
|
|
this.isFetching = false
|
|
})
|
|
// axios
|
|
// .get(`https://api.openstreetmap.org/api/0.6/node/6126513555`)
|
|
// .then(({ data }) => {
|
|
// console.log('data xml', data)
|
|
// this.xml = data.elements[0]
|
|
// })
|
|
// .catch((error) => {
|
|
// this.xml = []
|
|
// throw error
|
|
// })
|
|
// .finally(() => {
|
|
// 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>
|