feat(search): multi find data
This commit is contained in:
parent
97b76c7f35
commit
2f818d63d1
@ -3,7 +3,16 @@
|
||||
<section>
|
||||
Résultats possibles: {{ data.length }}
|
||||
<div v-if="select && select.properties" class="selected">
|
||||
<p class="content"><b>Selected:</b> {{ select.properties.name }}</p>
|
||||
<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">
|
||||
@ -83,75 +92,82 @@
|
||||
( 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>
|
||||
<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="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 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>
|
||||
|
||||
<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">
|
||||
</section>
|
||||
</fieldset>
|
||||
<h2>Tags de data.elements[0]</h2>
|
||||
<section v-if="data && data.elements" class="edit">
|
||||
elements: {{ data.elements.length }}
|
||||
<b-field label="Nom">
|
||||
<b-input
|
||||
v-model="xml.tags.name"
|
||||
v-model="data.elements[0].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"
|
||||
v-model="data.elements[0].tags.website"
|
||||
placeholder="www.monsite.com"
|
||||
icon="planet"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="email officiel">
|
||||
<b-input
|
||||
v-model="xml.tags.mail"
|
||||
v-model="data.elements[0].tags.mail"
|
||||
placeholder="contact@monsite.com"
|
||||
icon="enveloppe"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Tel">
|
||||
<b-input
|
||||
v-model="xml.tags.phone"
|
||||
v-model="data.elements[0].tags.phone"
|
||||
placeholder="012345"
|
||||
icon="planet"
|
||||
type="tel"
|
||||
@ -159,29 +175,39 @@
|
||||
</b-field>
|
||||
<b-field label="Description de votre activité">
|
||||
<b-input
|
||||
v-model="xml.tags.description"
|
||||
v-model="data.elements[0].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']">
|
||||
<b-switch v-model="data.elements[0].tags.takeaway">
|
||||
Vente à emporter
|
||||
</b-switch>
|
||||
<b-switch v-model="data.elements[0].tags['parking:velo']">
|
||||
Parking vélo
|
||||
</b-switch>
|
||||
<b-switch v-model="data.elements[0].tags['webaccess']">
|
||||
Accès Internet
|
||||
</b-switch>
|
||||
<b-switch v-model="data.elements[0].tags['elecborne']">
|
||||
borne de recharge électrique sur parking
|
||||
</b-switch>
|
||||
<b-switch v-model="xml.tags['access:public']">
|
||||
<b-switch v-model="data.elements[0].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 }}
|
||||
{{ data.elements[0].tags.opening_hours }}
|
||||
</div>
|
||||
|
||||
<button class="btn button has-background-success">Enregistrer</button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="comparaison">
|
||||
<h2>Comparaison des tags</h2>
|
||||
<table>
|
||||
@ -194,29 +220,47 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div v-for="(value, name) in xml.tags" :key="name">
|
||||
{{ name }} :
|
||||
{{ value }}
|
||||
</div>
|
||||
<!-- <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
|
||||
<!-- <div class="columns">-->
|
||||
<!-- <div class="column">-->
|
||||
<!-- <strong> {{ name }} </strong>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="column">-->
|
||||
<!-- {{ value }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </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 class="columns">
|
||||
<div class="column">
|
||||
<strong> {{ name }}</strong>
|
||||
</div>
|
||||
<div class="column">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<button class="btn button has-background-success">Enregistrer</button>
|
||||
</section>
|
||||
<pre v-if="select">
|
||||
select.properties:
|
||||
{{ select }}
|
||||
</pre>
|
||||
<pre v-if="data">
|
||||
data:
|
||||
{{ data }}
|
||||
</pre>
|
||||
<pre v-if="osm_data">
|
||||
osm_data:
|
||||
{{ osm_data }}
|
||||
</pre>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@ -231,16 +275,17 @@ export default {
|
||||
return {
|
||||
data: [],
|
||||
osm_data: [],
|
||||
all_tags: [],
|
||||
xml: nodeInfo.default.elements[0],
|
||||
mockEntreprise: resultsEntreprise.default,
|
||||
mockAddok: resultsAddok.default,
|
||||
select: {},
|
||||
searchQuery: 'tour montparnasse',
|
||||
searchQuery: 'librairie interlignes',
|
||||
isFetching: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAsyncData('tour eiffel')
|
||||
this.getAsyncData(this.searchQuery)
|
||||
},
|
||||
methods: {
|
||||
// You have to install and import debounce to use it,
|
||||
@ -255,6 +300,8 @@ export default {
|
||||
.then(({ data }) => {
|
||||
console.log('data', data)
|
||||
this.data = []
|
||||
this.selectChoice(data.features[0])
|
||||
|
||||
data.features.forEach((item) => this.data.push(item))
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -264,19 +311,6 @@ export default {
|
||||
.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)
|
||||
@ -301,6 +335,7 @@ export default {
|
||||
.then(({ data }) => {
|
||||
console.log('OSM data', data)
|
||||
this.osm_data = data
|
||||
this.mixTags()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.osm_data = []
|
||||
@ -313,6 +348,33 @@ export default {
|
||||
console.log('l url donnée n a pas de node ', url)
|
||||
}
|
||||
},
|
||||
|
||||
mixTags() {
|
||||
if (this.osm_data && this.osm_data.elements[0]) {
|
||||
for (const [key, value] of Object.entries(
|
||||
this.osm_data.elements[0].tags
|
||||
)) {
|
||||
if (!this.all_tags[key]) {
|
||||
this.createMissingKeyForMix(key)
|
||||
}
|
||||
this.all_tags[key].osm_data = value
|
||||
}
|
||||
}
|
||||
if (this.select && this.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: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user