From 77b9a7a8d8d8b2e1474c7aceb8d05fa3a8524466 Mon Sep 17 00:00:00 2001
From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Sat, 24 Jul 2010 13:05:26 +0200
Subject: [PATCH] a button to select between modes (node per node, or the whole
 timeslot at a time) + layout

---
 planetlab/css/my_slice.css | 18 ++++++++++---
 planetlab/slices/leases.js | 52 ++++++++++++++++++++++++++++++--------
 planetlab/slices/slice.php | 25 +++++++++++++-----
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/planetlab/css/my_slice.css b/planetlab/css/my_slice.css
index 787299a..15b5dd9 100644
--- a/planetlab/css/my_slice.css
+++ b/planetlab/css/my_slice.css
@@ -7,7 +7,7 @@ div.my-slice-renewal {
     margin: 30px;
 }
 
-/* internal toggles */
+/* toggles for the nodes sections */
 div#toggle-container-my-slice-persons-current,
 div#toggle-container-my-slice-nodes-current {
     background: #f0f0f0;
@@ -18,16 +18,26 @@ div#toggle-container-my-slice-nodes-add {
     background: #f0e0e0;
 }
 
-/* the container for the scheduler area */
+/* the scheduler area */
 div#toggle-container-my-slice-nodes-reserve {
     background: #def;
 }
 
+/* where the graphics go */
 div#leases_area {
-    padding: 25px;
+  padding: 10px 25px;
 }
 
-/* don't display the scheduler data table */
+/* don't display the scheduler data table - not quite sure this works */
 table#leases_data {
     display: none;
 }
+
+/* the various controls for the scheduler */
+/* upper section, with selection mode */
+#leases_modes { padding: 10px; text-align: center; color: #333; }
+
+#leases_buttons { padding: 10px; }
+#leases_clear { position: relative; left: 30%;}
+#leases_submit { position: relative; left: 60%; }
+        
diff --git a/planetlab/slices/leases.js b/planetlab/slices/leases.js
index 8368d34..a322f56 100644
--- a/planetlab/slices/leases.js
+++ b/planetlab/slices/leases.js
@@ -138,6 +138,24 @@ function Scheduler (slicename, axisx, axisy, data) {
 	    }
 	}
     }
+
+    /* initialize mode buttons */
+    this.init_mode = function (default_mode, node_button, timeslot_button) {
+	this.node_button=node_button;
+	this.timeslot_button=timeslot_button;
+	var scheduler=this;
+	/* xxx set callbacks on buttons */
+	node_button.onclick = function () { scheduler.set_mode('node'); }
+	timeslot_button.onclick = function () { scheduler.set_mode('timeslot'); }
+	this.set_mode(default_mode);
+    }
+
+    /* expecting mode to be either 'node' or 'timeslot' */
+    this.set_mode = function (mode) {
+	this.mode=mode;
+	var active_button = (mode=='node') ? this.node_button : this.timeslot_button;
+	active_button.checked='checked';
+    }
 	
 
 } // Scheduler
@@ -158,12 +176,14 @@ var lease_methods = {
     // find out all the currently free leases that overlap this one
     click_free: function (event) {
 	var scheduler = this.scheduler;
-	for (var i=0, len=scheduler.leases.length; i<len; ++i) {
-	    scan=scheduler.leases[i];
-	    // overlap ?
-	    if (scan.from_time<=this.from_time && scan.until_time>=this.until_time) {
-		if (scan.current == "free") lease_methods.init_mine(scan,lease_methods.click_free);
-		// the other ones just remain as they are
+	if (scheduler.mode=='node') {
+	    lease_methods.init_mine(this,lease_methods.click_free);
+	} else {
+	    for (var i=0, len=scheduler.leases.length; i<len; ++i) {
+		scan=scheduler.leases[i];
+		// overlap ?
+		if (scan.from_time<=this.from_time && scan.until_time>=this.until_time) 
+		    if (scan.current == "free") lease_methods.init_mine(scan,lease_methods.click_free);
 	    }
 	}
     },
@@ -176,13 +196,21 @@ var lease_methods = {
     },
 
     click_mine: function (event) {
+	var scheduler = this.scheduler;
 	// this lease was originally free but is now marked for booking
 	// we free just this lease
-	if (this.initial=="free") 
-	    lease_methods.init_free(this, lease_methods.click_mine);
-	// this lease if ours, same for now
-	else
+	if (scheduler.mode=='node') {
 	    lease_methods.init_free(this, lease_methods.click_mine);
+	} else {
+	    for (var i=0, len=scheduler.leases.length; i<len; ++i) {
+		scan=scheduler.leases[i];
+		// overlap ?
+		if (scan.from_time<=this.from_time && scan.until_time>=this.until_time) {
+		    if (scan.current == "mine") lease_methods.init_free(scan,lease_methods.click_mine);
+		}
+		// the other ones just remain as they are
+	    }
+	}
     },
 
 
@@ -230,6 +258,10 @@ function init_scheduler () {
     var clear=$$("button#leases_clear")[0];
     clear.onclick = function () { scheduler.clear(); }
 
+    var node_button=$$("input#leases_mode_node")[0];
+    var timeslot_button=$$("input#leases_mode_timeslot")[0];
+    scheduler.init_mode ('timeslot',node_button,timeslot_button);
+
 }
 
 Event.observe(window, 'load', init_scheduler);
diff --git a/planetlab/slices/slice.php b/planetlab/slices/slice.php
index f1dbef8..778283d 100644
--- a/planetlab/slices/slice.php
+++ b/planetlab/slices/slice.php
@@ -584,14 +584,25 @@ if ($count && $privileges) {
     }
     echo "</tr>";
   }
-
   echo "</tbody></table>\n";
-  echo "<div id='leases_area'></div>";
-  echo "<div id='leases_control'>";
-  echo "<button id='leases_submit' type='button'>Submit</button>";
-  echo "<button id='leases_clear' type='button'>Clear</button>";
-  echo "</div>";
-      
+
+  // the general layout for the scheduler
+  echo <<< EOF
+<div id='leases_modes'><form>
+  <span id='leases_selection_mode'> Selection mode:
+  <input id='leases_mode_node'     type='radio' name='mode' value="node" />Node
+  <input id='leases_mode_timeslot' type='radio' name='mode' value="timeslot" checked />Timeslot
+  </span>
+</form></div>
+
+<div id='leases_area'></div>
+
+<div id='leases_buttons'>
+  <button id='leases_clear' type='submit'>Clear</button>
+  <button id='leases_submit' type='submit'>Submit</button>
+</div>
+EOF;
+
   $toggle_nodes->end();
  }
 $toggle->end();
-- 
2.45.2