feat:list json demo restos

This commit is contained in:
Tykayn 2021-02-25 16:26:59 +01:00 committed by tykayn
commit 209c9be3eb
6 changed files with 263 additions and 168 deletions

View File

@ -17,7 +17,7 @@
<b-field label="Trouver mon Commerce par nom ou par SIREN"> <b-field label="Trouver mon Commerce par nom ou par SIREN">
<b-autocomplete <b-autocomplete
v-model="$store.searchQuery" v-model="searchInput"
:data="data" :data="data"
placeholder="ex: Chambre du commerce d'Evry" placeholder="ex: Chambre du commerce d'Evry"
field="title" field="title"
@ -141,131 +141,25 @@
</div> </div>
</section> </section>
</fieldset> </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>
<section class="comparaison"> <h2 class="title is-2">Debug info</h2>
<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"> <pre v-if="select">
select.properties: select.properties:
{{ select }} {{ select }}
</pre> </pre
<pre v-if="data"> >
data: <pre v-if="fetchedData.osm_data">
{{ data }} fetchedData OSM:
</pre> {{ fetchedData.osm_data }}
<pre v-if="osm_data"> </pre
osm_data: >
{{ osm_data }} </section>
</pre>
</main> </main>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { mapMutations } from 'vuex'
import * as resultsAddok from '../mocks/addok' import * as resultsAddok from '../mocks/addok'
import * as resultsEntreprise from '../mocks/entreprise' import * as resultsEntreprise from '../mocks/entreprise'
import * as nodeInfo from '../mocks/osm_larome' import * as nodeInfo from '../mocks/osm_larome'
@ -280,12 +174,29 @@ export default {
mockEntreprise: resultsEntreprise.default, mockEntreprise: resultsEntreprise.default,
mockAddok: resultsAddok.default, mockAddok: resultsAddok.default,
select: {}, 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() { 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: { methods: {
// You have to install and import debounce to use it, // You have to install and import debounce to use it,
@ -294,13 +205,15 @@ export default {
if (!name.length) { if (!name.length) {
this.data = [] this.data = []
} }
this.isFetching = true this.setFetching(true)
this.$axios this.$axios
.get(`https://demo.addok.xyz/search?&type=poi&q=${name}`) .get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
.then(({ data }) => { .then(({ data }) => {
console.log('data', data) console.log('data', data)
this.data = [] this.data = []
this.selectChoice(data.features[0]) this.selectChoice(data.features[0])
this.setFetchedDataAddok(data)
data.features.forEach((item) => this.data.push(item)) data.features.forEach((item) => this.data.push(item))
}) })
@ -309,7 +222,7 @@ export default {
throw error throw error
}) })
.finally(() => { .finally(() => {
this.isFetching = false this.setFetching(false)
}) })
}, 500), }, 500),
selectChoice(option) { selectChoice(option) {
@ -321,7 +234,7 @@ export default {
}, },
getOSMNodeData(url) { getOSMNodeData(url) {
if (!url.length) { if (!url.length) {
this.osm_data = [] this.fetchedData.osm_data = []
} }
console.log('url', url) console.log('url', url)
if (url.includes('node')) { if (url.includes('node')) {
@ -334,15 +247,14 @@ export default {
) )
.then(({ data }) => { .then(({ data }) => {
console.log('OSM data', data) console.log('OSM data', data)
this.osm_data = data this.setFetchedDataOsm(data)
this.mixTags() this.mixTags()
}) })
.catch((error) => { .catch((error) => {
this.osm_data = []
throw error throw error
}) })
.finally(() => { .finally(() => {
this.isFetching = false this.setFetching(false)
}) })
} else { } else {
console.log('l url donnée n a pas de node ', url) console.log('l url donnée n a pas de node ', url)
@ -350,9 +262,9 @@ export default {
}, },
mixTags() { 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( 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]) { if (!this.all_tags[key]) {
this.createMissingKeyForMix(key) this.createMissingKeyForMix(key)
@ -360,7 +272,10 @@ export default {
this.all_tags[key].osm_data = value 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)) { for (const [key, value] of Object.entries(this.select)) {
if (!this.all_tags[key]) { if (!this.all_tags[key]) {
this.createMissingKeyForMix(key) this.createMissingKeyForMix(key)
@ -375,6 +290,13 @@ export default {
addok_data: '', addok_data: '',
} }
}, },
...mapMutations({
setFetching: 'index/setFetching',
setTag: 'index/setTag',
setSelectedResult: 'index/setSelectedResult',
setFetchedDataOsm: 'index/setFetchedDataOsm',
setFetchedDataAddok: 'index/setFetchedDataAddok',
}),
}, },
} }
</script> </script>

113
components/TagTable.vue Normal file
View 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>

View File

@ -2,8 +2,31 @@
<section class="section"> <section class="section">
<h1>Horaires</h1> <h1>Horaires</h1>
<p>Vos horaires actuelles</p> <p>Vos horaires actuelles</p>
<ul>
<li v-for="h in $store.state.formConfig.hours" :key="h">
{{ h }}
</li>
</ul>
</section> </section>
</template> </template>
<script> <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> </script>

18
store/example.js Normal file
View 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
View 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;
},
}

View File

@ -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
},
}