Working on Save node selections in browser storage #117

- node selections in the "MakeReservationDialog" can now be saved on loaded using the local storage
- functionality is implemented in two button classes

Still to do:

- allow saving/loading multiple different configurations named by the user
- allow saving/loading reservation-specific configurations
- embed functionality in different contexts (e.g., flash/reset/... controls), e.g. by embedding it into the wisegui-node-table.js instead of the reservation dialog

index.html

@@ -70,6 +70,8 @@
 	<script type="text/javascript" src="js/wisegui-reservation-dialog.js"></script>
 	<script type="text/javascript" src="js/wisegui-google-maps-view.js"></script>
 	<script type="text/javascript" src="js/wisegui-nodeselection-dialog.js"></script>
+	<script type="text/javascript" src="js/wisegui-nodeselection-save-button.js"></script>
+	<script type="text/javascript" src="js/wisegui-nodeselection-load-button.js"></script>
 	<script type="text/javascript" src="js/wisegui-console-view.js"></script>
 	<script type="text/javascript" src="js/wisegui-flash-view.js"></script>
 	<script type="text/javascript" src="js/wisegui-reset-view.js"></script>
@@ -85,4 +87,4 @@
 <div id="WiseGuiContainer" class="container"></div>
 </body>
 
-</html>
+</html>

js/wisegui-node-table.js

@@ -195,6 +195,12 @@ WiseGuiNodeTable.prototype.getSelectedNodes = function () {
 	return ids;
 };
 
+WiseGuiNodeTable.prototype.setSelectedNodes = function (nodeUrnArr) {
+	this.table.setSelectedRows(function(rowData) {
+		return _.contains(nodeUrnArr, rowData.id);
+	});
+};
+
 WiseGuiNodeTable.prototype.applyFilter = function (fn) {
 	this.table.setFilterFun(fn);
 };

js/wisegui-nodeselection-load-button.js

@@ -0,0 +1,35 @@
+/**
+ * #################################################################
+ * WiseGuiNodeSelectionLoadButton
+ * #################################################################
+ */
+
+var WiseGuiNodeSelectionLoadButton = function(setSelectionCallback) {
+	var self = this;
+	this.view = $('<button class="btn">Load Selection</button>');
+	this.view.bind('click', this, function(e) {
+		if (!self.view.attr('disabled')) {
+			var selections = JSON.parse(window.localStorage.getItem("wisegui.nodeselections")) || {};
+			setSelectionCallback(selections);
+		}
+	});
+
+	this.enable = function(enable) {
+		if (enable) {
+			self.view.removeAttr('disabled');
+		} else {
+			self.view.attr('disabled', 'disabled');
+		}
+	};
+
+	this.updateEnabledState = function() {
+		var savedSelection = window.localStorage.getItem("wisegui.nodeselections");
+		this.enable(savedSelection != null && savedSelection !== undefined);
+	};
+
+	$(window).bind('wisegui-nodeselection-storage-changed', function (e) {
+		self.updateEnabledState();
+	});
+
+	this.updateEnabledState();
+};

js/wisegui-nodeselection-save-button.js

@@ -0,0 +1,14 @@
+/**
+ * #################################################################
+ * WiseGuiNodeSelectionSaveButton
+ * #################################################################
+ */
+
+var WiseGuiNodeSelectionSaveButton = function(getSelectionCallback) {
+	this.view = $('<button class="btn">Save Selection</button>');
+	this.view.bind('click', this, function(e) {
+		var selection = getSelectionCallback();
+		window.localStorage.setItem("wisegui.nodeselections", JSON.stringify(selection));
+		$(window).trigger('wisegui-nodeselection-storage-changed');
+	});
+};

js/wisegui-reservation-dialog.js

@@ -349,7 +349,15 @@ WiseGuiReservationDialog.prototype.buildView = function() {
 		e.data.hide();
 	});
 
+	var nodeSelectionSaveButton = new WiseGuiNodeSelectionSaveButton(function() {
+		return that.table.getSelectedNodes();
+	});
+
+	var nodeSelectionLoadButton = new WiseGuiNodeSelectionLoadButton(function(selection) {
+		that.table.setSelectedNodes(selection);
+	})
+
 	var dialogFooter = $('<div class="modal-footer"/>');
-	dialogFooter.append(okButton, cancelButton);
+	dialogFooter.append(nodeSelectionLoadButton.view, nodeSelectionSaveButton.view, okButton, cancelButton);
 	this.view.append(dialogHeader, dialogBody, dialogFooter);
 };

js/wisegui-table.js

@@ -324,6 +324,23 @@ WiseGuiTable.prototype.getSelectedRows = function () {
 	return selected;
 };
 
+WiseGuiTable.prototype.setSelectedRows = function (selectionCallback) {
+
+	var that = this;
+
+	if(this.data != null && this.table != null) {
+		this.table.find("input").each(function() {
+			var checkbox = $(this);
+			var name = $(this).attr('name');
+			// Ignore the checkbox from the header, which doesn't have any name
+			if(typeof(name) != "undefined") {
+				var index = parseInt(name);
+				checkbox.prop('checked', selectionCallback(that.data[index].data));
+			}
+		});
+	}
+};
+
 WiseGuiTable.prototype.setFilterFun = function (fn) {
 
 	this.preFilterFun = fn;