osm_my_commerce/components/SearchInput.vue

209 lines
6.2 KiB
Vue
Raw Normal View History

2020-12-16 13:56:07 +01:00
<template>
<main>
<section>
<!-- <p class="content"><b>Selected:</b> {{ selected }}</p>-->
<b-field label="Trouver mon Commerce par nom ou par SIREN">
<b-autocomplete
:data="data"
placeholder="ex: Chambre du commerce d'Evry"
field="title"
:loading="isFetching"
icon="magnify"
@typing="getAsyncData"
@select="(option) => (selected = option)"
>
<template slot-scope="props">
<div class="media">
<div class="media-left"></div>
<div class="media-content">
{{ props.option.title }}
<br />
<small>
Released at {{ props.option.release_date }}, rated
<b>{{ props.option.vote_average }}</b>
</small>
</div>
</div>
</template>
</b-autocomplete>
</b-field>
</section>
<section class="map">
<br />
<img src="~assets/carte_demo.png" alt="logo osm" />
</section>
<section v-if="mockAddok" 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">
{{ mockAddok.features[0].properties.denominationunitelegale }}
| {{ mockAddok.features[0].properties.enseigne1etablissement }}
</p>
<p class="subtitle is-6">
{{ mockAddok.features[0].properties.context }}
</p>
<p class="title is-6">
{{ mockAddok.features[0].properties.longitude }} ,
{{ mockAddok.features[0].properties.latitude }}
</p>
</div>
</div>
<div class="content">
NAF:
{{
mockAddok.features[0].properties
.nomenclatureactiviteprincipaleunitelegale
}}
siret : {{ mockAddok.features[0].properties.siret }}
<br />
activité principale
{{
mockAddok.features[0].properties.activiteprincipaleetablissement
}}, source {{ mockAddok.features[0].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 }}
</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>
<iframe
src="https://projets.pavie.info/yohours/"
frameborder="0"
width="100%"
height="800"
></iframe>
<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: [],
xml: nodeInfo.default.elements[0],
mockEntreprise: resultsEntreprise.default,
mockAddok: resultsAddok.default,
selected: null,
isFetching: false,
}
},
mounted() {
this.getAsyncData('larome')
},
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
// axios
// .get(`https://demo.addok.xyz/search/?q=${name}`)
// .then(({ data }) => {
// console.log('data', data)
// this.data = []
// data.results.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),
},
}
</script>