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

address selection: fix leaflet icon url + others fix (WIP)

Browse Source
This commit is contained in:
nobohan 2021-05-11 14:56:56 +02:00
parent ea0b2407df
commit c3926991ac
5 changed files with 22 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
View File

@ -31,7 +31,7 @@
</div>
<div class="address_form__map">
<address-map>
<address-map ref="addressMap">
</address-map>
</div>
@ -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
}
},
},

22
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressMap.vue
View File

@ -1,12 +1,13 @@
<template>
<div class="container">
<div id='address_map' v-bind='init' style='height:400px; width:400px;'></div>
<div id='address_map' style='height:400px; width:400px;'></div>
</div>
</template>
<script>
import L from 'leaflet';
import markerIconPng from 'leaflet/dist/images/marker-icon.png'
import 'leaflet/dist/leaflet.css';
let map;
@ -25,11 +26,6 @@ export default {
}
},
},
// watch: {
// center: get() {
// console.log()
// }
// },
methods:{
init() {
map = L.map('address_map').setView([48.8589, 2.3469], 12);
@ -38,16 +34,16 @@ export default {
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();
const markerIcon = L.icon({
iconUrl: markerIconPng,
});
L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
console.log(map);
},
update() {
console.log('update map', this.$store.state.addressMap.center)
map.setView(this.$store.state.addressMap.center, 12);
//TODO update map view based on the store map centerS
console.log('update map with : ', this.$store.getMapCenter())
map.setView(this.$store.getMapCenter(), 12);
}
},
mounted(){