From 2fe38945d25a1e26ef486aeabae2611a61da63f5 Mon Sep 17 00:00:00 2001 From: nobohan Date: Mon, 10 May 2021 17:31:22 +0200 Subject: [PATCH] Address selection: add a leaflet map --- .../Resources/public/vuejs/Address/js/i18n.js | 3 +- .../Resources/public/vuejs/Address/map.js | 38 ++++++ .../public/vuejs/Address/store/index.js | 115 ++++-------------- .../public/vuejs/_components/AddAddress.vue | 23 ++-- .../public/vuejs/_components/AddressMap.vue | 58 +++++++++ .../vuejs/_components/AddressSelection.vue | 46 ++----- .../vuejs/_components/CitySelection.vue | 2 +- 7 files changed, 148 insertions(+), 137 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js index 0513ff79b..b085ec498 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js @@ -4,7 +4,8 @@ const addressMessages = { fr: { add_an_address: 'Ajouter une adresse', select_country: 'Choisir le pays', - select_city: 'Choisir une localité' + select_city: 'Choisir une localité', + select_address: 'Choisir une adresse' } }; diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js new file mode 100644 index 000000000..a1eecafe3 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js @@ -0,0 +1,38 @@ +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 b842fa3a1..46c3fb14d 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js @@ -1,12 +1,10 @@ import 'es6-promise/auto'; import { createStore } from 'vuex'; import { getReferenceAddress } from '../api'; -//import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons' +import { initMap, updateMap } from '../map'; const debug = process.env.NODE_ENV !== 'production'; -// const id = window.accompanyingCourseId; //tmp TODO - const getDataPromise = getReferenceAddress() .then(referenceAddresses => new Promise((resolve, reject) => { @@ -23,23 +21,22 @@ 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 how to specify a default value? + selectedCountry: {id: 1, name: 'France', countryCode: 'FR'}, // TODO is it ok to specify a default value here? selectedCity: null, + selectedAddress: null, + addressMap: { + //map: initMap(), //-> the map container is not initialised when store is created. + center : [48.8589, 2.3469], + zoom: 12 + } }, getters: { getCountries: state => state.countries, getSelectedCountry: state => state.selectedCountry, - getCities: state => { - console.log(state.cities) - console.log(state) - console.log(state.selectedCountry.countryCode) - console.log(state.cities.filter(c => c.country == state.selectedCountry.countryCode)) - return state.selectedCountry.countryCode === undefined ? - state.cities : - state.cities.filter(c => c.country == state.selectedCountry.countryCode); - } - , - getReferenceAddresses: state => state.referenceAddresses, + getCities: state => state.selectedCountry.countryCode === undefined ? + state.cities : + state.cities.filter(c => c.country == state.selectedCountry.countryCode), + getReferenceAddresses: state => state.referenceAddresses, //TODO filter as a function of city }, mutations: { setSelectedCountry(state, value) { @@ -47,89 +44,23 @@ const getDataPromise = getReferenceAddress() }, setSelectedCity(state, value) { 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? + //updateMap(state); //TODO where to listen to map center change? + }, + setMapCenter(state, value) { + state.addressMap.center = value; } - // removeParticipation(state, item) { - // //console.log('mutation: remove item', item.id); - // state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== item); - // }, - // closeParticipation(state, { participation, payload }) { - // console.log('### mutation: close item', { participation, payload }); - // // temporaire, le temps que le backend ajoute la enddate - // participation.endDate = { datetime: "2021-05-06T10:49:00+0200" }; - // // trouve dans le state le payload et le supprime du state - // state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== payload); - // // pousse la participation - // state.accompanying_course.participations.push(participation); - // }, - // addParticipation(state, { participation, payload }) { - // //console.log('### mutation: add participation', participation); - // state.accompanying_course.participations.push(participation); - // //console.log('count participations from state', state.accompanying_course.participations.length); - // //console.log('avant', state.add_persons.selected); - // state.add_persons.selected = state.add_persons.selected.filter(value => value !== payload); - // //console.log('après', state.add_persons.selected); - // state.add_persons.query = ""; - // state.add_persons.suggested = []; - // }, - // setQuery(state, query) { - // //console.log('q=', query); - // state.add_persons = Object.assign({}, state.add_persons, query); - // }, - // loadSuggestions(state, suggested) { - // state.add_persons.suggested = suggested; - // }, - // updateSelected(state, value) { - // state.add_persons.selected = value; - // } }, actions: { - // removeParticipation({ commit }, payload) { - // commit('removeParticipation', payload); - // }, - // closeParticipation({ commit }, payload) { - // console.log('## action: fetch delete participation: payload', payload.person.id); - // postParticipation(id, payload.person.id, 'DELETE') - // .then(participation => new Promise((resolve, reject) => { - // //console.log('payload', payload); - // commit('closeParticipation', { participation, payload }); - // resolve(); - // })) - // .catch((error) => { - // console.log('error', error); - // state.errorMsg.push(error.message); - // }); - // }, - // addParticipation({ commit }, payload) { - // console.log('## action: fetch post participation: payload', payload.id); - // postParticipation(id, payload.id, 'POST') - // .then(participation => new Promise((resolve, reject) => { - // commit('addParticipation', { participation, payload }); - // resolve(); - // })) - // .catch((error) => { - // state.errorMsg.push(error.message); - // }); - // }, - // setQuery({ commit }, payload) { - // commit('setQuery', payload); - // //console.log('## action: setquery: payload', payload); - // if (payload.query.length >= 3) { - // searchPersons(payload.query) - // .then(suggested => new Promise((resolve, reject) => { - // commit('loadSuggestions', suggested.results); - // resolve(); - // })); - // } else { - // commit('loadSuggestions', []); - // } - // }, - // updateSelected({ commit }, payload) { - // //console.log('## action: update selected values: payload', payload); - // commit('updateSelected', payload); - // } } }); resolve(store); + + })); export { getDataPromise }; diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue index 90974f59b..60a7dae3f 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue @@ -29,7 +29,7 @@