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

feat:list json demo restos

Browse Source
master
Tykayn 2 years ago committed by tykayn
parent 4da319bf15 0c84bcd738
commit 209c9be3eb
6 changed files with 263 additions and 168 deletions
Show Stats Download Patch File Download Diff File

182
components/SearchInput.vue
Unescape Escape View File

@ -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
Unescape Escape 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>

25
pages/Horaires.vue
Unescape Escape View File

@ -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
Unescape Escape 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
Unescape Escape 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;
},
}

37
store/index.ts
Unescape Escape 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
},
}
Write Preview
Loading…
Cancel
Save