feat(search): multi find data

This commit is contained in:
tykayn 2020-12-19 18:18:48 +01:00 committed by Baptiste Lemoine
parent 97b76c7f35
commit 2f818d63d1
1 changed files with 141 additions and 79 deletions

View File

@ -3,7 +3,16 @@
<section> <section>
Résultats possibles: {{ data.length }} Résultats possibles: {{ data.length }}
<div v-if="select && select.properties" class="selected"> <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> </div>
<b-field label="Trouver mon Commerce par nom ou par SIREN"> <b-field label="Trouver mon Commerce par nom ou par SIREN">
@ -83,75 +92,82 @@
( ici une carte ) ( ici une carte )
<!-- <img src="~assets/carte_demo.png" alt="logo osm" />--> <!-- <img src="~assets/carte_demo.png" alt="logo osm" />-->
</section> </section>
<section v-if="select && select.properties" class="result"> <h2>Sélection:</h2>
<div class="card-content"> <fieldset class="has-background-info">
<div class="media"> <section v-if="select && select.properties" class="result">
<div class="media-left"> <div class="card-content">
<figure class="image is-48x48"> <div class="media">
<img <div class="media-left">
src="https://bulma.io/images/placeholders/96x96.png" <figure class="image is-48x48">
alt="Placeholder image" <img
/> src="https://bulma.io/images/placeholders/96x96.png"
</figure> 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>
<div class="media-content">
<p class="title is-4"> <div class="content">
{{ select.properties.denominationunitelegale }} NAF:
| {{ select.properties.enseigne1etablissement }} {{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
</p> siret : {{ select.properties.siret }}
<p class="subtitle is-6"> <br />
{{ select.properties.context }}
</p> activité principale
<p class="title is-6"> {{ select.properties.activiteprincipaleetablissement }}, source
{{ select.properties.longitude }} , {{ select.properties.source }},
{{ select.properties.latitude }} <time datetime="2016-1-1">
</p> enregistré le
{{ select.properties.anneeeffectifsetablissement }}, entreprise
créé le {{ select.properties.datedebut }}, dernirèe mise à jour
{{ select.properties.updated_at }}
</time>
</div> </div>
</div> </div>
</section>
<div class="content"> </fieldset>
NAF: <h2>Tags de data.elements[0]</h2>
{{ select.properties.nomenclatureactiviteprincipaleunitelegale }} <section v-if="data && data.elements" class="edit">
siret : {{ select.properties.siret }} elements: {{ data.elements.length }}
<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-field label="Nom">
<b-input <b-input
v-model="xml.tags.name" v-model="data.elements[0].tags.name"
placeholder="le nom de votre commerce" placeholder="le nom de votre commerce"
icon="pencil" icon="pencil"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="Site web"> <b-field label="Site web">
<b-input <b-input
v-model="xml.tags.website" v-model="data.elements[0].tags.website"
placeholder="www.monsite.com" placeholder="www.monsite.com"
icon="planet" icon="planet"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="email officiel"> <b-field label="email officiel">
<b-input <b-input
v-model="xml.tags.mail" v-model="data.elements[0].tags.mail"
placeholder="contact@monsite.com" placeholder="contact@monsite.com"
icon="enveloppe" icon="enveloppe"
></b-input> ></b-input>
</b-field> </b-field>
<b-field label="Tel"> <b-field label="Tel">
<b-input <b-input
v-model="xml.tags.phone" v-model="data.elements[0].tags.phone"
placeholder="012345" placeholder="012345"
icon="planet" icon="planet"
type="tel" type="tel"
@ -159,29 +175,39 @@
</b-field> </b-field>
<b-field label="Description de votre activité"> <b-field label="Description de votre activité">
<b-input <b-input
v-model="xml.tags.description" v-model="data.elements[0].tags.description"
placeholder="description de votre activité" placeholder="description de votre activité"
icon="planet" icon="planet"
type="tel" type="tel"
></b-input> ></b-input>
</b-field> </b-field>
<b-field> <b-field>
<b-switch v-model="xml.tags.takeaway"> Vente à emporter</b-switch> <b-switch v-model="data.elements[0].tags.takeaway">
<b-switch v-model="xml.tags['parking:velo']"> Parking vélo</b-switch> Vente à emporter
<b-switch v-model="xml.tags['webaccess']"> Accès Internet</b-switch> </b-switch>
<b-switch v-model="xml.tags['elecborne']"> <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 borne de recharge électrique sur parking
</b-switch> </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 Accès autorisé au public
</b-switch> </b-switch>
</b-field> </b-field>
<h2 class="title is-2">Horaires d'ouverture</h2> <h2 class="title is-2">Horaires d'ouverture</h2>
<div class="padded"> <div class="padded">
{{ xml.tags.opening_hours }} {{ data.elements[0].tags.opening_hours }}
</div> </div>
<button class="btn button has-background-success">Enregistrer</button>
</section>
<section>
<section class="comparaison"> <section class="comparaison">
<h2>Comparaison des tags</h2> <h2>Comparaison des tags</h2>
<table> <table>
@ -194,29 +220,47 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<div v-for="(value, name) in xml.tags" :key="name"> <!-- <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
{{ name }} : <!-- <div class="columns">-->
{{ value }} <!-- <div class="column">-->
</div> <!-- <strong> {{ name }} </strong>-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- {{ value }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</td> </td>
</tr>
<tr>
<td v-if="osm_data && osm_data.elements"> <td v-if="osm_data && osm_data.elements">
<div <div
v-for="(value, name) in osm_data.elements[0].tags" v-for="(value, name) in osm_data.elements[0].tags"
:key="name" :key="name"
> >
{{ name }} : <div class="columns">
{{ value }} <div class="column">
<strong> {{ name }}</strong>
</div>
<div class="column">{{ value }}</div>
</div>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<button class="btn button has-background-success">Enregistrer</button>
</section> </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> </main>
</template> </template>
@ -231,16 +275,17 @@ export default {
return { return {
data: [], data: [],
osm_data: [], osm_data: [],
all_tags: [],
xml: nodeInfo.default.elements[0], xml: nodeInfo.default.elements[0],
mockEntreprise: resultsEntreprise.default, mockEntreprise: resultsEntreprise.default,
mockAddok: resultsAddok.default, mockAddok: resultsAddok.default,
select: {}, select: {},
searchQuery: 'tour montparnasse', searchQuery: 'librairie interlignes',
isFetching: false, isFetching: false,
} }
}, },
mounted() { mounted() {
this.getAsyncData('tour eiffel') this.getAsyncData(this.searchQuery)
}, },
methods: { methods: {
// You have to install and import debounce to use it, // You have to install and import debounce to use it,
@ -255,6 +300,8 @@ export default {
.then(({ data }) => { .then(({ data }) => {
console.log('data', data) console.log('data', data)
this.data = [] this.data = []
this.selectChoice(data.features[0])
data.features.forEach((item) => this.data.push(item)) data.features.forEach((item) => this.data.push(item))
}) })
.catch((error) => { .catch((error) => {
@ -264,19 +311,6 @@ export default {
.finally(() => { .finally(() => {
this.isFetching = false 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), }, 500),
selectChoice(option) { selectChoice(option) {
console.log('option', option) console.log('option', option)
@ -301,6 +335,7 @@ export default {
.then(({ data }) => { .then(({ data }) => {
console.log('OSM data', data) console.log('OSM data', data)
this.osm_data = data this.osm_data = data
this.mixTags()
}) })
.catch((error) => { .catch((error) => {
this.osm_data = [] this.osm_data = []
@ -313,6 +348,33 @@ export default {
console.log('l url donnée n a pas de node ', url) 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> </script>