[permissionmanager] removed openRoleEdior function;

changed searchFieldFunction() to use jQuery; fixed checkboxes in
roleeditor not selecting on a click on the label; added selected row
highlighting; disabled buttons if there are no users/roles selected;
made role badges in user/location tables clickable; added phpdoc
comments to most php functions;

6 files changed, 92 insertions, 56 deletions

diff --git a/modules-available/permissionmanager/templates/locationstable.html b/modules-available/permissionmanager/templates/locationstable.html
index dcfefa94..b910e3f3 100644
--- a/modules-available/permissionmanager/templates/locationstable.html
+++ b/modules-available/permissionmanager/templates/locationstable.html
@@ -26,7 +26,7 @@
 					<td>{{locationpad}} {{locationname}}</td>
 					<td>
 						{{#roles}}
-						<span class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</span>
+						<a href="?do=permissionmanager&show=roleEditor&cancel=locations&roleid={{roleid}}" class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</a>
 						{{/roles}}
 					</td>
 				</tr>
diff --git a/modules-available/permissionmanager/templates/roleeditor.html b/modules-available/permissionmanager/templates/roleeditor.html
index b07e2112..ddf6ace9 100644
--- a/modules-available/permissionmanager/templates/roleeditor.html
+++ b/modules-available/permissionmanager/templates/roleeditor.html
@@ -10,11 +10,11 @@
 				<li role="presentation" class="active"><a href="#permissions" role="tab" data-toggle="tab">{{lang_Permissions}}</a></li>
 				<li role="presentation"><a href="#locations" role="tab" data-toggle="tab">{{lang_Locations}}</a></li>
 				<li style="float: none; display: inline-block">
-					<b>{{lang_Name}}:</b>
-					<input name="rolename" value="{{rolename}}" type="text" id="rolename" class="form-control">
+					<label for="rolename">{{lang_Name}}:</label>
+					<input id="rolename" name="rolename" value="{{rolename}}" type="text" class="form-control">
 				</li>
 				<li style="float: right;">
-					<button type="button" id="cancelButton" class="btn btn-default">{{lang_Cancel}}</button>
+					<span><a href="?do=permissionmanager&show={{cancelShow}}" id="cancelButton" class="btn btn-default">{{lang_Cancel}}</a></span>
 					<button type="submit" id="saveButton" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_Save}}</button>
 				</li>
 			</ul>
@@ -56,15 +56,12 @@
 				}
 			}
 		});
