From 8e47d1e76551223a1997d9383ac0bb987e04dfad Mon Sep 17 00:00:00 2001
From: =?utf8?q?Jordan=20Aug=C3=A9?= <jordan.auge@lip6.fr>
Date: Wed, 27 Nov 2013 09:32:35 +0100
Subject: [PATCH] (wip)

---
 plugins/googlemap/static/js/googlemap.js  | 218 +++++++++++-----------
 plugins/scheduler/static/js/scheduler.js  |  89 +++++----
 plugins/scheduler/template/scheduler.html |   2 +-
 portal/sliceview.py                       |   7 +-
 4 files changed, 166 insertions(+), 150 deletions(-)

diff --git a/plugins/googlemap/static/js/googlemap.js b/plugins/googlemap/static/js/googlemap.js
index d3784b8a..0c511a08 100644
--- a/plugins/googlemap/static/js/googlemap.js
+++ b/plugins/googlemap/static/js/googlemap.js
@@ -27,10 +27,10 @@ googlemap_debug_detailed=false;
             this.in_set_backlog = [];
 
             // we keep a couple of global hashes
-	    // lat_lon --> { marker, <ul> }
-	    // hrn --> { <li>, <input> }
-	    this.by_lat_lon = {};
-	    this.by_hrn = {};
+            // lat_lon --> { marker, <ul> }
+            // hrn --> { <li>, <input> }
+            this.by_lat_lon = {};
+            this.by_hrn = {};
 
             /* XXX Events */
             this.elmt().on('show', this, this.on_show);
@@ -41,15 +41,15 @@ googlemap_debug_detailed=false;
             this.object = query.object;
 
             var keys = manifold.metadata.get_key(this.object);
-	    // 
+            // 
             this.key = (keys && keys.length == 1) ? keys[0] : null;
 
             //// Setup query and record handlers 
-	    // this query is the one about the slice itself 
-	    // event related to this query will trigger callbacks like on_new_record
+            // this query is the one about the slice itself 
+            // event related to this query will trigger callbacks like on_new_record
             this.listen_query(options.query_uuid);
-	    // this one is the complete list of resources
-	    // and will be bound to callbacks like on_all_new_record
+            // this one is the complete list of resources
+            // and will be bound to callbacks like on_all_new_record
             this.listen_query(options.query_all_uuid, 'all');
 
             /* GUI setup and event binding */
@@ -59,7 +59,7 @@ googlemap_debug_detailed=false;
         /* PLUGIN EVENTS */
 
         on_show: function(e) {
-	    if (googlemap_debug) messages.debug("googlemap.on_show");
+            if (googlemap_debug) messages.debug("googlemap.on_show");
             var googlemap = e.data;
             google.maps.event.trigger(googlemap.map, 'resize');
         }, // on_show
@@ -75,132 +75,132 @@ googlemap_debug_detailed=false;
             var myOptions = {
                 zoom: this.options.zoom,
                 center: center,
-		scrollwheel: false,
+                scrollwheel: false,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
             }
-	    
+            
             var domid = this.options.plugin_uuid + '--' + 'googlemap';
-	    var elmt = document.getElementById(domid);
-	    if (googlemap_debug) messages.debug("gmap.initialize_map based on  domid=" + domid + " elmt=" + elmt);
+            var elmt = document.getElementById(domid);
+            if (googlemap_debug) messages.debug("gmap.initialize_map based on  domid=" + domid + " elmt=" + elmt);
             this.map = new google.maps.Map(elmt, myOptions);
             this.infowindow = new google.maps.InfoWindow();
         }, // initialize_map
 
-	// xxx probably not the right place
+        // xxx probably not the right place
         // The function accepts both records and their key 
