osm_my_commerce/components/SearchInput.vue

312 lines
9.0 KiB
Vue

<template>
<main>
<section>
Résultats possibles: {{ data.length }}
<div v-if="select && select.properties" class="selected">
<p class="content">
<b>Selected:</b>
<strong>
{{ select.properties.name }}
</strong>
{{ select.properties.citycode }}
{{ select.properties.context }}
<br />
<a :href="select.properties.id">{{ select.properties.id }}</a>
</p>
</div>
<b-field label="Trouver mon Commerce par nom ou par SIREN">
<b-autocomplete
v-model="searchInput"
: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>
<h2>Sélection:</h2>
<fieldset class="has-background-info">
<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.label }}
{{ select.properties.denominationunitelegale }}
| {{ select.properties.enseigne1etablissement }}
</p>
<p class="subtitle is-6">
{{ select.properties.context }}
</p>
<p class="title is-6">
{{ select.properties.city }} ,
{{ 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>
</fieldset>
<section>
<h2 class="title is-2">Debug info</h2>
<pre v-if="select">
select.properties:
{{ select }}
</pre
>
<pre v-if="fetchedData.osm_data">
fetchedData OSM:
{{ fetchedData.osm_data }}
</pre
>
</section>
</main>
</template>
<script>
import debounce from 'lodash/debounce'
import { mapMutations } from 'vuex'
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: [],
all_tags: [],
xml: nodeInfo.default.elements[0],
mockEntreprise: resultsEntreprise.default,
mockAddok: resultsAddok.default,
select: {},
}
},
computed: {
isFetching() {
return this.$store.state.isFetching
},
searchInput() {
return this.$store.state.searchInput
},
fetchedData() {
return this.$store.state.fetchedData
},
},
mounted() {
if (!this.$store.state.fetchedData.addok_data) {
console.log(
'choppons de la data, y a rien dans le store ',
this.$store.state.fetchedData
)
this.getAsyncData(this.searchInput)
} else {
console.log('addok_data déjà trouvée')
}
},
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.setFetching(true)
this.$axios
.get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
.then(({ data }) => {
console.log('data', data)
this.data = []
this.selectChoice(data.features[0])
this.setFetchedDataAddok(data)
data.features.forEach((item) => this.data.push(item))
})
.catch((error) => {
this.data = []
throw error
})
.finally(() => {
this.setFetching(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.fetchedData.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.setFetchedDataOsm(data)
this.mixTags()
})
.catch((error) => {
throw error
})
.finally(() => {
this.setFetching(false)
})
} else {
console.log('l url donnée n a pas de node ', url)
}
},
mixTags() {
if (this.fetchedData.osm_data && this.fetchedData.osm_data.elements[0]) {
for (const [key, value] of Object.entries(
this.fetchedData.osm_data.elements[0].tags
)) {
if (!this.all_tags[key]) {
this.createMissingKeyForMix(key)
}
this.all_tags[key].osm_data = value
}
}
if (
this.$store.state.selectedResult &&
this.fetchedData.osm_data.elements[0]
) {
for (const [key, value] of Object.entries(this.select)) {
if (!this.all_tags[key]) {
this.createMissingKeyForMix(key)
}
this.all_tags[key].osm_data = value
}
}
},
createMissingKeyForMix(key) {
this.all_tags[key] = {
osm_data: '',
addok_data: '',
}
},
...mapMutations({
setFetching: 'index/setFetching',
setTag: 'index/setTag',
setSelectedResult: 'index/setSelectedResult',
setFetchedDataOsm: 'index/setFetchedDataOsm',
setFetchedDataAddok: 'index/setFetchedDataAddok',
}),
},
}
</script>
<style>
.clickable {
cursor: pointer;
}
.clickable:hover {
background: #d8e9ba;
}
</style>