Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 16:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

Address selection: add a leaflet map

Browse Source
This commit is contained in:
nobohan
2021-05-10 17:31:22 +02:00
parent fe5745831c
commit 2fe38945d2
7 changed files with 148 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
View File

@@ -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'
}
};

38
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/map.js Normal file
View File

@@ -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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([48.8589, 2.3469]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> 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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);
// L.marker(state.map.center).addTo(map)
// .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
// .openPopup();
// console.log(map);
};

115
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
View File

@@ -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 };