tykayn/osm_my_commerce
1
0
Fork 1
Code Issues 4 Pull Requests Projects Releases Wiki Activity

start using vuex, split tag list in other component

Browse Source
This commit is contained in:
tykayn 2021-01-29 12:59:44 +01:00 committed by Baptiste Lemoine
parent e196f1c60a
commit 0c84bcd738
5 changed files with 276 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
components/SearchInput.vue
View File

@ -17,8 +17,8 @@
<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"
:loading="isFetching" :loading="isFetching"
@ -141,175 +141,89 @@
</div> </div>
</section> </section>
</fieldset> </fieldset>
<h2>Tags de data.elements[0]</h2> <section >
<section v-if="data && data.elements" class="edit"> <h2 class='title is-2' >
elements: {{ data.elements.length }} Debug info
<b-field label="Nom"> </h2 >
<b-input <pre v-if='select' >
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">
select.properties: select.properties:
{{ select }} {{ select }}
</pre> </pre >
<pre v-if="data"> <pre v-if='fetchedData.osm_data' >
data: fetchedData OSM:
{{ data }} {{ fetchedData.osm_data }}
</pre> </pre >
<pre v-if="osm_data">
osm_data: </section >
{{ osm_data }}
</pre>
</main> </main>
</template> </template>
<script> <script >
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce';
import * as resultsAddok from '../mocks/addok' import { mapMutations } from 'vuex';
import * as resultsEntreprise from '../mocks/entreprise' import * as resultsAddok from '../mocks/addok';
import * as nodeInfo from '../mocks/osm_larome' import * as resultsEntreprise from '../mocks/entreprise';
import * as nodeInfo from '../mocks/osm_larome';
export default { export default {
data() { data() {
return { return {
data: [], data : [],
osm_data: [], osm_data : [],
all_tags: [], 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: '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,
// it's not mandatory though. // it's not mandatory though.
getAsyncData: debounce(function (name) { getAsyncData: debounce(function (name) {
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));
}) })
.catch((error) => { .catch((error) => {
this.data = [] this.data = []
throw error throw error
}) })
.finally(() => { .finally(() => {
this.isFetching = false this.setFetching(false);
}) })
}, 500), }, 500),
selectChoice(option) { selectChoice(option) {
@ -321,7 +235,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')) {
@ -333,16 +247,15 @@ export default {
`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json` `https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
) )
.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,31 +263,41 @@ 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);
} }
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);
} }
this.all_tags[key].osm_data = value this.all_tags[key].osm_data = value;
} }
} }
}, },
createMissingKeyForMix(key) { createMissingKeyForMix(key) {
this.all_tags[key] = { this.all_tags[key] = {
osm_data: '', osm_data : '',
addok_data: '', addok_data: '',
} };
}, },
...mapMutations({
setFetching : 'index/setFetching',
setTag : 'index/setTag',
setSelectedResult : 'index/setSelectedResult',
setFetchedDataOsm : 'index/setFetchedDataOsm',
setFetchedDataAddok: 'index/setFetchedDataAddok',
}),
}, },
} }
</script> </script>

115
components/TagTable.vue Normal file
View File

@ -0,0 +1,115 @@
<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 >

43
pages/Horaires.vue
View File

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

41
store/index.js
View File

@ -2,16 +2,20 @@
* see VueX docs * see VueX docs
*/ */
export const state = () => ({ export const state = () => ({
counter: 0, counter : 0,
isFetching: false, isFetching : false,
searchInput: '', searchInput : 'librairie interlignes',
selectedResult: null, selectedResult: null,
list: [], fetchedData : {
formConfig: { osm_data : '',
name: '', addok_data: '',
},
list : [],
formConfig : {
name : '',
delivery: false, delivery: false,
hours: ['a', 'b'], hours : ['a', 'b'],
tags: [], tags : [],
}, },
}) })
@ -26,12 +30,27 @@ export const mutations = {
}) })
}, },
remove(state, { todo }) { remove(state, { todo }) {
state.list.splice(state.list.indexOf(todo), 1) state.list.splice(state.list.indexOf(todo), 1);
}, },
setFormField(state, { field }) { setFormField(state, { field }) {
state.formConfig[state.formConfig.indexOf(field)] = 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 }) { setTag(state, { field }) {
state.formConfig.tags[state.formConfig.tags.indexOf(field)] = 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;
}, },
} }