portal: updated views
[myslice.git] / plugins / googlemap / googlemap.js
index 2b0b88a..8c3c095 100644 (file)
  * License: GPLv3
  */
 
-// xxx TODO -- this one could use a bit of cleaning like what was done for the first plugins
-// especially wrt using 'instance' and 'data' in such a confusing way
+/*
+ * It's a best practice to pass jQuery to an IIFE (Immediately Invoked Function
+ * Expression) that maps it to the dollar sign so it can't be overwritten by
+ * another library in the scope of its execution.
+ */
 
-(function( jQuery ){
+(function($){
 
-  var methods = {
-     init : function( options ) {
+    // routing calls
+    jQuery.fn.GoogleMap = function( method ) {
+               if ( methods[method] ) {
+                       return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+               } else if ( typeof method === 'object' || ! method ) {
+                       return methods.init.apply( this, arguments );
+               } else {
+                       jQuery.error( 'Method ' +  method + ' does not exist on jQuery.GoogleMap' );
+               }    
+    };
 
-       return this.each(function(){
-         
-         var $this = jQuery(this),
-             data = $this.data('GoogleMap'), GoogleMap = jQuery('<div />', {text : $this.attr('title')});
-         
-         // If the plugin hasn't been initialized yet
-         if ( ! data ) {
+    /***************************************************************************
+     * Public methods
+     ***************************************************************************/
+
+    var methods = {
+
+        /**
+         * @brief Plugin initialization
+         * @param options : an associative array of setting values
+         * @return : a jQuery collection of objects on which the plugin is
+         *     applied, which allows to maintain chainability of calls
+         */
+        init : function( options ) {
+
+            return this.each(function(){
          
-           /* Plugin initialization */
+                var $this = $(this);
 
-            //google.load('maps', '3', { other_params: 'sensor=false' });
-            //google.setOnLoadCallback(initialize);
+                /* An object that will hold private variables and methods */
+                var plugin = new GoogleMaps(options);
+                $this.data('Manifold', plugin);
 
-            $this.data('map', null);
-            $this.data('markerCluster', null);
-            $this.data('markers', []);
+                plugin.initialize();
 
-            var myLatlng = new google.maps.LatLng(options.latitude, options.longitude);
-            var myOptions = {
-              zoom: options.zoom,
-              center: myLatlng,
-              mapTypeId: google.maps.MapTypeId.ROADMAP
-            }
-      
-            var map = new google.maps.Map(document.getElementById("map"), myOptions);
-            $this.data('map', map);
+                /* Events */
+                $this.on('show.GoogleMaps', methods.show);
+
+                $this.set_query_handler(options.query_uuid, plugin.query_handler);
+                $this.set_record_handler(options.query_uuid, plugin.record_handler); 
+                $this.set_record_handler(options.query_all_uuid, plugin.record_handler_all); 
+
+            }); // this.each
+        }, // init
+
+        /**
+         * @brief Plugin destruction
+         * @return : a jQuery collection of objects on which the plugin is
+         *     applied, which allows to maintain chainability of calls
+         */
+        destroy : function( ) {
+
+            return this.each(function() {
+                var $this = $(this);
+                var hazelnut = $this.data('Manifold');
 
-            /* End of plugin initialization */
+                // Unbind all events using namespacing
+                $(window).unbind('Manifold');
 
-            jQuery(this).data('GoogleMap', {
-                               plugin_uuid: options.plugin_uuid,
-                               query_uuid: options.query_uuid,
-                target : $this,
-                current_resources: Array(),
-                GoogleMap : GoogleMap
+                // Remove associated data
+                hazelnut.remove();
+                $this.removeData('Manifold');
             });
 
-            /* Events */
-            $this.on('show.GoogleMaps', methods.show);
-
-
-            /* Subscribe to query updates */
-            jQuery.subscribe('/results/' + options.query_uuid + '/changed', {instance: $this}, update_map);
-            jQuery.subscribe('/update-set/' + options.query_uuid, {instance: $this}, on_resource_changed);
-            jQuery.subscribe('/query/' + options.query_uuid + '/changed', {instance: $this}, query_changed);
-            
-            //data = jQuery(this).data();
-            
-            // TODO: Change the status of a node based on the actions in GoogleMap plugin or in other plugins (e.g. DataTables)
-            // Can we publish a value in results row['sliver'] ???
-            // Today, the value is attached or undefined
-            // But can we think about a added/removed status ???
-            // This plugin would update the map based on the results published
-
-         }
-       });
-     },
-    destroy : function( ) {
-
-        return this.each(function(){
-            var $this = jQuery(this), data = $this.data('GoogleMap');
-                       jQuery(window).unbind('GoogleMap');
-                       data.GoogleMap.remove();
-                       $this.removeData('GoogleMap');
-               })
-
-    },
-/*
-    reposition : function( ) { // ... },
-    update : function( ) { // ... },
-    hide : function( ) { // ... },
-*/
-    show : function( content ) {
-        google.maps.event.trigger(map, 'resize');
-    }
-  };
+        }, // destroy
 
-    jQuery.fn.GoogleMap = function( method ) {
-               /* Method calling logic */
-               if ( methods[method] ) {
-                       return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
-               } else if ( typeof method === 'object' || ! method ) {
-                       return methods.init.apply( this, arguments );
-               } else {
-                       jQuery.error( 'Method ' +  method + ' does not exist on jQuery.GoogleMap' );
-               }    
+        show : function( ) {
+            google.maps.event.trigger(map, 'resize');
+        } // show
 
-    };
+    }; // var methods;
 
-    /* Private methods */
-        function query_changed(e,query){
-            var data = e.data.instance.data();
-            /* Compare current and advertised query to get added and removed fields */
-            previous_query=data.current_query;
-            /* Save the query as the current query */
-            data.current_query=query;
-            
-            var rows=[];
-            if(typeof(data.results)!="undefined" && data.results.length>0){
-                jQuery.each(data.results, function(i, row){
-                    jQuery.each(query.filter, function (idx, filter){
-                        if(get_value(row[filter[0]])==filter[2]){
-                            rows.push(row);
-                        }
-                    });
-                });
-                data.markerCluster=[];
-                data.markers=[];
-                var myLatlng = new google.maps.LatLng(34.397, 150.644);
-                var myOptions = {
-                    zoom: 2,
-                    center: myLatlng,
-                    mapTypeId: google.maps.MapTypeId.ROADMAP
-                }
-                map = new google.maps.Map(jQuery('#map')[0],myOptions);
-                data.map=map;
-                //map.clearMarkers();
-                update_map(e, rows);
-            }
-        }
-       function update_map(e, rows) {            
-            var data = e.data.instance.data();
-            var instance_ = e.data.instance;
-           //$plugindiv.closest('.need-spin').spin(false);
-           instance_.closest('.need-spin').spin(false);
+    /***************************************************************************
+     * Plugin object
+     ***************************************************************************/
 
+    function GoogleMaps(options) 
+    {
+        /* member variables */
+        this.options = options;
 
-            if (rows === undefined || !rows || rows.length==0) {
-               messages.warning ("Empty result in googlemap.update_map - nothing to show");
-                return;
-            }
+        // query status
+        this.received_all = false;
+        this.received_set = false;
+        this.in_set_buffer = Array();
+
+        var object = this;
+
+        /**
+         */
+        this.initialize = function() {
+            this.map = null;
+            this.markerCluster = null;
+            this.markers = [];
+            this.coords = new Array();
 
-            if(rows.length==0) {
-                rows=data.results;
+            var myLatlng = new google.maps.LatLng(options.latitude, options.longitude);
+            var myOptions = {
+                zoom: options.zoom,
+                center: myLatlng,
+                mapTypeId: google.maps.MapTypeId.ROADMAP
             }
+      
+            this.map = new google.maps.Map(document.getElementById("map"), myOptions);
+            this.infowindow = new google.maps.InfoWindow();
+        }
 
-            if(typeof(data.results)=="undefined" || data.results==null){
-                data.results=rows;
+        /**
+         */
+        this.new_record = function(record)
+        {
+
+            // get the coordinates
+            var latitude=get_value(record['latitude']);
+            var longitude=get_value(record['longitude']);
+            var hash = latitude + longitude;
+
+            // check to see if we've seen this hash before
+            if(this.coords[hash] == null) {
+                // get coordinate object
+                var myLatlng = new google.maps.LatLng(latitude, longitude);
+                // store an indicator that we've seen this point before
+                this.coords[hash] = 1;
+            } else {
+                // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters
+                var lat = latitude + (Math.random() -.5) / 1500; 
+                var lng = longitude + (Math.random() -.5) / 1500; 
+
+                // get the coordinate object
+                var myLatlng = new google.maps.LatLng(lat, lng);
+            }
+            // If the node is attached to the slice, action will be Remove; else action will be add to slice
+            if (typeof(record['sliver']) != 'undefined') {
+                data.current_resources.push(record['urn']);
+                action="del";
+                action_class="ui-icon-circle-minus";
+                action_message="Remove from slice";
+            }else{
+                action="add";
+                action_class="ui-icon-circle-plus";
+                action_message="Add to slice";
+            }
+            // XXX not working
+            if (!(record['latitude'])) {
+                return true;
             }
-            var map = data.map;
-            var markerCluster = data.markerCluster;            
-            var markers = data.markers;
-            var coords = new Array();
-            var infowindow = new google.maps.InfoWindow();
-            /*
-            if(typeof(markers)!="undefined" && markers.length>0){
-                map.clearMarkers();
-            }*/
-
-            data.current_resources = Array();
-
-            jQuery.each(data.results, function(i, result){
-                // get the coordinates
-                var latitude=get_value(result['latitude']);
-                var longitude=get_value(result['longitude']);
-                var hash = latitude + longitude;
-
-                // check to see if we've seen this hash before
-                if(coords[hash] == null) {
-                    // get coordinate object
-                    var myLatlng = new google.maps.LatLng(latitude, longitude);
-                    // store an indicator that we've seen this point before
-                    coords[hash] = 1;
-                } else {
-                    // add some randomness to this point 1500 = 100 meters, 15000 = 10 meters
-                    var lat = latitude + (Math.random() -.5) / 1500; 
-                    var lng = longitude + (Math.random() -.5) / 1500; 
-
-                    // get the coordinate object
-                    var myLatlng = new google.maps.LatLng(lat, lng);
-                }
-                // If the node is attached to the slice, action will be Remove; else action will be add to slice
-                if (typeof(result['sliver']) != 'undefined') {
-                    data.current_resources.push(result['urn']);
-                    action="del";
-                    action_class="ui-icon-circle-minus";
-                    action_message="Remove from slice";
-                }else{
-                    action="add";
-                    action_class="ui-icon-circle-plus";
-                    action_message="Add to slice";
-                }
-                // XXX not working
-                if (!(result['latitude'])) {
-                    return true;
-                }
 
-                //jQuery(".map-button").click(button_click);
-                if(jQuery.inArray(result,rows)>-1){
-                    var marker = new google.maps.Marker({
-                        position: myLatlng,
-                        title: get_value(result['ip']),
-                        // This should be done by the rendering
-                        content: '<p>Agent: ' + get_value(result['ip']) + ' (' + get_value(result['urn']) + ')<br/>Platform: ' + get_value(result['platform'])+'</p>' +
-                                '<div class="map-button" id="'+action+'/'+get_value(result['urn'])+'" style="cursor:pointer;">'+
-                                '<span class="ui-icon '+action_class+'" style="clear:both;float:left;"></span>'+action_message+
-                                '</div>'
-                    }); 
-
-                    google.maps.event.addListener(marker, 'click', function() {
-                            infowindow.content = this.content;
-                            infowindow.open(map, this);
-                            // onload of the infowindow on the map, bind a click on a button
-                            google.maps.event.addListener(infowindow, 'domready', function() {
-                                jQuery('.map-button').unbind('click');
-                                jQuery(".map-button").click({instance: instance_}, button_click);
-                            });
-                    });
-                    markers.push(marker);
+            //jQuery(".map-button").click(button_click);
+            //if(jQuery.inArray(record, rows)>-1){
+                var marker = new google.maps.Marker({
+                    position: myLatlng,
+                    title: get_value(record['hostname']),
+                    // This should be done by the rendering
+                    content: '<p>Agent: ' + get_value(record['ip']) + ' (' + get_value(record['resource_hrn']) + ')<br/>Platform: ' + get_value(record['platform'])+'</p>' +
+                            '<div class="map-button" id="'+action+'/'+get_value(record['resource_hrn'])+'" style="cursor:pointer;">'+
+                            '<span class="ui-icon '+action_class+'" style="clear:both;float:left;"></span>'+action_message+
+                            '</div>'
+                }); 
+
+                this.addInfoWindow(marker, object.map);
+                object.markers.push(marker);
+            //}
+
+        };
+
+        this.addInfoWindow = function(marker, map) {
+            google.maps.event.addListener(marker, 'click', function () {     
+                if(object.infowindow){
+                    object.infowindow.close();
                 }
+                object.infowindow.setContent(marker.content);// = new google.maps.InfoWindow({ content: marker.content });
+                object.infowindow.open(map, marker);
+                // onload of the infowindow on the map, bind a click on a button
+                google.maps.event.addListener(object.infowindow, 'domready', function() {
+                    jQuery('.map-button').unbind('click');
+//                    jQuery(".map-button").click({instance: instance_, infoWindow: object.infowindow}, button_click);                     
+                });
             });
-            markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});
-            google.maps.event.addListener(markerCluster, "clusterclick", function (cluster) {
-                var markers = cluster.getMarkers();
-                var bounds  = new google.maps.LatLngBounds();
-              /* 
-              * date: 24/05/2012
-              * author: lbaron
-              * Firefox JS Error - replaced $.each by JQuery.each
-              */                  
-                jQuery.each(markers, function(i, marker){
-                    bounds.extend(marker.getPosition()); 
+        }
+
+
+        this.set_checkbox = function(record)
+        {
+            // XXX urn should be replaced by the key
+            // XXX we should enforce that both queries have the same key !!
+            //checkbox_id = "#hazelnut-checkbox-" + object.options.plugin_uuid + "-" + unfold.escape_id(record[ELEMENT_KEY].replace(/\\/g, ''))
+            //$(checkbox_id, object.table.fnGetNodes()).attr('checked', true);
+        }
+
+        this.record_handler = function(e, event_type, record)
+        {
+            // elements in set
+            switch(event_type) {
+                case NEW_RECORD:
+                    /* NOTE in fact we are doing a join here */
+                    if (object.received_all)
+                        // update checkbox for record
+                        object.set_checkbox(record);
+                    else
+                        // store for later update of checkboxes
+                        object.in_set_buffer.push(record);
+                    break;
+                case CLEAR_RECORDS:
+                    // nothing to do here
+                    break;
+                case IN_PROGRESS:
+                    manifold.spin($(this));
+                    break;
+                case DONE:
+                    if (object.received_all)
+                        manifold.spin($(this), false);
+                    object.received_set = true;
+                    break;
+            }
+        };
+
+        this.record_handler_all = function(e, event_type, record)
+        {
+            // all elements
+            switch(event_type) {
+                case NEW_RECORD:
+                    // Add the record to the table
+                    object.new_record(record);
+                    break;
+                case CLEAR_RECORDS:
+                    // object.table.fnClearTable();
+                    break;
+                case IN_PROGRESS:
+                    manifold.spin($(this));
+                    break;
+                case DONE:
+
+                    // MarkerClusterer
+                    object.markerCluster = new MarkerClusterer(object.map, object.markers, {zoomOnClick: false});
+                    google.maps.event.addListener(object.markerCluster, "clusterclick", function (cluster) {
+                        var markers = cluster.getMarkers();
+                        var bounds  = new google.maps.LatLngBounds();
+                      /* 
+                      * date: 24/05/2012
+                      * author: lbaron
+                      * Firefox JS Error - replaced $.each by JQuery.each
+                      */                  
+                      jQuery.each(markers, function(i, marker){
+                          bounds.extend(marker.getPosition()); 
+                      });
+
+                      //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
+                      object.map.fitBounds(bounds);
                     });
-                //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
-                map.fitBounds(bounds);
-            });
-            data.markerCluster=markerCluster;
+
+                    if (object.received_set) {
+                        /* XXX needed ? XXX We uncheck all checkboxes ... */
+                        $("[id^='datatables-checkbox-" + object.options.plugin_uuid +"']").attr('checked', false);
+
+                        /* ... and check the ones specified in the resource list */
+                        $.each(object.in_set_buffer, function(i, record) {
+                            object.set_checkbox(record);
+                        });
+
+                        manifold.spin($(this), false);
+                    }
+                    object.received_all = true;
+                    break;
+            }
+        };
+
+
+        this.query_handler = function(e, event_type, query)
+        {
+            // This replaces the complex set_query function
+            // The plugin does not need to remember the query anymore
+            switch(event_type) {
+                // Filters
+                case FILTER_ADDED:
+                case FILTER_REMOVED:
+                case CLEAR_FILTERS:
+                    // XXX Here we might need to maintain the list of filters !
+                    /* Process updates in filters / current_query must be updated before this call for filtering ! */
+                    object.table.fnDraw();
+                    break;
+
+                // Fields
+                /* Hide/unhide columns to match added/removed fields */
+                case FIELD_ADDED:
+                    var object = this;
+                    $.each(added_fields, function (index, field) {            
+                        var index = object.getColIndex(field,cols);
+                        if(index != -1)
+                            object.table.fnSetColumnVis(index, true);
+                    });
+                    break;
+                case FIELD_REMOVED:
+                    var object = this;
+                    $.each(removed_fields, function (index, field) {
+                        var index = object.getColIndex(field,cols);
+                        if(index != -1)
+                            object.table.fnSetColumnVis(index, false);
+                    });            
+                    break;
+                case CLEAR_FIELDS:
+                    alert('GoogleMaps::clear_fields() not implemented');
+                    break;
+            } // switch
+
+
         }
+
         function button_click(e){
-            var data = e.data.instance.data().GoogleMap;
             var op_value=this.id.split("/");
             if(op_value.length>0){
-                jQuery.publish('selected', op_value[0]+'/'+op_value[1]);
                 var value = op_value[1];
-
-                if (op_value[0] == 'add') {
-                    data.current_resources.push(value);
-                } else {
-                    tmp = jQuery.grep(data.current_resources, function(x) { return x != value; });
-                    data.current_resources = tmp;
-                }
-
-                /* inform slice that our selected resources have changed */
-                jQuery.publish('/update-set/' + data.query_uuid, [data.current_resources, true, e.data.instance]);
+                manifold.raise_event(object.options.query_uuid, (op_value[0] == 'add')?SET_ADD:SET_REMOVED, value);
             }
-        }
-
-    function on_resource_changed(e, resources, instance)
-    {
-        /* TODO OPENLAB : this query determines which checkboxes must be checked */
-        if (instance == e.data.instance)
-            return;
-        data = e.data.instance.data().GoogleMap;
-
-        previous_resources = data.current_resources;
-        data.current_resources = resources;
-
-        /* TODO We uncheck all checkboxes ... */
-        //jQuery('datatables-checkbox-' + data.options.plugin_uuid).attr('checked', false);
-        /* ... and check the ones specified in the resource list */
-        //jQuery.each(data.current_resources, function(index, urn) {
-        //    jQuery('#datatables-checkbox-' + data.options.plugin_uuid + "-" + urn).attr('checked', true)
-        //});
-        
-    }
+        } // function button_click()
+    } 
+
+    // clear and replace
+//                jQuery.each(data.results, function(i, row){
+//                    jQuery.each(query.filter, function (idx, filter){
+//                        if(get_value(row[filter[0]])==filter[2]){
+//                            rows.push(row);
+//                        }
+//                    });
+//                });
+//                data.markerCluster=[];
+//                data.markers=[];
+//                var myLatlng = new google.maps.LatLng(34.397, 150.644);
+//                var myOptions = {
+//                    zoom: 2,
+//                    center: myLatlng,
+//                    mapTypeId: google.maps.MapTypeId.ROADMAP
+//                }
+//                map = new google.maps.Map(jQuery('#map')[0],myOptions);
+//                data.map=map;
+//                //map.clearMarkers();
+//                update_map(e, rows);
+//            }
+//        }
 
 })( jQuery );