[usb-lock-off] Big rework. Moved from client side (modal) stuff to server side (new page) system. Removed the rules.conf textfield and added an UI prototype for the rules creation.

1 files changed, 95 insertions, 88 deletions

diff --git a/modules-available/usblockoff/templates/usb-device-list.html b/modules-available/usblockoff/templates/usb-device-list.html
index a7c9afed..ea321008 100644
--- a/modules-available/usblockoff/templates/usb-device-list.html
+++ b/modules-available/usblockoff/templates/usb-device-list.html
@@ -1,79 +1,86 @@
-<div>
-	<form method="post" action="?do=usblockoff" id="addDevicesForm">
-		<input type="hidden" name="token" value="{{token}}">
-		<input type="hidden" name="action" value="addDevices">
-
-		<div class="input-group" id="search">
-			<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
-			<input type="text" id="myInput" class="form-control" onkeyup="search()" placeholder="Search for .."
-					 style="font-size: 16px;"/>
-			<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
-			<select class="form-control" id="searchFor" style="font-size: 16px;" onchange="search()">
-				<option value="0" select>Name</option>
-				<option value="1">Date / Time</option>
-				<option value="2">User Information</option>
-				<option value="3">USB Information</option>
-				<option value="4">Rules Information</option>
-			</select>
-		</div>
-
-		<div style="max-height: 800px; overflow-x: auto;">
-			<table class="table table-hover" id="myTable">
-				<thead>
-				<tr>
-					<th width="1" style="text-align: center;">Name</th>
-					<th width="1" style="text-align: center;">Time</th>
-					<th width="1">User Info</th>
-					<th width="1">USB Info</th>
-					<th width="1">Rule Info</th>
-				</tr>
-				</thead>
-				{{#list}}
-				<input type="hidden" id="{{uid}}-prop-name" value="{{name}}">
-				<input type="hidden" id="{{uid}}-prop-id" value="{{id}}">
-				<input type="hidden" id="{{uid}}-prop-serial" value="{{serial}}">
-				<input type="hidden" id="{{uid}}-prop-via-port" value="{{via-port}}">
-				<input type="hidden" id="{{uid}}-prop-hash" value="{{hash}}">
-				<input type="hidden" id="{{uid}}-prop-parent-hash" value="{{parent-hash}}">
-				<input type="hidden" id="{{uid}}-prop-with-interface" value="{{with-interface}}">
-
-				<tbody onclick="clickRow(this, {{uid}});" id="{{uid}}">
-				<tr>
-					<td nowrap align="center" style="vertical-align: middle;"><label>{{name}}</label></td>
-					<td nowrap align="center" style="vertical-align: middle;">{{time}}<br>{{date}}</td>
-					<td nowrap><font size="0">User: {{user}}<br>Location: {{location}}<br>Client: {{clientip}}</font></td>
-					<td nowrap><font size="0">id: {{id}}<br>Serial: {{serial}}<br>via-port: {{via-port}}</font></td>
-					<td nowrap><font size="0">hash: {{hash}}<br>parent-hash: {{parent-hash}}<br>with-interface:
-						{{with-interface}}</font></td>
-				</tr>
-				</tbody>
-				{{/list}}
-			</table>
-		</div>
-
-		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_ruleOptions}}</div>
-			<div class="panel-body">
-				<div class="list-group">
-					<div id="settingsDIV">
-						{{#settings}}
-						{{{settingHtml}}}
-						{{/settings}}
-					</div>
+<form method="post" action="?do=usblockoff" id="addDevicesForm">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="action" value="addDevices">
+	<input type="hidden" name="rules" value="" id="rules">
+	<input type="hidden" name="configid" value="{{configid}}" id="configid">
+
+	<div class="input-group" id="search">
+		<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
+		<input type="text" id="myInput" class="form-control" onkeyup="search()" placeholder="Search for .."
+				 style="font-size: 16px;"/>
+		<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
+		<select class="form-control" id="searchFor" style="font-size: 16px;" onchange="search()">
+			<option value="0" select>Name</option>
+			<option value="1">Date / Time</option>
+			<option value="2">User Information</option>
+			<option value="3">USB Information</option>
+			<option value="4">Rules Information</option>
+		</select>
+	</div>
+
+	<div style="max-height: 800px; overflow-x: auto;">
+		<table class="table table-hover" id="myTable">
+			<thead>
+			<tr>
+				<th width="1" style="text-align: center;">Name</th>
+				<th width="1" style="text-align: center;">Time</th>
+				<th width="1">User Info</th>
+				<th width="1">USB Info</th>
+				<th width="1">Rule Info</th>
+			</tr>
+			</thead>
+			{{#list}}
+			<input type="hidden" id="{{uid}}-prop-name" value="{{name}}">
+			<input type="hidden" id="{{uid}}-prop-id" value="{{id}}">
+			<input type="hidden" id="{{uid}}-prop-serial" value="{{serial}}">
+			<input type="hidden" id="{{uid}}-prop-via-port" value="{{via-port}}">
+			<input type="hidden" id="{{uid}}-prop-hash" value="{{hash}}">
+			<input type="hidden" id="{{uid}}-prop-parent-hash" value="{{parent-hash}}">
+			<input type="hidden" id="{{uid}}-prop-with-interface" value="{{with-interface}}">
+
+			<tbody onclick="clickRow(this, {{uid}});" id="{{uid}}">
+			<tr>
+				<td nowrap align="center" style="vertical-align: middle;"><label>{{name}}</label></td>
+				<td nowrap align="center" style="vertical-align: middle;">{{time}}<br>{{date}}</td>
+				<td nowrap><font size="0">User: {{user}}<br>Location: {{location}}<br>Client: {{clientip}}</font></td>
+				<td nowrap><font size="0">id: {{id}}<br>Serial: {{serial}}<br>via-port: {{via-port}}</font></td>
+				<td nowrap><font size="0">hash: {{hash}}<br>parent-hash: {{parent-hash}}<br>with-interface:
+					{{with-interface}}</font></td>
+			</tr>
+			</tbody>
+			{{/list}}
+		</table>
+	</div>
+
+	<div class="panel panel-default">
+		<div class="panel-heading">{{lang_ruleOptions}}</div>
+		<div class="panel-body">
+			<div class="list-group">
+				<div id="settingsDIV">
+					{{#settings}}
+					{{{settingHtml}}}
+					{{/settings}}
 				</div>
 			</div>
 		</div>
+	</div>
+	<div class="pull-right">
+		<a href="?do=usblockoff&show=edit-config&configid={{configid}}" class="btn btn-default">Cancel</a>
+		<button id="addButton" class="btn btn-success" type="submit" onclick="addDevices();">
+			<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
+			<span id="addButtonText"></span>
+		</button>
+	</div>
 
-	</form>
-</div>
+</form>
 
 <script type="text/javascript">
-	$('a.btn[title]').tooltip();
-	$('.settings-bs-switch').bootstrapSwitch({size: 'small'});
-	countSelected();
 
-	// Add handler to the modal Button.
-	$('#myModalAddButton').unbind().click(addDevices);
+	document.addEventListener("DOMContentLoaded", function(event) {
+		$('a.btn[title]').tooltip();
+		$('.settings-bs-switch').bootstrapSwitch({size: 'small'});
+		countSelected();
+	});
 
 	function clickRow(tbody, uid) {
 		$(tbody).toggleClass('selected');
@@ -83,14 +90,16 @@
 	function countSelected() {
 		var numSelected = $('.selected').length;
 		if (numSelected == 0) {
-			$('#myModalAddButton').prop('disabled', true);
+			$('#addButton').prop('disabled', true);
+			//$('#addButton').addClass('disabled');
 		} else {
-			$('#myModalAddButton').prop('disabled', false);
+			$('#addButton').prop('disabled', false);
+			//$('#addButton').removeClass('disabled');
 		}
 		if (numSelected == 1) {
-			$('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_device}}');
+			$('#addButtonText').text(' ' + numSelected + ' {{lang_device}}');
 		} else {
-			$('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_devices}}');
+			$('#addButtonText').text(' ' + numSelected + ' {{lang_devices}}');
 		}
 	}
 
@@ -117,29 +126,27 @@
 	}
 
 	function addDevices() {
+		var rules = [];
 		$('.selected').each(function () {
-			var rule = $('#prop-action').val();
+			var rule = {};
+			rule['target'] = $('#prop-action').val();
+			rule['id'] = 0;
+			rule['attributes'] = [];
+
 			var selected = $(this);
 			$('#settingsDIV .settings-bs-switch').each(function () {
 				if ($(this).is(":checked")) {
-					var settingname = $(this).attr('name').substring(5);
-					var info = $('#' + $(selected).attr('id') + '-' + $(this).attr('name'));
-
-					if (settingname == 'id' || settingname == 'with-interface') {
-						rule += ' ' + settingname + ' ' + info.val();
-					} else {
-						rule += ' ' + settingname + ' "' + info.val() + '"';
-					}
+					var attr = {};
+					attr['prop'] = $(this).attr('name').substring(5);
+					attr['value'] = $('#' + $(selected).attr('id') + '-' + $(this).attr('name')).val();
+
+					rule['attributes'].push(attr);
 				}
 			});
-			if ($('#rules').val() != "") {
-				$('#rules').val($('#rules').val() + "\r\n");
-			}
-			$('#rules').val($('#rules').val() + rule);
+			rules.push(rule);
 		});
-		$('#myModal').modal('toggle');
+		$('#rules').val(JSON.stringify(rules));
 	}
-
 </script>
 
 <style type='text/css'>