diff --git a/src/app/gui/wms/service.js b/src/app/gui/wms/service.js deleted file mode 100644 index 856437fbb..000000000 --- a/src/app/gui/wms/service.js +++ /dev/null @@ -1,408 +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; - this.projectId = ProjectsRegistry.getCurrentProject().getId(); // get current project id used to store data or get data to current project - this.panel; - this.state = { - adminwmsurls: wmsurls, // coming from admin wmsurls - localwmsurls: [] // contain 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 (data === undefined){ - data = { - urls: [], // unique url fro wms - wms: {} // object 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)); - - mapService.on('change-layer-position-map', ({id:name, position}={}) => this.changeLayerData(name, { - key: 'position', - value: position - })); - - 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 - })); - - // load eventually data - 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 - * @param name - * @param config - */ -proto.changeLayerData = function(name, attribute={}) { - const data = this.getLocalWMSData(); - 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 - } - }); - - this.updateLocalWMSData(data); -}; - -/** - * Create a common status object - * @param error - * @param added - * @returns {{error, status: string}} - */ -proto.getRequestStatusObject = function({ - error=false, - added=false -}={}) { - return { - error, - added - } -}; - -/** - * Add new - * @param wmsurl - * @returns {*} - */ -proto.addNewUrl = async function({ - id, - url -} = {}) { - const find = this.state.localwmsurls - .find(({id:localid, url:localurl}) => localurl == url || localid == id); - - const status = this.getRequestStatusObject({ - added: !!find - }); - - 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; - } - } - return status; -}; - -/** - * Delete WMS - * @param name - */ -proto.deleteWms = function(name) { - const data = this.getLocalWMSData(); - Object - .keys(data.wms) - .find(wmsurl => { - const wmsConfigLayers = data.wms[wmsurl]; - - const index = wmsConfigLayers.findIndex(config => config.name == name); - - if (index !== -1) { - wmsConfigLayers.splice(index, 1); - if (wmsConfigLayers.length == 0) { - 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 - */ -proto.checkIfWMSAlreadyAdded = function({ - url, - layers=[] -}={}) { - let added = false; - //get data stored on local storage - 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; - } - }) - } - return added; -}; - -/** - * 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); -}; - -/** - * Method to lad 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 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 - 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 - }; - try { - response = await DataRouterService.getData('ows:wmsCapabilities', { - inputs: { - url - }, - outputs: false - }); - } catch(err) { - console.log(err) - } - return response; -}; - -/** - * Load wms to map - * @param url - * @param name - * @param epsg - * @param position - * @param opacity - * @param visible - * @param layers - * @returns {*} - */ -proto.loadWMSLayerToMap = function({ - url, - name, - epsg, - position, - opacity, - visible=true, - layers=[]}={} -) { - const mapService = GUI.getService('map'); - return mapService.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} - */ -proto.addWMSlayer = async function({ - url, name=`wms_${uniqueId()}`, - epsg, - position, - layers=[], - opacity=1, - visible=true -}={}) { - const data = this.getLocalWMSData(); - const wmsLayerConfig = { - url, - name, - layers, - epsg, - position, - visible, - opacity - }; - if (data.wms[url] === undefined) { - data.wms[url] = [wmsLayerConfig]; - } else { - data.wms[url].push(wmsLayerConfig); - } - this.updateLocalWMSData(data); - try { - await this.loadWMSLayerToMap(wmsLayerConfig); - } catch(err) { - const mapService = GUI.getService('map'); - mapService.removeExternalLayer(name); - this.deleteWms(name); - 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 - * @returns {*} - */ -proto.getLocalWMSData = function() { - return ApplicationService - .getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) && - - ApplicationService - .getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM)[this.projectId]; -}; - -/** - * Method to 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 - }) -}; - -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..71835c77c 100644 --- a/src/app/gui/wms/vue/wms.js +++ b/src/app/gui/wms/vue/wms.js @@ -1,30 +1,440 @@ -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) { + console.warn(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 data.wms[url].some( + ({ layers: addedLayers }) => addedLayers.length === layers.length + ? layers.every((name) => addedLayers.includes(name)) + : undefined + ); + } + + /** + * 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) { + console.warn(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) { + console.warn(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..76dc2c8b7 100644 --- a/src/components/WMS.vue +++ b/src/components/WMS.vue @@ -5,127 +5,154 @@ @@ -144,13 +171,14 @@ loading: false, status: { error: false, - added: false + added: false, } } }, + computed: { + /** - * * @returns {false|*|boolean} */ inputswmsurlvalid() { @@ -165,47 +193,49 @@ this.id.trim() ) ) - } + }, + }, + methods: { + /** - * - * @returns {Promise} + * @returns { Promise } */ async addwmsurl() { - 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.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; }, + /** - * * @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); } - } - } + }, + + }, + } @@ -214,11 +244,13 @@ font-weight: bold; color: #000000; } - .g3w-wmsurl-error{ + .g3w-wmsurl-error { background-color: red; } .g3w-wmsurl-already-added { - background-color: orange; + color: inherit; + font-weight: normal; + display: inline-block; } .wms_url_input_content{ margin-bottom: 5px; 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 @@