const axios = require("axios"); import { mapUtil } from "@/assets/js/map-util.js"; axios.defaults.headers.common['X-CSRFToken'] = (name => { var re = new RegExp(name + "=([^;]+)"); var value = re.exec(document.cookie); return (value != null) ? unescape(value[1]) : null; })('csrftoken'); const map = { namespaced: true, state: { basemaps: null, basemapsToDelete: [], features: [], geojsonFeatures: null, layers: null }, mutations: { SET_LAYERS(state, layers) { state.layers = layers; }, SET_GEOJSON_FEATURES(state, geojsonFeatures) { state.geojsonFeatures = geojsonFeatures; }, SET_BASEMAPS(state, basemaps) { state.basemaps = basemaps; }, CREATE_BASEMAP(state, id) { state.basemaps = [...state.basemaps, { id, layers: [] }] }, /* DELETE_BASEMAP(state, id) { state.basemaps = state.basemaps.filter(el => el.id !== id) }, */ UPDATE_BASEMAPS(state, basemaps) { state.basemaps = basemaps; }, UPDATE_BASEMAP(state, { title, id, layers }) { const index = state.basemaps.findIndex((el) => el.id === id); if (index !== -1) { if (title) { state.basemaps[index].title = title } if (layers) { state.basemaps[index].layers = layers } } }, DELETE_BASEMAP(state, basemapId) { state.basemaps = state.basemaps.filter(el => el.id !== basemapId); state.basemapsToDelete.push(basemapId); }, REMOVE_BASEMAP_ID_TO_DELETE(state, basemapId) { state.basemapsToDelete = state.basemapsToDelete.filter(el => el !== basemapId); }, REPLACE_BASEMAP_LAYERS(state, { basemapId, layers }) { const index = state.basemaps.findIndex((el) => el.id === basemapId); if (index !== -1) { state.basemaps[index].layers = layers; } }, DELETE_BASEMAP_LAYER(state, { basemapId, layerId }) { const index = state.basemaps.findIndex((el) => el.id === basemapId); if (index !== -1) { state.basemaps[index].layers = state.basemaps[index].layers.filter((el) => el.dataKey !== layerId); } }, UPDATE_BASEMAP_LAYER(state, { basemapId, layerId, layer }) { const index = state.basemaps.findIndex((el) => el.id === basemapId); if (index !== -1) { state.basemaps[index].layers = state.basemaps[index].layers.map( (el) => el.dataKey === layerId ? layer : el ); } }, }, getters: { basemapMaxId: (state) => state.basemaps.reduce((acc, curr) => { if (curr.id > acc) { return curr.id; } else { return acc; } }, 0) }, actions: { GET_LAYERS({ commit }) { return axios .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}layers/`) .then((response) => (commit("SET_LAYERS", response.data))) .catch((error) => { throw error; }); }, GET_BASEMAPS({ commit }, project_slug) { return axios .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/?project__slug=${project_slug}`) .then((response) => { commit("SET_BASEMAPS", response.data) }) .catch((error) => { throw error; }); }, INITIATE_MAP({ state, rootGetters }) { const project = rootGetters.project let mapDefaultViewCenter = [46, 2]; // defaultMapView.center; let mapDefaultViewZoom = 5; // defaultMapView.zoom; mapUtil.createMap({ mapDefaultViewCenter, mapDefaultViewZoom, }); // Load the layers. // - if one basemap exists, check in the localstorage if one active basemap is set // - if no current active basemap, get the first index // - if not, load the default map and service options // todo : create endpoints to get : 'baseMaps' ,'layers' ,'serviceMap' ,'optionsMap' let layersToLoad = null; if (state.baseMaps && state.baseMaps.length > 0) { // Use active one if exists, otherwise index 0 (first basemap in the list) const mapOptions = JSON.parse(localStorage.getItem("geocontrib-map-options")) || {}; const basemapIndex = mapOptions && mapOptions[project] && mapOptions[project]["current-basemap-index"] ? mapOptions[project]["current-basemap-index"] : 0; layersToLoad = state.baseMaps[basemapIndex].layers; layersToLoad.forEach((layerToLoad) => { state.layers.forEach((layer) => { if (layer.id === layerToLoad.id) { layerToLoad = Object.assign(layerToLoad, layer); } }); }); layersToLoad.reverse(); } mapUtil.addLayers(layersToLoad, this.state.configuration.DEFAULT_BASE_MAP.SERVICE, this.state.configuration.DEFAULT_BASE_MAP.OPTIONS); // Remove multiple interactions with the map //mapUtil.getMap().dragging.disable(); mapUtil.getMap().doubleClickZoom.disable(); mapUtil.getMap().scrollWheelZoom.disable(); }, SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) { return new Promise((resolve, reject) => { for (let basemap of state.basemaps) { basemap["project"] = rootState.project_slug // TODO: différencier PUT & POST if (newBasemapIds.includes(basemap.id)) { axios .post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/`, basemap) .then((response) => { resolve(response); }) .catch((error) => { reject(error); throw error; }); } else { axios .put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/${basemap.id}/`, basemap) .then((response) => { resolve(response); }) .catch((error) => { reject(error); throw error; }); } } //* delete in the backend the basemaps that was rewoved from the front for (let basemapId of state.basemapsToDelete) { dispatch("DELETE_BASEMAP", basemapId) .then((response) =>{ resolve(response); }); } state.basemapsToDelete = [] }); }, DELETE_BASEMAP({ commit }, basemapId) { return new Promise((resolve, reject) => { let url = `${this.state.configuration.VUE_APP_DJANGO_API_BASE}base-maps/` + basemapId axios .delete(url) .then((response) => { if (response && response.status === 200) { commit("REMOVE_BASEMAP_ID_TO_DELETE", basemapId) } resolve(response); }) .catch((error) => { reject(error); throw error; }); }); } }, } export default map