1 /**
  2  * @fileOverview  
  3  * Copyright (c) 2013 Regione Autonoma della Sardegna
  4  * Published under the GPL license.<br>
  5  * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a>
  6  * for the full text of the license.
  7  * @version 0.1
  8  */
  9 
 10 /**
 11  * @require framework/widgets/doublemap/ToggleColumnButton.js
 12  * @require framework/widgets/doublemap/ToggleMapsSyncButton.js
 13  * @require framework/widgets/doublemap/DoubleMapLinker.js
 14  * @require framework/widgets/doublemap/DoublePrintMap.js
 15  * @require framework/widgets/form/ImagesLayersComboBox.js
 16  * @require framework/widgets/control/Compass.js
 17  * @require framework/data/EnvelopesAerialPhotos_XLSReader.js
 18  */
 19 
 20 /**
 21  * @namespace framework.widgets.doublemap
 22  */
 23 Ext.namespace('framework.widgets.doublemap');
 24 
 25 /**
 26  *  Base panel for displaying a double map
 27  *  
 28  *  @name_ DoubleMap
 29  *  @class Control for displaying a double map
 30  *  @constructor
 31  *  @extends <a target="_blank" href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Button">Ext.Button</a>
 32  */
 33 framework.widgets.doublemap.DoubleMap = Ext.extend(Ext.Viewport,
 34   /** 
 35    * @lends framework.widgets.doublemap.DoubleMap.prototype 
 36    */
 37     {
 38      /**
 39       * Type layout
 40       * @public
 41       * @type String
 42       */
 43       layout: 'border',
 44       /**
 45       * ID Double Map
 46       * @public
 47       * @type String
 48       */
 49       id: 'doubleMap',
 50       /**
 51       * Configuratione Map1 (Single Map)
 52       * @public
 53       * @type {Object}
 54       */
 55       mapConfig1: null,
 56       /**
 57       * Configuratione Map2 (Double Map)
 58       * @public
 59       * @type {Object}
 60       */
 61       mapConfig2: null,
 62       /**
 63       * ID Toolbar Region
 64       * @public
 65       * @type {String}
 66       */
 67       toolbarRegion: null,
 68       /**
 69       * ID West Region
 70       * @public
 71       * @type {String}
 72       */
 73       westRegion: null,
 74       /**
 75       * ID extra control Region
 76       * @public
 77       * @type {String}
 78       */
 79       extraControlsRegion: null,
 80       /**
 81       * RASViewer Map 1 (Single Map)
 82       * @public
 83       * @type {framework.RASViewer}
 84       */
 85       app1: null,
 86       /**
 87       * RASViewer Map 2 (Double Map)
 88       * @public
 89       * @type {framework.RASViewer}
 90       */
 91       app2: null,  
 92       /**
 93       * ID viewer Region 1 (Single Map)
 94       * @public
 95       * @type {String}
 96       */
 97       viewer1Region: null,
 98       /**
 99       * ID viewer Region 2 (Double Map)
100       * @public
101       * @type {String}
102       */
103       viewer2Region: null,
104       /**
105       * ID tools Region
106       * @public
107       * @type {String}
108       */
109       toolsRegion: null,
110       /**
111       * ID tools Header
112       * @public
113       * @type {String}
114       */
115       toolsHeader: null,
116       /**
117       * If starting with syncronize maps
118       * @public
119       * @type {Boolean}
120       */
121       syncMaps:false,
122       /**
123       * If starting with visible double map
124       * @public
125       * @type {Boolean}
126       */
127       secondMapVisible:false,
128       /**
129       * ID button sincronized map
130       * @public
131       * @type {String}
132       */
133       mapsSyncButtonId: null,
134       /**
135       * Lista dei voli
136       * @public
137       * @type {Object}
138       */
139       mapVoli: null,
140       /**
141       * Contatore per il messaggio di attesa di risposta dei servizi utilizzati 
142       * dall'applicativo
143       * @public
144       * @type {Number}
145       */
146       extAjaxCount: 0,
147       /**
148       * Componente per il messaggio di attesa di risposta dei servizi utilizzati 
149       * dall'applicativo
150       * @public
151       * @type {Ext.LoadMask}
152       */
153       busyMaskExtAjax: null,
154       /**
155       * Messaggio di attesa di risposta dei servizi utilizzati 
156       * dall'applicativo
157       * @public
158       * @type {String}
159       */
160       loadingMessage: 'Elaborazione in corso..',
161       /** 
162        * the base Ajax Url for ajax request
163        * default ""
164        * @public
165        * @type String
166        */     
167       baseUrlDigest: '',
168       /** 
169        * the custom Url for saved map
170        * default ""
171        * @public
172        * @type String
173        */
174       customUrl: '/sardegnafotoaeree/',
175       /** 
176        * Hide or show print button
177        * 
178        * @public
179        * @type Boolean
180        */
181       hidePrint: false,
182       /** 
183        * Hide or show link button
184        * 
185        * @public
186        * @type Boolean
187        */
188       hideLinker: false,
189      
190      /**
191 	  * Method: listeners
192 	  * 
193       * @private  
194       */  
195       listeners: {
196         afterlayout: function() {
197           var self = this;
198           Ext.getCmp(this.viewer1Region).setHeight(this.getHeight());
199           Ext.getCmp(this.viewer2Region).setHeight(this.getHeight());
200           if ((this.app1) && this.app1 !== undefined && this.app1.portal !== undefined) {
201             this.app1.portal.setHeight(this.getHeight());
202             this.app1.portal.doLayout();
203             var scale = this.app1.mapPanel.map.getScale();
204             this.app1.mapPanel.map.zoomToScale(scale + 1);
205             this.app1.mapPanel.map.zoomToScale(scale);
206             //ready event
207             this.app1.on('ready', function(o) {
208               if (self.syncMaps) {
209                 try {
210                   Ext.getCmp(self.mapsSyncButtonId).registerSync();
211                 } catch (err) {}
212               }
213               self.fireEvent('map1Ready', self.app1.mapPanel.map);
214             });
215             
216             Ext.Ajax.on("beforerequest", function(){
217                 this.extAjaxCount++;
218                 if (!this.busyMaskExtAjax) {
219                       this.busyMaskExtAjax = new Ext.LoadMask(
220                           this.app1.mapPanel.map.div, {
221                               msg: this.loadingMessage
222                           }
223                       );
224                 }
225                 this.busyMaskExtAjax.show();
226                     
227             },this);
228         
229             Ext.Ajax.on("requestcomplete", function(){
230                 this.extAjaxCount--;
231                 if(this.extAjaxCount === 0) {
232                     this.busyMaskExtAjax.hide();
233                 }
234             },this);
235             
236           }
237           if ((this.app2) && this.app2 !== undefined && this.app2.portal !== undefined) {
238             this.app2.portal.setHeight(this.getHeight());
239             this.app2.portal.doLayout();
240             //ready event
241             this.app2.on('ready', function(o) {
242               self.fireEvent('map2Ready', self.app2.mapPanel.map);
243             });
244           }
245         }
246       },
247       /**
248 	  * Method: getViewportId
249 	  * 
250       * @private  
251       */
252       getViewportId: function(config){
253         var res = this.id;
254         if (config && config.id){
255           res = config.id;
256         }
257         return res;
258       },
259       /**
260 	  * Method: constructor
261 	  * 
262       * @private  
263       */
264       constructor: function(config) {
265         // Impostazione id dinamici
266         this.id = this.getViewportId(config);
267         this.toolbarRegion = this.id + "_north_region";
268         this.westRegion = this.id + "_west_region";
269         this.extraControlsRegion = this.id + "_extra_region";
270         this.viewer1Region = this.id + "_viewer1";
271         this.viewer2Region = this.id + "_viewer2";
272         this.printMode = Ext.isDefined(config.printMode) ? config.printMode : false;
273         this.toolsRegion = this.id + "_header_tbar";
274         this.mapsSyncButtonId = this.id + "_mapsSyncButton";
275         this.toggleColumnButtonId = this.id + "_toggleColumnsButton";  // private var
276         
277         this.secondMapVisible = (config.secondMapVisible) ? config.secondMapVisible : false;
278         this.syncMaps = (config.syncMaps) ? config.syncMaps : true;
279         
280         this.baseUrlDigest = config.baseUrlDigest;
281         this.customUrl= config.customUrl;
282         this.hidePrint = config.hidePrint;
283         this.hideLinker = config.hideLinker;
284 
285         var myItems = new Array();
286         var centerItem = {
287             region: "center",
288             border: false,
289             layout: 'column',
290             items: [
291               {id: this.viewer1Region,
292                 columnWidth: (this.secondMapVisible) ? 0.5 : 1,
293                 height: 300},
294               {id: this.viewer2Region,
295                 columnWidth: (this.secondMapVisible) ? 0.5 : 0,
296                 height: 300}
297             ]
298         };
299         if (this.printMode) {
300           myItems.push({
301             xtype: "panel",
302             id: this.toolbarRegion,
303             html: '<div class="printHeader" id="printHeader"><div class="smTitle">'+
304                 '<img src="theme/app/img/sfa.png" alt="Logo SardegnaFotoAeree" />'+
305                 '</div><div class="rasLogo">' +
306                 '<img title="Regione Autonoma della Sardegna" alt="Logo Regione '+
307                 'Autonoma della Sardegna" src="theme/app/img/ras.png" /></div>',
308             height: 60,
309             border: false });
310           centerItem.x = 0;
311           centerItem.y = 60;
312           centerItem.height = 500;
313           centerItem.width = 975;
314           centerItem.cls = "mapContainer";
315           centerItem.autoHeight = false;
316           myItems.push(centerItem);
317           myItems.push({
318             x:0, y:560,
319             xtype: "panel",
320             id: 'notesPanel',
321             html: '<textarea name="note" rows="10" class="printNotes">Aggiungi qui le tue note.</textarea>',
322             border: false});
323         } else {
324           myItems.push({id: this.westRegion, region: "west", width: 0});
325           myItems.push(centerItem);
326           myItems.push({
327             xtype: "panel",
328             id: this.toolbarRegion,
329             html: '<br><br>',
330             region: 'north',
331             height: 0,
332             border: false,
333             tbar: {
334               id: this.toolsRegion,
335               cls: "tbarHeader",
336               items: [{
337                   xtype: "button",
338                   iconCls: 'smbutton',
339                   width: 160,
340                   height: 30,
341                   tooltip: 'ricarica il navigatore',
342                   handler: function() {
343                     window.open(this.customUrl, "_self");
344                   },
345                   scope: this
346                 }, '->',
347                 {
348                   xtype: "framework_togglecolumnbutton",
349                   id: this.toggleColumnButtonId,
350                   mainPanel: this.viewer1Region,
351                   secondaryPanel: this.viewer2Region,
352                   panelsContainer: this.id,
353                   iconCls: 'dmbutton',
354                   //cls: 'dmBtn',
355                   pressedCls: 'dmBtnPressed',
356                   width: 30,
357                   height: 30,
358                   pressed: (config.secondMapVisible) ? config.secondMapVisible : this.secondMapVisible
359                 },
360                 {
361                   xtype: "framework_doubleprintmap",
362                   doubleMapComponent: this,
363                   id: this.id + "_doubleprintmap",
364                   hidden: this.hidePrint,
365                   baseUrl: this.baseUrlDigest
366                 },
367                 {
368                   xtype: "framework_doublemaplinker",
369                   doubleMapComponent: this,
370                   id: this.id + "_doublemaplinker",
371                   hidden: this.hideLinker,
372                   baseUrl: this.baseUrlDigest,
373                   customUrl: this.customUrl
374                 }
375               ]
376             }
377           });
378         }
379         Ext.apply(this, {
380           items: myItems});
381 
382         
383         framework.widgets.doublemap.DoubleMap.superclass.constructor.apply(this, arguments);
384         
385         this.toolsHeader = [];
386         if (!this.printMode) {
387           this.toolsHeader[0] = {
388             ptype: "framework_infolinker",
389             html: '<div class="gx-info-panel">' +
390                 '<div class="logoras"></div>' +
391                 '<div class="logo"></div>' +
392                 '<h1>SardegnaFotoAeree</h1>' +
393                 '<h2>versione 3.0</h2>' +
394                 '<p><a href="http://www.regione.sardegna.it" target="_blank">Regione Autonoma della Sardegna</a></br /></br />'+
395                 'SardegnaFotoAeree è stato realizzato nell\'ambito del progetto SITR-EVO.<br /><br />' +
396                 'Per ulteriori informazioni visita il portale di riferimento ' +
397                 '<a href="http://www.sardegnageoportale.it" target="_blank">SardegnaGeoPortale</a><br /><br />'+
398                 '<a href="doc/manuale.pdf" target="_blank">Manuale d\'uso</a><br /><br />'+
399                 'SardegnaFotoAeree è stato sviluppato con il Framework OpenSource ' +
400                 '<a href="../sardegnamappe_api/" target="_blank">SardegnaMappe API</a>'+
401                 '</p></div>',
402             actionTarget: this.toolsRegion
403           };
404         }
405 
406         var conf1 = this.readConfig(this.mapConfig1, this.viewer1Region, this.id + '_map1');
407         var conf2 = this.readConfig(this.mapConfig2, this.viewer2Region, this.id + '_map2');
408         
409         this.app1 = new framework.RASViewer(conf1);        
410         this.app2 = new framework.RASViewer(conf2);
411         this.setSize(1300, 800);
412 
413         if (!this.printMode) {
414           var extraControlsPanel = new Ext.Container({
415             id: this.extraControlsRegion,
416             renderTo: Ext.getBody(),
417             items: [{
418                 xtype: 'framework_togglemapssyncbutton',
419                 id: this.mapsSyncButtonId,
420                 map1: this.app1.mapPanel.map,
421                 map2: this.app2.mapPanel.map,
422                 pressedCls: 'syncBtnPressed',
423                 border: false,
424                 pressed: this.syncMaps,
425                 focusCls: '',
426                 baseCls: '',
427                 cls: 'syncBtn',
428                 hidden: !this.secondMapVisible
429               }]
430           });
431         }
432         
433       },
434       /**
435 	  * Method: readConfig
436 	  * 
437       * @private 
438       * @param {Object} config 
439       * @param {Integer} positionId 
440       * @param {Integer} mapId 
441       */
442       readConfig: function(config, positionId, mapId) {
443           if (this.printMode) {
444             var appItems = [];
445             var appTools = [];
446           } else {
447             var self = this;
448             var appItems =
449                 [{
450               xtype: "panel",
451               id: mapId + '_panelBaseLayerCombo',
452               cls: 'baseLayerCombo',
453               items: [
454                 {
455                   xtype: 'framework_layerscombobox',
456                   layers: config.map.layers,
457                   groupName: 'background',
458                   fieldLabel: 'Choose State',
459                   displayField: 'name',
460                   forceSelection: true,
461                   triggerAction: 'all',
462                   mode: 'local',
463                   editable: false,
464                   valueField: 'title',
465                   order: orderGroup,
466                   typeAhead: true,
467                   width:130,
468                   selectOnFocus:true,
469                   listeners: {
470                     layerSelected: function(layer) {
471                       var parent = this.findParentByType('panel');
472                       if (parent.id.match(/map2/)) {
473                         //remove photo from data that can be saved
474                         self.app2.photo = undefined;
475                       }
476                     }
477                   }
478                 }
479               ]
480             }, {
481               xtype: "gxp_scaleoverlay"
482             }, {
483               xtype: "framework_panelmapoverview",
484               layersOverview: [new OpenLayers.Layer.WMS("Regione",
485                   "http://webgis.regione.sardegna.it/geoserver/ows",
486                   {
487                     layers: 'dbu:LIMITEAMMINISTRREGIONALE',
488                     format: "image/png"
489                       //STYLES:'overview'
490                   })],
491               maxRatio: 2048,
492               minRatio: 0.125,
493               maxResolution: 2048,
494               minResolution: 2048,
495               maxExtent: [1010000, 4290000, 1990000, 4590000],
496               restrictedExtent: [1209895, 4294504, 1786972, 4580410],
497               //html: '<div id="' + mapId + '_mapoverview"/>',
498               mapControlContainerId: mapId + '_mapoverview'
499             }, {
500                     xtype: 'panel',
501                     cls: "panel_tbarmap",
502                     border: false,
503                     width: 209,
504                     tbar: {
505                       id: mapId + '_tbarmap',
506                       cls: "tbarmap",
507                       style: {
508                         marginTop: '0px',
509                         marginLeft: '0px'
510                       },
511                       items: []}
512                   }];
513 
514             var appTools = [
515               {
516                 ptype: "framework_layermanager",
517                 id: mapId + "_layerManager",
518                 groups: group_layer,
519                 shortTitle: '',
520                 outputConfig: {
521                   id: mapId + "_tree",
522                   autoScroll: true,
523                   tbar: [] // we will add buttons to "tree.bbar" later
524                 },
525                 outputTarget: this.westRegion
526               }, {
527                 ptype: "gxp_zoomtoextent",
528                 extent: [1209895, 4294504, 1786972, 4580410],
529                 actionTarget: mapId + '_tbarmap'
530               }, {
531                 ptype: "framework_zoomboxaction",
532                 showZoomBoxAction: true,
533                 toggleGroup: mapId + "_layertools",
534                 actionTarget: mapId + '_tbarmap'
535               },{
536                 ptype: "framework_measureobliquephotos",
537                 idBtn: mapId + '_MeasureObliquePhotosBtn',
538                 idBtnLenght: mapId + '_MeasureBtnLenght',
539                 idBtnArea: mapId + '_MeasureBtnArea',
540                 idBtnHeight: mapId + '_MeasureObliquePhotosBtnHeight',
541                 toggleGroup: mapId + "_layertools",
542                 controlOptions: {immediate: true},
543                 actionTarget: mapId + '_tbarmap'
544               },/* {
545                 ptype: "gxp_measure",
546                 toggleGroup: "layertools",
547                 controlOptions: {immediate: true},
548                 actionTarget: mapId + '_tbarmap'
549               },*/ {
550                 // shared FeatureManager for feature editing, grid and querying
551                 ptype: "gxp_featuremanager",
552                 id: mapId + "_featuremanager",
553                 maxFeatures: 20
554               }];
555           }
556           
557         var controls = [new OpenLayers.Control.Zoom()];
558         controls.push(new OpenLayers.Control.Navigation());
559         if (!this.printMode) {
560           controls.push(new OpenLayers.Control.Attribution());
561           controls.push(new OpenLayers.Control.MousePosition({
562               prefix: 'coordinate  -  <b>X: ',
563               separator: '  Y: ',
564               suffix: '</b>',
565               numDigits: 0,
566               emptyString: 'coordinate'
567           }));
568         }
569         config.map.controls = controls.concat(config.map.controls? config.map.controls:[]);
570         
571         config.tools = appTools.concat(this.toolsHeader).concat(config.tools ? config.tools : []);
572         
573         Ext.each(config.tools, function(el, index) {
574             if (!el.actionTarget) {
575               el.actionTarget = mapId + '_tbarmap';
576             }
577           }, this);
578 
579           this.toolsHeader = [];
580 
581         config.map.items = (this.printMode) ? [] : appItems.concat(config.map.items? config.map.items:[]);
582         config.map.id = mapId;
583         config.portalConfig = {
584           renderTo: Ext.getCmp(positionId).body,
585           height: Ext.getCmp(positionId).body.getHeight(),
586           layout: "fit",
587           style: "background-color:#ffffff;",
588           items: [mapId]
589         };
590       //  if (westRegionCollapsed) {
591             //config.portalConfig.items[1].hidden = true;
592       //  }
593         config.proxy = proxyurl;
594         config.defaultSourceType = "gxp_wmscsource";
595         var plugin = [{
596             ptype: 'gxp_loadingindicator',
597             loadingMapMessage: 'loading...'
598           }];
599         config.mapPlugins = plugin.concat(config.mapPlugins? config.mapPlugins: []);
600         return config;
601       },
602        
603       /**
604 	  * Method: checkToggleColumnButton
605       * Controllo attivare/disattivare la modalità Mappa Doppia
606 	  * 
607       * @public 
608       * @param {Boolean} onlyshow  
609       */
610       checkToggleColumnButton: function(onlyshow){
611         if (!this.secondMapVisible) {
612             Ext.getCmp(this.toggleColumnButtonId).toggle(true);
613             this.showSecondMap();
614         }
615         else if (!onlyshow) {
616             Ext.getCmp(this.toggleColumnButtonId).toggle(false);
617             this.hideSecondMap();
618         }
619             
620       },
621               
622       /**
623 	  * Method: showSecondMap
624       * Visualizza la mappa doppia
625 	  * 
626       * @private  
627       */
628       showSecondMap: function(){
629         Ext.getCmp(this.viewer1Region).columnWidth= 0.5;
630         Ext.getCmp(this.viewer1Region).setWidth(this.getWidth()/2);
631         Ext.getCmp(this.viewer2Region).columnWidth= 0.5;
632         Ext.getCmp(this.viewer2Region).setWidth(this.getWidth()/2);
633         this.doLayout();
634         
635         Ext.getCmp(this.mapsSyncButtonId).setVisible(true);
636         
637         
638         this.secondMapVisible = true;
639       },
640         
641       /**
642 	  * Method: hideSecondMap
643       * Nasconde la mappa doppia
644 	  * 
645       * @private  
646       */
647       hideSecondMap: function(){
648         Ext.getCmp(this.viewer1Region).columnWidth= 1;
649         Ext.getCmp(this.viewer1Region).setWidth(this.getWidth());
650         Ext.getCmp(this.viewer2Region).columnWidth= 0;
651         Ext.getCmp(this.viewer2Region).setWidth(0);
652         this.doLayout();
653         Ext.getCmp(this.mapsSyncButtonId).setVisible(false);
654         this.secondMapVisible = false;
655       },
656       
657       /**
658 	  * Method: isMapSyncActive
659       * Controlla se è attiva la sincronizzazione
660 	  * 
661       * @public 
662       * @return {Ext.getCmp}  
663       */
664       isMapSyncActive: function(){
665         return Ext.getCmp(this.mapsSyncButtonId).syncActive;
666       },
667       
668       /**
669 	  * Method: activeObliqueMapSync
670       * Assegna lo stato attivo alla modalità foto oblique
671 	  * 
672       * @public 
673       * 
674       */
675       activeObliqueMapSync: function() {
676             Ext.getCmp(this.mapsSyncButtonId).obliquePhotoActive = true;
677       }
678     });
679 
680   Ext.reg('framework_doublemap', framework.widgets.doublemap.DoubleMap);
681 
682 
683 
684