Source: widgets/SpwAddMapService.js

Retour à la documentation
/**
 * @class spw.widgets.SpwAddMapService
 */
define(["dojo/_base/declare","spw/api/SpwBaseTemplatedWidget", "dojo/dom-construct",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/on",
        "dojo/_base/lang", "dojo/text!./templates/SpwAddMapService.html", "dojo/dom-style",
        "dojo/_base/array", "dijit/form/CheckBox", "dojo/store/Memory", "dijit/Tree",
        "dijit/tree/ObjectStoreModel", "spw/api/ThreeStateCheckBox", "spw/api/MessageManager", "spw/api/MapServiceFactory",

        "dijit/form/ComboBox","dijit/form/TextBox", "dijit/form/Button"],
        function(declare, SpwBaseTemplatedWidget, domConstruct, BorderContainer, ContentPane,
                on, lang, tmpl, domStyle, array, CheckBox, Memory, Tree, ObjectStoreModel,
                 ThreeStateCheckBox, MessageManager, MapServiceFactory){

    return declare("spw.widgets.SpwAddMapService", [SpwBaseTemplatedWidget], /** @lends spw.widgets.SpwAddMapService.prototype */{

        templateString: tmpl,
        cptService: 1,

        currentServiceId: null,
        currentService: null,

        "widgetTitle": "Ajouter un service (WMS, ...)",
        "position": "none",
        "activated": true,

        /**
         * @constructs
         * @param config
         */
        constructor: function (config) {
        },

        postMixInProperties: function (config) {
            this.inherited(arguments);
        },

        buildRendering: function (config) {
            this.inherited(arguments);
        },

        postCreate: function() {
            this.inherited(arguments);
            this.own(
                on(this.spwViewer.get('spwMap'), this.spwViewer.get('spwMap').events.MapServiceRemoved, lang.hitch(this, this.onMapServiceRemoved)),
                on(this.comboBoxType, 'change', lang.hitch(this, this.onTypeChanged))
            );
        },

        startup: function() {
            this.inherited(arguments);
        },

        onActivate: function(){
            this.inherited(arguments);

            this.addCurrentService();
        },

        onDeactivate: function(){
            this.inherited(arguments);

            this.removeCurrentService(true);
        },

        destroy: function() {
            this.inherited(arguments);
        },

        onTypeChanged: function() {
            var item = this.comboBoxType.get('item');
            this.sampleNode.innerHTML = 'Exemple : ' + item.example;
        },

        onMapServiceRemoved: function(service) {
            if (this.currentService == null) {
                return;
            }

            if (this.currentService === service) {
                this.currentService = null;

//                domStyle.set(this.detailsNode.domNode, 'display', 'none');
//                domStyle.set(this.urlNode.domNode, 'display', 'block');
                domConstruct.empty(this.layersNode.domNode);
            }
        },

        resize: function() {
            this.inherited(arguments);

            // this.urlNode.resize();
            // this.detailsNode.resize();
        },

        updateUI: function() {
            if (this.currentService == null) {
                return;
            }

            var service = this.currentService;

            //Allowing user to change mapservice label
            var mapName = service.layer.mapName || 'Nouveau service';
            this.mapNameTextBox = this.mapNameInputNode.textbox;
            this.mapNameTextBox.value = service.layer.mapName;

//            domStyle.set(this.detailsNode.domNode, 'display', 'block');
//            domStyle.set(this.urlNode.domNode, 'display', 'none');

            domConstruct.empty(this.layersNode.domNode);

            if (service.get('inError') === true) {
                var errorMessage = 'Ce service est en erreur...Veuillez corriger l\'URL ou le type de service.';
                if (document.location.href.startsWith('https') && this.currentService.url.startsWith('http://')) {
                    errorMessage = "Impossible de charger un service préfixé 'http' dans une application 'https'. ";
                }
                domConstruct.create('p', {
                    innerHTML: errorMessage,
                    style: 'color: red; padding-left: 20px; font-weight: bold;'
                }, this.layersNode.domNode);

//                this.detailsNode.resize();

                return;
            }

            if (service.get('type') === 'AGS_TILED') {
                domConstruct.create('p', {
                    innerHTML: 'Ce service est tuilé, vous ne pouvez dès lors pas choisir les couches à afficher.',
                    style: 'padding-left: 20px; font-weight: bold;'
                }, this.layersNode.domNode);

//                this.detailsNode.resize();

                return;
            }

            var layers = service.get('mapServiceLayers');

            if (layers.length === 0) {
                domConstruct.create('p', {
                    innerHTML: 'Ce service ne contient aucun sous layer...'
                }, this.layersNode.domNode);
            }
            else {
                var raw = [];

                var store = new Memory({
                    data: raw,

                    getChildren: function(object) {
                        return this.query({
                            parent: object.id
                        });
                    }
                });

                var rootItem = {
                    id: 'root',
                    name: 'Tout sélectionner/déselectionner',
                    checkbox: null
                };

                var checkbox = new ThreeStateCheckBox({
                    checked: false,
                    onChange: lang.hitch(this, function() {
                        this.ckChanged(service, checkbox.get('checked'), 'service')
                    }),
                    onClick: lang.hitch(this, this.ckClicked, rootItem, store)
                }, domConstruct.create('div'));

                rootItem.checkbox = checkbox;
                raw.push(rootItem);

                array.forEach(layers, lang.hitch(this, function(layer) {
                    var item = {
                        id: layer.id,
                        name: layer.name,
                        parent: layer.get('parentLayer') ? layer.get('parentLayer').id : 'root',
                        layer: layer,
                        checkbox: null
                    };

                    var constructor = (layer.subLayers && layer.subLayers.length > 0 ? ThreeStateCheckBox : CheckBox);

                    var checkbox = new constructor({
                        checked: false,
                        onChange: lang.hitch(this, function() {
                            this.ckChanged(layer, checkbox.get('checked'))
                        }),
                        onClick: lang.hitch(this, this.ckClicked, item, store)
                    });

                    item.checkbox = checkbox;

                    raw.push(item);
                    // layer.hide();
                    layer.set('inTOC', false);
                }));

                var model = new ObjectStoreModel({
                    store: store,

                    query: {
                        id: 'root'
                    },

                    mayHaveChildren: function(object) {
                        return object.layer.subLayers && object.layer.subLayers.length > 0;
                    }
                });

                var tree = new Tree({
                    model: model,

                    getIconClass: function(item, opened) {
                        // pour enlever l'image 'dossier'
                    },

                    _createTreeNode: function(args) {
                        var tnode = new Tree._TreeNode(args);
                        tnode.labelNode.innerHTML = args.label;

                        var cb = args.item.checkbox;

                        if (cb) {
                            cb.placeAt(tnode.labelNode, "first");
                            cb.startup();
                        }

                        return tnode;
                    }
                });
                tree.placeAt(domConstruct.create('div', null, this.layersNode.domNode));
                tree.startup();
            }

            // this.detailsNode.resize();
        },

        ckClicked: function(item, store) {
    		this.rootIsClickOrigin = (item.id === "root");

            var cb = item.checkbox;

            if (cb == null) {
                return;
            }

            var checked = cb.get('checked');
            var parent = item.parent;

            var toggleParents = function(parent) {
                if (parent == null) {
                    return;
                }

                var itemParent = store.query({id: parent});

                if (itemParent.length > 0) {
                    itemParent = itemParent[0];

                    if (itemParent && itemParent.checkbox) {
                        var children = store.query({parent: parent});
                        var cpt = 0;

                        array.forEach(children, function(c) {
                            if (c.checkbox && c.checkbox.get('checked')) {
                                ++cpt;
                            }
                        });

                        var isAllChecked = (children.length === cpt);

                        itemParent.checkbox.set('checked', isAllChecked ? true : cpt > 0 ? 'mixed' : false);
                    }
                }
            };

            toggleParents(item.parent);

            var toggleChildren = function(item) {
                var children = store.query({parent: item.id});

                if (children == null || children.length === 0) {
                    return;
                }

                array.forEach(children, function(c) {
                    if (c.checkbox) {
                        c.checkbox.set('checked', checked === true);
                        toggleChildren(c);
                    }
                });
            };

            toggleChildren(item);
        },

        ckChanged: function(layer, checked, type) {
//            if (typeof layer.defaultVisibility !== 'undefined' && layer._defaultVisibility == null) {
//                layer._defaultVisibility = layer.defaultVisibility;
//                layer.visible = layer.defaultVisibility;
//            }
//
//             if (checked == true) {
//                 layer.defaultVisibility  = true;
//                 //layer.show()
//             }
//             else if(checked == false){
//                 layer.defaultVisibility  = false;
//                 //layer.hide();
//             }
        	
        	//layer.defaultVisibility = (checked === "mixed" || checked === true);
        	if(this.rootIsClickOrigin && this.currentService.type !== "WMS"){
        		if (type === 'service') {
        			this.currentService.addServiceOnly = true;
        		}
        	} else {
        		this.currentService.addServiceOnly = false;
        	}
    		layer.checked = (checked === "mixed" || checked === true);
        },

        addClicked: function() {
            if (this.currentService == null) {
                return;
            }

            if (this.currentService.get('inError')) {
                return;
            }
            
            var visibleLayers = null;
            if(!this.currentService.addServiceOnly){
            	visibleLayers = [];
	            for(var k in this.currentService.mapServiceLayers){
	            	if(this.currentService.mapServiceLayers[k].checked){
	            		visibleLayers.push(k);
	            	}
	            }
            }

            var serviceType = this.comboBoxType.get('item').id;
            if (serviceType == MapServiceFactory.types.TILED) {
                for(var k in this.currentService.mapServiceLayers){
                    if(this.currentService.mapServiceLayers[k].params.defaultVisibility){
                        visibleLayers.push(k);
                    }
                }
            }

            var isWMSOrArcGIS = serviceType == MapServiceFactory.types.DYNAMIC || serviceType == MapServiceFactory.types.DYNAMIC.WMS;

            if (visibleLayers && visibleLayers.length == 0 && isWMSOrArcGIS) {
                MessageManager.getInstance().notifyInfo("", "Veuillez sélectionner au minimum une couche avant d'ajouter le service à la carte.", 3000);
                return;
            }

            
            this.removeCurrentService(false);
            this.clearHandlers();
            
            var service = this.createServiceConfig();
            service.label = this.mapNameTextBox.value;

            if(visibleLayers) {
                if(service.type === "WMS") {
                	service.wmsParameters.visibleLayers = visibleLayers;
                } else {
                	service.visibleLayers = visibleLayers;
                }
            }
            
            this.currentService = this.spwViewer.get('spwMap').addMapService(service);
            var configLayersInToc = function(){
            	if(!visibleLayers || !this.currentService) return;
            	for(var k in this.currentService.mapServiceLayers){
                    if(service.type === "WMS") {
                    	if(this.currentService.mapServiceLayers[k].subLayers && this.currentService.mapServiceLayers[k].subLayers.length > 0){
                    		var inToc = this.currentService.mapServiceLayers[k].subLayers.find(function(sl){return sl.get('inTOC')}) != undefined;
                    		this.currentService.mapServiceLayers[k].set('inTOC', inToc);
                    		this.currentService.mapServiceLayers[k].set('visible', inToc);
                    	} else {
                    		this.currentService.mapServiceLayers[k].set('inTOC', (service.wmsParameters.visibleLayers.indexOf(k) > -1));
                    		this.currentService.mapServiceLayers[k].set('visible', (service.wmsParameters.visibleLayers.indexOf(k) > -1));

                        	//Si un layer WMS doit apparaitre dans la TOC, tous les layers parent doivent également être inTOC = true
                        	// Etant donné que les id de group layer du WMS sont générés à la création et que le service est détruit et recréé lors de l'ajout,
                        	// les ids sont différents et donc la condition ci-dessus n'est jamais satisfaite pour ceux-ci.
                        	if(this.currentService.mapServiceLayers[k].get('inTOC')){
    	                    	var par = this.currentService.mapServiceLayers[k].parentLayer;
    	                    	while(par){
    	                    		par.set('inTOC', true);
    	                    		par.set('visible', true);
    	                    		par = par.parentLayer;
    	                    	}
                        	}
                    	}                    	
                    } else {
                    	this.currentService.mapServiceLayers[k].set('inTOC', (service.visibleLayers.indexOf(k) > -1));
                    }
                    
                }
            	this.currentService.refreshLayersVisibility();
            };
            if (this.currentService.get('loaded')) {
            	lang.hitch(this, configLayersInToc)();
            }
            else {
                this.own(
                    this.handlerLoaded = on(this.currentService, this.currentService.events.MapServiceLoaded, lang.hitch(this, configLayersInToc)),
                    this.handlerError = on(this.currentService, this.currentService.events.MapServiceError, lang.hitch(this, configLayersInToc))
                );
            }

            this.currentService.set('inTOC', true);
            this.currentService.show();
//            this.currentService = null;
        },

        cancelClicked: function() {
            if (this.currentService == null) {
                return;
            }

            this.currentService.set('inTOC', false);
        },

        refreshClicked: function() {
            this.removeCurrentService(true);
            this.clearHandlers();

            this.currentService = null;

            if(!this.comboBoxType.get('item')){
                this.comboBoxType.set('item', this.comboBoxType.get('store').data[0]);
            }

            var service = this.createServiceConfig();

            if(service.url.indexOf("/MapServer") > -1) {
                var tmpUrl = service.url.substring(0, service.url.indexOf("/MapServer"));
                service.label = tmpUrl.substring(tmpUrl.lastIndexOf("/")+1);
            }
            else {
                service.label = "Service "+ this.cptService++;
            }

            if(service){
                this.currentService = this.spwViewer.get('spwMap').addMapService(service);

                if (this.currentService.get('loaded')) {
                    this.updateUI();
                }
                else {
                    this.own(
                        this.handlerLoaded = on(this.currentService, this.currentService.events.MapServiceLoaded, lang.hitch(this, this.updateUI)),
                        this.handlerError = on(this.currentService, this.currentService.events.MapServiceError, lang.hitch(this, this.updateUI))
                    );
                }
            }
        },

        clearHandlers: function() {
            if (this.handlerLoaded) {
                this.handlerLoaded.remove();
            }

            if (this.handlerError) {
                this.handlerError.remove();
            }
        },

        addCurrentService: function() {
            if (this.currentService == null) {
                return;
            }

            if (this.currentService.get('inTOC')) {
                return;
            }

            this.spwViewer.get('spwMap').addMapService(this.currentService);
        },

        removeCurrentService: function(ifNotInTOC) {
            if (this.currentService == null) {
                return;
            }

            if (ifNotInTOC && this.currentService.get('inTOC') === true) {
                return;
            }

            this.spwViewer.get('spwMap').removeMapService(this.currentService.serviceId);
        },

        createServiceConfig: function(){
            var type = this.comboBoxType.get('item').id;

            switch(type){
                case "AGS_DYNAMIC": return {
                    "serviceId":""+new Date().getTime(),
                    "type":"AGS_DYNAMIC",
                    "url": this.textBoxUrl.get('value').trim(),
                    "hasLegend": true,
                    "alpha": 100,
                    "toLoad": true,
                    "visible": true,
                    "identifiable": true,
                    "inTOC": false
                };

                case "AGS_TILED": return {
                    "serviceId":""+new Date().getTime(),
                    "type":"AGS_TILED",
                    "url": this.textBoxUrl.get('value').trim(),
                    "hasLegend": true,
                    "alpha": 100,
                    "toLoad": true,
                    "visible": true,
                    "identifiable": true,
                    "inTOC": false
                };

                case "WMS": return {
                    "serviceId":""+new Date().getTime(),
                    "type":"WMS",
                    "url": this.textBoxUrl.get('value').trim(),
                    "hasLegend": true,
                    "alpha": 100,
                    "toLoad": true,
                    "visible": false,
                    "identifiable": true,
                    "inTOC": false,
                    "wmsParameters": { 
                    	//"visibleLayers": ["1","2","3","4","5","6","7","8","9","10","11","12","13","14"]
                    }
                };
            }
        }

    });
});