From c3926991ace5bbf77fa132898c84877147d17188 Mon Sep 17 00:00:00 2001 From: nobohan Date: Tue, 11 May 2021 14:56:56 +0200 Subject: [PATCH] address selection: fix leaflet icon url + others fix (WIP) --- .../Resources/public/vuejs/Address/index.js | 4 +- .../Resources/public/vuejs/Address/map.js | 38 ------------------- .../public/vuejs/Address/store/index.js | 14 ++++--- .../public/vuejs/_components/AddAddress.vue | 4 +- .../public/vuejs/_components/AddressMap.vue | 22 +++++------ 5 files changed, 22 insertions(+), 60 deletions(-) delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js index 40003d71c..ba3da0e86 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js @@ -6,9 +6,9 @@ import { getDataPromise } from './store' import App from './App.vue'; -getDataPromise.then(store => { - console.log('store address', store.state.referenceAddresses); + +getDataPromise.then(store => { const i18n = _createI18n(addressMessages); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js deleted file mode 100644 index a1eecafe3..000000000 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js +++ /dev/null @@ -1,38 +0,0 @@ -import L from 'leaflet'; - -export const initMap = () => { - - - let map = L.map('address_map').setView([48.8589, 2.3469], 12); - - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' - }).addTo(map); - - L.marker([48.8589, 2.3469]).addTo(map) - .bindPopup('A pretty CSS3 popup.
Easily customizable.') - .openPopup(); - - console.log(map); - return map; -}; - - - -export const updateMap = (state) => { - - // console.log(state.map.center); - - // let map = L.map('address_map').setView(state.map.center, state.map.zoom); - - // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - // attribution: '© OpenStreetMap contributors' - // }).addTo(map); - - // L.marker(state.map.center).addTo(map) - // .bindPopup('A pretty CSS3 popup.
Easily customizable.') - // .openPopup(); - - // console.log(map); -}; - diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js index 88d35becf..4e931cdd9 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js @@ -1,6 +1,7 @@ import 'es6-promise/auto'; import { createStore } from 'vuex'; import { getReferenceAddress } from '../api'; +import { app } from '../index'; const debug = process.env.NODE_ENV !== 'production'; @@ -20,11 +21,11 @@ const getDataPromise = getReferenceAddress() {id: 2, name: 'Aisne', code: '85045', country: 'FR'}, {id: 3, name: 'Saint-Gervais', code: '85230', country: 'FR'} ], //TODO fetch postal codes from CHILL API - selectedCountry: {id: 1, name: 'France', countryCode: 'FR'}, // TODO is it ok to specify a default value here? + selectedCountry: {id: 1, name: 'France', countryCode: 'FR'}, selectedCity: null, selectedAddress: null, addressMap: { - center : [48.8589, 2.3469], + center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/ zoom: 12 }, form: { @@ -41,6 +42,7 @@ const getDataPromise = getReferenceAddress() state.cities : state.cities.filter(c => c.country == state.selectedCountry.countryCode), getReferenceAddresses: state => state.referenceAddresses, //TODO filter as a function of city + getMapCenter: state => state.addressMap.center, }, mutations: { setSelectedCountry(state, value) { @@ -50,10 +52,9 @@ const getDataPromise = getReferenceAddress() state.selectedCity = value; }, setSelectedAddress(state, value) { - console.log(value) state.selectedAddress = value; - state.addressMap.center = value.point.coordinates; //TODO is it OK to put this here? //call setMapCenter - updateMap(state); //TODO where to listen to map center change? -> action avec dispatch + state.addressMap.center = value.point.coordinates.reverse(); + //app.$refs.addressMap.updateMap(); //TODO how to update the map view? -> action avec dispatch }, setMapCenter(state, value) { state.addressMap.center = value; @@ -63,6 +64,9 @@ const getDataPromise = getReferenceAddress() } }, actions: { + updateMapCenter({ commit }, payload) { + commit('updateMapCenter', payload); + }, } }); resolve(store); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue index 5c11b0872..5816f3e8b 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue @@ -31,7 +31,7 @@
- +
@@ -88,7 +88,7 @@ export default { this.$store.commit('setIsNoAddress', v); }, get() { - return this.$store.state.form.isNoAddress; //this.add_address.form.isNoAddress + return this.$store.state.form.isNoAddress; //TODO could be this.add_address.form.isNoAddress } }, }, diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue index 1a7ed2154..7dd85639a 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue @@ -1,12 +1,13 @@