-	record_hrn : function (record) {
+        record_hrn : function (record) {
             var key_value;
             switch (manifold.get_type(record)) {
             case TYPE_VALUE:
-		key_value = record;
+                key_value = record;
                 break;
             case TYPE_RECORD:
-		if ( ! this.key in record ) return;
+                if ( ! this.key in record ) return;
                 key_value = record[this.key];
                 break;
             default:
                 throw "Not implemented";
                 break;
             }
-	    // XXX BACKSLASHES original code was reading like this
-	    //return this.escape_id(key_value).replace(/\\/g, '');
-	    //  however this sequence removes backslashes from hrn's and as a result
-	    // queryupdater was getting all mixed up
-	    // querytable does publish hrn's with backslashes and that seems like the thing to do
-	    return key_value;
-	},	    
-
-	// return { marker: gmap_marker, ul : <ul DOM> }
-	create_marker_struct: function (object,lat,lon) {
-	    // the DOM fragment
-	    var dom = $("<p>").addClass("geo").append(object+"(s)");
-	    var ul = $("<ul>").addClass("geo");
-	    dom.append(ul);
-	    // add a gmap marker to the mix
-	    var marker = new google.maps.Marker({
-		position: new google.maps.LatLng(lat, lon),
+            // XXX BACKSLASHES original code was reading like this
+            //return this.escape_id(key_value).replace(/\\/g, '');
+            //  however this sequence removes backslashes from hrn's and as a result
+            // queryupdater was getting all mixed up
+            // querytable does publish hrn's with backslashes and that seems like the thing to do
+            return key_value;
+        },            
+
+        // return { marker: gmap_marker, ul : <ul DOM> }
+        create_marker_struct: function (object,lat,lon) {
+            // the DOM fragment
+            var dom = $("<p>").addClass("geo").append(object+"(s)");
+            var ul = $("<ul>").addClass("geo");
+            dom.append(ul);
+            // add a gmap marker to the mix
+            var marker = new google.maps.Marker({
+                position: new google.maps.LatLng(lat, lon),
                 title: object,
-		// gmap can deal with a DOM element but not a jquery object
+                // gmap can deal with a DOM element but not a jquery object
                 content: dom.get(0),
             }); 
-	    return {marker:marker, ul:ul};
-	},
-
-	// add an entry in the marker <ul> tag for that record
-	// returns { checkbox : <input DOM> }
-	create_record_checkbox: function (record,ul,checked) {
-	    var checkbox = $("<input>", {type:'checkbox', checked:checked, class:'geo'});
-	    var hrn=this.record_hrn(record);
-	    ul.append($("<li>").addClass("geo").append(checkbox).
-		      append($("<span>").addClass("geo").append(hrn)));
-	    var googlemap=this;
-	    // the callback for when a user clicks
-	    // NOTE: this will *not* be called for changes done by program
-	    checkbox.change( function (e) {
-		if (googlemap_debug) messages.debug("googlemap click handler checked= " + this.checked + " hrn=" + hrn);
-		manifold.raise_event (googlemap.options.query_uuid, 
-				      this.checked ? SET_ADD : SET_REMOVED, hrn);
-	    });
-	    return checkbox;
-	},
-	    
-	// retrieve DOM checkbox and make sure it is checked/unchecked
+            return {marker:marker, ul:ul};
+        },
+
+        // add an entry in the marker <ul> tag for that record
+        // returns { checkbox : <input DOM> }
+        create_record_checkbox: function (record,ul,checked) {
+            var checkbox = $("<input>", {type:'checkbox', checked:checked, class:'geo'});
+            var hrn=this.record_hrn(record);
+            ul.append($("<li>").addClass("geo").append(checkbox).
+                      append($("<span>").addClass("geo").append(hrn)));
+            var googlemap=this;
+            // the callback for when a user clicks
+            // NOTE: this will *not* be called for changes done by program
+            checkbox.change( function (e) {
+                if (googlemap_debug) messages.debug("googlemap click handler checked= " + this.checked + " hrn=" + hrn);
+                manifold.raise_event (googlemap.options.query_uuid, 
+                                      this.checked ? SET_ADD : SET_REMOVED, hrn);
+            });
+            return checkbox;
+        },
+            
+        // retrieve DOM checkbox and make sure it is checked/unchecked
         set_checkbox: function(record, checked) {
-	    var hrn=this.record_hrn (record);
-	    if (! hrn) { 
-		try {messages.warning ("googlemap.set_checkbox: record has no hrn -- hostname="+record.hostname); }
-		catch (err) {messages.warning ("googlemap.set_checkbox: record has no hrn"); }
-		return; 
-	    }
-	    var checkbox_s = this.by_hrn [ hrn ];
-	    if (! checkbox_s ) { messages.warning ("googlemap.set_checkbox: could not spot checkbox for hrn "+hrn); return; }
-	    checkbox_s.checkbox.prop('checked',checked);
+            var hrn=this.record_hrn (record);
+            if (! hrn) { 
+                try {messages.warning ("googlemap.set_checkbox: record has no hrn -- hostname="+record.hostname); }
+                catch (err) {messages.warning ("googlemap.set_checkbox: record has no hrn"); }
+                return; 
+            }
+            var checkbox_s = this.by_hrn [ hrn ];
+            if (! checkbox_s ) { messages.warning ("googlemap.set_checkbox: could not spot checkbox for hrn "+hrn); return; }
+            checkbox_s.checkbox.prop('checked',checked);
         }, // set_checkbox
 
-	// this record is *in* the slice
+        // this record is *in* the slice
         new_record: function(record) {
-	        if (googlemap_debug_detailed) messages.debug ("new_record");
+                if (googlemap_debug_detailed) messages.debug ("new_record");
             if (!(record['latitude'])) return false;
-	    
+            
             // get the coordinates
             var latitude=unfold.get_value(record['latitude']);
             var longitude=unfold.get_value(record['longitude']);
             var lat_lon = latitude + longitude;
 
-    	    // check if we've seen anything at that place already
-    	    // xxx might make sense to allow for some fuzziness, 
-    	    // i.e. consider 2 places equal if not further away than 300m or so...
-    	    var marker_s = this.by_lat_lon [lat_lon];
-    	    if ( marker_s == null ) {
-        		marker_s = this.create_marker_struct (this.object, latitude, longitude);
-        		this.by_lat_lon [ lat_lon ] = marker_s;
-        		this.arm_marker(marker_s.marker, this.map);
-	        }
-	    
-    	    // now add a line for this resource in the marker
-    	    // xxx should compute checked here ?
-    	    // this is where the checkbox will be appended
-    	    var ul=marker_s.ul;
-    	    var checkbox = this.create_record_checkbox (record, ul, false);
-    	    if ( ! this.key in record ) return;
+                // check if we've seen anything at that place already
+                // xxx might make sense to allow for some fuzziness, 
+                // i.e. consider 2 places equal if not further away than 300m or so...
+                var marker_s = this.by_lat_lon [lat_lon];
+                if ( marker_s == null ) {
+                        marker_s = this.create_marker_struct (this.object, latitude, longitude);
+                        this.by_lat_lon [ lat_lon ] = marker_s;
+                        this.arm_marker(marker_s.marker, this.map);
+                }
+            
+                // now add a line for this resource in the marker
+                // xxx should compute checked here ?
+                // this is where the checkbox will be appended
+                var ul=marker_s.ul;
+                var checkbox = this.create_record_checkbox (record, ul, false);
+                if ( ! this.key in record ) return;
             var key_value = record[this.key];
-    	    // see XXX BACKSLASHES 
-    	    //var hrn = this.escape_id(key_value).replace(/\\/g, '');
-    	    var hrn = key_value;
+                // see XXX BACKSLASHES 
+                //var hrn = this.escape_id(key_value).replace(/\\/g, '');
+                var hrn = key_value;
             this.by_hrn[hrn] = {
-    		    checkbox: checkbox,
-        		// xxx Thierry sept 2013
-        		// xxx actually we might have just used a domid-based scheme instead of the hash
-        		// since at this point we only need to retrieve the checkbox from an hrn
-        		// but I was not sure enough that extra needs would not show up so I kept this in place
-        		// xxx not sure these are actually useful :
+                        checkbox: checkbox,
+                        // xxx Thierry sept 2013
+                        // xxx actually we might have just used a domid-based scheme instead of the hash
+                        // since at this point we only need to retrieve the checkbox from an hrn
+                        // but I was not sure enough that extra needs would not show up so I kept this in place
+                        // xxx not sure these are actually useful :
                 value: key_value,
                 record: record,
             }
         }, // new_record
 
         arm_marker: function(marker, map) {
-	    if (googlemap_debug_detailed) messages.debug ("arm_marker content="+marker.content);
+            if (googlemap_debug_detailed) messages.debug ("arm_marker content="+marker.content);
             var googlemap = this;
             google.maps.event.addListener(marker, 'click', function () {
                 googlemap.infowindow.close();
@@ -213,7 +213,7 @@ googlemap_debug_detailed=false;
 
         /*************************** RECORD HANDLER ***************************/
         on_new_record: function(record) {
-	    if (googlemap_debug_detailed) messages.debug("on_new_record");
+            if (googlemap_debug_detailed) messages.debug("on_new_record");
             if (this.received_all)
                 // update checkbox for record
                 this.set_checkbox(record, true);
@@ -223,25 +223,25 @@ googlemap_debug_detailed=false;
         },
 
         on_clear_records: function(record) {
-	    if (googlemap_debug_detailed) messages.debug("on_clear_records");
+            if (googlemap_debug_detailed) messages.debug("on_clear_records");
         },
 
         // Could be the default in parent
         on_query_in_progress: function() {
-	    if (googlemap_debug) messages.debug("on_query_in_progress (spinning)");
+            if (googlemap_debug) messages.debug("on_query_in_progress (spinning)");
             this.spin();
         },
 
         on_query_done: function() {
-	    if (googlemap_debug) messages.debug("on_query_done");	    
+            if (googlemap_debug) messages.debug("on_query_done");            
             if (this.received_all) {
                 this.unspin();
-	    }
+            }
             this.received_set = true;
         },
 
         on_field_state_changed: function(data) {
-	    if (googlemap_debug_detailed) messages.debug("on_field_state_changed");	    
+            if (googlemap_debug_detailed) messages.debug("on_field_state_changed");            
             switch(data.request) {
             case FIELD_REQUEST_ADD:
             case FIELD_REQUEST_ADD_RESET:
@@ -260,22 +260,22 @@ googlemap_debug_detailed=false;
         // all : this 
 
         on_all_new_record: function(record) {
-	    if (googlemap_debug_detailed) messages.debug("on_all_new_record");
+            if (googlemap_debug_detailed) messages.debug("on_all_new_record");
             this.new_record(record);
         },
 
         on_all_clear_records: function() {
-	    if (googlemap_debug) messages.debug("on_all_clear_records");	    
+            if (googlemap_debug) messages.debug("on_all_clear_records");            
         },
 
         on_all_query_in_progress: function() {
-	    if (googlemap_debug) messages.debug("on_all_query_in_progress (spinning)");
+            if (googlemap_debug) messages.debug("on_all_query_in_progress (spinning)");
             // XXX parent
             this.spin();
         },
 
         on_all_query_done: function() {
-	    if (googlemap_debug) messages.debug("on_all_query_done");
+            if (googlemap_debug) messages.debug("on_all_query_done");
 
             // MarkerClusterer
             var markers = [];
@@ -297,10 +297,10 @@ googlemap_debug_detailed=false;
                 $.each(this.in_set_backlog, function(i, record) {
                     googlemap.set_checkbox(record, true);
                 });
-		// reset 
-		googlemap.in_set_backlog = [];
+                // reset 
+                googlemap.in_set_backlog = [];
 
-		if (googlemap_debug) messages.debug("unspinning");
+                if (googlemap_debug) messages.debug("unspinning");
                 this.unspin();
             }
             this.received_all = true;
diff --git a/plugins/scheduler/static/js/scheduler.js b/plugins/scheduler/static/js/scheduler.js
index 0ffed880..3c95832d 100644
--- a/plugins/scheduler/static/js/scheduler.js
+++ b/plugins/scheduler/static/js/scheduler.js
@@ -48,7 +48,7 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
             this._super(options, element);
 
             /* Member variables */
-            this.canvas_id = this.id('leases_area');
+            this._canvas_id = this.id('leases_area');
 
             this.query_uuid = options.query_uuid;
             this.rows = null;
@@ -56,13 +56,17 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
             //this.current_resources = Array();
             //this.current_leases = Array();
 
+            /* Managing asynchronous reception of resources and leases */
+            this._tmp_resources = Array();
+            this.listLeases    = Array();
+            this._received_resources = false;
+            this._received_leases    = false;
+
             this.myLeases = Array();
             this.allLeases = Array();
 
-            this.listLeases = Array();
-
             this.axisx = Array();
-            this.axisy = Array();
+            this.resources = Array();
             this.data = Array();
             this.default_granularity = 1800; /* 30 min */
             this.initial_timestamp = null;
@@ -79,7 +83,7 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
 
             /* Listening to queries */
             this.listen_query(options.query_uuid);
-            this.listen_query(options.query_lease_uuid);
+            this.listen_query(options.query_lease_uuid, 'lease');
 
             /* XXX GUI setup and event binding */
             jQuery("#datepicker").datetimepicker({
@@ -179,44 +183,55 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
 
         /* TEMPLATES */
 
-        /* QUERY HANDLERS */
+        /*************************** RECORD HANDLER ***************************/
 
-        set_resources: function(resources) 
-        {
-            //console.log(resources);
-            var scheduler = this;
-            jQuery.each(resources, function(i, resource) {
-                // ... add reservable ones to the x axis
-                if ((typeof resource.exclusive != 'undefined') && (resource.exclusive)) {
-                    scheduler.axisy.push(Array(resource.urn, resource.resource_hrn, resource.type));
-                }
-                // ... if we do not have information about slivers (first update), update it
-                if (typeof resource.sliver != 'undefined') {
-                    // XXX
-                }
-            });
+        /* ------------------------------------------------------------------
+         * Resources
+         * ------------------------------------------------------------------ */
 
-            this.draw(this.canvas_id);
+        on_new_record: function(record)
+        {
+            if ((typeof record.exclusive != 'undefined') && (record.exclusive)) {
+                this.resources.push(Array(record.urn, record.record_hrn, record.type));
+            }
+            // ... if we do not have information about slivers (first update), update it
+            if (typeof record.sliver != 'undefined') {
+                // XXX
+            }
         },
 
-        set_leases: function(leases) 
-        {
-            this.initial_leases=leases;
-            this.draw(this.canvas_id);
+        on_query_in_progress: function() {
+            this.spin();
         },
 
-        update_resources: function(resources) 
+        on_query_done: function() {
+            /* We have received all leases */
+            if (this._received_resources) {
+                this.draw(this._canvas_id);
+                this.unspin();
+            }
+            this._received_leases = true;
+        },
+        /* ------------------------------------------------------------------
+         * Leases
+         * ------------------------------------------------------------------ */
+        
+        on_lease_new_record: function(record)
         {
-            //
+            this.listLeases.push(record);
+            // this.initial_leases=leases;
         },
 
-        update_leases: function(leases)
+        on_lease_query_done: function(record)
         {
-            //
+            /* We have received all resources */
+            if (this._received_leases) {
+                this.draw(this._canvas_id);
+                this.unspin();
+            }
+            this._received_resources = true;
         },
 
-        /* RECORD HANDLERS */
-
         /* INTERNAL FUNCTIONS */
 
         /**
@@ -256,13 +271,13 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
          */
         draw: function() 
         { 
-            var canvas_id = this.canvas_id;
+            var canvas_id = this._canvas_id;
             var o = this.options;
             var total_width = o.x_nodelabel + this.nb_grains() * this.options.leases_w;
             var total_height = 2 * o.y_header /* the timelabels */
                              + 2 * o.y_sep    /* extra space */
-                             + o.y_node	  /* all-nodes & timebuttons row */ 
-                             + (this.axisy.length)*(o.y_node+o.y_sep);  /* the regular nodes and preceding space */
+                             + o.y_node          /* all-nodes & timebuttons row */ 
+                             + (this.resources.length)*(o.y_node+o.y_sep);  /* the regular nodes and preceding space */
 
             /* reuse for paper if exists with same size, or (re-)create otherwise */
             var paper;
@@ -272,7 +287,7 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
                 paper=this.paper;
                 paper.clear();
             } else {
-                $$("#"+canvas_id)[0].innerHTML="";
+                $("#"+canvas_id)[0].innerHTML="";
                 paper = Raphael (canvas_id, total_width+o.x_sep, total_height);
             }
             this.paper=paper;
@@ -281,7 +296,7 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
             this.timebutton_path = "M1,0L"+(this.options.leases_w-1)+",0L"+(this.options.leases_w/2)+","+o.y_header+"L1,0";
 
             var axisx = this.axisx;
-            var axisy = this.axisy;
+            var axisy = this.resources;
 
             /* maintain the list of nodelabels for the 'all nodes' button */
             this.nodelabels=[];
@@ -455,7 +470,7 @@ var txt_otherslice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-s
                 var lease=this.leases[i];
                 if (lease.current != lease.initial) {
                 if (lease.initial == 'free') lease_methods.init_free(lease,lease_methods.click_mine);
-                else			     lease_methods.init_mine(lease,lease_methods.click_free);
+                else                             lease_methods.init_mine(lease,lease_methods.click_free);
                 }
             }
         },
diff --git a/plugins/scheduler/template/scheduler.html b/plugins/scheduler/template/scheduler.html
index dcf6acb2..b7b00c8f 100644
--- a/plugins/scheduler/template/scheduler.html
+++ b/plugins/scheduler/template/scheduler.html
@@ -1,4 +1,4 @@
-<div id="{{domid}}--scheduler" class='plugin scrollx scrolly'>
+<div id="{{domid}}__scheduler" class='plugin scrollx scrolly'>
 <!--
 <p>
   You have attached one or more reservable nodes to your slice.  Reservable nodes
diff --git a/portal/sliceview.py b/portal/sliceview.py
index e3e978e3..60415a4f 100644
--- a/portal/sliceview.py
+++ b/portal/sliceview.py
@@ -60,7 +60,7 @@ class SliceView (LoginRequiredAutoLogoutView):
                 'slice_hrn',
                 'resource.hrn', 'resource.hostname', 'resource.type', 
                 'resource.network_hrn',
-                #'lease.urn',
+                'lease.urn',
                 'user.user_hrn',
                 #'application.measurement_point.counter'
         )
@@ -203,9 +203,10 @@ class SliceView (LoginRequiredAutoLogoutView):
                                 togglable=True,
                                 title="Resources",
                                 outline_complete=True,
-                                sons=[ resources_as_gmap, 
-                                       resources_as_3dmap,
+                                sons=[ 
                                        resources_as_scheduler,
+                                       #resources_as_gmap, 
+                                       #resources_as_3dmap,
                                        resources_as_list_area, ],
                                 active_domid = 'resources-map',
                                 )
-- 
2.43.0