feat:list json demo restos
This commit is contained in:
tykayn
commit
209c9be3eb
@ -17,7 +17,7 @@
|
||||
|
||||
<b-field label="Trouver mon Commerce par nom ou par SIREN">
|
||||
<b-autocomplete
|
||||
v-model="$store.searchQuery"
|
||||
v-model="searchInput"
|
||||
:data="data"
|
||||
placeholder="ex: Chambre du commerce d'Evry"
|
||||
field="title"
|
||||
@ -141,131 +141,25 @@
|
||||
</div>
|
||||
</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="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="data.elements[0].tags.website"
|
||||
placeholder="www.monsite.com"
|
||||
icon="planet"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="email officiel">
|
||||
<b-input
|
||||
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="data.elements[0].tags.phone"
|
||||
placeholder="012345"
|
||||
icon="planet"
|
||||
type="tel"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Description de votre activité">
|
||||
<b-input
|
||||
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="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="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">
|
||||
{{ 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>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>API OSM</td>
|
||||
<td>API addok</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<!-- <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>
|
||||
<td v-if="osm_data && osm_data.elements">
|
||||
<div
|
||||
v-for="(value, name) in osm_data.elements[0].tags"
|
||||
:key="name"
|
||||
>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<strong> {{ name }}</strong>
|
||||
</div>
|
||||
<div class="column">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</section>
|
||||
<pre v-if="select">
|
||||
<h2 class="title is-2">Debug info</h2>
|
||||
<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>
|
||||
</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'
|
||||
@ -280,12 +174,29 @@ export default {
|
||||
mockEntreprise: resultsEntreprise.default,
|
||||
mockAddok: resultsAddok.default,
|
||||
select: {},
|
||||
searchQuery: 'librairie interlignes',
|
||||
isFetching: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFetching() {
|
||||
return this.$store.state.isFetching
|
||||
},
|
||||
searchInput() {
|
||||
return this.$store.state.searchInput
|
||||
},
|
||||
fetchedData() {
|
||||
return this.$store.state.fetchedData
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getAsyncData(this.searchQuery)
|
||||
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,
|
||||
@ -294,13 +205,15 @@ export default {
|
||||
if (!name.length) {
|
||||
this.data = []
|
||||
}
|
||||
this.isFetching = true
|
||||
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))
|
||||
})
|
||||
@ -309,7 +222,7 @@ export default {
|
||||
throw error
|
||||
})
|
||||
.finally(() => {
|
||||
this.isFetching = false
|
||||
this.setFetching(false)
|
||||
})
|
||||
}, 500),
|
||||
selectChoice(option) {
|
||||
@ -321,7 +234,7 @@ export default {
|
||||
},
|
||||
getOSMNodeData(url) {
|
||||
if (!url.length) {
|
||||
this.osm_data = []
|
||||
this.fetchedData.osm_data = []
|
||||
}
|
||||
console.log('url', url)
|
||||
if (url.includes('node')) {
|
||||
@ -334,15 +247,14 @@ export default {
|
||||
)
|
||||
.then(({ data }) => {
|
||||
console.log('OSM data', data)
|
||||
this.osm_data = data
|
||||
this.setFetchedDataOsm(data)
|
||||
this.mixTags()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.osm_data = []
|
||||
throw error
|
||||
})
|
||||
.finally(() => {
|
||||
this.isFetching = false
|
||||
this.setFetching(false)
|
||||
})
|
||||
} else {
|
||||
console.log('l url donnée n a pas de node ', url)
|
||||
@ -350,9 +262,9 @@ export default {
|
||||
},
|
||||
|
||||
mixTags() {
|
||||
if (this.osm_data && this.osm_data.elements[0]) {
|
||||
if (this.fetchedData.osm_data && this.fetchedData.osm_data.elements[0]) {
|
||||
for (const [key, value] of Object.entries(
|
||||
this.osm_data.elements[0].tags
|
||||
this.fetchedData.osm_data.elements[0].tags
|
||||
)) {
|
||||
if (!this.all_tags[key]) {
|
||||
this.createMissingKeyForMix(key)
|
||||
@ -360,7 +272,10 @@ export default {
|
||||
this.all_tags[key].osm_data = value
|
||||
}
|
||||
}
|
||||
if (this.select && this.osm_data.elements[0]) {
|
||||
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)
|
||||
@ -375,6 +290,13 @@ export default {
|
||||
addok_data: '',
|
||||
}
|
||||
},
|
||||
...mapMutations({
|
||||
setFetching: 'index/setFetching',
|
||||
setTag: 'index/setTag',
|
||||
setSelectedResult: 'index/setSelectedResult',
|
||||
setFetchedDataOsm: 'index/setFetchedDataOsm',
|
||||
setFetchedDataAddok: 'index/setFetchedDataAddok',
|
||||
}),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
113
components/TagTable.vue
Normal file
113
components/TagTable.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="title is-2">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="data.elements[0].tags.name"
|
||||
icon="pencil"
|
||||
placeholder="le nom de votre commerce"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Site web">
|
||||
<b-input
|
||||
v-model="data.elements[0].tags.website"
|
||||
icon="planet"
|
||||
placeholder="www.monsite.com"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="email officiel">
|
||||
<b-input
|
||||
v-model="data.elements[0].tags.mail"
|
||||
icon="enveloppe"
|
||||
placeholder="contact@monsite.com"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Tel">
|
||||
<b-input
|
||||
v-model="data.elements[0].tags.phone"
|
||||
icon="planet"
|
||||
placeholder="012345"
|
||||
type="tel"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Description de votre activité">
|
||||
<b-input
|
||||
v-model="data.elements[0].tags.description"
|
||||
icon="planet"
|
||||
placeholder="description de votre activité"
|
||||
type="tel"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<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="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">
|
||||
{{ data.elements[0].tags.opening_hours }}
|
||||
</div>
|
||||
|
||||
<button class="btn button has-background-success">Enregistrer</button>
|
||||
</section>
|
||||
<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 data[0].properties.tags" :key="name">-->
|
||||
<!-- <div class="columns">-->
|
||||
<!-- <div class="column">-->
|
||||
<!-- <strong> {{ name }} </strong>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="column">-->
|
||||
<!-- {{ value }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</td>
|
||||
<td v-if="fetchedData.osm_data && fetchedData.osm_data.elements">
|
||||
<div
|
||||
v-for="(value, name) in fetchedData.osm_data.elements[0].tags"
|
||||
:key="name"
|
||||
>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<strong> {{ name }}</strong>
|
||||
</div>
|
||||
<div class="column">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<pre v-if="data">
|
||||
data:
|
||||
{{ data }}
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
@ -2,8 +2,31 @@
|
||||
<section class="section">
|
||||
<h1>Horaires</h1>
|
||||
<p>Vos horaires actuelles</p>
|
||||
<ul>
|
||||
<li v-for="h in $store.state.formConfig.hours" :key="h">
|
||||
{{ h }}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
hours() {
|
||||
return this.$store.state.formConfig.hours
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addhour(e) {
|
||||
this.$store.commit('formConfig/add', e.target.value)
|
||||
e.target.value = ''
|
||||
},
|
||||
...mapMutations({
|
||||
setTag: 'index/setTag',
|
||||
}),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
18
store/example.js
Normal file
18
store/example.js
Normal file
@ -0,0 +1,18 @@
|
||||
export const state = () => ({
|
||||
list: [],
|
||||
});
|
||||
|
||||
export const mutations = {
|
||||
add(state, text) {
|
||||
state.list.push({
|
||||
text,
|
||||
done: false,
|
||||
});
|
||||
},
|
||||
remove(state, { todo }) {
|
||||
state.list.splice(state.list.indexOf(todo), 1);
|
||||
},
|
||||
toggle(state, todo) {
|
||||
todo.done = !todo.done;
|
||||
},
|
||||
};
|
||||
56
store/index.js
Normal file
56
store/index.js
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* see VueX docs
|
||||
*/
|
||||
export const state = () => ({
|
||||
counter : 0,
|
||||
isFetching : false,
|
||||
searchInput : 'librairie interlignes',
|
||||
selectedResult: null,
|
||||
fetchedData : {
|
||||
osm_data : '',
|
||||
addok_data: '',
|
||||
},
|
||||
list : [],
|
||||
formConfig : {
|
||||
name : '',
|
||||
delivery: false,
|
||||
hours : ['a', 'b'],
|
||||
tags : [],
|
||||
},
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
increment(state) {
|
||||
state.counter++
|
||||
},
|
||||
add(state, text) {
|
||||
state.list.push({
|
||||
text,
|
||||
done: false,
|
||||
})
|
||||
},
|
||||
remove(state, { todo }) {
|
||||
state.list.splice(state.list.indexOf(todo), 1);
|
||||
},
|
||||
setFormField(state, { field }) {
|
||||
state.formConfig[state.formConfig.indexOf(field)] = field;
|
||||
},
|
||||
setFetchedDataOsm(state, { data }) {
|
||||
state.fetchedData.osm_data = data;
|
||||
},
|
||||
setFetchedDataAddok(state, { data }) {
|
||||
state.fetchedData.addok_data = data;
|
||||
},
|
||||
setTag(state, { field }) {
|
||||
state.formConfig.tags[state.formConfig.tags.indexOf(field)] = field;
|
||||
},
|
||||
setSelectedResult(state, { data }) {
|
||||
state.selectedResult = data;
|
||||
},
|
||||
setFetching(state, { data }) {
|
||||
state.isFetching = data;
|
||||
},
|
||||
setAllTag(state, { tags }) {
|
||||
state.formConfig.tags = tags;
|
||||
},
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
/**
|
||||
* see VueX docs
|
||||
*/
|
||||
export const state = () => ({
|
||||
counter: 0,
|
||||
isFetching: false,
|
||||
searchInput: '',
|
||||
selectedResult: null,
|
||||
list: [],
|
||||
formConfig: {
|
||||
name: '',
|
||||
delivery: false,
|
||||
hours: [],
|
||||
tags: [],
|
||||
},
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
increment(state: any) {
|
||||
state.counter++
|
||||
},
|
||||
add(state: any, text: any) {
|
||||
state.list.push({
|
||||
text,
|
||||
done: false,
|
||||
})
|
||||
},
|
||||
remove(state: any, { todo }: any) {
|
||||
state.list.splice(state.list.indexOf(todo), 1)
|
||||
},
|
||||
setFormField(state: any, { field }: any) {
|
||||
state.formConfig[state.formConfig.indexOf(field)] = field
|
||||
},
|
||||
setTag(state: any, { field }: any) {
|
||||
state.formConfig.tags[state.formConfig.tags.indexOf(field)] = field
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user