start using vuex, split tag list in other component
This commit is contained in:
parent
e196f1c60a
commit
0c84bcd738
@ -17,8 +17,8 @@
|
||||
|
||||
<b-field label="Trouver mon Commerce par nom ou par SIREN">
|
||||
<b-autocomplete
|
||||
v-model="$store.searchQuery"
|
||||
:data="data"
|
||||
v-model='searchInput'
|
||||
:data='data'
|
||||
placeholder="ex: Chambre du commerce d'Evry"
|
||||
field="title"
|
||||
:loading="isFetching"
|
||||
@ -141,134 +141,29 @@
|
||||
</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 v-if='fetchedData.osm_data' >
|
||||
fetchedData OSM:
|
||||
{{ fetchedData.osm_data }}
|
||||
</pre >
|
||||
|
||||
</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'
|
||||
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';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -280,36 +175,55 @@ 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,
|
||||
// it's not mandatory though.
|
||||
getAsyncData: debounce(function (name) {
|
||||
if (!name.length) {
|
||||
this.data = []
|
||||
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])
|
||||
console.log('data', data);
|
||||
this.data = [];
|
||||
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) => {
|
||||
this.data = []
|
||||
throw error
|
||||
})
|
||||
.finally(() => {
|
||||
this.isFetching = false
|
||||
this.setFetching(false);
|
||||
})
|
||||
}, 500),
|
||||
selectChoice(option) {
|
||||
@ -321,7 +235,7 @@ export default {
|
||||
},
|
||||
getOSMNodeData(url) {
|
||||
if (!url.length) {
|
||||
this.osm_data = []
|
||||
this.fetchedData.osm_data = [];
|
||||
}
|
||||
console.log('url', url)
|
||||
if (url.includes('node')) {
|
||||
@ -333,16 +247,15 @@ export default {
|
||||
`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
|
||||
)
|
||||
.then(({ data }) => {
|
||||
console.log('OSM data', data)
|
||||
this.osm_data = data
|
||||
this.mixTags()
|
||||
console.log('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,22 +263,25 @@ 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)
|
||||
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)) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -373,8 +289,15 @@ export default {
|
||||
this.all_tags[key] = {
|
||||
osm_data : '',
|
||||
addok_data: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
...mapMutations({
|
||||
setFetching : 'index/setFetching',
|
||||
setTag : 'index/setTag',
|
||||
setSelectedResult : 'index/setSelectedResult',
|
||||
setFetchedDataOsm : 'index/setFetchedDataOsm',
|
||||
setFetchedDataAddok: 'index/setFetchedDataAddok',
|
||||
}),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
115
components/TagTable.vue
Normal file
115
components/TagTable.vue
Normal 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 >
|
||||
@ -1,11 +1,34 @@
|
||||
<template >
|
||||
<section class="section">
|
||||
<section class='section' >
|
||||
<h1 >Horaires</h1 >
|
||||
<p >Vos horaires actuelles</p >
|
||||
<ul >
|
||||
<li v-for="h in $store.formConfig.hours" :key="h">
|
||||
<li
|
||||
v-for='h in $store.state.formConfig.hours'
|
||||
:key='h' >
|
||||
{{ h }}
|
||||
</li >
|
||||
</ul >
|
||||
</section >
|
||||
</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
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;
|
||||
},
|
||||
};
|
||||
@ -4,8 +4,12 @@
|
||||
export const state = () => ({
|
||||
counter : 0,
|
||||
isFetching : false,
|
||||
searchInput: '',
|
||||
searchInput : 'librairie interlignes',
|
||||
selectedResult: null,
|
||||
fetchedData : {
|
||||
osm_data : '',
|
||||
addok_data: '',
|
||||
},
|
||||
list : [],
|
||||
formConfig : {
|
||||
name : '',
|
||||
@ -26,12 +30,27 @@ export const mutations = {
|
||||
})
|
||||
},
|
||||
remove(state, { todo }) {
|
||||
state.list.splice(state.list.indexOf(todo), 1)
|
||||
state.list.splice(state.list.indexOf(todo), 1);
|
||||
},
|
||||
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 }) {
|
||||
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;
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user