From 5258584147725337b51fe99dddb2cb7e917bc93c Mon Sep 17 00:00:00 2001 From: Raruto Date: Mon, 17 Jul 2023 07:37:36 +0200 Subject: [PATCH 01/17] consolidate all gui code within `services/gui.js` --- src/index.prod.js | 1138 +++++++++---------------------------------- src/services/gui.js | 880 +++++++++++++++++++++++++++++++-- 2 files changed, 1070 insertions(+), 948 deletions(-) diff --git a/src/index.prod.js b/src/index.prod.js index 82d63721a..ab866a28f 100644 --- a/src/index.prod.js +++ b/src/index.prod.js @@ -10,86 +10,89 @@ import './deprecated'; import './globals'; //import core -import ApplicationState from 'store/application-state'; +import ApplicationState from 'store/application-state'; //import services -import ApplicationService from 'services/application'; -import viewport from "services/viewport"; -import GUI from 'services/gui'; -import FloatbarService from "services/floatbar"; -import NavbarItemsService from 'services/navbaritems'; -import SidebarService from 'services/sidebar'; -import ViewportService from 'services/viewport'; +import ApplicationService from 'services/application'; +import viewport from 'services/viewport'; +import GUI from 'services/gui'; +import FloatbarService from 'services/floatbar'; +import NavbarItemsService from 'services/navbaritems'; +import SidebarService from 'services/sidebar'; +import ViewportService from 'services/viewport'; // import store -import ComponentsRegistry from 'store/components'; +import ComponentsRegistry from 'store/components'; //components -import App from 'components/App.vue'; -import ImageComponent from 'components/GlobalImage.vue'; -import GalleryImagesComponent from 'components/GlobalGallery.vue'; -import GeospatialComponet from 'components/GlobalGeo.vue'; -import Skeleton from 'components/GlobalSkeleton.vue'; -import BarLoader from 'components/GlobalBarLoader'; -import Progressbar from 'components/GlobalProgressBar'; -import HelpDiv from 'components/GlobalHelpDiv.vue'; -import Resize from 'components/GlobalResize.vue' -import LayerPositions from 'components/GlobalLayerPositions.vue'; -import DateTime from 'components/GlobalDateTime.vue'; -import Range from 'components/GlobalRange.vue'; -import ResizeIcon from 'components/GlobalResizeIcon.vue'; -import Tabs from 'components/GlobalTabs.vue'; -import Divider from 'components/GlobalDivider.vue'; -import FloatbarComponent from "components/Floatbar.vue"; -import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue'; +import App from 'components/App.vue'; +import ImageComponent from 'components/GlobalImage.vue'; +import GalleryImagesComponent from 'components/GlobalGallery.vue'; +import GeospatialComponet from 'components/GlobalGeo.vue'; +import Skeleton from 'components/GlobalSkeleton.vue'; +import BarLoader from 'components/GlobalBarLoader'; +import Progressbar from 'components/GlobalProgressBar'; +import HelpDiv from 'components/GlobalHelpDiv.vue'; +import Resize from 'components/GlobalResize.vue' +import LayerPositions from 'components/GlobalLayerPositions.vue'; +import DateTime from 'components/GlobalDateTime.vue'; +import Range from 'components/GlobalRange.vue'; +import ResizeIcon from 'components/GlobalResizeIcon.vue'; +import Tabs from 'components/GlobalTabs.vue'; +import Divider from 'components/GlobalDivider.vue'; +import FloatbarComponent from 'components/Floatbar.vue'; +import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue'; import NavbaritemsRightComponent from 'components/NavbaritemsRight.vue'; -import SidebarComponent from 'components/Sidebar.vue'; -import ViewportComponent from 'components/Viewport.vue'; +import SidebarComponent from 'components/Sidebar.vue'; +import ViewportComponent from 'components/Viewport.vue'; //directives -import vDisabled from 'directives/v-disabled'; -import vChecked from 'directives/v-checked'; -import vSelectedFirst from 'directives/v-selected-first'; -import vSelect2 from 'directives/v-select2'; -import vTToltip from 'directives/v-t-tooltip'; -import vTHtml from 'directives/v-t-html'; -import vTPlaceholder from 'directives/v-t-placeholder'; -import vTTitle from 'directives/v-t-title'; -import vT from "directives/v-t"; -import vTPlugin from 'directives/v-t-plugin'; -import vPlugins from 'directives/v-plugins'; -import vOnline from 'directives/v-online'; -import vDownload from 'directives/v-download'; +import vDisabled from 'directives/v-disabled'; +import vChecked from 'directives/v-checked'; +import vSelectedFirst from 'directives/v-selected-first'; +import vSelect2 from 'directives/v-select2'; +import vTToltip from 'directives/v-t-tooltip'; +import vTHtml from 'directives/v-t-html'; +import vTPlaceholder from 'directives/v-t-placeholder'; +import vTTitle from 'directives/v-t-title'; +import vT from "directives/v-t"; +import vTPlugin from 'directives/v-t-plugin'; +import vPlugins from 'directives/v-plugins'; +import vOnline from 'directives/v-online'; +import vDownload from 'directives/v-download'; // constants -import { FONT_AWESOME_ICONS } from 'app/constant'; - -const { base, inherit, toRawType } = require('core/utils/utils'); -const { t, tPlugin } = require('core/i18n/i18n.service'); -const G3WObject = require('core/g3wobject'); -const ProjectsMenuComponent = require('gui/projectsmenu/projectsmenu'); -const ChangeMapMenuComponent = require('gui/changemapmenu/changemapmenu'); +import { FONT_AWESOME_ICONS } from 'app/constant'; +const { base, inherit } = require('core/utils/utils'); +const { t, tPlugin } = require('core/i18n/i18n.service'); +const G3WObject = require('core/g3wobject'); /** * Install global components * * ORIGINAL SOURCE: src/app/gui/vue/vue.globalcomponents.js@3.6 */ -Vue.component(ImageComponent.name, ImageComponent); +Vue.component(ImageComponent.name, ImageComponent); Vue.component(GalleryImagesComponent.name, GalleryImagesComponent); -Vue.component(GeospatialComponet.name, GeospatialComponet); -Vue.component(BarLoader.name, BarLoader); -Vue.component(Progressbar.name, Progressbar); -Vue.component(Skeleton.name, Skeleton); -Vue.component(HelpDiv.name, HelpDiv); -Vue.component(Resize.name, Resize); -Vue.component(LayerPositions.name, LayerPositions); -Vue.component(DateTime.name, DateTime); -Vue.component(Range.name, Range); -Vue.component(ResizeIcon.name, ResizeIcon); -Vue.component(Tabs.name, Tabs); -Vue.component(Divider.name, Divider); +Vue.component(GeospatialComponet.name, GeospatialComponet); +Vue.component(BarLoader.name, BarLoader); +Vue.component(Progressbar.name, Progressbar); +Vue.component(Skeleton.name, Skeleton); +Vue.component(HelpDiv.name, HelpDiv); +Vue.component(Resize.name, Resize); +Vue.component(LayerPositions.name, LayerPositions); +Vue.component(DateTime.name, DateTime); +Vue.component(Range.name, Range); +Vue.component(ResizeIcon.name, ResizeIcon); +Vue.component(Tabs.name, Tabs); +Vue.component(Divider.name, Divider); +Vue.component('sidebar', SidebarComponent); +Vue.component('navbarleftitems', NavbaritemsLeftComponent); +Vue.component('navbarrightitems', NavbaritemsRightComponent); +Vue.component('viewport', ViewportComponent); +Vue.component('floatbar', FloatbarComponent); +Vue.component('app', App); /** * Install application filters @@ -104,19 +107,19 @@ Vue.filter('tPlugin', value => value !== null ? tPlugin(value) : ''); * * ORIGINAL SOURCE: src/app/gui/vue/vue.directives.js@v3.6 */ -Vue.directive("disabled", vDisabled); -Vue.directive("checked", vChecked); +Vue.directive("disabled", vDisabled); +Vue.directive("checked", vChecked); Vue.directive("selected-first", vSelectedFirst); -Vue.directive('select2', vSelect2); -Vue.directive('t-tooltip', vTToltip); -Vue.directive('t-html', vTHtml); -Vue.directive('t-placeholder', vTPlaceholder); -Vue.directive('t-title', vTTitle); -Vue.directive("t", vT); -Vue.directive("t-plugin", vTPlugin); -Vue.directive("plugins", vPlugins); -Vue.directive("online", vOnline); -Vue.directive("download", vDownload); +Vue.directive('select2', vSelect2); +Vue.directive('t-tooltip', vTToltip); +Vue.directive('t-html', vTHtml); +Vue.directive('t-placeholder', vTPlaceholder); +Vue.directive('t-title', vTTitle); +Vue.directive("t", vT); +Vue.directive("t-plugin", vTPlugin); +Vue.directive("plugins", vPlugins); +Vue.directive("online", vOnline); +Vue.directive("download", vDownload); /** @@ -145,7 +148,7 @@ Vue.use({ font: this.font } }, - addFontClass({name, className}={}){ + addFontClass({name, className}={}) { let added = this.font[name] === undefined; if (added) this.font[name] = className; return added; @@ -179,301 +182,91 @@ const layout = $.LayoutManager; // loading spinner at beginning layout.loading(true); +// dataTable Translations and custom extentions +const setDataTableLanguage = function(dataTable = null) { + const languageOptions = { + "language": { + "sSearch": '', + "searchPlaceholder": t("dosearch"), + "sLengthMenu": t("dataTable.lengthMenu"), + "paginate": { + "previous": t("dataTable.previous"), + "next": t("dataTable.next"), + }, + "info": t("dataTable.info"), + "zeroRecords": t("dataTable.nodatafilterd"), + "infoFiltered": '', + } + }; + // set form control class to filter + $.extend( $.fn.dataTableExt.oStdClasses, { "sFilterInput": "form-control search" }); + if (dataTable) { + dataTable.dataTable({ "oLanguage": languageOptions }); + } else { + $.extend( true, $.fn.dataTable.defaults, languageOptions); + } +}; + /** * ORIGINAL SOURCE: src/gui/app/index.js@3.4 + * + * @deprecated since 3.9.0. Will be removed in 4.0.0. (create your own vue app instead..) */ const ApplicationTemplate = function({ApplicationService}) { + const appLayoutConfig = ApplicationService.getConfig().layout || {}; + // useful to build a difference layout/component based on mobile or not this._isMobile = isMobile.any; + this._isIframe = appLayoutConfig.iframe; + //ussefult ot not close user message when set content is called this.sizes = { sidebar: { width:0 } }; - /* - usefull to show onaly last waiting request output - at moment will be an object - { - stop: method to sot to show result - } + + /** + * usefull to show onaly last waiting request output + * at moment will be an object + * { + * stop: method to sot to show result + * } */ this.waitingoutputdataplace = null; - this.init = function() { - // create Vue App - this._createApp(); - }; - // create application config - this._createTemplateConfig = function() { - const G3WTemplate = Vue.prototype.g3wtemplate; - const appTitle = ApplicationService.getConfig().apptitle || 'G3W Suite'; - const ContentsComponent = require('gui/viewport/contentsviewer'); - const CatalogComponent = require('gui/catalog/vue/catalog'); - const SearchComponent = require('gui/search/vue/search'); - const QueryBuilderUIFactory = require('gui/querybuilder/querybuilderuifactory'); - const PrintComponent = require('gui/print/vue/print'); - const MetadataComponent = require('gui/metadata/vue/metadata'); - const ToolsComponent = require('gui/tools/vue/tools'); - const WMSComponent = require('gui/wms/vue/wms'); - const MapComponent = require('gui/map/vue/map'); - const QueryResultsComponent = require('gui/queryresults/vue/queryresults'); - const SpatialBookMarksComponent = require('gui/spatialbookmarks/vue/spatialbookmarks'); - return { - title: appTitle, - placeholders: { - navbar: { - components: [] - }, - sidebar: { - components: [ - new MetadataComponent({ - id: 'metadata', - open: false, - collapsible: false, - icon: G3WTemplate.getFontClass('file'), - mobile: true - }), - new SpatialBookMarksComponent({ - id: 'spatialbookmarks', - open: false, - collapsible: true, - icon: G3WTemplate.getFontClass('bookmark'), - mobile: true - }), - new PrintComponent({ - id: 'print', - open: false, - collapsible: true, // it used to manage click event if can run setOpen component method - icon: G3WTemplate.getFontClass('print'), - mobile: false - }), - new SearchComponent({ - id: 'search', - open: false, - collapsible: true, - icon: G3WTemplate.getFontClass('search'), - actions: [{ - id:"querybuilder", - class: `${G3WTemplate.getFontClass('calculator')} sidebar-button sidebar-button-icon`, - tooltip: 'Query Builder', - fnc:() => { - GUI.closeContent(); - ApplicationTemplate.Services.sidebar.closeOpenComponents(); - QueryBuilderUIFactory.show({ - type: 'sidebar' // sidebar or modal - }); - }, - style: { - color: '#8DC3E3', - padding: '6px', - fontSize: '1.2em', - borderRadius: '3px', - marginRight: '5px' - } - }], - mobile: true - }), - // Component that store plugins - new ToolsComponent({ - id: 'tools', - open: false, - collapsible: true, - icon: G3WTemplate.getFontClass('tools'), - mobile: true - }), - new WMSComponent({ - id: 'wms', - open: false, - collapsible: true, - icon: G3WTemplate.getFontClass('layers'), - mobile: true - }), - new CatalogComponent({ - id: 'catalog', - open: false, - collapsible: false, - isolate: true, - icon: G3WTemplate.getFontClass('map'), - mobile: true, - config: { - legend: { - config: appLayoutConfig.legend - }, - } - }), - ] - }, - floatbar:{ - components: [] - } - }, - othercomponents: [ - new QueryResultsComponent({ - id: 'queryresults' - }) - ], - viewport: { - // placeholder of the content (view content). Secondary view (hidden) - components: { - map: new MapComponent({ - id: 'map' - }), - content: new ContentsComponent({ - id: 'contents' - }) - } - } - } - }; - - //Vue app - this._createApp = function() { - this._setDataTableLanguage(); - const self = this; - if (isMobile.any || this._isIframe) $('body').addClass('sidebar-collapse'); - return new Vue({ - el: '#app', - created() { - // set general metods for the application as GUI.showForm etc .. - self._setupInterface(); - // setup layout - self._setupLayout(); - //register all services fro the application - self._setUpServices(); - // create templateConfig - self.templateConfig = self._createTemplateConfig(); - // listen lng change and reset datatable language - this.$watch(()=> ApplicationState.language, ()=>{ - self._setDataTableLanguage(); - }); - }, - async mounted() { - await this.$nextTick(); - self._buildTemplate(); - // setup Font, Css class methods - self._setUpTemplateDependencies(this); - $(document).localize(); - self._setViewport(self.templateConfig.viewport); - const skinColor = $('.navbar').css('background-color'); - GUI.skinColor = skinColor && `#${skinColor.substr(4, skinColor.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('')}`; - await this.$nextTick(); - self.emit('ready'); - self.sizes.sidebar.width = $('#g3w-sidebar').width(); - //getSkinColor - GUI.ready(); - } - }) - }; - - this._setupLayout = function(){ - if (!isMobile.any) { - // setup map controls - $("").appendTo("head"); - } - // Inizialization of the components of the application - Vue.component('sidebar', SidebarComponent); - //Navbar custom items - Vue.component('navbarleftitems', NavbaritemsLeftComponent); - Vue.component('navbarrightitems', NavbaritemsRightComponent); - Vue.component('viewport', ViewportComponent); - Vue.component('floatbar', FloatbarComponent); - Vue.component('app', App); - }; - // dataTable Translations and custom extentions - this._setDataTableLanguage = function(dataTable=null) { - const languageOptions = { - "language": { - "sSearch": '', - "searchPlaceholder": t("dosearch"), - "sLengthMenu": t("dataTable.lengthMenu"), - "paginate": { - "previous": t("dataTable.previous"), - "next": t("dataTable.next"), - }, - "info": t("dataTable.info"), - "zeroRecords": t("dataTable.nodatafilterd"), - "infoFiltered": '' - } - }; - //set form control class to filter - $.extend( $.fn.dataTableExt.oStdClasses, { - "sFilterInput": "form-control search" - }); - !dataTable ? $.extend( true, $.fn.dataTable.defaults, languageOptions) : dataTable.dataTable( {"oLanguage": languageOptions}); + /** + * @deprecated since 3.9.0. Will be removed in 4.0.0. + */ + this.init = function() { + console.warn('ApplicationTemplate class will be removed in v4.0.0, please create your own vue app instead..'); }; - // route setting att beginning (is an example) + /** + * route setting at beginning (is an example) + */ this._addRoutes = function() { - const RouterService = ApplicationService.getRouterService(); - const mapService = GUI.getComponent('map').getService(); - RouterService.addRoute('map/zoomto/{coordinate}/:zoom:', function(coordinate, zoom) { - coordinate = _.map(coordinate.split(','), function(xy) { - return Number(xy) - }); - zoom = zoom ? Number(zoom): null; - if (coordinate.length) { - mapService.on('ready', function() { - this.zoomTo(coordinate, zoom); - }) - } - }) - }; - - //register all services - this._setUpServices = function() { - Object.keys(ApplicationTemplate.Services).forEach(element => { - const service = ApplicationTemplate.Services[element]; - ApplicationService.registerService(element, service); - }); - Object.values(GUI.getComponents()).forEach(component => { - ApplicationService.registerService(component.id, component.getService()); - }); - ApplicationTemplate.Services.viewport.on('resize', ()=>GUI.emit('resize')); - }; - // build template function - this._buildTemplate = function() { - FloatbarService.init(layout); - const placeholdersConfig = this.templateConfig.placeholders; - Object.entries(placeholdersConfig).forEach(([placeholder, options]) => { - this._addComponents(options.components, placeholder); - }); - //register other compoents - this._addOtherComponents(); - }; - - //add component not related to placeholder - this._addOtherComponents = function() { - if (this.templateConfig.othercomponents) this._addComponents(this.templateConfig.othercomponents); - }; - // viewport setting - this._setViewport = function(viewportOptions) { - // viewport components - // es.: map e content - /* - - components: { - map: new MapComponent({ - id: 'map' - }), - content: new ContentsComponent({ - id: 'content', - }) - } - - */ - if (viewportOptions) { - ApplicationTemplate.Services.viewport.init(viewportOptions); - this._addComponents(viewportOptions.components); - } + ApplicationService + .getRouterService() + .addRoute( + 'map/zoomto/{coordinate}/:zoom:', + function(coordinate, zoom) { + coordinate = _.map(coordinate.split(','), (xy) => Number(xy)); + zoom = zoom ? Number(zoom): null; + if (coordinate.length) { + GUI.getComponent('map').getService().on('ready', function() { + this.zoomTo(coordinate, zoom); + }) + } + } + ); }; - // add component to template + /** + * add component to template + */ this._addComponent = function(component, placeholder, options={}) { this._addComponents([component], placeholder, options); return true; @@ -482,27 +275,35 @@ const ApplicationTemplate = function({ApplicationService}) { // registry component this._addComponents = function(components, placeholder, options) { let register = true; - if (placeholder && ApplicationTemplate.PLACEHOLDERS.indexOf(placeholder) > -1) { - const placeholderService = ApplicationTemplate.Services[placeholder]; - if (placeholderService) register = placeholderService.addComponents(components, options); + if ( + placeholder && + ApplicationTemplate.PLACEHOLDERS.indexOf(placeholder) > -1 && + ApplicationTemplate.Services[placeholder] + ) { + register = ApplicationTemplate.Services[placeholder].addComponents(components, options); } - Object.entries(components).forEach(([key, component])=> { - if (register) { - ComponentsRegistry.registerComponent(component); - ApplicationService.registerService(component.id, component.getService()) - } - }) + + Object + .entries(components) + .forEach(([ key, component ]) => { + if (register) { + ComponentsRegistry.registerComponent(component); + ApplicationService.registerService(component.id, component.getService()) + } + }); }; - this._removeComponent = function(componentId, placeholder, options) { - const component = ComponentsRegistry.unregisterComponent(componentId); - placeholder && ApplicationTemplate.Services[placeholder] && ApplicationTemplate.Services[placeholder].removeComponent(component, options); + this._removeComponent = function(id, placeholder, options) { + const component = ComponentsRegistry.unregisterComponent(id); + if (placeholder && ApplicationTemplate.Services[placeholder]) { + ApplicationTemplate.Services[placeholder].removeComponent(component, options); + } }; - this._showModalOverlay = function(bool=false, message) { + this._showModalOverlay = function(bool = false, message) { const mapService = GUI.getService('map'); if (bool) mapService.startDrawGreyCover(message); - else mapService.stopDrawGreyCover(); + else mapService.stopDrawGreyCover(); }; this._isSidebarVisible = function() { @@ -519,558 +320,6 @@ const ApplicationTemplate = function({ApplicationService}) { $('body').addClass('sidebar-collapse') }; - // setup Fonts Css dependencies methods - this._setUpTemplateDependencies = function(VueApp) { - GUI.isMobile = function() { - return isMobile.any; - }; - // method that return Template Info - GUI.getTemplateInfo = function() { - return VueApp.g3wtemplate.getInfo(); - }; - GUI.getTemplateInfo = function() { - return VueApp.g3wtemplate.getInfo(); - }; - GUI.getFontClass = function(type) { - return VueApp.g3wtemplate.getFontClass(type); - }; - }; - - /** - * Convert error to user message showed - * @param error - * @returns {string} - */ - GUI.errorToMessage = function(error){ - let message = 'server_error'; - switch (toRawType(error)) { - case 'Error': - message = `CLIENT - ${error.message}`; - break; - case 'Object': - if (error.responseJSON) { - error = error.responseJSON; - if (error.result === false){ - const {code='', data='', message:msg=''} = error.error; - message = `${code.toUpperCase()} ${data} ${msg}`; - } - } else if (error.responseText){ - message = error.responseText; - } - break; - case 'Array': - message = error.map(error => GUI.errorToMessage(error)).join(' '); - break; - case 'String': - default: - message = error; - } - return message; - }; - - // setup Interaces - this._setupInterface = function() { - /* PLUBLIC INTERFACE */ - - /* Common methods */ - GUI.layout = layout; - GUI.getSize = ({element, what}) => { - if (element && what) - return this.sizes[element][what]; - }; - - GUI.addComponent = this._addComponent.bind(this); - GUI.removeComponent = this._removeComponent.bind(this); - - /* Metodos to define */ - GUI.getResourcesUrl = ()=>ApplicationService.getConfig().resourcesurl; - - //LIST - GUI.showList = FloatbarService.showPanel.bind(FloatbarService); - GUI.closeList = FloatbarService.closePanel.bind(FloatbarService); - GUI.hideList = FloatbarService.hidePanel.bind(FloatbarService); - - // TABLE - GUI.showTable = function() {}; - GUI.closeTable = function() {}; - - //Function called from DataRouterservice for gui output - /** - * - * @param data - * @param options - */ - GUI.outputDataPlace = async function(dataPromise, options={}){ - // show parameter it used to set condition to show result or not - // loading parameter is used to show result content when we are wait the response. Default true otherwise we shoe result content at the end - const defaultOutputConfig = {condition:true, add:false, loading:true}; - const {title='', show=defaultOutputConfig, before, after} = options; - // convert show in an object - const outputConfig = (toRawType(show) !== 'Object') ? - { - condition: show, // can be Function or Boolean otherwise is set true - add: false, - loading: true - } : { - ...defaultOutputConfig, - ...show - }; - const {condition, add, loading} = outputConfig; - //check if waiting output data - // in case we stop and substiute with new request data - this.waitingoutputdataplace && await this.waitingoutputdataplace.stop(); - let queryResultsService = add ? GUI.getService('queryresults'): loading && this.showContentFactory('query')(title); - this.waitingoutputdataplace = (() => { - let stop = false; - (async () =>{ - try { - const data = await dataPromise; - //if set before call method and wait - before && await before(data); - // in case of usermessage show user message - data.usermessage && GUI.showUserMessage({ - type: data.usermessage.type, - message: data.usermessage.message, - autoclose: data.usermessage.autoclose - }); - if (!stop) { - // check condition - const showResult = (toRawType(condition) === 'Function') ? condition(data) : (toRawType(condition) === 'Boolean') ? condition : true; - if (showResult) { - (queryResultsService ? queryResultsService: this.showContentFactory('query')(title)).setQueryResponse(data, { - add - }); - } - else GUI.closeContent(); - // call after is set with data - after && after(data); - } - } catch(error) { - const message = this.errorToMessage(error); - this.showUserMessage({ - type: 'alert', - message, - textMessage: true - }); - this.closeContent(); - } finally { - if (!stop) this.waitingoutputdataplace = null; - } - })(); - return { - stop: async ()=> { - stop = true; - } - } - })(); - }; - - GUI.showContentFactory = function(type) { - let showPanelContent; - switch (type) { - case 'query': - showPanelContent = GUI.showQueryResults; - break; - case 'form': - showPanelContent = GUI.showForm; - break; - } - return showPanelContent; - }; - - GUI.showForm = function(options={}) { - const {perc, split='h', push, showgoback, crumb} = options; - const FormComponent = require('gui/form/vue/form'); - // new isnstace every time - const formComponent = options.formComponent ? new options.formComponent(options) : new FormComponent(options); - //get service - const formService = formComponent.getService(); - // parameters : [content, title, push, perc, split, closable, crumb] - GUI.setContent({ - perc, - content: formComponent, - split, - crumb, - push: !!push, //only one( if other delete previous component) - showgoback: !!showgoback, - closable: false - }); - // return service - return formService; - }; - - /** - * - * @param pop remove or not content or pop - */ - GUI.closeForm = function({pop=false}={}) { - this.emit('closeform', false); - pop ? GUI.popContent() : ViewportService.removeContent(); - // force set modal to false - GUI.setModal(false); - }; - - GUI.disableElement = function({element, disable}) { - disable && $(element).addClass('g3w-disabled') || $(element).removeClass('g3w-disabled'); - }; - - GUI.disableContent = function(disable) { - ViewportService.disableContent(disable); - }; - - GUI.disablePanel = function(disable=false) { - GUI.disableElement({ - element: "#g3w-sidebarpanel-placeholder", - disable - }) - }; - - // hide content - GUI.hideContent = function(bool, perc) { - return ViewportService.hideContent(bool, perc); - }; - - GUI.closeContent = function() { - this.emit('closecontent', false); - return ViewportService.closeContent(); - }; - - GUI.closeOpenSideBarComponent = function(){ - ApplicationTemplate.Services.sidebar.closeOpenComponents(); - }; - - // show results info/search - GUI.showQueryResults = function(title, results) { - const queryResultsComponent = GUI.getComponent('queryresults'); - const queryResultService = queryResultsComponent.getService(); - queryResultService.reset(); - results && queryResultService.setQueryResponse(results); - GUI.showContextualContent({ - content: queryResultsComponent, - title: "info.title", - crumb: { - title: "info.title", - trigger: null - }, - push: GUI.getPushContent(), - post_title: title - }); - return queryResultService; - }; - - GUI.addNavbarItem = function(item) { - NavbarItemsService.addItem(item) - }; - - GUI.removeNavBarItem = function() {}; - - GUI.showPanel = SidebarService.showPanel.bind(SidebarService); - - GUI.closePanel = SidebarService.closePanel.bind(SidebarService); - - /// - GUI.disableApplication = function(bool=false){ - ApplicationService.disableApplication(bool); - }; - - //showusermessage - GUI.showUserMessage = function(options={}) { - return ViewportService.showUserMessage(options); - }; - - GUI.closeUserMessage = function() { - ViewportService.closeUserMessage(); - }; - - /* ------------------ */ - GUI.notify = { - warning(message, autoclose=false){ - GUI.showUserMessage({ - type: 'warning', - message, - autoclose - }) - }, - error(message, autoclose=false){ - GUI.showUserMessage({ - type: 'alert', - message, - autoclose - }) - }, - info(message, autoclose=false){ - GUI.showUserMessage(({ - type: 'info', - message, - autoclose - })) - }, - success(message){ - GUI.showUserMessage({ - type: 'success', - message, - autoclose: true - }) - } - }; - - // proxy bootbox library - GUI.dialog = bootbox; - - //modal dialog// - GUI.showModalDialog = function(options={}) { - return GUI.dialog.dialog(options); - }; - - /* spinner */ - GUI.showSpinner = function(options={}){ - const container = options.container || 'body'; - const id = options.id || 'loadspinner'; - const where = options.where || 'prepend'; // append | prepend - const style = options.style || ''; - const transparent = options.transparent ? 'background-color: transparent' : ''; - const center = options.center ? 'margin: auto' : ''; - if (!$("#"+id).length) { - $(container)[where].call($(container),''); - } - }; - - //hide spinner - GUI.hideSpinner = function(id='loadspinner'){ - $("#"+id).remove(); - }; - - /* end spinner*/ - /* end common methods */ - - /* */ - - // FLOATBAR // - GUI.showFloatbar = function() { - FloatbarService.open(); - }; - - GUI.hideFloatbar = function() { - FloatbarService.close(); - }; - - // SIDEBAR // - GUI.showSidebar = this._showSidebar.bind(this); - GUI.hideSidebar = this._hideSidebar.bind(this); - GUI.isSidebarVisible = this._isSidebarVisible.bind(this); - - // RELOAD COMPONENTS - GUI.reloadComponents = function(){ - ApplicationTemplate.Services.sidebar.reloadComponents(); - }; - - // MODAL - GUI.setModal = this._showModalOverlay.bind(this); - - /** - * Toggle set full screen modal - */ - GUI.showFullModal = function({element = "#full-screen-modal", show = true} = {}) { - $(element).modal(show ? 'show' : 'hide') - }; - - GUI.disableSideBar = function(bool=true) { - ApplicationState.gui.sidebar.disabled = bool; - }; - - // VIEWPORT // - GUI.setPrimaryView = function(viewName) { - ViewportService.setPrimaryView(viewName); - }; - - // only map - GUI.showMap = function() { - ViewportService.showMap(); - }; - - GUI.showContextualMap = function(perc=30, split) { - ViewportService.showContextualMap({ - perc, - split - }) - }; - - GUI.setContextualMapComponent = function(mapComponent) { - ViewportService.setContextualMapComponent(mapComponent); - }; - - GUI.resetContextualMapComponent = function() { - ViewportService.resetContextualMapComponent(); - }; - - // (100%) content - GUI.showContent = (options={}) => { - GUI.setLoadingContent(false); - options.perc = this._isMobile ? 100 : options.perc; - GUI.setContent(options); - return true; - }; - - GUI.showContextualContent = (options = {}) => { - options.perc = this._isMobile ? 100 : options.perc; - GUI.setContent(options); - return true; - }; - - // add component to stack (append) - // Differences between pushContent and setContent are : - // - push every componet is added, set is refreshed - // - pushContent has a new parameter (backonclose) when is clicked x - // - the contentComponet is close all stack is closed - GUI.pushContent = (options = {}) => { - options.perc = this._isMobile ? 100 : options.perc; - options.push = true; - GUI.setContent(options); - }; - - // add content to stack - GUI.pushContextualContent = (options={}) => { - options.perc = this._isMobile ? 100 : options.perc; - GUI.pushContent(options); - }; - - // remove last content from stack - GUI.popContent = function() { - ViewportService.popContent(); - }; - //return number of component of stack - GUI.getContentLength = function() { - return ViewportService.contentLength(); - }; - - GUI.getCurrentContentTitle = function(){ - return ViewportService.getCurrentContentTitle(); - }; - - GUI.getCurrentContentId = function(){ - return ViewportService.getCurrentContentId(); - }; - - /** - * change current content title - * @param title - */ - GUI.changeCurrentContentTitle = function(title){ - ViewportService.changeCurrentContentTitle(title); - }; - - /** - * change current content options - * @param options: {title, crumb} - */ - GUI.changeCurrentContentOptions= function(options={}) { - ViewportService.changeCurrentContentOptions(options); - }; - - /** - * Method to get current content - */ - GUI.getCurrentContent = function(){ - return ViewportService.getCurrentContent(); - }; - - GUI.toggleFullViewContent = function(){ - ViewportService.toggleFullViewContent(); - }; - - GUI.resetToDefaultContentPercentage = function(){ - ViewportService.resetToDefaultContentPercentage(); - }; - - GUI.getProjectMenuDOM = function({projects, host, cbk}={}) { - const projectVueMenuComponent = new ProjectsMenuComponent({ - projects: projects && Array.isArray(projects) && projects, - cbk, - host - }).getInternalComponent(); - return projectVueMenuComponent.$mount().$el; - }; - - GUI.setCloseUserMessageBeforeSetContent = function(bool=true){ - this._closeUserMessageBeforeSetContent = bool; - }; - - GUI._setContent = (options={}) => { - this._closeUserMessageBeforeSetContent && GUI.closeUserMessage(); - options.content = options.content || null; - options.title = options.title || ""; - options.push = _.isBoolean(options.push) ? options.push : false; - options.perc = this._isMobile ? 100 : options.perc; - options.split = options.split || 'h'; - options.backonclose = _.isBoolean(options.backonclose) ? options.backonclose : false; - options.showtitle = _.isBoolean(options.showtitle) ? options.showtitle : true; - ViewportService.showContent(options); - }; - - GUI.hideClientMenu = function() { - ApplicationService.getConfig().user = null; - }; - - GUI.hideChangeMaps = function() { - ApplicationService.getConfig().projects = []; - }; - - // return specific classes - GUI.getTemplateClasses = function() { - return BootstrapVersionClasses - }; - - GUI.getTemplateClass = function({element, type}) { - return BootstrapVersionClasses[element][type]; - }; - - GUI.setLoadingContent = function(loading = false) { - ApplicationTemplate.Services.viewport.setLoadingContent(loading); - return loading && new Promise((resolve)=>{ - setTimeout(resolve, 200) - }) - }; - - GUI.openProjectsMenu = function() { - const isProjectMenuComponent = GUI.getComponent('contents').getComponentById('projectsmenu'); - if (isProjectMenuComponent) { - GUI.closeContent(); - return; - } - if (this.isMobile()) { - GUI.hideSidebar(); - $('#main-navbar.navbar-collapse').removeClass('in'); - } - ApplicationTemplate.Services.sidebar.closeOpenComponents(); - GUI.setContent({ - content: new ProjectsMenuComponent(), - title: '', - perc: 100 - }); - }; - - /** - * @since 3.8.0 - */ - GUI.openChangeMapMenu = function() { - const isChangeMapMenuComponent = GUI.getComponent('contents').getComponentById('changemapmenu'); - if (isChangeMapMenuComponent) { - GUI.closeContent(); - return; - } - if (this.isMobile()) { - GUI.hideSidebar(); - $('#main-navbar.navbar-collapse').removeClass('in'); - } - ApplicationTemplate.Services.sidebar.closeOpenComponents(); - GUI.setContent({ - content: new ChangeMapMenuComponent(), - title: '', - perc: 100 - }); - } - }; - base(this); }; @@ -1117,7 +366,7 @@ ApplicationTemplate.fail = function({ error }) { }; /** - * Application starting point + * Application starting point (Create Vue App) * * create the ApplicationTemplate instance passing template interface configuration * and the applicationService instance that is useful to work with project API @@ -1125,8 +374,65 @@ ApplicationTemplate.fail = function({ error }) { ApplicationService.init() .then(() => { const app = new ApplicationTemplate({ ApplicationService }); - app.on('ready', () => ApplicationService.postBootstrap()); - app.init(); + + setDataTableLanguage(); + + if (isMobile.any || app._isIframe) { + $('body').addClass('sidebar-collapse'); + } + + return new Vue({ + + el: '#app', + + /** + * 1. setup Interaces: general metods for the application as GUI.showForm etc .. + * 2. setup layout: setup map controls and inizialize the components of the application (eg. navbar custom items) + * 3. register all services for the application + * 4. create templateConfig + * 5. listen lng change and reset datatable language + */ + created() { + + // setup interfaces and create application config + app.templateConfig = GUI.init({ + app, + layout, + service: ApplicationService, + floatbar: FloatbarService, + viewport: ViewportService, + navbar: NavbarItemsService, + sidebar: SidebarService, + state: ApplicationState, + }); + + this.$watch( () => ApplicationState.language, () => { setDataTableLanguage(); } ); + }, + + /** + * 1. build template + * 2. register other components + * 3. setup Fonts Css class methods + */ + async mounted() { + + await this.$nextTick(); + + // build template, register other components, setup Fonts Css class methods (vendor dependencies ?) + GUI.setup_deps({ + app, + floatbar: FloatbarService, + VueApp: this, + }); + + await this.$nextTick(); + + app.sizes.sidebar.width = $('#g3w-sidebar').width(); + GUI.ready(); // getSkinColor + ApplicationService.postBootstrap() + }, + + }); }) .catch(({ error=null, language }) => { if (error) { diff --git a/src/services/gui.js b/src/services/gui.js index b302ea969..94ea79a57 100644 --- a/src/services/gui.js +++ b/src/services/gui.js @@ -1,56 +1,119 @@ import RouterService from 'services/router'; import ComponentsRegistry from 'store/components'; -const { base, inherit, noop } = require('core/utils/utils'); -const G3WObject = require('core/g3wobject'); +const { base, inherit, noop, toRawType } = require('core/utils/utils'); +const G3WObject = require('core/g3wobject'); + +const ProjectsMenuComponent = require('gui/projectsmenu/projectsmenu'); +const ChangeMapMenuComponent = require('gui/changemapmenu/changemapmenu'); +const FormComponent = require('gui/form/vue/form'); + +const ContentsComponent = require('gui/viewport/contentsviewer'); +const CatalogComponent = require('gui/catalog/vue/catalog'); +const SearchComponent = require('gui/search/vue/search'); +const QueryBuilderUIFactory = require('gui/querybuilder/querybuilderuifactory'); +const PrintComponent = require('gui/print/vue/print'); +const MetadataComponent = require('gui/metadata/vue/metadata'); +const ToolsComponent = require('gui/tools/vue/tools'); +const WMSComponent = require('gui/wms/vue/wms'); +const MapComponent = require('gui/map/vue/map'); +const QueryResultsComponent = require('gui/queryresults/vue/queryresults'); +const SpatialBookMarksComponent = require('gui/spatialbookmarks/vue/spatialbookmarks'); + +console.assert(undefined !== ProjectsMenuComponent, 'ProjectsMenuComponent is undefined'); +console.assert(undefined !== ChangeMapMenuComponent, 'ChangeMapMenuComponent is undefined'); +console.assert(undefined !== FormComponent, 'FormComponent is undefined'); + +console.assert(undefined !== ContentsComponent, 'ContentsComponent is undefined'); +console.assert(undefined !== CatalogComponent, 'CatalogComponent is undefined'); +console.assert(undefined !== SearchComponent, 'SearchComponent is undefined'); +console.assert(undefined !== QueryBuilderUIFactory, 'QueryBuilderUIFactory is undefined'); +console.assert(undefined !== PrintComponent, 'PrintComponent is undefined'); +console.assert(undefined !== MetadataComponent, 'MetadataComponent is undefined'); +console.assert(undefined !== ToolsComponent, 'ToolsComponent is undefined'); +console.assert(undefined !== WMSComponent, 'WMSComponent is undefined'); +console.assert(undefined !== MapComponent, 'MapComponent is undefined'); +console.assert(undefined !== QueryResultsComponent, 'QueryResultsComponent is undefined'); +console.assert(undefined !== SpatialBookMarksComponent, 'SpatialBookMarksComponent is undefined'); + // API della GUI. // methods have be defined by application // app should call GUI.ready() when GUI is ready function GUI() { + + const self = this; + this.setters = { + setContent(options={}) { this.emit('opencontent', true); this._setContent(options) - } + }, + }; + this.isready = false; + // images urls - this.getResourcesUrl = noop; + this.getResourcesUrl = noop; + // show a Vue form - this.showForm = noop; - this.closeForm = noop; - this.showListing = noop; - this.closeListing = noop; - this.hideListing = noop; + this.showForm = noop; + this.closeForm = noop; + this.showListing = noop; + this.closeListing = noop; + this.hideListing = noop; + // modal - this.setModal = noop; - this.showFullModal = noop; + this.setModal = noop; + this.showFullModal = noop; + // modal this.showQueryResults = noop; this.hideQueryResults = noop; - this.showPanel = noop; - this.hidePanel = noop; + this.showPanel = noop; + this.hidePanel = noop; this.reloadComponents = noop; - this.showUserMessage = noop; + this.showUserMessage = noop; this.closeUserMessage = noop; - this.showModalDialog = noop; - //property to how result has to be add or close all and show new - // false mean create new and close all open - this.push_content=false; + this.showModalDialog = noop; + + // TABLE + this.showTable = noop; + this.closeTable = noop; + + this.notify = noop; + this.dialog = noop; + this.isMobile = noop; + + this.removeNavBarItem = noop; + + /** + * How new content has to be add + * + * false = create new and close all open + */ + this.push_content = false; + this.setPushContent = function (bool=false) { this.push_content = bool; }; - this.getPushContent = function(){ + + this.getPushContent = function() { return this.push_content; }; + this._closeUserMessageBeforeSetContent = true; + this.setComponent = function(component) { ComponentsRegistry.registerComponent(component); }; + this.getComponent = function(id) { return ComponentsRegistry.getComponent(id); }; + this.getComponents = function() { return ComponentsRegistry.getComponents(); }; @@ -58,35 +121,788 @@ function GUI() { this.goto = function(url) { RouterService.goto(url); }; + this.ready = function() { this.emit('ready'); this.isready = true; }; + this.guiResized = function() { this.emit('guiresized'); }; - //ready GUI - this.isReady = function(){ + + // ready GUI + this.isReady = function() { return new Promise(resolve => this.isready ? resolve() : this.once('ready', resolve)); }; + /** * Passing a component application ui id return service that belong to component + * * @param componentId * @returns {*} */ - this.getService = function(componentId){ + this.getService = function(componentId) { const component = this.getComponent(componentId); - return component && component.getService(); - }; - /* spinner */ - this.showSpinner = function(options={}){}; - this.hideSpinner = function(id){}; - /* end spinner */ - this.notify = noop; - this.dialog = noop; - this.isMobile = noop; - //useful to registere setters + if (component) { + return component.getService(); + } + }; + + // spinner + this.showSpinner = function(options={}) {}; + this.hideSpinner = function(id) {}; + + this.disableElement = function({element, disable}) { + disable && $(element).addClass('g3w-disabled') || $(element).removeClass('g3w-disabled'); + }; + + /** + * Convert error to user message showed + * + * @param error + * @returns {string} + */ + this.errorToMessage = function(error) { + let message = 'server_error'; + switch (toRawType(error)) { + case 'Error': + message = `CLIENT - ${error.message}`; + break; + case 'Object': + if (error.responseJSON) { + error = error.responseJSON; + if (error.result === false) { + const {code='', data='', message:msg=''} = error.error; + message = `${code.toUpperCase()} ${data} ${msg}`; + } + } else if (error.responseText) { + message = error.responseText; + } + break; + case 'Array': + message = error.map(error => this.errorToMessage(error)).join(' '); + break; + case 'String': + default: + message = error; + } + return message; + }; + + //Function called from DataRouterservice for gui output + + /** + * @param data + * @param options + */ + this.outputDataPlace = async function(dataPromise, options={}) { + + // show parameter it used to set condition to show result or not + // loading parameter is used to show result content when we are wait the response. Default true otherwise we shoe result content at the end + const defaultOutputConfig = { + condition: true, + add: false, + loading: true + }; + + const { + title = '', + show = defaultOutputConfig, + before, + after + } = options; + + // convert show in an object + const outputConfig = ('Object' !== toRawType(show)) ? + { + condition: show, // can be Function or Boolean otherwise is set true + add: false, + loading: true + } : { + ...defaultOutputConfig, + ...show + }; + + const { + condition, + add, + loading + } = outputConfig; + + //check if waiting output data + // in case we stop and substiute with new request data + if (self.waitingoutputdataplace) { + await self.waitingoutputdataplace.stop(); + } + + let queryResultsService = add + ? self.getService('queryresults') + : loading && self.showContentFactory('query')(title); + + self.waitingoutputdataplace = (() => { + let stop = false; + (async () => { + try { + const data = await dataPromise; + // if set before call method and wait + if (before) { + await before(data); + } + + // in case of usermessage show user message + if (data.usermessage) { + self.showUserMessage({ + type: data.usermessage.type, + message: data.usermessage.message, + autoclose: data.usermessage.autoclose + }); + } + + if (!stop) { + const showResult = ('Function' === toRawType(condition)) + ? condition(data) + : ('Boolean' === toRawType(condition)) + ? condition + : true; + if (showResult) { + ( + queryResultsService + ? queryResultsService + : self.showContentFactory('query')(title)).setQueryResponse(data, { add } + ); + } else { + self.closeContent(); + } + // call after is set with data + if (after) { + after(data); + } + } + } catch(error) { + const message = self.errorToMessage(error); + self.showUserMessage({ + type: 'alert', + message, + textMessage: true + }); + self.closeContent(); + } finally { + if (!stop) { + self.waitingoutputdataplace = null; + } + } + })(); + return { + stop: async () => { stop = true; } + }; + })(); + + }; + + this.showContentFactory = function(type) { + let showPanelContent; + switch (type) { + case 'query': + showPanelContent = self.showQueryResults; + break; + case 'form': + showPanelContent = self.showForm; + break; + } + return showPanelContent; + }; + + this.showForm = function(options={}) { + const { + perc, + split = 'h', + push, + showgoback, + crumb + } = options; + // new isnstace every time + const formComponent = options.formComponent ? new options.formComponent(options) : new FormComponent(options); + //get service + const formService = formComponent.getService(); + // parameters : [content, title, push, perc, split, closable, crumb] + self.setContent({ + perc, + content: formComponent, + split, + crumb, + push: !!push, //only one( if other delete previous component) + showgoback: !!showgoback, + closable: false + }); + // return service + return formService; + }; + + this.disablePanel = function(disable=false) { + self.disableElement({ + element: "#g3w-sidebarpanel-placeholder", + disable + }) + }; + + // show results info/search + this.showQueryResults = function(title, results) { + const queryResultsComponent = self.getComponent('queryresults'); + const queryResultService = queryResultsComponent.getService(); + queryResultService.reset(); + if (results) { + queryResultService.setQueryResponse(results); + } + self.showContextualContent({ + content: queryResultsComponent, + title: "info.title", + crumb: { + title: "info.title", + trigger: null + }, + push: self.getPushContent(), + post_title: title + }); + return queryResultService; + }; + + this.notify = { + + warning(message, autoclose=false) { + self.showUserMessage({ + type: 'warning', + message, + autoclose + }) + }, + + error(message, autoclose=false) { + self.showUserMessage({ + type: 'alert', + message, + autoclose + }) + }, + + info(message, autoclose=false) { + self.showUserMessage(({ + type: 'info', + message, + autoclose + })) + }, + + success(message) { + self.showUserMessage({ + type: 'success', + message, + autoclose: true + }) + }, + + }; + + this.showModalDialog = function(options={}) { + console.assert(undefined !== self.dialog, 'dialog is undefined'); + return self.dialog.dialog(options); + }; + + this.showSpinner = function(options={}) { + const container = options.container || 'body'; + const id = options.id || 'loadspinner'; + const where = options.where || 'prepend'; // append | prepend + const style = options.style || ''; + const transparent = options.transparent ? 'background-color: transparent' : ''; + const center = options.center ? 'margin: auto' : ''; + if (!$("#"+id).length) { + $(container)[where].call($(container),''); + } + }; + + this.hideSpinner = function(id='loadspinner') { + $("#" + id).remove(); + }; + + /** + * Toggle full screen modal + */ + this.showFullModal = function({ element = "#full-screen-modal", show = true } = {}) { + $(element).modal(show ? 'show' : 'hide') + }; + + this.setCloseUserMessageBeforeSetContent = function(bool = true) { + self._closeUserMessageBeforeSetContent = bool; + }; + + // return specific classes + this.getTemplateClasses = function() { + console.assert(undefined !== BootstrapVersionClasses, 'BootstrapVersionClasses is undefined'); + return BootstrapVersionClasses + }; + + this.getTemplateClass = function({element, type}) { + console.assert(undefined !== BootstrapVersionClasses, 'BootstrapVersionClasses is undefined'); + return BootstrapVersionClasses[element][type]; + }; + + this.isMobile = function() { + console.assert(undefined !== isMobile, 'isMobile is undefined'); + return isMobile.any; + }; + + this.init = function({ + layout, + app, + service, + floatbar, + viewport, + navbar, + sidebar, + state, + }) { + + this.layout = layout; + + // proxy bootbox library + this.dialog = bootbox; + + this.addComponent = app._addComponent.bind(app); + this.removeComponent = app._removeComponent.bind(app); + + // MODAL + this.setModal = app._showModalOverlay.bind(app); + + // SIDEBAR + this.showSidebar = app._showSidebar.bind(app); + this.hideSidebar = app._hideSidebar.bind(app); + this.isSidebarVisible = app._isSidebarVisible.bind(app); + + //LIST + this.showList = floatbar.showPanel.bind(floatbar); + this.closeList = floatbar.closePanel.bind(floatbar); + this.hideList = floatbar.hidePanel.bind(floatbar); + + this.showPanel = sidebar.showPanel.bind(sidebar); + this.closePanel = sidebar.closePanel.bind(sidebar); + + this.getResourcesUrl = () => service.getConfig().resourcesurl; + + this.getSize = ({element, what}) => { + if (element && what) + return app.sizes[element][what]; + }; + + /** + * @param pop whether to remove content or pop + */ + this.closeForm = function({ pop = false } = {}) { + self.emit('closeform', false); + if (pop) { + self.popContent(); + } else { + viewport.removeContent(); + } + // force set modal to false + self.setModal(false); + }; + + this.disableContent = function(disable) { + viewport.disableContent(disable); + }; + + this.hideContent = function(bool, perc) { + return viewport.hideContent(bool, perc); + }; + + this.closeContent = function() { + self.emit('closecontent', false); + return viewport.closeContent(); + }; + + this.closeOpenSideBarComponent = function() { + app.constructor.Services.sidebar.closeOpenComponents(); + }; + + this.addNavbarItem = function(item) { + navbar.addItem(item) + }; + + this.disableApplication = function(bool=false) { + service.disableApplication(bool); + }; + + this.showUserMessage = function(options={}) { + return viewport.showUserMessage(options); + }; + + this.closeUserMessage = function() { + viewport.closeUserMessage(); + }; + + // FLOATBAR // + this.showFloatbar = function() { + floatbar.open(); + }; + + this.hideFloatbar = function() { + floatbar.close(); + }; + + // RELOAD COMPONENTS + this.reloadComponents = function() { + app.constructor.Services.sidebar.reloadComponents(); + }; + + this.disableSideBar = function(bool=true) { + state.gui.sidebar.disabled = bool; + }; + + // VIEWPORT // + this.setPrimaryView = function(viewName) { + viewport.setPrimaryView(viewName); + }; + + // only map + this.showMap = function() { + viewport.showMap(); + }; + + this.showContextualMap = function(perc=30, split) { + viewport.showContextualMap({ perc, split }); + }; + + this.setContextualMapComponent = function(mapComponent) { + viewport.setContextualMapComponent(mapComponent); + }; + + this.resetContextualMapComponent = function() { + viewport.resetContextualMapComponent(); + }; + + // (100%) content + this.showContent = (options={}) => { + self.setLoadingContent(false); + options.perc = app._isMobile ? 100 : options.perc; + self.setContent(options); + return true; + }; + + this.showContextualContent = (options = {}) => { + options.perc = app._isMobile ? 100 : options.perc; + self.setContent(options); + return true; + }; + + // add component to stack (append) + // Differences between pushContent and setContent are : + // - push every componet is added, set is refreshed + // - pushContent has a new parameter (backonclose) when is clicked x + // - the contentComponet is close all stack is closed + this.pushContent = (options = {}) => { + options.perc = app._isMobile ? 100 : options.perc; + options.push = true; + self.setContent(options); + }; + + // add content to stack + this.pushContextualContent = (options={}) => { + options.perc = app._isMobile ? 100 : options.perc; + self.pushContent(options); + }; + + // remove last content from stack + this.popContent = function() { + viewport.popContent(); + }; + + //return number of component of stack + this.getContentLength = function() { + return viewport.contentLength(); + }; + + this.getCurrentContentTitle = function() { + return viewport.getCurrentContentTitle(); + }; + + this.getCurrentContentId = function() { + return viewport.getCurrentContentId(); + }; + + /** + * change current content title + * @param title + */ + this.changeCurrentContentTitle = function(title) { + viewport.changeCurrentContentTitle(title); + }; + + /** + * Change current content options + * + * @param options.title + * @param options.crumb + */ + this.changeCurrentContentOptions= function(options={}) { + viewport.changeCurrentContentOptions(options); + }; + + this.getCurrentContent = function() { + return viewport.getCurrentContent(); + }; + + this.toggleFullViewContent = function() { + viewport.toggleFullViewContent(); + }; + + this.resetToDefaultContentPercentage = function() { + viewport.resetToDefaultContentPercentage(); + }; + + this.getProjectMenuDOM = function({projects, host, cbk}={}) { + const projectVueMenuComponent = new ProjectsMenuComponent({ + projects: projects && Array.isArray(projects) && projects, + cbk, + host + }).getInternalComponent(); + return projectVueMenuComponent.$mount().$el; + }; + + this._setContent = (options={}) => { + if(self._closeUserMessageBeforeSetContent) { + self.closeUserMessage(); + } + options.content = options.content || null; + options.title = options.title || ""; + options.push = _.isBoolean(options.push) ? options.push : false; + options.perc = app._isMobile ? 100 : options.perc; + options.split = options.split || 'h'; + options.backonclose = _.isBoolean(options.backonclose) ? options.backonclose : false; + options.showtitle = _.isBoolean(options.showtitle) ? options.showtitle : true; + viewport.showContent(options); + }; + + this.hideClientMenu = function() { + service.getConfig().user = null; + }; + + this.hideChangeMaps = function() { + service.getConfig().projects = []; + }; + + this.setLoadingContent = function(loading = false) { + app.constructor.Services.viewport.setLoadingContent(loading); + if (loading) { + return new Promise((resolve)=> { setTimeout(resolve, 200) }); + } + }; + + this.openProjectsMenu = function() { + const isProjectMenuComponent = self.getComponent('contents').getComponentById('projectsmenu'); + if (isProjectMenuComponent) { + self.closeContent(); + return; + } + if (self.isMobile()) { + self.hideSidebar(); + $('#main-navbar.navbar-collapse').removeClass('in'); + } + app.constructor.Services.sidebar.closeOpenComponents(); + self.setContent({ + content: new ProjectsMenuComponent(), + title: '', + perc: 100 + }); + }; + + /** + * @since 3.8.0 + */ + this.openChangeMapMenu = function() { + const isChangeMapMenuComponent = self.getComponent('contents').getComponentById('changemapmenu'); + if (isChangeMapMenuComponent) { + self.closeContent(); + return; + } + if (self.isMobile()) { + self.hideSidebar(); + $('#main-navbar.navbar-collapse').removeClass('in'); + } + app.constructor.Services.sidebar.closeOpenComponents(); + self.setContent({ + content: new ChangeMapMenuComponent(), + title: '', + perc: 100 + }); + } + + // setup layout + if (!isMobile.any) { + $("").appendTo("head"); + } + + // register services + Object + .keys(app.constructor.Services) + .forEach(element => { + service.registerService(element, app.constructor.Services[element]); + }); + + Object + .values(this.getComponents()) + .forEach(component => { + service.registerService(component.id, component.getService()); + }); + + app.constructor + .Services + .viewport + .on('resize', () => this.emit('resize')); + + const G3WTemplate = Vue.prototype.g3wtemplate; + + return { + title: service.getConfig().apptitle || 'G3W Suite', + placeholders: { + navbar: { + components: [], + }, + sidebar: { + components: [ + new MetadataComponent({ + id: 'metadata', + open: false, + collapsible: false, + icon: G3WTemplate.getFontClass('file'), + mobile: true, + }), + new SpatialBookMarksComponent({ + id: 'spatialbookmarks', + open: false, + collapsible: true, + icon: G3WTemplate.getFontClass('bookmark'), + mobile: true, + }), + new PrintComponent({ + id: 'print', + open: false, + collapsible: true, // manage click event if can run setOpen component method + icon: G3WTemplate.getFontClass('print'), + mobile: false, + }), + new SearchComponent({ + id: 'search', + open: false, + collapsible: true, + icon: G3WTemplate.getFontClass('search'), + actions: [{ + id: "querybuilder", + class: `${G3WTemplate.getFontClass('calculator')} sidebar-button sidebar-button-icon`, + tooltip: 'Query Builder', + fnc: () => { + self.closeContent(); + app.constructor.Services.sidebar.closeOpenComponents(); + QueryBuilderUIFactory.show({ type: 'sidebar' }); // sidebar or modal + }, + style: { + color: '#8DC3E3', + padding: '6px', + fontSize: '1.2em', + borderRadius: '3px', + marginRight: '5px', + }, + }], + mobile: true + }), + // Component that store plugins + new ToolsComponent({ + id: 'tools', + open: false, + collapsible: true, + icon: G3WTemplate.getFontClass('tools'), + mobile: true + }), + new WMSComponent({ + id: 'wms', + open: false, + collapsible: true, + icon: G3WTemplate.getFontClass('layers'), + mobile: true, + }), + new CatalogComponent({ + id: 'catalog', + open: false, + collapsible: false, + isolate: true, + icon: G3WTemplate.getFontClass('map'), + mobile: true, + config: { legend: { config: (service.getConfig().layout || {}).legend } }, + }), + ], + }, + floatbar: { + components: [] + }, + }, + othercomponents: [ + new QueryResultsComponent({ id: 'queryresults' }), + ], + // placeholder of the content (view content). Secondary view (hidden) + viewport: { + components: { + map: new MapComponent({ id: 'map' }), + content: new ContentsComponent({ id: 'contents' }), + }, + }, + }; + + }; + + this.setup_deps = function({ app, floatbar, VueApp }) { + + // build template + floatbar.init(layout); + + Object + .entries(app.templateConfig.placeholders) + .forEach(([ placeholder, options ]) => { + app._addComponents(options.components, placeholder); + }); + + // other components not related to placeholder + if (app.templateConfig.othercomponents) { + app._addComponents(app.templateConfig.othercomponents); + } + + // method that return Template Info + this.getTemplateInfo = function() { + return VueApp.g3wtemplate.getInfo(); + }; + + this.getTemplateInfo = function() { + return VueApp.g3wtemplate.getInfo(); + }; + + this.getFontClass = function(type) { + return VueApp.g3wtemplate.getFontClass(type); + }; + + $(document).localize(); + + // viewport settings + if (app.templateConfig.viewport) { + app.constructor.Services.viewport.init(app.templateConfig.viewport); + app._addComponents(app.templateConfig.viewport.components); + } + + const skinColor = $('.navbar').css('background-color'); + this.skinColor = skinColor && `#${skinColor.substr(4, skinColor.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('')}`; + + }; + + // register setters base(this); + } inherit(GUI, G3WObject); From 6c02dcc9feaee538aad905d651b903dcb12433ce Mon Sep 17 00:00:00 2001 From: Raruto Date: Mon, 17 Jul 2023 07:40:21 +0200 Subject: [PATCH 02/17] padding --- src/index.prod.js | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/index.prod.js b/src/index.prod.js index ab866a28f..80a16699d 100644 --- a/src/index.prod.js +++ b/src/index.prod.js @@ -99,27 +99,27 @@ Vue.component('app', App); * * ORIGINAL SOURCE: src/app/gui/vue/vue.filter.js@3.6 */ -Vue.filter('t', value => t(value)); -Vue.filter('tPlugin', value => value !== null ? tPlugin(value) : ''); +Vue.filter('t', value => t(value)); +Vue.filter('tPlugin', value => value !== null ? tPlugin(value) : ''); /** * Install global directives * * ORIGINAL SOURCE: src/app/gui/vue/vue.directives.js@v3.6 */ -Vue.directive("disabled", vDisabled); -Vue.directive("checked", vChecked); -Vue.directive("selected-first", vSelectedFirst); -Vue.directive('select2', vSelect2); -Vue.directive('t-tooltip', vTToltip); -Vue.directive('t-html', vTHtml); -Vue.directive('t-placeholder', vTPlaceholder); -Vue.directive('t-title', vTTitle); -Vue.directive("t", vT); -Vue.directive("t-plugin", vTPlugin); -Vue.directive("plugins", vPlugins); -Vue.directive("online", vOnline); -Vue.directive("download", vDownload); +Vue.directive("disabled", vDisabled); +Vue.directive("checked", vChecked); +Vue.directive("selected-first", vSelectedFirst); +Vue.directive('select2', vSelect2); +Vue.directive('t-tooltip', vTToltip); +Vue.directive('t-html', vTHtml); +Vue.directive('t-placeholder', vTPlaceholder); +Vue.directive('t-title', vTTitle); +Vue.directive("t", vT); +Vue.directive("t-plugin", vTPlugin); +Vue.directive("plugins", vPlugins); +Vue.directive("online", vOnline); +Vue.directive("download", vDownload); /** @@ -434,11 +434,12 @@ ApplicationService.init() }); }) - .catch(({ error=null, language }) => { + .catch((e) => { + let { error=null, language } = e; if (error) { if (error.responseJSON && error.responseJSON.error.data) error = error.responseJSON.error.data; else if (error.statusText) error = error.statusText; } - console.error(error); + console.error(e || error); ApplicationTemplate.fail({ error }); }); \ No newline at end of file From f14f455b87b98a087405b317b6d80f09d54c4223 Mon Sep 17 00:00:00 2001 From: Raruto Date: Mon, 17 Jul 2023 07:41:58 +0200 Subject: [PATCH 03/17] Squashed commit of the following: commit 1269d642aa368203f0831867ba5576a53628807e Merge: 65d833fa aa0ccd55 Author: Raruto Date: Fri Jul 14 10:52:46 2023 +0200 Merge branch 'dev' into refactor-inputs-and-fields commit 65d833faa78cbd6ad0f3306106331dad89345595 Merge: e92bc425 c03d8ad1 Author: Raruto Date: Thu Jul 13 13:24:26 2023 +0200 Merge branch 'dev' into refactor-inputs-and-fields commit e92bc425032975d32984031a5513c721c6016b42 Author: Raruto Date: Thu Jul 13 12:41:08 2023 +0200 Update Relation.vue commit b538b10fbadbfd1a0fe6369f26fd4046e75b93ca Author: Raruto Date: Wed Jul 12 15:59:41 2023 +0200 vue warnings commit 85bf5e838f68f7807b4bab9c86cd818b3977f487 Author: Raruto Date: Wed Jul 12 08:52:01 2023 +0200 code format commit f1c9f4ed4c4b7cf3696dee00d3d2140b1140bc71 Author: Raruto Date: Wed Jul 12 08:51:46 2023 +0200 update global resize components commit 2efd1151f8003cfa49b841a2bdc8b9d1384ad441 Author: Raruto Date: Tue Jul 11 12:53:53 2023 +0200 remove class inheritance: `picklayer` commit 945d2bfadf1ef5e22f747a757d85de549d3b105a Author: Raruto Date: Tue Jul 11 11:32:59 2023 +0200 update `g3w-resize` related components commit cd0da2364e1120555da087c82cc8876e2d1df23f Author: Raruto Date: Mon Jul 10 09:51:41 2023 +0200 extra comma commit 2f4ca94d69080038cb142049a0953efe2aceb5cd Author: Raruto Date: Mon Jul 10 09:47:38 2023 +0200 Update form-inputs.js commit f8356187580524d673b9683110d07c02c6c47d28 Author: Raruto Date: Mon Jul 10 09:04:57 2023 +0200 refactor and delete folder `src/app/gui/fields/` commit e5e7dc6c225b391fc621cca8936b1205094ecde3 Author: Raruto Date: Fri Jul 7 08:57:00 2023 +0200 comments commit 6b727dac210a389e3bf21f8da04299d4b80852c8 Author: Raruto Date: Fri Jul 7 08:53:23 2023 +0200 new factory method: `mixins/g3w-input::createInputService(type, options)` commit dcc110130d10e9fd5bed259c5dbea4d4a1e98416 Author: Raruto Date: Fri Jul 7 08:21:32 2023 +0200 spacing commit 4455749d640710044b46375483e35ae2b1bf02db Author: Raruto Date: Fri Jul 7 08:18:16 2023 +0200 spacing commit 5b7838c5f5c738aa1e12cfb78a24249fc9e0fd28 Author: Raruto Date: Fri Jul 7 08:16:49 2023 +0200 rename file: `mixins/base-inputs.js` --> `mixins/g3w-input.js` commit 3630da9ecc70e66eb6fa70f9914f905a06752888 Author: Raruto Date: Thu Jul 6 16:25:06 2023 +0200 template string commit 5d75dcb807e090804b568a1ca82d708c1dba8ef6 Author: Raruto Date: Thu Jul 6 15:59:49 2023 +0200 remove `src/app/gui/inputs.js` commit 9964fa7c334f158b101ea7676b23ac444391881a Author: Raruto Date: Wed Jul 5 12:53:21 2023 +0200 Update gulpfile.js commit d75b4667d8c5a8bc18f363dee78e9b1668fc60b7 Author: Raruto Date: Wed Jul 5 12:52:51 2023 +0200 add `console.assert` commit 3086d726f42a172d0cf88c76850e146f974085a7 Author: Raruto Date: Wed Jul 5 12:10:39 2023 +0200 spacing commit 4e3596adb2b55bfaa9db28c3a16f11f9f9c06b1c Author: Raruto Date: Wed Jul 5 11:50:11 2023 +0200 remove parenthesis commit 3668cb46b1f6cce04cccd37bcae4ab4760b8a3f4 Merge: 442bb9d6 fac01483 Author: Raruto Date: Wed Jul 5 11:45:12 2023 +0200 Merge branch 'dev' into refactor-inputs commit 442bb9d61dbd46a9e8bc2c14c78d24280c397ce0 Author: Raruto Date: Wed Jul 5 11:44:38 2023 +0200 delete folder: `src/app/gui/inputs/` starts consolidating all files into a single file: `src/app/gui/inputs.js` --- src/app/api.js | 169 ++-- src/app/constant.js | 236 ++--- src/app/gui/fields/fields.js | 19 - src/app/gui/fields/fieldsservice.js | 96 -- src/app/gui/inputs/checkbox/service.js | 37 - src/app/gui/inputs/checkbox/vue/checkbox.js | 5 - src/app/gui/inputs/color/vue/color.js | 5 - src/app/gui/inputs/datetimepicker/service.js | 28 - .../datetimepicker/vue/datetimepicker.js | 5 - src/app/gui/inputs/float/service.js | 11 - src/app/gui/inputs/float/vue/float.js | 5 - src/app/gui/inputs/input.js | 59 -- src/app/gui/inputs/inputs.js | 22 - src/app/gui/inputs/integer/service.js | 11 - src/app/gui/inputs/integer/vue/integer.js | 5 - src/app/gui/inputs/lonlat/service.js | 65 -- src/app/gui/inputs/lonlat/vue/lonlat.js | 5 - src/app/gui/inputs/media/service.js | 10 - src/app/gui/inputs/media/vue/media.js | 5 - src/app/gui/inputs/picklayer/service.js | 92 -- src/app/gui/inputs/picklayer/vue/picklayer.js | 5 - src/app/gui/inputs/radio/service.js | 10 - src/app/gui/inputs/radio/vue/radio.js | 5 - src/app/gui/inputs/range/service.js | 24 - src/app/gui/inputs/range/vue/range.js | 5 - src/app/gui/inputs/select/service.js | 62 -- src/app/gui/inputs/select/vue/select.js | 5 - src/app/gui/inputs/service.js | 155 --- src/app/gui/inputs/services.js | 22 - src/app/gui/inputs/sliderrange/service.js | 29 - .../gui/inputs/sliderrange/vue/sliderrange.js | 5 - src/app/gui/inputs/table/vue/table.js | 5 - src/app/gui/inputs/text/vue/text.js | 5 - src/app/gui/inputs/textarea/vue/textarea.js | 5 - src/app/gui/inputs/texthtml/vue/texthtml.js | 5 - src/app/gui/inputs/unique/service.js | 10 - src/app/gui/inputs/unique/vue/unique.js | 5 - src/components/FieldG3W.vue | 37 +- src/components/FieldGallery.vue | 47 +- src/components/FieldGeo.vue | 19 +- src/components/FieldImage.vue | 50 +- src/components/FieldLink.vue | 26 +- src/components/FieldMedia.vue | 22 +- src/components/FieldText.vue | 2 - src/components/FieldVue.vue | 29 +- src/components/Floatbar.vue | 6 +- src/components/FormAddon.vue | 2 +- src/components/FormAddons.vue | 4 - src/components/FormBody.vue | 58 +- src/components/FormFooter.vue | 2 +- src/components/GlobalBarLoader.js | 5 +- src/components/GlobalDateTime.vue | 8 +- src/components/GlobalRange.vue | 7 +- src/components/GlobalResize.vue | 22 +- src/components/GlobalTabs.vue | 274 ++++-- src/components/GlobalTabsNode.vue | 204 ++-- src/components/InputBase.vue | 54 +- src/components/InputCheckbox.vue | 54 +- src/components/InputColor.vue | 30 +- src/components/InputDateTimePicker.vue | 107 ++- src/components/InputFloat.vue | 30 +- src/components/InputG3W.vue | 201 +++- src/components/InputG3WFormInputs.vue | 12 +- src/components/InputInteger.vue | 28 +- src/components/InputLonLat.vue | 149 +-- src/components/InputMedia.vue | 115 ++- src/components/InputPickLayer.vue | 57 +- src/components/InputRadio.vue | 39 +- src/components/InputRange.vue | 48 +- src/components/InputSelect.vue | 280 ++++-- src/components/InputSliderRange.vue | 49 +- src/components/InputTable.vue | 59 +- src/components/InputTableBody.vue | 6 +- src/components/InputTableHeader.vue | 6 +- src/components/InputText.vue | 26 +- src/components/InputTextArea.vue | 28 +- src/components/InputTextHtml.vue | 190 ++-- src/components/InputUnique.vue | 74 +- src/components/MapControlZoomHistory.vue | 6 +- src/components/NavbaritemsLeft.vue | 6 +- src/components/NavbaritemsRight.vue | 6 +- src/components/PrintFidAtlasValues.vue | 6 +- src/components/QueryBuilderSearch.vue | 6 +- src/components/QueryResults.vue | 908 ++++++++++++------ src/components/QueryResultsAction.vue | 6 +- src/components/QueryResultsActions.vue | 6 +- .../QueryResultsHeaderFeatureBody.vue | 4 +- .../QueryResultsTableAttributeFieldValue.vue | 36 +- src/components/Relation.vue | 493 +++++++--- src/components/Relations.vue | 67 +- src/components/SearchSelect2.vue | 11 +- src/components/Sidebar.vue | 6 +- src/components/SidebarItem.vue | 6 +- src/components/TableBody.vue | 6 +- src/components/TableLink.vue | 6 +- src/components/TableSelectRow.vue | 6 +- src/components/Viewport.vue | 335 +++++-- src/mixins/base-input.js | 44 +- src/mixins/fields.js | 195 +++- src/mixins/form-inputs.js | 116 ++- src/mixins/g3w-input.js | 710 ++++++++++++++ src/mixins/index.js | 23 +- src/mixins/select.js | 14 +- 103 files changed, 4092 insertions(+), 2654 deletions(-) delete mode 100644 src/app/gui/fields/fields.js delete mode 100644 src/app/gui/fields/fieldsservice.js delete mode 100644 src/app/gui/inputs/checkbox/service.js delete mode 100644 src/app/gui/inputs/checkbox/vue/checkbox.js delete mode 100644 src/app/gui/inputs/color/vue/color.js delete mode 100644 src/app/gui/inputs/datetimepicker/service.js delete mode 100644 src/app/gui/inputs/datetimepicker/vue/datetimepicker.js delete mode 100644 src/app/gui/inputs/float/service.js delete mode 100644 src/app/gui/inputs/float/vue/float.js delete mode 100644 src/app/gui/inputs/input.js delete mode 100644 src/app/gui/inputs/inputs.js delete mode 100644 src/app/gui/inputs/integer/service.js delete mode 100644 src/app/gui/inputs/integer/vue/integer.js delete mode 100644 src/app/gui/inputs/lonlat/service.js delete mode 100644 src/app/gui/inputs/lonlat/vue/lonlat.js delete mode 100644 src/app/gui/inputs/media/service.js delete mode 100644 src/app/gui/inputs/media/vue/media.js delete mode 100644 src/app/gui/inputs/picklayer/service.js delete mode 100644 src/app/gui/inputs/picklayer/vue/picklayer.js delete mode 100644 src/app/gui/inputs/radio/service.js delete mode 100644 src/app/gui/inputs/radio/vue/radio.js delete mode 100644 src/app/gui/inputs/range/service.js delete mode 100644 src/app/gui/inputs/range/vue/range.js delete mode 100644 src/app/gui/inputs/select/service.js delete mode 100644 src/app/gui/inputs/select/vue/select.js delete mode 100644 src/app/gui/inputs/service.js delete mode 100644 src/app/gui/inputs/services.js delete mode 100644 src/app/gui/inputs/sliderrange/service.js delete mode 100644 src/app/gui/inputs/sliderrange/vue/sliderrange.js delete mode 100644 src/app/gui/inputs/table/vue/table.js delete mode 100644 src/app/gui/inputs/text/vue/text.js delete mode 100644 src/app/gui/inputs/textarea/vue/textarea.js delete mode 100644 src/app/gui/inputs/texthtml/vue/texthtml.js delete mode 100644 src/app/gui/inputs/unique/service.js delete mode 100644 src/app/gui/inputs/unique/vue/unique.js create mode 100644 src/mixins/g3w-input.js diff --git a/src/app/api.js b/src/app/api.js index b556d7a9c..51205044d 100644 --- a/src/app/api.js +++ b/src/app/api.js @@ -2,106 +2,113 @@ * @file api file interface for external plugins */ -import G3W_CONSTANT from 'constant'; +import G3W_CONSTANT from 'constant'; -import ApplicationState from 'store/application-state'; -import ApplicationService from 'services/application'; +import ApplicationState from 'store/application-state'; +import ApplicationService from 'services/application'; /** * Single File Components */ -import G3WInput from 'components/InputG3W.vue'; -import G3wFormInputs from 'components/InputG3WFormInputs.vue'; -import inputService from 'core/expression/inputservice'; -import FormBody from 'components/FormBody.vue'; -import FormFooter from 'components/FormFooter.vue'; -import C3XYLine from 'components/C3XYLine.vue'; +import G3WInput from 'components/InputG3W.vue'; +import G3wFormInputs from 'components/InputG3WFormInputs.vue'; +import inputService from 'core/expression/inputservice'; +import FormBody from 'components/FormBody.vue'; +import FormFooter from 'components/FormFooter.vue'; +import C3XYLine from 'components/C3XYLine.vue'; +import G3WField from 'components/FieldG3W.vue'; /** * CORE modules */ import CatalogLayersStoresRegistry from 'store/catalog-layers'; -import DataRouterService from 'services/data'; -import ChangesManager from 'services/editing'; -import SessionsRegistry from 'store/sessions'; -import IFrameRouterService from 'services/iframe-plugin'; -import MapLayersStoresRegistry from 'store/map-layers'; -import PluginsRegistry from 'store/plugins'; -import ProjectsRegistry from 'store/projects'; -import RelationsService from 'services/relations'; -import TaskService from 'services/tasks'; -import WorkflowsStack from 'services/workflows'; -import ApiService from 'services/api'; -import RouterService from 'services/router'; +import DataRouterService from 'services/data'; +import ChangesManager from 'services/editing'; +import SessionsRegistry from 'store/sessions'; +import IFrameRouterService from 'services/iframe-plugin'; +import MapLayersStoresRegistry from 'store/map-layers'; +import PluginsRegistry from 'store/plugins'; +import ProjectsRegistry from 'store/projects'; +import RelationsService from 'services/relations'; +import TaskService from 'services/tasks'; +import WorkflowsStack from 'services/workflows'; +import ApiService from 'services/api'; +import RouterService from 'services/router'; -import GUI from 'services/gui'; -//MIXINS -import Mixins from 'mixins'; +import GUI from 'services/gui'; +import Mixins from 'mixins'; -const G3WObject = require('core/g3wobject'); -const utils = require('core/utils/utils'); -const geoutils = require('core/utils/geo'); -const i18n = require('core/i18n/i18n.service'); -const Server = require('core/errors/parser/servererrorparser'); -const Session = require('core/editing/session'); -const Editor = require('core/editing/editor'); -const Geom = require('core/utils/geo'); -const { Geometry } = require('core/utils/geo'); -const Project = require('core/project/project'); -const LayersStoreRegistry = require('core/layers/layersstoresregistry'); -const LayersStore = require('core/layers/layersstore'); -const Layer = require('core/layers/layer'); -const LayerFactory = require('core/layers/layerfactory'); -const TableLayer = require('core/layers/tablelayer'); -const VectorLayer = require('core/layers/vectorlayer'); -const ImageLayer = require('core/layers/imagelayer'); -const WmsLayer = require('core/layers/map/wmslayer'); -const XYZLayer = require('core/layers/map/xyzlayer'); -const MapLayer = require('core/layers/map/maplayer'); -const Feature = require('core/layers/features/feature'); -const FeaturesStore = require('core/layers/features/featuresstore'); -const OlFeaturesStore = require('core/layers/features/olfeaturesstore'); -const Filter = require('core/layers/filter/filter'); -const Expression = require('core/layers/filter/expression'); -const Plugin = require('core/plugin/plugin'); -const PluginService = require('core/plugin/pluginservice'); -const Task = require('core/workflow/task'); -const Step = require('core/workflow/step'); -const Flow = require('core/workflow/flow'); -const Workflow = require('core/workflow/workflow'); +const G3WObject = require('core/g3wobject'); +const utils = require('core/utils/utils'); +const geoutils = require('core/utils/geo'); +const i18n = require('core/i18n/i18n.service'); +const Server = require('core/errors/parser/servererrorparser'); +const Session = require('core/editing/session'); +const Editor = require('core/editing/editor'); +const Geom = require('core/utils/geo'); +const { Geometry } = require('core/utils/geo'); +const Project = require('core/project/project'); +const LayersStoreRegistry = require('core/layers/layersstoresregistry'); +const LayersStore = require('core/layers/layersstore'); +const Layer = require('core/layers/layer'); +const LayerFactory = require('core/layers/layerfactory'); +const TableLayer = require('core/layers/tablelayer'); +const VectorLayer = require('core/layers/vectorlayer'); +const ImageLayer = require('core/layers/imagelayer'); +const WmsLayer = require('core/layers/map/wmslayer'); +const XYZLayer = require('core/layers/map/xyzlayer'); +const MapLayer = require('core/layers/map/maplayer'); +const Feature = require('core/layers/features/feature'); +const FeaturesStore = require('core/layers/features/featuresstore'); +const OlFeaturesStore = require('core/layers/features/olfeaturesstore'); +const Filter = require('core/layers/filter/filter'); +const Expression = require('core/layers/filter/expression'); +const Plugin = require('core/plugin/plugin'); +const PluginService = require('core/plugin/pluginservice'); +const Task = require('core/workflow/task'); +const Step = require('core/workflow/step'); +const Flow = require('core/workflow/flow'); +const Workflow = require('core/workflow/workflow'); /** * GUI modules */ -const Panel = require('gui/panel'); -const ControlFactory = require('gui/map/control/factory'); -const ComponentsFactory = require('gui/component/componentsfactory'); -const FieldsService = require('gui/fields/fieldsservice'); -const Component = require('gui/component/component'); -const MetadataComponent = require('gui/metadata/vue/metadata'); -const SearchComponent = require('gui/search/vue/search'); -const SearchPanel = require('gui/search/vue/panel/searchpanel'); -const PrintComponent = require('gui/print/vue/print'); -const CatalogComponent = require('gui/catalog/vue/catalog'); -const MapComponent = require('gui/map/vue/map'); -const ToolsComponent = require('gui/tools/vue/tools'); -const QueryResultsComponent = require('gui/queryresults/vue/queryresults'); -const FormComponent = require('gui/form/vue/form'); -const FormService = require('gui/form/formservice'); -const InputsComponents = require('gui/inputs/inputs'); -const ChartsFactory = require('gui/charts/chartsfactory'); -const Fields = require('gui/fields/fields'); -const SearchPanelService = require('gui/search/vue/panel/searchservice'); +const Panel = require('gui/panel'); +const ControlFactory = require('gui/map/control/factory'); +const ComponentsFactory = require('gui/component/componentsfactory'); +const FieldsService = Mixins.fieldsMixin.methods.getFieldService(); +const Component = require('gui/component/component'); +const MetadataComponent = require('gui/metadata/vue/metadata'); +const SearchComponent = require('gui/search/vue/search'); +const SearchPanel = require('gui/search/vue/panel/searchpanel'); +const PrintComponent = require('gui/print/vue/print'); +const CatalogComponent = require('gui/catalog/vue/catalog'); +const MapComponent = require('gui/map/vue/map'); +const ToolsComponent = require('gui/tools/vue/tools'); +const QueryResultsComponent = require('gui/queryresults/vue/queryresults'); +const FormComponent = require('gui/form/vue/form'); +const FormService = require('gui/form/formservice'); +const ChartsFactory = require('gui/charts/chartsfactory'); +const Fields = G3WField.components; +const InputsComponents = G3WInput.components; +const SearchPanelService = require('gui/search/vue/panel/searchservice'); /** * G3W-OL modules */ -const PickFeatureInteraction = require('g3w-ol/interactions/pickfeatureinteraction'); -const PickCoordinatesInteraction = require('g3w-ol/interactions/pickcoordinatesinteraction'); -const DeleteFeatureInteraction = require('g3w-ol/interactions/deletefeatureinteraction'); -const AreaInteraction = require('g3w-ol/interactions/areainteraction'); -const LengthInteraction = require('g3w-ol/interactions/lengthinteraction'); -const g3wolutils = require('core/utils/ol'); +const PickFeatureInteraction = require('g3w-ol/interactions/pickfeatureinteraction'); +const PickCoordinatesInteraction = require('g3w-ol/interactions/pickcoordinatesinteraction'); +const DeleteFeatureInteraction = require('g3w-ol/interactions/deletefeatureinteraction'); +const AreaInteraction = require('g3w-ol/interactions/areainteraction'); +const LengthInteraction = require('g3w-ol/interactions/lengthinteraction'); +const g3wolutils = require('core/utils/ol'); + +/** + * Test assertions + */ +console.assert(undefined !== InputsComponents, 'InputsComponents is undefined'); +console.assert(undefined !== FieldsService, 'FieldsService is undefined'); +console.assert(undefined !== Fields, 'Fields is undefined'); module.exports = { @@ -219,9 +226,7 @@ module.exports = { MapComponent, ToolsComponent, QueryResultsComponent, - // main Form Component FormComponent, - // Form Components FormComponents: { Body: FormBody, Footer: FormFooter diff --git a/src/app/constant.js b/src/app/constant.js index a10121ded..9efcedbfc 100644 --- a/src/app/constant.js +++ b/src/app/constant.js @@ -444,125 +444,125 @@ export const API_BASE_URLS = { * @since v3.8 */ export const FONT_AWESOME_ICONS = { - 'change-map': "fas fa-map-signs", - map: "far fa-map", - file: "fas fa-file-code", - marker: "fas fa-map-marker-alt", - relation: "fas fa-sitemap", - tools: "fas fa-cogs", - tool: "fas fa-cog", - search: "fas fa-search", - print: "fas fa-print", - info: "fas fa-info-circle", - 'info-circle': "fas fa-info-circle", - globe: "fas fa-globe", - mail: "fas fa-envelope", - mobile: "fas fa-mobile", - fax: "fas fa-fax", - user: "fas fa-user", - bars: "fas fa-bars", - uncheck: "far fa-square", - check: "far fa-check-square", - filluncheck: "fas fa-square", - table: "fas fa-table", - trash: "fas fa-trash", - 'trash-o':"far fa-trash-alt", - pencil: "fas fa-pencil-alt", - 'ellips-h': "fas fa-ellipsis-h", - 'ellips-v': "fas fa-ellipsis-v", - 'arrow-up': "fas fa-chevron-up", - 'arrow-down': "fas fa-chevron-down", - 'arrow-left': "fas fa-chevron-left", - 'arrow-right': "fas fa-chevron-right", - 'resize-h': "fas fa-arrows-alt-h", - 'resize-v': "fas fa-arrows-alt-v", + 'change-map': "fas fa-map-signs", + map: "far fa-map", + file: "fas fa-file-code", + marker: "fas fa-map-marker-alt", + relation: "fas fa-sitemap", + tools: "fas fa-cogs", + tool: "fas fa-cog", + search: "fas fa-search", + print: "fas fa-print", + info: "fas fa-info-circle", + 'info-circle': "fas fa-info-circle", + globe: "fas fa-globe", + mail: "fas fa-envelope", + mobile: "fas fa-mobile", + fax: "fas fa-fax", + user: "fas fa-user", + bars: "fas fa-bars", + uncheck: "far fa-square", + check: "far fa-check-square", + filluncheck: "fas fa-square", + table: "fas fa-table", + trash: "fas fa-trash", + 'trash-o': "far fa-trash-alt", + pencil: "fas fa-pencil-alt", + 'ellips-h': "fas fa-ellipsis-h", + 'ellips-v': "fas fa-ellipsis-v", + 'arrow-up': "fas fa-chevron-up", + 'arrow-down': "fas fa-chevron-down", + 'arrow-left': "fas fa-chevron-left", + 'arrow-right': "fas fa-chevron-right", + 'resize-h': "fas fa-arrows-alt-h", + 'resize-v': "fas fa-arrows-alt-v", 'resize-default': "fas fa-compress", - 'caret-up': "fas fa-caret-up", - 'caret-down': "fas fa-caret-down", - 'caret-left': "fas fa-caret-left", - 'caret-right': "fas fa-caret-right", - 'empty-circle': "far fa-circle", - 'cloud-upload': "fas fa-cloud-upload-alt", - spinner: "fas fa-spinner", - minus: "fas fa-minus", - "minus-square":"far fa-minus-square", - plus: "fas fa-plus", - 'plus-circle': "fas fa-plus-circle", - 'plus-square': "far fa-plus-square", - grid: "fas fa-th", - home: "fas fa-home", - folder: "fas fa-folder", - 'sign-out': "fas fa-sign-out-alt", - close: "fas fa-times", - time: "far fa-clock", - calendar: "fas fa-calendar-alt", - list: "fas fa-list-alt", - link: "fas fa-link", - unlink: "fas fa-unlink", - eye: "far fa-eye", - 'eye-close': "far fa-eye-slash", - save: "far fa-save", - pdf: "fas fa-file-pdf", - image: "far fa-image", - video: "far fa-file-video", - unknow:"far fa-question-circle", - zip: "far fa-file-archive", - text: "far fa-file-alt", - excel: "far fa-file-excel", - xls:"far fa-file-excel", - gpx: "fas fa-location-arrow", - gpkg: "fas fa-box-open", - shapefile:"fas fa-file-archive", - csv: "fas fa-file-csv", - geotiff: "fas fa-th", - ppt: "far fa-file-powerpoint", - circle: "fas fa-circle", - calculator: "fas fa-calculator", - picture: "far fa-image", - keyboard: "far fa-keyboard", - 'file-download':"fas fa-file-download", - copy: "far fa-copy", - draw: "fas fa-draw-polygon", - chart: "fas fa-chart-bar", - 'chart-line': "fas fa-chart-line", - 'chart-area': "fas fa-chart-area", - 'chart-pie': "fas fa-chart-pie", - run: "fas fa-play", - warning: "fas fa-exclamation-circle", - alert: "fas fa-exclamation-triangle", - crosshairs: "fas fa-crosshairs", - success: "far fa-check-circle", - back: "fas fa-chevron-circle-left", - 'file-upload': "fas fa-file-upload", - wifi: "fas fa-wifi", - mouse: "fas fa-mouse", - 'copy-paste': "far fa-copy", - 'vector-square': "fas fa-vector-square", - download: "fas fa-download", - credits: "fas fa-euro-sign", - filter: "fas fa-filter", - plugin: "fas fa-plug", - invert: "fas fa-exchange-alt", - clear: "fas fa-broom", - palette: "fas fa-palette", - layers: "fas fa-layer-group", - 'sign-in': "fas fa-sign-in-alt", - language: "fas fa-language", - target: "fas fa-bullseye", - pin: "fas fa-map-pin", - square: "far fa-square", - move: "fas fa-arrows-alt", - moon: "fas fa-moon", - sun: "fas fa-sun", - refresh: "fas fa-sync-alt", - pause:"fas fa-pause", - 'step-backward': "fas fa-step-backward", - 'fast-backward': "fas fa-fast-backward", - 'step-forward': "fas fa-step-forward", - 'fast-forward': "fas fa-fast-forward", - crop: "fas fa-crop-alt", - exit: "fas fa-door-open", - slider: "fas fa-sliders-h", + 'caret-up': "fas fa-caret-up", + 'caret-down': "fas fa-caret-down", + 'caret-left': "fas fa-caret-left", + 'caret-right': "fas fa-caret-right", + 'empty-circle': "far fa-circle", + 'cloud-upload': "fas fa-cloud-upload-alt", + spinner: "fas fa-spinner", + minus: "fas fa-minus", + "minus-square": "far fa-minus-square", + plus: "fas fa-plus", + 'plus-circle': "fas fa-plus-circle", + 'plus-square': "far fa-plus-square", + grid: "fas fa-th", + home: "fas fa-home", + folder: "fas fa-folder", + 'sign-out': "fas fa-sign-out-alt", + close: "fas fa-times", + time: "far fa-clock", + calendar: "fas fa-calendar-alt", + list: "fas fa-list-alt", + link: "fas fa-link", + unlink: "fas fa-unlink", + eye: "far fa-eye", + 'eye-close': "far fa-eye-slash", + save: "far fa-save", + pdf: "fas fa-file-pdf", + image: "far fa-image", + video: "far fa-file-video", + unknow: "far fa-question-circle", + zip: "far fa-file-archive", + text: "far fa-file-alt", + excel: "far fa-file-excel", + xls: "far fa-file-excel", + gpx: "fas fa-location-arrow", + gpkg: "fas fa-box-open", + shapefile: "fas fa-file-archive", + csv: "fas fa-file-csv", + geotiff: "fas fa-th", + ppt: "far fa-file-powerpoint", + circle: "fas fa-circle", + calculator: "fas fa-calculator", + picture: "far fa-image", + keyboard: "far fa-keyboard", + 'file-download': "fas fa-file-download", + copy: "far fa-copy", + draw: "fas fa-draw-polygon", + chart: "fas fa-chart-bar", + 'chart-line': "fas fa-chart-line", + 'chart-area': "fas fa-chart-area", + 'chart-pie': "fas fa-chart-pie", + run: "fas fa-play", + warning: "fas fa-exclamation-circle", + alert: "fas fa-exclamation-triangle", + crosshairs: "fas fa-crosshairs", + success: "far fa-check-circle", + back: "fas fa-chevron-circle-left", + 'file-upload': "fas fa-file-upload", + wifi: "fas fa-wifi", + mouse: "fas fa-mouse", + 'copy-paste': "far fa-copy", + 'vector-square': "fas fa-vector-square", + download: "fas fa-download", + credits: "fas fa-euro-sign", + filter: "fas fa-filter", + plugin: "fas fa-plug", + invert: "fas fa-exchange-alt", + clear: "fas fa-broom", + palette: "fas fa-palette", + layers: "fas fa-layer-group", + 'sign-in': "fas fa-sign-in-alt", + language: "fas fa-language", + target: "fas fa-bullseye", + pin: "fas fa-map-pin", + square: "far fa-square", + move: "fas fa-arrows-alt", + moon: "fas fa-moon", + sun: "fas fa-sun", + refresh: "fas fa-sync-alt", + pause: "fas fa-pause", + 'step-backward': "fas fa-step-backward", + 'fast-backward': "fas fa-fast-backward", + 'step-forward': "fas fa-step-forward", + 'fast-forward': "fas fa-fast-forward", + crop: "fas fa-crop-alt", + exit: "fas fa-door-open", + slider: "fas fa-sliders-h", /** * @since 3.8.0 diff --git a/src/app/gui/fields/fields.js b/src/app/gui/fields/fields.js deleted file mode 100644 index 158f32b32..000000000 --- a/src/app/gui/fields/fields.js +++ /dev/null @@ -1,19 +0,0 @@ -import Text from 'components/FieldText.vue'; -import Link from 'components/FieldLink.vue'; -import Image from 'components/FieldImage.vue' -import Geo from 'components/FieldGeo.vue'; -import Media from 'components/FieldMedia.vue'; -import VueField from 'components/FieldVue.vue'; - -const Fields = { - simple_field: Text, - text_field: Text, - link_field: Link, - image_field: Image, - geo_field: Geo, - photo_field: Image, - media_field: Media, - vue_field: VueField -}; - -module.exports = Fields; diff --git a/src/app/gui/fields/fieldsservice.js b/src/app/gui/fields/fieldsservice.js deleted file mode 100644 index 2afc6378a..000000000 --- a/src/app/gui/fields/fieldsservice.js +++ /dev/null @@ -1,96 +0,0 @@ -import CatalogLayersStoresRegistry from 'store/catalog-layers'; - -const Fields = require('./fields'); -const { toRawType } = require('core/utils/utils'); - -const URLPattern = /^(https?:\/\/[^\s]+)/g; -const PhotoPattern = /[^\s]+.(png|jpg|jpeg|gif)$/g; - -const FieldType = { - SIMPLE:'simple', - GEO:'geo', - LINK:'link', - PHOTO: 'photo', - PHOTOLINK: "photolink", - IMAGE:'image', - POINTLINK:'pointlink', - ROUTE: 'route', - VUE: 'vue' -}; - -module.exports = { - /** - * Get Type field from field value - * field : Object contain the value of the field - * @param field - * @returns {string} - */ - getType(field){ - let type = field.type; - if (type !== 'vue'){ - const fieldValue = field.value; - const value = fieldValue && toRawType(fieldValue) === 'Object' && !fieldValue.coordinates && !fieldValue.vue ? fieldValue.value : fieldValue; - if (!value) type = FieldType.SIMPLE; - else if (value && typeof value == 'object') { - if (value.coordinates) type = FieldType.GEO; - else if (value.vue) type = FieldType.VUE; - } else if(value && Array.isArray(value)) { - if (value.length && value[0].photo) type = FieldType.PHOTO; - else type = FieldType.SIMPLE - } else if (value.toString().toLowerCase().match(PhotoPattern)) { - type = FieldType.PHOTO; - } else if (value.toString().match(URLPattern)) { - type = FieldType.LINK; - } else type = FieldType.SIMPLE; - } - return `${type}_field`; - }, - isSimple(field){ - return this.getType(field) === `${FieldType.SIMPLE}_field`; - }, - isLink(field){ - return this.getType(field) === `${FieldType.LINK}_field`; - }, - isImage(field){ - return this.getType(field) === `${FieldType.IMAGE}_field`; - }, - isPhoto(field){ - return this.getType(field) === `${FieldType.PHOTO}_field`; - }, - isVue(field){ - return this.getType(field) === `${FieldType.VUE}_field`; - }, - /** - * Method to add a new field type to Fields - * @param type - * @param field - */ - add({type, field}){ - Fields[type] = field; - }, - /** - * Remove field from Fields list - * @param type - */ - remove(type){ - delete Fields[type]; - }, - /** - * chenge type of field (example to set vue type) - * @param layerId - * @param field - */ - changeConfigFieldType({layerId, field={}}){ - const layer = CatalogLayersStoresRegistry.getLayerById(layerId); - layer.changeConfigFieldType(field); - }, - /** - * Reset origin type - * @param layerId - * @param field - */ - resetConfigFieldType({layerId, field={}}){ - const layer = CatalogLayersStoresRegistry.getLayerById(layerId); - layer.resetConfigField(field); - } -}; \ No newline at end of file diff --git a/src/app/gui/inputs/checkbox/service.js b/src/app/gui/inputs/checkbox/service.js deleted file mode 100644 index 4d2aea147..000000000 --- a/src/app/gui/inputs/checkbox/service.js +++ /dev/null @@ -1,37 +0,0 @@ -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function CheckBoxService(options={}) { - const value = options.state.input.options.values.find(value => value.checked === false); - options.validatorOptions = { - values: options.state.input.options.values.map(value => value) - }; - if (options.state.value === null && !options.state.forceNull) - options.state.value = value.value; - base(this, options); -} - -inherit(CheckBoxService, Service); - -const proto = CheckBoxService.prototype; - -proto.convertCheckedToValue = function(checked) { - checked = checked === null || checked === undefined ? false : checked; - const option = this.state.input.options.values.find(value => value.checked === checked); - this.state.value = option.value; - return this.state.value; -}; - -proto.convertValueToChecked = function() { - const valueToCheck = this.state.value; - if (valueToCheck === null || valueToCheck === undefined) return false; - let option = this.state.input.options.values.find(value => value.value == valueToCheck); - if (option === undefined) { - option = this.state.input.options.values.find(value => value.checked === false); - this.state.value = option.value; - } - return option.checked; -}; - - -module.exports = CheckBoxService; diff --git a/src/app/gui/inputs/checkbox/vue/checkbox.js b/src/app/gui/inputs/checkbox/vue/checkbox.js deleted file mode 100644 index 6e9688577..000000000 --- a/src/app/gui/inputs/checkbox/vue/checkbox.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputCheckbox.vue'; - -const CheckBoxInput = Vue.extend(vueComponentOptions); - -module.exports = CheckBoxInput; diff --git a/src/app/gui/inputs/color/vue/color.js b/src/app/gui/inputs/color/vue/color.js deleted file mode 100644 index 9682eae0f..000000000 --- a/src/app/gui/inputs/color/vue/color.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputColor.vue'; - -const TextInput = Vue.extend(vueComponentOptions); - -module.exports = TextInput; diff --git a/src/app/gui/inputs/datetimepicker/service.js b/src/app/gui/inputs/datetimepicker/service.js deleted file mode 100644 index 243cc03ce..000000000 --- a/src/app/gui/inputs/datetimepicker/service.js +++ /dev/null @@ -1,28 +0,0 @@ -import ApplicationService from 'services/application'; - -const { inherit, base, convertQGISDateTimeFormatToMoment } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function DateTimePickerService(options={}) { - this.validatorOptions = {}; - base(this, options); -} - -inherit(DateTimePickerService, Service); - -const proto = DateTimePickerService.prototype; - -proto.getLocale = function() { - const applicationConfig = ApplicationService.getConfig(); - return applicationConfig.user.i18n ? applicationConfig.user.i18n : 'en'; -}; - -proto.convertQGISDateTimeFormatToMoment = function(datetimeformat) { - return convertQGISDateTimeFormatToMoment(datetimeformat); -}; - -proto.setValidatorOptions = function(options) { - this.validatorOptions = options; -}; - -module.exports = DateTimePickerService; diff --git a/src/app/gui/inputs/datetimepicker/vue/datetimepicker.js b/src/app/gui/inputs/datetimepicker/vue/datetimepicker.js deleted file mode 100644 index a659667e5..000000000 --- a/src/app/gui/inputs/datetimepicker/vue/datetimepicker.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputDateTimePicker.vue'; - -const DateTimePickerInput = Vue.extend(vueComponentOptions); - -module.exports = DateTimePickerInput; diff --git a/src/app/gui/inputs/float/service.js b/src/app/gui/inputs/float/service.js deleted file mode 100644 index 38057292b..000000000 --- a/src/app/gui/inputs/float/service.js +++ /dev/null @@ -1,11 +0,0 @@ -const { base, inherit } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function FloatService(options={}) { - base(this, options); -} - -inherit(FloatService, Service); - - -module.exports = FloatService; diff --git a/src/app/gui/inputs/float/vue/float.js b/src/app/gui/inputs/float/vue/float.js deleted file mode 100644 index f031e0c61..000000000 --- a/src/app/gui/inputs/float/vue/float.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputFloat.vue'; - -const FloatInput = Vue.extend(vueComponentOptions); - -module.exports = FloatInput; diff --git a/src/app/gui/inputs/input.js b/src/app/gui/inputs/input.js deleted file mode 100644 index 12c825d64..000000000 --- a/src/app/gui/inputs/input.js +++ /dev/null @@ -1,59 +0,0 @@ -import ApplicationState from 'store/application-state'; -import BaseInputComponent from 'components/InputBase.vue' -import { baseInputMixin as BaseInputMixin } from 'mixins'; -const InputServices = require('./services'); - -const Input = { - props: ['state'], - mixins: [BaseInputMixin], - components: { - 'baseinput': BaseInputComponent - }, - watch: { - 'notvalid'(notvalid){ - notvalid && this.service.setErrorMessage(this.state) - }, - 'state.value'(){ - if ("undefined" !== typeof this.state.input.options.default_expression) { - // need to postpone state.value watch parent that use mixin - setTimeout(() => this.change()); - } - } - }, - created() { - this.service = new InputServices[this.state.input.type]({ - state: this.state, - }); - this.$watch(() => ApplicationState.language, () => this.service.setErrorMessage(this.state)); - this.state.editable && this.state.validate.required && this.service.validate(); - this.$emit('addinput', this.state); - /** - * in case of input value is fill with default value option we need to emit changeinput event - * without check validation. Example: - * { - "name": "id", - "type": "integer", - "label": "id", - "editable": false, - "validate": { - "required": true, - "unique": true - }, - "pk": true, - "default": "nextval('g3wsuite.zone_id_seq'::regclass)", - "input": { - "type": "text", - "options": {} - } - } - in this case if we start a validation, it fail because default value is a string while input is interger - */ - this.state.value_from_default_value && this.$emit('changeinput', this.state); - }, - destroyed(){ - // emit remove input to form (in case for example tab visibility condition) - this.$emit('removeinput', this.state); - } -}; - -module.exports = Input; diff --git a/src/app/gui/inputs/inputs.js b/src/app/gui/inputs/inputs.js deleted file mode 100644 index 7c9238d15..000000000 --- a/src/app/gui/inputs/inputs.js +++ /dev/null @@ -1,22 +0,0 @@ -const InputsComponents = { - 'text_input': require('./text/vue/text'), - 'texthtml_input': require('./texthtml/vue/texthtml'), - 'textarea_input': require('./textarea/vue/textarea'), - 'integer_input': require('./integer/vue/integer'), - 'string_input':require('./text/vue/text'), //temporary - 'float_input': require('./float/vue/float'), - 'radio_input': require('./radio/vue/radio'), - 'check_input': require('./checkbox/vue/checkbox'), - 'range_input': require('./range/vue/range'), - 'datetimepicker_input': require('./datetimepicker/vue/datetimepicker'), - 'unique_input': require('./unique/vue/unique'), - 'select_input': require('./select/vue/select'), - 'media_input': require('./media/vue/media'), - 'select_autocomplete_input': require('./select/vue/select'), - 'picklayer_input': require('./picklayer/vue/picklayer'), - 'color_input': require('./color/vue/color'), - 'slider_input': require('./sliderrange/vue/sliderrange'), - 'lonlat_input': require('./lonlat/vue/lonlat') -}; - -module.exports = InputsComponents; diff --git a/src/app/gui/inputs/integer/service.js b/src/app/gui/inputs/integer/service.js deleted file mode 100644 index 7222a6a42..000000000 --- a/src/app/gui/inputs/integer/service.js +++ /dev/null @@ -1,11 +0,0 @@ -const { base, inherit } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function IntegerService(options={}) { - base(this, options); -} - -inherit(IntegerService, Service); - - -module.exports = IntegerService; diff --git a/src/app/gui/inputs/integer/vue/integer.js b/src/app/gui/inputs/integer/vue/integer.js deleted file mode 100644 index f119cba45..000000000 --- a/src/app/gui/inputs/integer/vue/integer.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputInteger.vue'; - -const IntegerInput = Vue.extend(vueComponentOptions); - -module.exports = IntegerInput; diff --git a/src/app/gui/inputs/lonlat/service.js b/src/app/gui/inputs/lonlat/service.js deleted file mode 100644 index c5d77974e..000000000 --- a/src/app/gui/inputs/lonlat/service.js +++ /dev/null @@ -1,65 +0,0 @@ -import GUI from 'services/gui'; - -const { base, inherit } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function LonLatService(options={}) { - base(this, options); - this.coordinatebutton; - this.mapService = GUI.getComponent('map').getService(); - this.mapEpsg = this.mapService.getCrs(); - this.mapControlToggleEventHandler = evt =>{ - if (evt.target.isToggled() && evt.target.isClickMap()){ - this.coordinatebutton.active && this.toggleGetCoordinate(); - } - }; - this.map = GUI.getComponent('map').getService().getMap(); - this.outputEpsg = this.state.epsg || this.mapEpsg; - this.eventMapKey; -} - -inherit(LonLatService, Service); - -const proto = LonLatService.prototype; - -proto.setCoordinateButtonReactiveObject = function(coordinatebutton){ - this.coordinatebutton = coordinatebutton; -}; - -proto.validate = function(){ - if (this.state.values.lon < -180) this.state.values.lon = -180; - else if (this.state.values.lon > 180) this.state.values.lon = 180; - if (this.state.values.lat < -90) this.state.values.lon = -90; - else if (this.state.values.lat > 90) this.state.values.lon = 90; - this.state.validate.valid = !Number.isNaN(1*this.state.values.lon); -}; - -proto.toggleGetCoordinate = function(){ - this.coordinatebutton.active = !this.coordinatebutton.active; - this.coordinatebutton.active ? this.startToGetCoordinates() : this.stopToGetCoordinates(); -}; - -proto.startToGetCoordinates = function(){ - this.mapService.deactiveMapControls(); - this.mapService.on('mapcontrol:toggled', this.mapControlToggleEventHandler); - this.eventMapKey = this.map.on('click', evt =>{ - evt.originalEvent.stopPropagation(); - evt.preventDefault(); - const coordinate = this.mapEpsg !== this.outputEpsg ? ol.proj.transform(evt.coordinate, this.mapEpsg, this.outputEpsg) : evt.coordinate; - this.state.value = [coordinate]; - const [lon, lat] = coordinate; - this.state.values.lon = lon; - this.state.values.lat = lat; - }) -}; - -proto.stopToGetCoordinates = function(){ - ol.Observable.unByKey(this.eventMapKey); - this.mapService.off('mapcontrol:toggled', this.mapControlToggleEventHandler) -}; - -proto.clear = function(){ - this.stopToGetCoordinates(); -}; - -module.exports = LonLatService; diff --git a/src/app/gui/inputs/lonlat/vue/lonlat.js b/src/app/gui/inputs/lonlat/vue/lonlat.js deleted file mode 100644 index e311bcc6d..000000000 --- a/src/app/gui/inputs/lonlat/vue/lonlat.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputLonLat.vue'; - -const LatLontInput = Vue.extend(vueComponentOptions); - -module.exports = LatLontInput; diff --git a/src/app/gui/inputs/media/service.js b/src/app/gui/inputs/media/service.js deleted file mode 100644 index a77b343b1..000000000 --- a/src/app/gui/inputs/media/service.js +++ /dev/null @@ -1,10 +0,0 @@ -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function MediaService(options={}) { - base(this, options); -} - -inherit(MediaService, Service); - -module.exports = MediaService; diff --git a/src/app/gui/inputs/media/vue/media.js b/src/app/gui/inputs/media/vue/media.js deleted file mode 100644 index 947755c72..000000000 --- a/src/app/gui/inputs/media/vue/media.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputMedia.vue'; - -const MediaInput = Vue.extend(vueComponentOptions); - -module.exports = MediaInput; diff --git a/src/app/gui/inputs/picklayer/service.js b/src/app/gui/inputs/picklayer/service.js deleted file mode 100644 index b08b402fc..000000000 --- a/src/app/gui/inputs/picklayer/service.js +++ /dev/null @@ -1,92 +0,0 @@ -import MapLayersStoresRegistry from 'store/map-layers'; -import GUI from 'services/gui'; - -const PickFeatureInteraction = require('g3w-ol/interactions/pickfeatureinteraction'); -const PickCoordinatesInteraction = require('g3w-ol/interactions/pickcoordinatesinteraction'); -const { getQueryLayersPromisesByCoordinates } = require('core/utils/geo'); - -function PickLayerService(options={}) { - this.pick_type = options.pick_type || 'wms'; - this.ispicked = false; - this.fields = options.fields || [options.value]; - this.layerId = options.layer_id; - this.mapService = GUI.getService('map'); - this.interaction = this.pick_type === 'map' ? new PickFeatureInteraction({ - layers: [this.mapService.getLayerById(this.layerId)] - }) : new PickCoordinatesInteraction(); -} - -const proto = PickLayerService.prototype; - -proto.isPicked = function(){ - return this.ispicked; -}; - -//bind interrupt event -proto.escKeyUpHandler = function({keyCode, data:{owner}}) { - keyCode === 27 && owner.unpick(); -}; - -proto.unbindEscKeyUp = function() { - $(document).unbind('keyup', this.escKeyUpHandler); -}; - -proto.bindEscKeyUp = function() { - $(document).on('keyup', {owner: this}, this.escKeyUpHandler); -}; - -proto.pick = function() { - return new Promise((resolve, reject) => { - this.bindEscKeyUp(); - const values = {}; - this.ispicked = true; - const afterPick = feature => { - if (feature) { - const attributes = feature.getProperties(); - this.fields.forEach(field =>{ - values[field] = attributes[field]; - }); - resolve(values); - } else reject(); - this.ispicked = false; - this.unpick(); - }; - GUI.setModal(false); - this.mapService.addInteraction(this.interaction); - this.interaction.once('picked', event => { - if (this.pick_type === 'map') { - const feature = event.feature; - afterPick(feature); - } else if (this.pick_type === 'wms'){ - const layer = MapLayersStoresRegistry.getLayerById(this.layerId); - if (layer) { - getQueryLayersPromisesByCoordinates( - [layer], - { - map: this.mapService.getMap(), - feature_count: 1, - coordinates: event.coordinate - }).then(response => { - const {data=[]} = response[0]; - const feature = data.length && data[0].features[0] || null; - afterPick(feature); - }) - } - } - }) - }) -}; - -proto.unpick = function() { - this.mapService.removeInteraction(this.interaction); - GUI.setModal(true); - this.unbindEscKeyUp(); - this.ispicked = false; -}; - -proto.clear = function() { - this.isPicked() && this.unpick(); - this.mapService = this.interaction = this.field = null; -}; - -module.exports = PickLayerService; diff --git a/src/app/gui/inputs/picklayer/vue/picklayer.js b/src/app/gui/inputs/picklayer/vue/picklayer.js deleted file mode 100644 index 271f82ddc..000000000 --- a/src/app/gui/inputs/picklayer/vue/picklayer.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputPickLayer.vue'; - -const PickLayerInput = Vue.extend(vueComponentOptions); - -module.exports = PickLayerInput; diff --git a/src/app/gui/inputs/radio/service.js b/src/app/gui/inputs/radio/service.js deleted file mode 100644 index 819396841..000000000 --- a/src/app/gui/inputs/radio/service.js +++ /dev/null @@ -1,10 +0,0 @@ -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function RadioService(options={}) { - base(this, options); -} - -inherit(RadioService, Service); - -module.exports = RadioService; diff --git a/src/app/gui/inputs/radio/vue/radio.js b/src/app/gui/inputs/radio/vue/radio.js deleted file mode 100644 index 96ae2f72d..000000000 --- a/src/app/gui/inputs/radio/vue/radio.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputRadio.vue'; - -const RadioInput = Vue.extend(vueComponentOptions); - -module.exports = RadioInput; diff --git a/src/app/gui/inputs/range/service.js b/src/app/gui/inputs/range/service.js deleted file mode 100644 index ed7cfb69f..000000000 --- a/src/app/gui/inputs/range/service.js +++ /dev/null @@ -1,24 +0,0 @@ -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); -const Validators = require('core/utils/validators'); - -function RangeService(options={}) { - const {min, max} = options.state.input.options.values[0]; - options.state.info = `[MIN: ${min} - MAX: ${max}]`; - base(this, options); - const validator = Validators.get('range', { - min: 1*min, - max: 1*max - }); - this.setValidator(validator); -} - -inherit(RangeService, Service); - -const proto = Service.prototype; - -proto.isValueInRange = function(value, min, max) { - return value <= max && value >= min; -}; - -module.exports = RangeService; diff --git a/src/app/gui/inputs/range/vue/range.js b/src/app/gui/inputs/range/vue/range.js deleted file mode 100644 index 73d57146e..000000000 --- a/src/app/gui/inputs/range/vue/range.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputRange.vue'; - -const RangeInput = Vue.extend(vueComponentOptions); - -module.exports = RangeInput; diff --git a/src/app/gui/inputs/select/service.js b/src/app/gui/inputs/select/service.js deleted file mode 100644 index 5c03c2956..000000000 --- a/src/app/gui/inputs/select/service.js +++ /dev/null @@ -1,62 +0,0 @@ -import CatalogLayersStoresRegistry from 'store/catalog-layers'; - -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function SelectService(options={}) { - base(this, options); - this.layer = null; -} - -inherit(SelectService, Service); - -const proto = SelectService.prototype; - -proto._getLayerById = function(layer_id) { - return CatalogLayersStoresRegistry.getLayerById(layer_id); -}; - -proto.addValue = function(value) { - this.state.input.options.values.push(value); -}; - -proto.getKeyByValue = function({search}={}) { - const options = this.state.input.options; - const {value, key} = options; - this.getData({ - key:value, - value: key, - search - }).then(arrayValues => { - const [_value] = arrayValues; - const {$value : key, text: value} = _value; - this.addValue({ - key, - value - }) - }).catch(err => console.log(err)); -}; - -proto.getData = function({layer_id= this.state.input.options.layer_id, key=this.state.input.options.key, value=this.state.input.options.value, search} = {}) { - const search_value = `${key}|${search}`.trim(); - return new Promise((resolve, reject) => { - if (!this._layer) this._layer = this._getLayerById(layer_id); - this._layer.getDataTable({ - suggest: search_value, - ordering: key - }).then(response => { - const values = []; - const features = response.features; - for (let i=0; i < features.length; i++) { - values.push({ - text:features[i].properties[key], - id: i, - $value: features[i].properties[value] - }) - } - resolve(values); - }).fail(err => reject(err)); - }); -}; - -module.exports = SelectService; diff --git a/src/app/gui/inputs/select/vue/select.js b/src/app/gui/inputs/select/vue/select.js deleted file mode 100644 index c4452f592..000000000 --- a/src/app/gui/inputs/select/vue/select.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputSelect.vue'; - -const SelectInput = Vue.extend(vueComponentOptions); - -module.exports = SelectInput; diff --git a/src/app/gui/inputs/service.js b/src/app/gui/inputs/service.js deleted file mode 100644 index 152403b9e..000000000 --- a/src/app/gui/inputs/service.js +++ /dev/null @@ -1,155 +0,0 @@ -const Validators = require('core/utils/validators'); -const {toRawType} = require('core/utils/utils'); -const {t} = require('core/i18n/i18n.service'); - -function Service(options = {}) { - // set state of input - this.state = options.state || {}; - // type of input - //this.state.validate.required && this.setValue(this.state.value); - /* - * set starting value of input based on value or default value on options - */ - this.setValue(this.state.value); - this.setEmpty(this.state.value); - const type = this.state.type; - const validatorOptions = (options.validatorOptions || this.state.input.options) || {}; - // useful for the validator to validate input - this._validator = Validators.get(type, validatorOptions); - this.setErrorMessage(options.state); -} - -const proto = Service.prototype; - -proto.getState = function() { - return this.state; -}; - -proto.getValue = function() { - return this.state.value; -}; - -/** - * @param value - * - * @returns {void} - */ -proto.setValue = function(value) { - if (null !== value && "undefined" !== typeof value) { - return; - } - - const {options} = this.state.input; - let default_value = options.default; - - /** @TODO (maybe need to removed in v3.9.0) double check G3W-ADMIN server configuration. */ - if (Array.isArray(options)) { - if (options[0].default) { - default_value = options[0].default; - } else if (Array.isArray(options.values) && options.values.length > 0) { - default_value = options.values[0] && (options.values[0].value || options.values[0]); - } - } - - // check if default value is set - const get_default_value = ( - this.state.get_default_value && // ref: core/layers/tablelayer.js::getFieldsWithValues() - undefined !== default_value && - null !== default_value - ); - - // check if we can state.check get_default_value from input.options.default is set - if (get_default_value && undefined === options.default_expression) { - this.state.value = default_value; - } - - this.state.value_from_default_value = get_default_value; - -}; - -proto.addValueToValues = function(value) { - this.state.input.options.values.unshift(value) -}; - -proto._getValidatorType = function() { - return this.state.type; -}; - -proto.setState = function(state={}) { - this.state = _.isObject(state) ? state : {}; -}; - -// return validator -proto.getValidator = function() { - return this._validator; -}; - -proto.setValidator = function(validator) { - this._validator = validator; -}; - -proto.setEmpty = function(){ - this.state.validate.empty = !((Array.isArray(this.state.value) && this.state.value.length) || !_.isEmpty(_.trim(this.state.value))); -}; - -// general method to check the value of the state is valid or not -proto.validate = function() { - if (this.state.validate.empty) { - this.state.validate.empty = true; - this.state.value = null; - this.state.validate.unique = true; - // check if require or check validation - this.state.validate.valid = this.state.validate.required ? false : this._validator.validate(this.state.value); - } else { - if (this.state.input.type === 'integer' || this.state.input.type === 'float') { - if (+this.state.value < 0) { - this.state.value = null; - this.state.validate.empty = true; - this.state.validate.valid = !this.state.validate.required; - } else this.state.validate.valid = this._validator.validate(this.state.value); - } - if (this.state.validate.exclude_values && this.state.validate.exclude_values.size) { - this.state.validate.valid = !this.state.validate.exclude_values.has(this.state.value); - } else this.state.validate.valid = this._validator.validate(this.state.value); - } - return this.state.validate.valid; -}; - -proto.setErrorMessage = function(input) { - let message; - if (input.validate.mutually && !input.validate.mutually_valid) - this.state.validate.message = `${t("sdk.form.inputs.input_validation_mutually_exclusive")} ( ${input.validate.mutually.join(',')} )`; - else if (input.validate.max_field) - this.state.validate.message = `${t("sdk.form.inputs.input_validation_max_field")} (${input.validate.max_field})`; - else if (input.validate.min_field) - this.state.validate.message = `${t("sdk.form.inputs.input_validation_min_field")} (${input.validate.min_field})`; - else if (input.validate.unique && input.validate.exclude_values && input.validate.exclude_values.size) - this.state.validate.message = `${t("sdk.form.inputs.input_validation_exclude_values")}`; - else if (input.validate.required) { - message = `${t("sdk.form.inputs.input_validation_error")} ( ${t("sdk.form.inputs." + input.type)} )`; - if (this.state.info) { - message = `${message} -
- ${this.state.info} -
- `; - } - this.state.validate.message = this.state.info || message; - } else this.state.validate.message = this.state.info; -}; -/** - * Method to set update - */ -proto.setUpdate = function(){ - const {value, _value} = this.state; - if (this.state.input.type === 'media' && toRawType(value) !== 'Object' && toRawType(_value) !== 'Object') { - this.state.update = value.value != _value.value; - } else if (this.state.input.type === "datetimepicker") { - //check - this.state.update = (null !== value ? value.toUpperCase(): value) != (_value ? _value.toUpperCase(): _value); - } else { - this.state.update = value != _value; - } -}; - -module.exports = Service; diff --git a/src/app/gui/inputs/services.js b/src/app/gui/inputs/services.js deleted file mode 100644 index 180550203..000000000 --- a/src/app/gui/inputs/services.js +++ /dev/null @@ -1,22 +0,0 @@ -const InputsServices = { - 'text': require('./service'), - 'textarea': require('./service'), - 'texthtml': require('./service'), - 'integer': require('./integer/service'), - 'string':require('./service'), - 'float': require('./float/service'), - 'radio': require('./radio/service'), - 'check': require('./checkbox/service'), - 'range': require('./range/service'), - 'datetimepicker': require('./datetimepicker/service'), - 'unique': require('./unique/service'), - 'select': require('./select/service'), - 'media': require('./media/service'), - 'select_autocomplete': require('./select/service'), - 'picklayer': require('./service'), - 'color': require('./service'), - 'slider': require('./sliderrange/service'), - 'lonlat': require('./lonlat/service') -}; - -module.exports = InputsServices; diff --git a/src/app/gui/inputs/sliderrange/service.js b/src/app/gui/inputs/sliderrange/service.js deleted file mode 100644 index 2ab0f0b4a..000000000 --- a/src/app/gui/inputs/sliderrange/service.js +++ /dev/null @@ -1,29 +0,0 @@ -const { base, inherit } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); -const Validators = require('core/utils/validators'); - -function SliderRangeService(options={}) { - const {state} = options; - options.state.info = `[MIN: ${state.input.options.min} - MAX: ${state.input.options.max}]`; - base(this, options); - const validator = Validators.get('range', { - min: 1*state.input.options.min, - max: 1*state.input.options.max - }); - this.setValidator(validator); - this.validate = function(){ - this.state.value = 1*this.state.value; - this.state.validate.valid = this.state.value >= this.state.input.options.min || this.state.value <= this.state.input.options.max; - } -} - -inherit(SliderRangeService, Service); - -const proto = SliderRangeService.prototype; - -proto.changeInfoMessage = function(){ - this.state.info = `[MIN: ${this.state.input.options.min} - MAX: ${this.state.input.options.max}]`; -}; - - -module.exports = SliderRangeService; \ No newline at end of file diff --git a/src/app/gui/inputs/sliderrange/vue/sliderrange.js b/src/app/gui/inputs/sliderrange/vue/sliderrange.js deleted file mode 100644 index 7fa39bd18..000000000 --- a/src/app/gui/inputs/sliderrange/vue/sliderrange.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputSliderRange.vue'; - -const RangeInput = Vue.extend(vueComponentOptions); - -module.exports = RangeInput; diff --git a/src/app/gui/inputs/table/vue/table.js b/src/app/gui/inputs/table/vue/table.js deleted file mode 100644 index 4cb8e7a8c..000000000 --- a/src/app/gui/inputs/table/vue/table.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputTable.vue'; - -const TableInput = Vue.extend(vueComponentOptions); - -module.exports = TableInput; diff --git a/src/app/gui/inputs/text/vue/text.js b/src/app/gui/inputs/text/vue/text.js deleted file mode 100644 index a9a86f7d8..000000000 --- a/src/app/gui/inputs/text/vue/text.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputText.vue'; - -const TextInput = Vue.extend(vueComponentOptions); - -module.exports = TextInput; diff --git a/src/app/gui/inputs/textarea/vue/textarea.js b/src/app/gui/inputs/textarea/vue/textarea.js deleted file mode 100644 index 757c434a7..000000000 --- a/src/app/gui/inputs/textarea/vue/textarea.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputTextArea.vue'; - -const TextAreaInput = Vue.extend(vueComponentOptions); - -module.exports = TextAreaInput; diff --git a/src/app/gui/inputs/texthtml/vue/texthtml.js b/src/app/gui/inputs/texthtml/vue/texthtml.js deleted file mode 100644 index 7adf8f1ec..000000000 --- a/src/app/gui/inputs/texthtml/vue/texthtml.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputTextHtml.vue'; - -const TextHtmlInput = Vue.extend(vueComponentOptions); - -module.exports = TextHtmlInput; \ No newline at end of file diff --git a/src/app/gui/inputs/unique/service.js b/src/app/gui/inputs/unique/service.js deleted file mode 100644 index 2efa725fa..000000000 --- a/src/app/gui/inputs/unique/service.js +++ /dev/null @@ -1,10 +0,0 @@ -const { inherit, base } = require('core/utils/utils'); -const Service = require('gui/inputs/service'); - -function UniqueService(options={}) { - base(this, options); -} - -inherit(UniqueService, Service); - -module.exports = UniqueService; diff --git a/src/app/gui/inputs/unique/vue/unique.js b/src/app/gui/inputs/unique/vue/unique.js deleted file mode 100644 index dd0ba6c5b..000000000 --- a/src/app/gui/inputs/unique/vue/unique.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as vueComponentOptions from 'components/InputUnique.vue'; - -const UniqueInput = Vue.extend(vueComponentOptions); - -module.exports = UniqueInput; diff --git a/src/components/FieldG3W.vue b/src/components/FieldG3W.vue index d545abda9..b48e921ae 100644 --- a/src/components/FieldG3W.vue +++ b/src/components/FieldG3W.vue @@ -5,35 +5,38 @@ - \ No newline at end of file + created() { + this.type = fieldsMixin.methods.getFieldService().getType(this.state); + }, + +}; + \ No newline at end of file diff --git a/src/components/FieldGallery.vue b/src/components/FieldGallery.vue index 114daa4d3..1a78d4e74 100644 --- a/src/components/FieldGallery.vue +++ b/src/components/FieldGallery.vue @@ -6,26 +6,34 @@ -->