[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, 78 insertions, 76 deletions

diff --git a/modules-available/usblockoff/templates/usb-rules-config.html b/modules-available/usblockoff/templates/usb-rules-config.html
index 3827dc03..712eb2ab 100644
--- a/modules-available/usblockoff/templates/usb-rules-config.html
+++ b/modules-available/usblockoff/templates/usb-rules-config.html
@@ -1,105 +1,107 @@
 <div class="panel panel-default">
-	<div class="panel-heading">rules.conf
-		<input class="settings-bs-switch" id="rules_expert_Switch" type="checkbox" name="rules_expert_Switch"
-				 data-on-text="Expert" data-off-text="Casual" data-size="small">
-	</div>
+	<div class="panel-heading">rules.conf</div>
 
 	<div class="panel-body" id="casualRules">
 		<div class="list-group">
 
-			<!-- TEST_AREA -->
-
-			<div>
-				Work in progress ...
-			</div>
-
-			<!-- /TEST_AREA -->
-
-		</div>
-	</div>
+			<input type="hidden" name="rules" value="" id="rules">
+			<table id="rulesTable" class="table table-condensed table-hover">
+				<thead>
+				<tr>
+					<th data-sort="string" width="20"><span class="glyphicon glyphicon-th-list"></span></th>
+					<th width="120">{{lang_target}}</th>
+					<th>{{lang_attributes}}</th>
+					<th>{{lang_edit}}</th>
+					<th>{{lang_delete}}</th>
+				</tr>
+				</thead>
+				<tbody id="tableBody" style="overflow: auto;">
 
-	<div class="panel-body" id="expertRules" style="display: none;">
-		<div class="list-group">
 
-			<div class="form-group">
-				<textarea class="form-control" rows="10" name="rules" id="rules">{{rules}}</textarea>
-			</div>
+				{{#rules}}
+				<tr id="{{id}}">
+					<td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;">
+						<span class="glyphicon glyphicon-th-list"></span>
+					</td>
+					<td style="vertical-align: middle; text-align: center;">{{target}}</td>
+					<td>
+						{{#attributes}}
+						{{prop}}: {{value}}<br>
+						{{/attributes}}
+						{{#hasoverload}}
+						<a class="label label-default overload" style="background-color: #337ab7;" title="{{attributes_overload}}">+{{num_overload}}</a>
+						{{/hasoverload}}
+					</td>
+					<td>
+						<a class="btn btn-xs btn-info">
+							<span class="glyphicon glyphicon-edit" onclick="alert('implement in new page');"></span>
+						</a>
+					</td>
+					<td>
+						<a class="btn btn-xs btn-danger" href="?do=usblockoff&action=deleteRule&id={{id}}&configid={{configid}}">
+							<span class="glyphicon glyphicon-trash"></span>
+						</a>
+					</td>
+				</tr>
+				{{/rules}}
 
+				</tbody>
+			</table>
 			<div class="pull-right">
-				<a class="btn btn-default" title="{{lang_howToRuleLang}}"
-					href="https://usbguard.github.io/documentation/rule-language.html"
-					style="margin-right: -1px;" target="_blank">
-					<span class="glyphicon glyphicon-question-sign"></span>
-				</a>
-				<a class="btn btn-success" onclick="loadAddGenericRuleModal();"
-					style="margin-right: 3px; float: none;">
-					<span class="glyphicon glyphicon-plus"></span>
+				<a class="btn btn-success" href="?do=usblockoff&show=add-generic-rule&configid={{configid}}"
+					style="margin-right: 3px; float: right;">
+					<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
 					<span>{{lang_genericRule}}</span>
 				</a>
-				<a class="btn btn-success" style="float: right;" onclick="loadAddDeviceModal();">
+				<a class="btn btn-success" href="?do=usblockoff&show=add-devices&configid={{configid}}"
+					style="margin-right: 3px;float: right;">
 					<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
 					<span>{{lang_devices}}</span>
 				</a>
 			</div>
-		</div></div>
-</div>
-
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header" id="myModalHeader"></div>
-			<div class="modal-body" id="myModalBody"></div>
-			<div class="modal-footer">
-				<a class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</a>
-				<button id="myModalAddButton" class="btn btn-success" type="button">
-					<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
-					<span id="myModalAddButtonText"></span>
-				</button>
-			</div>
 		</div>
+
 	</div>
 </div>
-
 <script type="text/javascript">
+	var rules = [];
+	var oldIndex = -1;
 	document.addEventListener("DOMContentLoaded", function(event) {
 		$('a.btn[title]').tooltip({placement: "auto", html: true});
 
-		var s = $('#rules_expert_Switch');
-		var mode = "casual";
-		s.bootstrapSwitch();
-		s.parent().parent().addClass('pull-right');
-		s.parent().parent().css("margin", "-5px");
+		$("#tableBody tr").each(function() {
+			rules.push(Number(this.id));
+		});
+		$('#rules').val(JSON.stringify(rules));
 
-		s.on('switchChange.bootstrapSwitch', function(event, state) {
-			if (state) {
-				// Expert mode.
-				$('#casualRules').hide();
-				$('#expertRules').show();
-				mode = "expert";
-			} else {
-				// Casual mode.
-				$('#expertRules').hide();
-				$('#casualRules').show();
-				mode = "casual";
-			}
+		$('#tableBody').sortable({
+			opacity: 0.8,
+			handle: '.drag-handler',
+			start: function(evt, ui) {
+				oldIndex = ui.item.index();
+			},
+			stop: function(evt, ui) {
+				updateTable(ui.item.index());
+			},
 		});
+
+		$('a.overload').tooltip({placement: "auto", html: true});
 	});
 
-	function loadAddDeviceModal() {
-		$('#myModalHeader').text("{{lang_device-list}}").css("font-weight", "Bold");
-		$('#myModalAddButton').attr("form", "addDevicesForm");
-		$('#myModal .modal-dialog').css('width', '60%');
-		$('#myModal .modal-dialog').css('min-width', '60%');
-		$('#myModal').modal('show');
-		$('#myModalBody').load("?do=usblockoff&action=deviceList");
-	}
 
-	function loadAddGenericRuleModal() {
-		$('#myModalHeader').text("{{lang_add-generic-rule}}").css("font-weight", "Bold");
-		$('#myModalAddButton').attr("form", "addGenericRuleForm");
-		$('#myModal .modal-dialog').css('width', '60%');
-		$('#myModal .modal-dialog').css('min-width', '60%');
-		$('#myModal').modal('show');
-		$('#myModalBody').load("?do=usblockoff&action=genericRuleBuilder");
+	// Called after a drag & drop event is finished.
+	function updateTable(new_index) {
+		var old_i = -1;
+		if (oldIndex == -1) {
+			return;
+		} else {
+			old_i = oldIndex;
+			oldIndex = -1;
+		}
+		var rule = rules[old_i];
+		rules.splice(old_i, 1);
+		rules.splice(new_index, 0, rule);
+		console.log(JSON.stringify(rules));
+		$('#rules').val(JSON.stringify(rules));
 	}
 </script>
\ No newline at end of file