-		
-		$("#cancelButton").click(function () {
-			window.location.replace("?do=permissionmanager&show=roles");
-		});
 
 		$('form').submit(function () {
-			var name = $.trim($('#rolename').val());
-			if (name  === '') {
-				$("#rolename").addClass("missingInput");
+			var input = $("#rolename");
+			var name = $.trim(input.val());
+			if (!name) {
+				input.addClass("missingInput");
 				return false;
 			}
 		});
diff --git a/modules-available/permissionmanager/templates/rolestable.html b/modules-available/permissionmanager/templates/rolestable.html
index 992feca1..7152a1dd 100644
--- a/modules-available/permissionmanager/templates/rolestable.html
+++ b/modules-available/permissionmanager/templates/rolestable.html
@@ -8,13 +8,13 @@
 			<input type="text" class="form-control" id="roleNameSearchField" onkeyup="searchFieldFunction()" placeholder="{{lang_searchPlaceholder}}">
 		</div>
 		<div class="col-md-4 text-right">
-			<button class="btn btn-success" type="button" onclick="openRoleEditor()"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</button>
+			<a href="?do=permissionmanager&show=roleEditor" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</a>
 		</div>
 	</div>
 
 	<div class="row">
 		<div class="col-md-12">
-			<table id="rolesTable" class="table table-condensed table-hover stupidtable">
+			<table class="table table-condensed table-hover stupidtable">
 				<thead>
 					<tr>
 						<th data-sort="string">{{lang_Roles}}</th>
@@ -25,10 +25,10 @@
 
 				<tbody>
 				{{#roles}}
-					<tr class="rolesRow">
-						<td class="rolesData">{{rolename}}</td>
+					<tr>
+						<td class="rolename">{{rolename}}</td>
 						<td class="text-center">
-							<a class="btn btn-xs btn-info" href="?do=permissionmanager&show=roleEditor&roleid={{roleid}}"><span class="glyphicon glyphicon-edit"></span></a>
+							<a class="btn btn-xs btn-primary" href="?do=permissionmanager&show=roleEditor&roleid={{roleid}}"><span class="glyphicon glyphicon-edit"></span></a>
 						</td>
 						<td class="text-center">
 							<a class="btn btn-xs btn-danger" href="#deleteModal" data-toggle="modal" data-target="#deleteModal" onclick="deleteRole('{{roleid}}')"><span class="glyphicon glyphicon-trash"></span></a>
@@ -64,30 +64,18 @@
 </form>
 
 <script>
-	function openRoleEditor() {
-		window.location.href = "?do=permissionmanager&show=roleEditor"
-	}
-
 	function deleteRole($roleid) {
 		$(".modal-footer #deleteId").val($roleid);
 	}
 
 	function searchFieldFunction() {
-		// Declare variables
-		var input, filter, table, trs, a, i;
-		input = document.getElementById('roleNameSearchField');
-		filter = input.value.toUpperCase();
-		table = document.getElementById("rolesTable");
-		trs = table.getElementsByClassName('rolesRow');
-
-		// Loop through all list items, and hide those who don't match the search query
-		for (i = 0; i < trs.length; i++) {
-			a = trs[i].getElementsByClassName("rolesData")[0];
-			if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
-				trs[i].style.display = "";
+		var filter = $("#roleNameSearchField").val().toLowerCase();
+		$(".rolename").each(function() {
+			if ($(this).text().toLowerCase().indexOf(filter) >= 0) {
+				$(this).closest("tr").show();
 			} else {
-				trs[i].style.display = "none";
+				$(this).closest("tr").hide();
 			}
-		}
+		});
 	}
 </script>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/treenode.html b/modules-available/permissionmanager/templates/treenode.html
index 336ca13e..ced973ca 100644
--- a/modules-available/permissionmanager/templates/treenode.html
+++ b/modules-available/permissionmanager/templates/treenode.html
@@ -1,8 +1,8 @@
 {{#toplevel}}<ul>{{/toplevel}}
 	<li title="{{description}}" data-toggle="tooltip" data-placement="left">
 		<div class='checkbox'>
-			<input name='{{checkboxname}}[]' value='{{id}}' type='checkbox' class='form-control' {{#selected}}checked{{/selected}}>
-			<label>{{#toplevel}}<b>{{/toplevel}}{{name}}{{#toplevel}}</b>{{/toplevel}}</label>
+			<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" class="form-control" {{#selected}}checked{{/selected}}>
+			<label for="{{id}}">{{#toplevel}}<b>{{/toplevel}}{{name}}{{#toplevel}}</b>{{/toplevel}}</label>
 		</div>
 		<ul>
 			{{{HTML}}}
diff --git a/modules-available/permissionmanager/templates/treepanel.html b/modules-available/permissionmanager/templates/treepanel.html
index 53e316c9..6f358825 100644
--- a/modules-available/permissionmanager/templates/treepanel.html
+++ b/modules-available/permissionmanager/templates/treepanel.html
@@ -1,11 +1,11 @@
-<div class='panel panel-primary tree-panel'>
-	<div class='panel-heading'>
-		<div class='checkbox'>
-			<input name='{{checkboxname}}[]' value='{{id}}' type='checkbox' class='form-control' {{#selected}}checked{{/selected}}>
-			<label>{{name}}</label>
+<div class="panel panel-primary tree-panel">
+	<div class="panel-heading">
+		<div class="checkbox">
+			<input id="{{id}}" name="{{checkboxname}}[]" value="{{id}}" type="checkbox" class="form-control" {{#selected}}checked{{/selected}}>
+			<label for="{{id}}">{{name}}</label>
 		</div>
 	</div>
-	<div class='panel-body'>
+	<div class="panel-body">
 		<div class="tree-container" style="padding-left: 20px; padding-right: 20px;">
 			{{{HTML}}}
 		</div>
diff --git a/modules-available/permissionmanager/templates/userstable.html b/modules-available/permissionmanager/templates/userstable.html
index 9f684e99..749ae03d 100644
--- a/modules-available/permissionmanager/templates/userstable.html
+++ b/modules-available/permissionmanager/templates/userstable.html
@@ -13,8 +13,8 @@
 			</select>
 		</div>
 		<div class="col-md-4 text-right">
-			<button class="btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal"><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
-			<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal"><span class="glyphicon glyphicon-trash"></span> {{lang_removeRole}}</button>
+			<button class="roleButtons btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal" disabled><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
+			<button class="roleButtons btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
 		</div>
 	</div>
 
@@ -35,7 +35,7 @@
 						<td>{{username}}</td>
 						<td>
 							{{#roles}}
-							<span class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</span>
+							<a href="?do=permissionmanager&show=roleEditor&cancel=users&roleid={{roleid}}" class="label label-default customSpanMargin roleid-{{roleid}}">{{rolename}}</a>
 							{{/roles}}
 						</td>
 						<td data-sort-value="0">
@@ -89,7 +89,7 @@
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" name="action" value="addRoleToUser" class="btn btn-success"  onclick="clearRemoveRoleModal()"><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
+					<button id="confirmAddButton" type="submit" name="action" value="addRoleToUser" class="btn btn-success"  onclick="clearRemoveRoleModal()" disabled><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
 				</div>
 			</div>
 		</div>
@@ -100,7 +100,7 @@
 			<div class="modal-content">
 				<div class="modal-header">
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-					<h4 class="modal-title" id="myModalLabel2">{{lang_Remove}}</h4>
+					<h4 class="modal-title" id="myModalLabel2">{{lang_removeRole}}</h4>
 				</div>
 				<div class="modal-body">
 					<div class="row">
@@ -132,7 +132,7 @@
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
-					<button type="submit" name="action" value="removeRoleFromUser" class="btn btn-danger" onclick="clearAddRoleModal()"><span class="glyphicon glyphicon-trash"></span> {{lang_Remove}}</button>
+					<button id="confirmRemoveButton" type="submit" name="action" value="removeRoleFromUser" class="btn btn-danger" onclick="clearAddRoleModal()" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
 				</div>
 			</div>
 		</div>
@@ -140,34 +140,85 @@
 </form>
 
 <script>
+	selectedUsersCounter = 0;
+	selectedAddRolesCounter = 0;
+	selectedRemoveRolesCounter = 0;
+
 	document.addEventListener("DOMContentLoaded", function() {
-		// if checked,: mark green, else: unmark
-		$('input:checkbox').change(function() {
+		var checkboxes = $("input[type=checkbox]");
+		checkboxes.prop("checked", false);
+		$(".roleButtons, #confirmAddButton, #confirmRemoveButton").prop("disabled", true);
+
+		checkboxes.change(function() {
 			if ($(this).is(':checked')) {
+				var color = "#eeeeff";
+				if ($(this).closest("table").is("#addRoleToUserTable")) {
+					color = "#eeffee";
+				} else if ($(this).closest("table").is("#removeRoleFromUserTable")) {
+					color = "#ffeeee";
+				}
 				$(this).closest("td").data("sort-value", 1);
-				$(this).closest("tr").css("background-color", "#f2ffe6");
+				$(this).closest("tr").css("background-color", color);
 			} else {
 				$(this).closest("td").data("sort-value", 0);
 				$(this).closest("tr").css("background-color", "");
 			}
+		});
 
+		$("#usersTable").find("input[type=checkbox]").change(function() {
+			if ($(this).is(':checked')) {
+				selectedUsersCounter++;
+				if (selectedUsersCounter === 1) {
+					$(".roleButtons").prop("disabled", false);
+				}
+			} else {
+				selectedUsersCounter--;
+				if (selectedUsersCounter === 0) {
+					$(".roleButtons").prop("disabled", true);
+				}
+			}
 		});
-	});
 
+		$("#addRoleToUserTable").find("input[type=checkbox]").change(function() {
+			if ($(this).is(':checked')) {
+				selectedAddRolesCounter++;
+				if (selectedAddRolesCounter === 1) {
+					$("#confirmAddButton").prop("disabled", false);
+				}
+			} else {
+				selectedAddRolesCounter--;
+				if (selectedAddRolesCounter === 0) {
+					$("#confirmAddButton").prop("disabled", true);
+				}
+			}
+		});
+
+		$("#removeRoleFromUserTable").find("input[type=checkbox]").change(function() {
+			if ($(this).is(':checked')) {
+				selectedRemoveRolesCounter++;
+				if (selectedRemoveRolesCounter === 1) {
+					$("#confirmRemoveButton").prop("disabled", false);
+				}
+			} else {
+				selectedRemoveRolesCounter--;
+				if (selectedRemoveRolesCounter === 0) {
+					$("#confirmRemoveButton").prop("disabled", true);
+				}
+			}
+		});
+	});
 
 	// if remove-Role button is clicked, uncheck all checkboxes in add-role modal so they aren't submitted too
 	function clearAddRoleModal () {
 		$('#addRoleToUserModal')
 			.find("input[type=checkbox]")
-			.prop("checked", "")
-			.end();
+			.prop("checked", false);
 	}
 
 	// if add-Role button is clicked, uncheck all checkboxes in remove-role modal so they aren't submitted too
 	function clearRemoveRoleModal() {
 		$('#removeRoleFromUserModal')
 			.find("input[type=checkbox]")
-			.prop("checked", "")
-			.end();
+			.prop("checked", false);
 	}
 </script>
\ No newline at end of file