From b747be041ed722b40a6af141e7560161a51cd737 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 14 Nov 2023 14:48:46 +0100 Subject: [PATCH 1/8] clean up wms service file --- src/app/gui/wms/service.js | 389 ++++++++++++++++++------------------- 1 file changed, 190 insertions(+), 199 deletions(-) diff --git a/src/app/gui/wms/service.js b/src/app/gui/wms/service.js index 856437fbb..0c1931dc4 100644 --- a/src/app/gui/wms/service.js +++ b/src/app/gui/wms/service.js @@ -1,34 +1,45 @@ -import WMSLayersPanel from 'gui/wms/vue/panel/wmslayerspanel'; +import WMSLayersPanel from 'gui/wms/vue/panel/wmslayerspanel'; import { LOCALSTORAGE_EXTERNALWMS_ITEM } from 'app/constant'; -import DataRouterService from 'services/data'; -import ProjectsRegistry from 'store/projects'; -import ApplicationService from 'services/application'; -import GUI from 'services/gui'; +import DataRouterService from 'services/data'; +import ProjectsRegistry from 'store/projects'; +import ApplicationService from 'services/application'; +import GUI from 'services/gui'; const { uniqueId } = require('utils'); function Service(options={}){ const {wmsurls=[]} = options; + + /** + * @FIXME add description + */ this.projectId = ProjectsRegistry.getCurrentProject().getId(); // get current project id used to store data or get data to current project + + /** + * @FIXME add description + */ this.panel; + + /** + * @FIXME add description + */ this.state = { adminwmsurls: wmsurls, // coming from admin wmsurls - localwmsurls: [] // contain array of object {id, url} + localwmsurls: [] // array of object {id, url} }; GUI.isReady() .then(() => { GUI.getService('map') .isReady() - .then(async () => { - this.state.localwmsurls = await this.loadClientWmsUrls(); - }) + .then(async () => { this.state.localwmsurls = await this.loadClientWmsUrls(); }); }) ProjectsRegistry.onafter('setCurrentProject', async project => { - this.projectId = project.getId(); + this.projectId = project.getId(); this.state.adminwmsurls = project.wmsurls || []; - }) + }); + } const proto = Service.prototype; @@ -38,50 +49,36 @@ const proto = Service.prototype; */ proto.loadClientWmsUrls = async function() { let data = this.getLocalWMSData(); - if (data === undefined){ + + if (undefined === data) { data = { - urls: [], // unique url fro wms - wms: {} // object contain url as key and array of layers bind to url + urls: [], // unique url for wms + wms: {}, // bject contain url as key and array of layers bind to url }; this.updateLocalWMSData(data); } + await GUI.isReady(); setTimeout(() => { - const mapService = GUI.getService('map'); - - mapService.on('remove-external-layer', name => this.deleteWms(name)); + const map = GUI.getService('map'); - mapService.on('change-layer-position-map', ({id:name, position}={}) => this.changeLayerData(name, { - key: 'position', - value: position - })); + map.on('remove-external-layer', name => this.deleteWms(name)); - mapService.on('change-layer-opacity', ({id:name, opacity}={}) => this.changeLayerData(name, { - key: 'opacity', - value: opacity - })); - - mapService.on('change-layer-visibility', ({id:name, visible}={}) => this.changeLayerData(name, { - key: 'visible', - value: visible - })); + map.on('change-layer-position-map', ({ id: name, position } = {}) => this.changeLayerData(name, { key: 'position', value: position })); + map.on('change-layer-opacity', ({ id: name, opacity } = {}) => this.changeLayerData(name, { key: 'opacity', value: opacity })); + map.on('change-layer-visibility', ({ id: name, visible } = {}) => this.changeLayerData(name, { key: 'visible', value: visible })); // load eventually data - Object.keys(data.wms).forEach(url =>{ - data.wms[url].forEach(config => { - this.loadWMSLayerToMap({ - url, - ...config - }) - }) - }); + Object.keys(data.wms).forEach(url => { data.wms[url].forEach(config => { this.loadWMSLayerToMap({ url, ...config }) }); }); }); + return data.urls; }; /** - * General Method to change config of storage layer options as position, opacity + * Change config of storage layer options as position, opacity + * * @param name * @param config */ @@ -90,11 +87,10 @@ proto.changeLayerData = function(name, attribute={}) { Object .keys(data.wms) .find((wmsurl) => { - const wmsConfigLayers = data.wms[wmsurl]; - const index = wmsConfigLayers.findIndex(config => config.name == name); - if (index !== -1) { - wmsConfigLayers[index][attribute.key] = attribute.value; - return true + const index = data.wms[wmsurl].findIndex(config => config.name == name); + if (-1 !== index) { + data.wms[wmsurl][index][attribute.key] = attribute.value; + return true; } }); @@ -103,61 +99,63 @@ proto.changeLayerData = function(name, attribute={}) { /** * Create a common status object - * @param error - * @param added - * @returns {{error, status: string}} + * + * @param { Object } request + * @param request.error + * @param request.added + * + * @returns {{ error, status: string }} */ proto.getRequestStatusObject = function({ - error=false, - added=false -}={}) { - return { - error, - added - } + error = false, + added = false, +} = {}) { + return { error, added }; }; /** - * Add new - * @param wmsurl + * Add new WMS url + * + * @param { Object } wms + * @param { string } wms.id + * @param { string } wms.url + * * @returns {*} */ proto.addNewUrl = async function({ id, - url + url, } = {}) { - const find = this.state.localwmsurls - .find(({id:localid, url:localurl}) => localurl == url || localid == id); + const found = this.state.localwmsurls.find(({ id: localid, url: localurl }) => localurl == url || localid == id); + const status = this.getRequestStatusObject({ added: !!found }); - const status = this.getRequestStatusObject({ - added: !!find - }); + // skip when url already added + if (found) { + return; + } - if (!find) { - try { - const response = await this.getWMSLayers(url); - // if result (meaning response in done right) - if (response.result) { - const data = this.getLocalWMSData(); - this.state.localwmsurls.push({ - id, - url - }); - data.urls = this.state.localwmsurls; - this.updateLocalWMSData(data); - response.wmsurl = url; - this.showWmsLayersPanel(response); - } else status.error = true; - } - catch(err) { - status.error = true; + try { + const response = await this.getWMSLayers(url); + // skip on invalid response + if (!response.result) { + throw 'invalid response'; } + const data = this.getLocalWMSData(); + this.state.localwmsurls.push({ id, url }); + data.urls = this.state.localwmsurls; + this.updateLocalWMSData(data); + response.wmsurl = url; + this.showWmsLayersPanel(response); + } catch(err) { + status.error = true; } + return status; }; /** - * Delete WMS + * Delete WMS by name + * * @param name */ proto.deleteWms = function(name) { @@ -165,46 +163,50 @@ proto.deleteWms = function(name) { Object .keys(data.wms) .find(wmsurl => { - const wmsConfigLayers = data.wms[wmsurl]; + const index = data.wms[wmsurl].findIndex(config => config.name == name); - const index = wmsConfigLayers.findIndex(config => config.name == name); + // skip when .. + if (-1 === index) { + return; + } - if (index !== -1) { - wmsConfigLayers.splice(index, 1); - if (wmsConfigLayers.length == 0) { - delete data.wms[wmsurl]; - } - return true + /** @TODO add description */ + data.wms[wmsurl].splice(index, 1); + + /** @TODO add description */ + if (0 == data.wms[wmsurl].length) { + delete data.wms[wmsurl]; } + + return true; }); this.updateLocalWMSData(data); }; + /** - * Method to find if name or layer of a specific url is already added - * @param name - * @param layers + * @param { Object } opts + * @param opts.name + * @param opts.layers + * + * @returns { boolean } WMS is already added (by `name` or `layer` with a specific url) */ proto.checkIfWMSAlreadyAdded = function({ url, - layers=[] -}={}) { - let added = false; - //get data stored on local storage + layers=[], +} = {}) { const data = this.getLocalWMSData(); - //check if url id find - if (data.wms[url]) { - //check if url and layers area aready added - added = undefined !== data.wms[url] - .find(({layers:addedLayers}) => { - const layersLength = layers.length; - if (addedLayers.length === layersLength) { - return layers.reduce((accumulator, layerName) => { - return accumulator + addedLayers.indexOf(layerName) !== -1 ? 1 : 0; - }, 0) === layersLength; - } - }) + + // wms url is not already added + if (!data.wms[url]) { + return false; } - return added; + + // check if wms layer is already added (by name) + return undefined !== data.wms[url].find(({ layers: addedLayers }) => { + if (addedLayers.length === layers.length) { + return layers.reduce((totLen, name) => totLen + (-1 !== addedLayers.indexOf(name) ? 1 : 0), 0) === layers.length; + } + }); }; /** @@ -222,9 +224,11 @@ proto.deleteWmsUrl = function(id) { }; /** - * Method to lad data from server and show wms layer panel + * Load data from server and show wms layer panel + * * @param url - * @returns {Promise<{added: boolean, error: boolean}>} + * + * @returns { Promise<{ added: boolean, error: boolean }> } */ proto.loadWMSDataAndShowWmsLayersPanel = async function(url) { const status = this.getRequestStatusObject(); @@ -247,60 +251,57 @@ proto.loadWMSDataAndShowWmsLayersPanel = async function(url) { * @returns {WmsLayersPanel} */ proto.showWmsLayersPanel = function(config={}) { - this.panel = new WMSLayersPanel({ - service: this, - config - }); + this.panel = new WMSLayersPanel({ service: this, config }); this.panel.show(); return this.panel; }; /** * Get data of wms url from server - * @param url - * @returns {Promise<{ - * result: boolean, - * info_formats: [], - * layers: [], - * map_formats: [], - * methods: [], - * abstract: null, - * title: null - * }>} + * + * @param { string } url + * + * @returns { Promise<{ +* result: boolean, +* info_formats: [], +* layers: [], +* map_formats: [], +* methods: [], +* abstract: null, +* title: null, +* }> } */ proto.getWMSLayers = async function(url) { - //set base schema of response + // base schema of response let response = { - result: false, - layers: [], - info_formats:[], //@deprecate since v3.9 (inside methods) - abstract: null, - methods: [], //@since v3.9 - map_formats: [], //@deprecate since v3.9 (inside methods) - title: null + result: false, + layers: [], + info_formats: [], // @deprecated since 3.9.0 (inside methods) + abstract: null, + methods: [], // @since 3.9.0 + map_formats: [], // @deprecated since 3.9.0 (inside methods) + title: null }; try { - response = await DataRouterService.getData('ows:wmsCapabilities', { - inputs: { - url - }, - outputs: false - }); + response = await DataRouterService.getData('ows:wmsCapabilities', { inputs: { url }, outputs: false }); } catch(err) { - console.log(err) + console.warn(err); } return response; }; /** * Load wms to map - * @param url - * @param name - * @param epsg - * @param position - * @param opacity - * @param visible - * @param layers + * + * @param { Object } wms + * @param { string } wms.url + * @param { string } wms.name + * @param wms.epsg + * @param wms.position + * @param wms.opacity + * @param wms.visible + * @param wms.layers + * * @returns {*} */ proto.loadWMSLayerToMap = function({ @@ -309,41 +310,36 @@ proto.loadWMSLayerToMap = function({ epsg, position, opacity, - visible=true, - layers=[]}={} -) { - const mapService = GUI.getService('map'); - return mapService.addExternalWMSLayer({ - url, - name, - layers, - epsg, - position, - visible, - opacity - }); + visible = true, + layers = [], +} = {}) { + return GUI.getService('map').addExternalWMSLayer({ url, name, layers, epsg, position, visible, opacity }); }; /** - * Method to check if a layer is already added to map - * @param url - * @param name - * @param epsg - * @param position - * @param methods - * @param layers - * @returns {Promise} + * Check if a layer is already added to map + * + * @param { Object } wms + * @param { string } wms.url + * @param { string } wms.name + * @param wms.epsg + * @param wms.position + * @param wms.methods + * @param wms.layers + * + * @returns { Promise } */ proto.addWMSlayer = async function({ - url, name=`wms_${uniqueId()}`, + url, epsg, position, - layers=[], - opacity=1, - visible=true -}={}) { - const data = this.getLocalWMSData(); - const wmsLayerConfig = { + name = `wms_${uniqueId()}`, + layers = [], + opacity = 1, + visible = true, +} = {}) { + const data = this.getLocalWMSData(); + const config = { url, name, layers, @@ -352,52 +348,47 @@ proto.addWMSlayer = async function({ visible, opacity }; - if (data.wms[url] === undefined) { - data.wms[url] = [wmsLayerConfig]; + + if (undefined === data.wms[url]) { + data.wms[url] = [config]; } else { - data.wms[url].push(wmsLayerConfig); + data.wms[url].push(config); } + this.updateLocalWMSData(data); + try { - await this.loadWMSLayerToMap(wmsLayerConfig); + await this.loadWMSLayerToMap(config); } catch(err) { - const mapService = GUI.getService('map'); - mapService.removeExternalLayer(name); + GUI.getService('map').removeExternalLayer(name); this.deleteWms(name); - setTimeout(() => { - GUI.showUserMessage({ - type: 'warning', - message: 'sidebar.wms.layer_add_error' - }) - }) + setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) }); } + this.panel.close(); }; /** - * Method to get local storage wms data based on current projectId + * Get local storage wms data based on current projectId + * * @returns {*} */ proto.getLocalWMSData = function() { - return ApplicationService - .getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) && - - ApplicationService - .getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM)[this.projectId]; + return ( + ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) && + ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM)[this.projectId] + ); }; /** - * Method to update local storage data based on changes + * Update local storage data based on changes + * * @param data */ proto.updateLocalWMSData = function(data) { - // in case for the firs time is no present set empty object const alldata = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {}; alldata[this.projectId] = data; - ApplicationService.setLocalItem({ - id: LOCALSTORAGE_EXTERNALWMS_ITEM, - data: alldata - }) + ApplicationService.setLocalItem({ id: LOCALSTORAGE_EXTERNALWMS_ITEM, data: alldata }); }; proto.clear = function(){ From 4b1c279de2ac068f1106eb56bae2a3a9679b6b42 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 14 Nov 2023 15:49:20 +0100 Subject: [PATCH 2/8] deleted files: `src/app/gui/wms/service.js` and `src/app/gui/wms/vue/panel/wmslayerspanel.js` replaced by: `src/app/gui/wms/vue/wms.js` --- src/app/gui/wms/service.js | 399 ------------------ src/app/gui/wms/vue/panel/wmslayerspanel.js | 26 -- src/app/gui/wms/vue/wms.js | 441 +++++++++++++++++++- src/components/WMS.vue | 18 +- 4 files changed, 435 insertions(+), 449 deletions(-) delete mode 100644 src/app/gui/wms/service.js delete mode 100644 src/app/gui/wms/vue/panel/wmslayerspanel.js diff --git a/src/app/gui/wms/service.js b/src/app/gui/wms/service.js deleted file mode 100644 index 0c1931dc4..000000000 --- a/src/app/gui/wms/service.js +++ /dev/null @@ -1,399 +0,0 @@ -import WMSLayersPanel from 'gui/wms/vue/panel/wmslayerspanel'; -import { LOCALSTORAGE_EXTERNALWMS_ITEM } from 'app/constant'; -import DataRouterService from 'services/data'; -import ProjectsRegistry from 'store/projects'; -import ApplicationService from 'services/application'; -import GUI from 'services/gui'; - -const { uniqueId } = require('utils'); - -function Service(options={}){ - const {wmsurls=[]} = options; - - /** - * @FIXME add description - */ - this.projectId = ProjectsRegistry.getCurrentProject().getId(); // get current project id used to store data or get data to current project - - /** - * @FIXME add description - */ - this.panel; - - /** - * @FIXME add description - */ - this.state = { - adminwmsurls: wmsurls, // coming from admin wmsurls - localwmsurls: [] // array of object {id, url} - }; - - GUI.isReady() - .then(() => { - GUI.getService('map') - .isReady() - .then(async () => { this.state.localwmsurls = await this.loadClientWmsUrls(); }); - }) - - ProjectsRegistry.onafter('setCurrentProject', async project => { - this.projectId = project.getId(); - this.state.adminwmsurls = project.wmsurls || []; - }); - -} - -const proto = Service.prototype; - -/** - * Getting Wms Urls from local browser storage - */ -proto.loadClientWmsUrls = async function() { - let data = this.getLocalWMSData(); - - if (undefined === data) { - data = { - urls: [], // unique url for wms - wms: {}, // bject contain url as key and array of layers bind to url - }; - this.updateLocalWMSData(data); - } - - await GUI.isReady(); - - setTimeout(() => { - const map = GUI.getService('map'); - - map.on('remove-external-layer', name => this.deleteWms(name)); - - map.on('change-layer-position-map', ({ id: name, position } = {}) => this.changeLayerData(name, { key: 'position', value: position })); - map.on('change-layer-opacity', ({ id: name, opacity } = {}) => this.changeLayerData(name, { key: 'opacity', value: opacity })); - map.on('change-layer-visibility', ({ id: name, visible } = {}) => this.changeLayerData(name, { key: 'visible', value: visible })); - - // load eventually data - Object.keys(data.wms).forEach(url => { data.wms[url].forEach(config => { this.loadWMSLayerToMap({ url, ...config }) }); }); - }); - - return data.urls; -}; - -/** - * Change config of storage layer options as position, opacity - * - * @param name - * @param config - */ -proto.changeLayerData = function(name, attribute={}) { - const data = this.getLocalWMSData(); - Object - .keys(data.wms) - .find((wmsurl) => { - const index = data.wms[wmsurl].findIndex(config => config.name == name); - if (-1 !== index) { - data.wms[wmsurl][index][attribute.key] = attribute.value; - return true; - } - }); - - this.updateLocalWMSData(data); -}; - -/** - * Create a common status object - * - * @param { Object } request - * @param request.error - * @param request.added - * - * @returns {{ error, status: string }} - */ -proto.getRequestStatusObject = function({ - error = false, - added = false, -} = {}) { - return { error, added }; -}; - -/** - * Add new WMS url - * - * @param { Object } wms - * @param { string } wms.id - * @param { string } wms.url - * - * @returns {*} - */ -proto.addNewUrl = async function({ - id, - url, -} = {}) { - const found = this.state.localwmsurls.find(({ id: localid, url: localurl }) => localurl == url || localid == id); - const status = this.getRequestStatusObject({ added: !!found }); - - // skip when url already added - if (found) { - return; - } - - try { - const response = await this.getWMSLayers(url); - // skip on invalid response - if (!response.result) { - throw 'invalid response'; - } - const data = this.getLocalWMSData(); - this.state.localwmsurls.push({ id, url }); - data.urls = this.state.localwmsurls; - this.updateLocalWMSData(data); - response.wmsurl = url; - this.showWmsLayersPanel(response); - } catch(err) { - status.error = true; - } - - return status; -}; - -/** - * Delete WMS by name - * - * @param name - */ -proto.deleteWms = function(name) { - const data = this.getLocalWMSData(); - Object - .keys(data.wms) - .find(wmsurl => { - const index = data.wms[wmsurl].findIndex(config => config.name == name); - - // skip when .. - if (-1 === index) { - return; - } - - /** @TODO add description */ - data.wms[wmsurl].splice(index, 1); - - /** @TODO add description */ - if (0 == data.wms[wmsurl].length) { - delete data.wms[wmsurl]; - } - - return true; - }); - this.updateLocalWMSData(data); -}; - -/** - * @param { Object } opts - * @param opts.name - * @param opts.layers - * - * @returns { boolean } WMS is already added (by `name` or `layer` with a specific url) - */ -proto.checkIfWMSAlreadyAdded = function({ - url, - layers=[], -} = {}) { - const data = this.getLocalWMSData(); - - // wms url is not already added - if (!data.wms[url]) { - return false; - } - - // check if wms layer is already added (by name) - return undefined !== data.wms[url].find(({ layers: addedLayers }) => { - if (addedLayers.length === layers.length) { - return layers.reduce((totLen, name) => totLen + (-1 !== addedLayers.indexOf(name) ? 1 : 0), 0) === layers.length; - } - }); -}; - -/** - * Delete url from local storage - * @param id - */ -proto.deleteWmsUrl = function(id) { - this.state.localwmsurls = this.state.localwmsurls - .filter(({id:localid}) => id !== localid); - - const data = this.getLocalWMSData(); - - data.urls = this.state.localwmsurls; - this.updateLocalWMSData(data); -}; - -/** - * Load data from server and show wms layer panel - * - * @param url - * - * @returns { Promise<{ added: boolean, error: boolean }> } - */ -proto.loadWMSDataAndShowWmsLayersPanel = async function(url) { - const status = this.getRequestStatusObject(); - try { - const response = await this.getWMSLayers(url); - status.error = !response.result; - if (response.result) { - response.wmsurl = url; - this.showWmsLayersPanel(response); - } - } catch(err) { - status.error = true; - } - return status; -}; - -/** - * show add wms layers to wms panel - * @param config - * @returns {WmsLayersPanel} - */ -proto.showWmsLayersPanel = function(config={}) { - this.panel = new WMSLayersPanel({ service: this, config }); - this.panel.show(); - return this.panel; -}; - -/** - * Get data of wms url from server - * - * @param { string } url - * - * @returns { Promise<{ -* result: boolean, -* info_formats: [], -* layers: [], -* map_formats: [], -* methods: [], -* abstract: null, -* title: null, -* }> } - */ -proto.getWMSLayers = async function(url) { - // base schema of response - let response = { - result: false, - layers: [], - info_formats: [], // @deprecated since 3.9.0 (inside methods) - abstract: null, - methods: [], // @since 3.9.0 - map_formats: [], // @deprecated since 3.9.0 (inside methods) - title: null - }; - try { - response = await DataRouterService.getData('ows:wmsCapabilities', { inputs: { url }, outputs: false }); - } catch(err) { - console.warn(err); - } - return response; -}; - -/** - * Load wms to map - * - * @param { Object } wms - * @param { string } wms.url - * @param { string } wms.name - * @param wms.epsg - * @param wms.position - * @param wms.opacity - * @param wms.visible - * @param wms.layers - * - * @returns {*} - */ -proto.loadWMSLayerToMap = function({ - url, - name, - epsg, - position, - opacity, - visible = true, - layers = [], -} = {}) { - return GUI.getService('map').addExternalWMSLayer({ url, name, layers, epsg, position, visible, opacity }); -}; - -/** - * Check if a layer is already added to map - * - * @param { Object } wms - * @param { string } wms.url - * @param { string } wms.name - * @param wms.epsg - * @param wms.position - * @param wms.methods - * @param wms.layers - * - * @returns { Promise } - */ -proto.addWMSlayer = async function({ - url, - epsg, - position, - name = `wms_${uniqueId()}`, - layers = [], - opacity = 1, - visible = true, -} = {}) { - const data = this.getLocalWMSData(); - const config = { - url, - name, - layers, - epsg, - position, - visible, - opacity - }; - - if (undefined === data.wms[url]) { - data.wms[url] = [config]; - } else { - data.wms[url].push(config); - } - - this.updateLocalWMSData(data); - - try { - await this.loadWMSLayerToMap(config); - } catch(err) { - GUI.getService('map').removeExternalLayer(name); - this.deleteWms(name); - setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) }); - } - - this.panel.close(); -}; - -/** - * Get local storage wms data based on current projectId - * - * @returns {*} - */ -proto.getLocalWMSData = function() { - return ( - ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) && - ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM)[this.projectId] - ); -}; - -/** - * Update local storage data based on changes - * - * @param data - */ -proto.updateLocalWMSData = function(data) { - const alldata = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {}; - alldata[this.projectId] = data; - ApplicationService.setLocalItem({ id: LOCALSTORAGE_EXTERNALWMS_ITEM, data: alldata }); -}; - -proto.clear = function(){ - this.panel = null; -}; - - -export default Service \ No newline at end of file diff --git a/src/app/gui/wms/vue/panel/wmslayerspanel.js b/src/app/gui/wms/vue/panel/wmslayerspanel.js deleted file mode 100644 index 620a20279..000000000 --- a/src/app/gui/wms/vue/panel/wmslayerspanel.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as vueComponentOptions from 'components/WMSLayersPanel.vue'; - -const { base, inherit, uniqueId } = require('utils'); -const Panel = require('gui/panel'); - -const WMSLayersPanelComponent = Vue.extend(vueComponentOptions); - -function WmsLayersPanel(options = {}) { - const {service, config} = options; - this.setService(service); - this.id = uniqueId(); - this.title = 'sidebar.wms.panel.title'; - const internalPanel = new WMSLayersPanelComponent({ - service, - config - }); - this.setInternalPanel(internalPanel); - this.unmount = function() { - return base(this, 'unmount') - .then(() => service.clear()) - } -} - -inherit(WmsLayersPanel, Panel); - -export default WmsLayersPanel; diff --git a/src/app/gui/wms/vue/wms.js b/src/app/gui/wms/vue/wms.js index f2c3015e0..dbf0f5da7 100644 --- a/src/app/gui/wms/vue/wms.js +++ b/src/app/gui/wms/vue/wms.js @@ -1,30 +1,437 @@ -import * as vueComponentOptions from 'components/WMS.vue'; -import Service from 'gui/wms/service'; -import GUI from 'services/gui'; +import * as vueComponentOptions from 'components/WMS.vue'; +import * as vuePanelComponentOptions from 'components/WMSLayersPanel.vue'; +import { LOCALSTORAGE_EXTERNALWMS_ITEM } from 'app/constant'; +import DataRouterService from 'services/data'; +import ProjectsRegistry from 'store/projects'; +import ApplicationService from 'services/application'; +import GUI from 'services/gui'; +import { base, inherit, uniqueId } from 'utils'; -const { base, inherit } = require('utils'); -const Component = require('gui/component/component'); +const Panel = require('gui/panel'); +const Component = require('gui/component/component'); +const InternalComponent = Vue.extend(vueComponentOptions); +const WMSLayersPanelComponent = Vue.extend(vuePanelComponentOptions); -const InternalComponent = Vue.extend(vueComponentOptions); +/** + * ORIGINAL SOURCE: src/app/gui/wms/vue/panel/wmslayerspanel.js@3.8.15 + */ +function WmsLayersPanel(options = {}) { + const { service, config } = options; + this.setService(service); + this.id = uniqueId(); + this.title = 'sidebar.wms.panel.title'; + const internal = new WMSLayersPanelComponent({ service, config }); + this.setInternalPanel(internal); + this.unmount = function() { return base(this, 'unmount').then(() => service.clear()); }; +} -function WmsComponent(options={}) { - base(this, options); - this._service = new Service(options); - this.title = "WMS"; +inherit(WmsLayersPanel, Panel); + +/** + * ORIGINAL SOURCE: src/app/gui/wms/service.js@3.8.15 + */ +class Service { + + constructor(options = {}) { + + const { + wmsurls = [] + } = options; + + /** + * Current project id used to store data or get data to current project + */ + this.projectId = ProjectsRegistry.getCurrentProject().getId(); // + + /** + * @FIXME add description + */ + this.panel; + + /** + * @FIXME add description + */ + this.state = { + adminwmsurls: wmsurls, + localwmsurls: [] // array of object {id, url} + }; + + GUI.isReady() + .then(() => { + GUI.getService('map') + .isReady() + .then(async () => { this.state.localwmsurls = await this.loadClientWmsUrls(); }); + }); + + ProjectsRegistry.onafter('setCurrentProject', async (project) => { + this.projectId = project.getId(); + this.state.adminwmsurls = project.wmsurls || []; + }); + + } + + /** + * Getting Wms Urls from local browser storage + */ + async loadClientWmsUrls() { + let data = this.getLocalWMSData(); + + if (undefined === data) { + data = { + urls: [], // unique url for wms + wms: {}, // bject contain url as key and array of layers bind to url + }; + this.updateLocalWMSData(data); + } + + await GUI.isReady(); + + setTimeout(() => { + const map = GUI.getService('map'); + + map.on('remove-external-layer', name => this.deleteWms(name)); - const internalComponent = new InternalComponent({ - service: this._service - }); + map.on('change-layer-position-map', ({ id: name, position } = {}) => this.changeLayerData(name, { key: 'position', value: position })); + map.on('change-layer-opacity', ({ id: name, opacity } = {}) => this.changeLayerData(name, { key: 'opacity', value: opacity })); + map.on('change-layer-visibility', ({ id: name, visible } = {}) => this.changeLayerData(name, { key: 'visible', value: visible })); - internalComponent.state = this._service.state; - this.setInternalComponent(internalComponent); + // load eventually data + Object.keys(data.wms).forEach(url => { data.wms[url].forEach(config => { this.loadWMSLayerToMap({ url, ...config }) }); }); + }); - this._setOpen = function(bool=false) { + return data.urls; + } + + /** + * Change config of storage layer options as position, opacity + * + * @param { Object } opts + * @param { string } opts.name + * @param opts.config + */ + changeLayerData(name, attribute = {}) { + const data = this.getLocalWMSData(); + Object + .keys(data.wms) + .find((wmsurl) => { + const index = data.wms[wmsurl].findIndex(config => config.name == name); + if (-1 !== index) { + data.wms[wmsurl][index][attribute.key] = attribute.value; + return true; + } + }); + + this.updateLocalWMSData(data); + } + + /** + * Create a common status object + * + * @param { Object } request + * @param request.error + * @param request.added + * + * @returns {{ error, status: string }} + */ + getRequestStatusObject({ + error = false, + added = false, + } = {}) { + return { error, added }; + } + + /** + * Add new WMS url + * + * @param { Object } wms + * @param { string } wms.id + * @param { string } wms.url + * + * @returns {*} + */ + async addNewUrl({ + id, + url, + } = {}) { + const found = this.state.localwmsurls.find(({ id: localid, url: localurl }) => localurl == url || localid == id); + const status = this.getRequestStatusObject({ added: !!found }); + + // skip when url already added + if (found) { + return status; + } + + try { + const response = await this.getWMSLayers(url); + // skip on invalid response + if (!response.result) { + throw 'invalid response'; + } + const data = this.getLocalWMSData(); + this.state.localwmsurls.push({ id, url }); + data.urls = this.state.localwmsurls; + this.updateLocalWMSData(data); + response.wmsurl = url; + this.showWmsLayersPanel(response); + } catch(err) { + status.error = true; + } + + return status; + } + + /** + * Delete WMS by name + * + * @param name + */ + deleteWms(name) { + const data = this.getLocalWMSData(); + Object + .keys(data.wms) + .find(wmsurl => { + const index = data.wms[wmsurl].findIndex(config => config.name == name); + + // skip when .. + if (-1 === index) { + return; + } + + /** @TODO add description */ + data.wms[wmsurl].splice(index, 1); + + /** @TODO add description */ + if (0 == data.wms[wmsurl].length) { + delete data.wms[wmsurl]; + } + + return true; + }); + this.updateLocalWMSData(data); + } + + /** + * @param { Object } opts + * @param opts.name + * @param opts.layers + * + * @returns { boolean } WMS is already added (by `name` or `layer` with a specific url) + */ + checkIfWMSAlreadyAdded({ + url, + layers=[], + } = {}) { + const data = this.getLocalWMSData(); + + // wms url is not already added + if (!data.wms[url]) { + return false; + } + + // check if wms layer is already added (by name) + return undefined !== data.wms[url].find(({ layers: addedLayers }) => { + if (addedLayers.length === layers.length) { + return layers.reduce((totLen, name) => totLen + (-1 !== addedLayers.indexOf(name) ? 1 : 0), 0) === layers.length; + } + }); + } + + /** + * Delete url from local storage + * @param id + */ + deleteWmsUrl(id) { + this.state.localwmsurls = this.state.localwmsurls .filter(({ id: localid }) => id !== localid); + const data = this.getLocalWMSData(); + data.urls = this.state.localwmsurls; + this.updateLocalWMSData(data); + } + + /** + * Load data from server and show wms layer panel + * + * @param url + * + * @returns { Promise<{ added: boolean, error: boolean }> } + */ + async loadWMSDataAndShowWmsLayersPanel(url) { + const status = this.getRequestStatusObject(); + try { + const response = await this.getWMSLayers(url); + status.error = !response.result; + if (response.result) { + response.wmsurl = url; + this.showWmsLayersPanel(response); + } + } catch(err) { + status.error = true; + } + return status; + } + + /** + * show add wms layers to wms panel + * @param config + * @returns {WmsLayersPanel} + */ + showWmsLayersPanel(config={}) { + this.panel = new WmsLayersPanel({ service: this, config }); + this.panel.show(); + return this.panel; + } + + /** + * Get data of wms url from server + * + * @param { string } url + * + * @returns { Promise<{ + * result: boolean, + * info_formats: [], + * layers: [], + * map_formats: [], + * methods: [], + * abstract: null, + * title: null, + * }> } + */ + async getWMSLayers(url) { + // base schema of response + let response = { + result: false, + layers: [], + info_formats: [], // @deprecated since 3.9.0 (inside methods) + abstract: null, + methods: [], // @since 3.9.0 + map_formats: [], // @deprecated since 3.9.0 (inside methods) + title: null + }; + try { + response = await DataRouterService.getData('ows:wmsCapabilities', { inputs: { url }, outputs: false }); + } catch(err) { + console.warn(err); + } + return response; + } + + /** + * Load wms to map + * + * @param { Object } wms + * @param { string } wms.url + * @param { string } wms.name + * @param wms.epsg + * @param wms.position + * @param wms.opacity + * @param wms.visible + * @param wms.layers + * + * @returns {*} + */ + loadWMSLayerToMap({ + url, + name, + epsg, + position, + opacity, + visible = true, + layers = [], + } = {}) { + return GUI.getService('map').addExternalWMSLayer({ url, name, layers, epsg, position, visible, opacity }); + } + + /** + * Check if a layer is already added to map + * + * @param { Object } wms + * @param { string } wms.url + * @param { string } wms.name + * @param wms.epsg + * @param wms.position + * @param wms.methods + * @param wms.layers + * + * @returns { Promise } + */ + async addWMSlayer({ + url, + epsg, + position, + name = `wms_${uniqueId()}`, + layers = [], + opacity = 1, + visible = true, + } = {}) { + const data = this.getLocalWMSData(); + const config = { + url, + name, + layers, + epsg, + position, + visible, + opacity + }; + + if (undefined === data.wms[url]) { + data.wms[url] = [config]; + } else { + data.wms[url].push(config); + } + + this.updateLocalWMSData(data); + + try { + await this.loadWMSLayerToMap(config); + } catch(err) { + GUI.getService('map').removeExternalLayer(name); + this.deleteWms(name); + setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) }); + } + + this.panel.close(); + } + + /** + * Get local storage wms data based on current projectId + * + * @returns {*} + */ + getLocalWMSData() { + const item = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM); + return item && item[this.projectId]; + } + + /** + * Update local storage data based on changes + * + * @param data + */ + updateLocalWMSData(data) { + const alldata = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {}; + alldata[this.projectId] = data; + ApplicationService.setLocalItem({ id: LOCALSTORAGE_EXTERNALWMS_ITEM, data: alldata }); + } + + clear() { + this.panel = null; + } + +} + +function WmsComponent(options={}) { + base(this, options); + this._service = new Service(options); + this.title = "WMS"; + const internal = new InternalComponent({ service: this._service }); + internal.state = this._service.state; + this.setInternalComponent(internal); + this._setOpen = function(bool = false) { this.internalComponent.state.open = bool; if (bool) { GUI.closeContent(); } - } + }; } inherit(WmsComponent, Component); diff --git a/src/components/WMS.vue b/src/components/WMS.vue index a5d90facb..c57088be9 100644 --- a/src/components/WMS.vue +++ b/src/components/WMS.vue @@ -52,6 +52,7 @@
  • + ℹ️
    @@ -148,6 +149,7 @@ } } }, + computed: { /** * @@ -167,6 +169,7 @@ ) } }, + methods: { /** * @@ -174,10 +177,7 @@ */ async addwmsurl() { this.loading = true; - const {error, added} = await this.$options.service.addNewUrl({ - url: this.url, - id: this.id - }); + const { error, added } = await this.$options.service.addNewUrl({ url: this.url, id: this.id }); this.status.error = error; this.status.added = added; this.loading = false; @@ -205,7 +205,8 @@ console.log(err) } } - } + }, + } @@ -214,11 +215,14 @@ font-weight: bold; color: #000000; } - .g3w-wmsurl-error{ + .g3w-wmsurl-error { background-color: red; } .g3w-wmsurl-already-added { - background-color: orange; + /* background-color: orange; */ + color: inherit; + font-weight: normal; + display: inline-block; } .wms_url_input_content{ margin-bottom: 5px; From 18b3fb2f258ba04ab8043c1f164ca809e4b2edf1 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 14 Nov 2023 16:11:58 +0100 Subject: [PATCH 3/8] console.warn --- src/app/gui/wms/vue/wms.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/gui/wms/vue/wms.js b/src/app/gui/wms/vue/wms.js index dbf0f5da7..1f5e3ac31 100644 --- a/src/app/gui/wms/vue/wms.js +++ b/src/app/gui/wms/vue/wms.js @@ -174,6 +174,7 @@ class Service { response.wmsurl = url; this.showWmsLayersPanel(response); } catch(err) { + console.warn(err); status.error = true; } @@ -264,6 +265,7 @@ class Service { this.showWmsLayersPanel(response); } } catch(err) { + console.warn(err); status.error = true; } return status; @@ -384,6 +386,7 @@ class Service { try { await this.loadWMSLayerToMap(config); } catch(err) { + console.warn(err); GUI.getService('map').removeExternalLayer(name); this.deleteWms(name); setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) }); From a0dcd23cbe54403471c02f2575dfe24fb3108772 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 14 Nov 2023 16:12:05 +0100 Subject: [PATCH 4/8] code format --- src/components/WMS.vue | 172 ++++++++++++++++++++++++----------------- 1 file changed, 100 insertions(+), 72 deletions(-) diff --git a/src/components/WMS.vue b/src/components/WMS.vue index c57088be9..045ef8f17 100644 --- a/src/components/WMS.vue +++ b/src/components/WMS.vue @@ -5,128 +5,154 @@ @@ -145,14 +171,14 @@ loading: false, status: { error: false, - added: false + added: false, } } }, computed: { + /** - * * @returns {false|*|boolean} */ inputswmsurlvalid() { @@ -167,44 +193,47 @@ this.id.trim() ) ) - } + }, + }, methods: { + /** - * - * @returns {Promise} + * @returns { Promise } */ async addwmsurl() { - this.loading = true; + this.loading = true; const { error, added } = await this.$options.service.addNewUrl({ url: this.url, id: this.id }); - this.status.error = error; - this.status.added = added; - this.loading = false; + this.status.error = error; + this.status.added = added; + this.loading = false; }, + /** - * * @param id */ deleteWmsUrl(id) { this.$options.service.deleteWmsUrl(id) }, + /** - * * @param url - * @returns {Promise} + * + * @returns { Promise } */ async showWmsLayersPanel(url) { try { - this.loading = true; - const {error, added} = await this.$options.service.loadWMSDataAndShowWmsLayersPanel(url); - this.status.error = error; - this.status.added = added; - this.loading = false; + this.loading = true; + const { error, added } = await this.$options.service.loadWMSDataAndShowWmsLayersPanel(url); + this.status.error = error; + this.status.added = added; + this.loading = false; } catch(err) { - console.log(err) + console.warn(err); } - } + }, + }, } @@ -219,7 +248,6 @@ background-color: red; } .g3w-wmsurl-already-added { - /* background-color: orange; */ color: inherit; font-weight: normal; display: inline-block; From 37de3c24a6d1619e6b9b21834398c7e4e7dda74d Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 14 Nov 2023 16:12:47 +0100 Subject: [PATCH 5/8] code format --- src/components/WMS.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/WMS.vue b/src/components/WMS.vue index 045ef8f17..48ff75274 100644 --- a/src/components/WMS.vue +++ b/src/components/WMS.vue @@ -145,8 +145,8 @@
    {{url}} -
    + class = "g3w-long-text" :title="url" + >{{url}}
    From 57f74de936cca4614d599337429ef0c3fb15b428 Mon Sep 17 00:00:00 2001 From: Raruto Date: Wed, 15 Nov 2023 09:25:58 +0100 Subject: [PATCH 6/8] refactor function: `checkIfWMSAlreadyAdded` --- src/app/gui/wms/vue/wms.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/gui/wms/vue/wms.js b/src/app/gui/wms/vue/wms.js index 1f5e3ac31..71835c77c 100644 --- a/src/app/gui/wms/vue/wms.js +++ b/src/app/gui/wms/vue/wms.js @@ -230,11 +230,11 @@ class Service { } // check if wms layer is already added (by name) - return undefined !== data.wms[url].find(({ layers: addedLayers }) => { - if (addedLayers.length === layers.length) { - return layers.reduce((totLen, name) => totLen + (-1 !== addedLayers.indexOf(name) ? 1 : 0), 0) === layers.length; - } - }); + return data.wms[url].some( + ({ layers: addedLayers }) => addedLayers.length === layers.length + ? layers.every((name) => addedLayers.includes(name)) + : undefined + ); } /** From bbda1318020bd7c2a90f4cb01752360536aab020 Mon Sep 17 00:00:00 2001 From: Raruto Date: Wed, 15 Nov 2023 09:36:11 +0100 Subject: [PATCH 7/8] code format --- src/components/WMSLayersPanel.vue | 151 +++++++++++++++--------------- 1 file changed, 77 insertions(+), 74 deletions(-) diff --git a/src/components/WMSLayersPanel.vue b/src/components/WMSLayersPanel.vue index 3f803afa9..6b182f71c 100644 --- a/src/components/WMSLayersPanel.vue +++ b/src/components/WMSLayersPanel.vue @@ -6,114 +6,115 @@