[usb-lock-off] Reworked config chooser. Switched from the dropdown config selection to a classic table.

6 files changed, 189 insertions, 183 deletions

diff --git a/modules-available/usblockoff/templates/usb-add-generic-rule.html b/modules-available/usblockoff/templates/usb-add-generic-rule.html
index 6d91dcb5..07729db4 100644
--- a/modules-available/usblockoff/templates/usb-add-generic-rule.html
+++ b/modules-available/usblockoff/templates/usb-add-generic-rule.html
@@ -143,13 +143,13 @@
 <script type="text/javascript">
 	$('a.btn[title]').tooltip({placement: "auto", html: true});
 
-
 	var contains = true;
 	var c = $('#contains');
 	c.bootstrapSwitch();
 	c.on('switchChange.bootstrapSwitch', function(event, state) {
 		contains = state;
 	});
+
 	var s = $('#expert_Switch');
 	var mode = "casual";
 	s.bootstrapSwitch();
diff --git a/modules-available/usblockoff/templates/usb-choose-config.html b/modules-available/usblockoff/templates/usb-choose-config.html
deleted file mode 100644
index b50447fa..00000000
--- a/modules-available/usblockoff/templates/usb-choose-config.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<form method="post" action="?do=usblockoff" id="configForm">
-	<input type="hidden" name="token" value="{{token}}">
-	<input type="hidden" name="action" id="formAction" value="updateConfig">
-	<input type="hidden" name="id" value="0" id="configID">
-	<input type="hidden" name="saveAsNewConfig" value="0" id="saveAsNewConfig">
-
-	<div class="panel panel-default">
-		<div class="panel-heading">{{lang_general}}</div>
-		<div class="panel-body">
-			<div class="list-group">
-
-				<div class="list-group-item">
-					<div class="row">
-						<div class="col-sm-3">
-							<label>{{lang_config}}</label>
-						</div>
-						<div class="col-sm-7">
-							<!--<input class="form-control" name="{{name}}" id="{{name}}" value="{{value}}">-->
-							<select class="form-control" id="select_config" name="select_config"
-									  onchange="loadConfig(this);">
-								<option value="0">{{lang_createNewConfig}}</option>
-								{{#config_list}}
-								<option value={{config_id}}>{{config_name}}</option>
-								{{/config_list}}
-							</select>
-						</div>
-						<div class="col-sm-2">
-							<a class="btn btn-default" title="{{lang_config_helptext}}">
-								<span class="glyphicon glyphicon-question-sign"></span>
-							</a>
-						</div>
-					</div>
-				</div>
-
-				<div class="list-group-item">
-					<div class="row">
-						<div class="col-sm-3">
-							<label>{{lang_configName}}</label>
-						</div>
-						<div class="col-sm-7">
-							<input required class="form-control" name="configName" id="configName" value="{{configName}}">
-						</div>
-						<div class="col-sm-2">
-							<a class="btn btn-default" title="{{lang_configName_helptext}}">
-								<span class="glyphicon glyphicon-question-sign"></span>
-							</a>
-						</div>
-					</div>
-				</div>
-
-				<div class="list-group-item">
-					<div class="row">
-						<div class="col-sm-3">
-							<label>{{lang_saveAsNewConfig}}</label>
-						</div>
-						<div class="col-sm-7">
-							<input class="settings-bs-switch" id="saveAsNewConfig_CB" type="checkbox" value="0" data-size="small">
-						</div>
-						<div class="col-sm-2">
-							<a class="btn btn-default" title="{{lang_saveAsNewConfig-helptext}}">
-								<span class="glyphicon glyphicon-question-sign"></span>
-							</a>
-						</div>
-					</div>
-				</div>
-
-				<div class="list-group-item">
-					<div class="row">
-						<div class="col-sm-3">
-							<label>{{lang_deleteConfig}}</label>
-						</div>
-						<div class="col-sm-7">
-							<!--	<button class="btn btn-danger confirm-delete" type="submit" onclick="deleteConfig();">{{lang_delete}}</button>-->
-							<button class="btn btn-danger" value="" id="deleteConfigButton" title="{{lang_delete}}"
-									  onclick="deleteConfig(event);">
-								<span class="glyphicon glyphicon-trash"></span> {{lang_delete}}
-							</button>
-						</div>
-						<div class="col-sm-2">
-							<a class="btn btn-default" title="{{lang_deleteConfig_helptext}}">
-								<span class="glyphicon glyphicon-question-sign"></span>
-							</a>
-						</div>
-					</div>
-				</div>
-
-			</div>
-		</div>
-	</div>
-
-	<ul class="nav nav-tabs">
-		<li class="active"><a data-toggle="tab" href="#rulesConfigMenu">{{lang_rulesConfig}}</a></li>
-		<li><a data-toggle="tab" href="#deamonConfigMenu">{{lang_daemonConfig}}</a></li>
-		<li><a data-toggle="tab" href="#assignMenu">{{lang_assignMenu}}</a></li>
-	</ul>
-
-	<div class="tab-content">
-		<div id="rulesConfigMenu" class="tab-pane fade in active">
-			<div id="rulesConfigDIV"></div>
-		</div>
-		<div id="deamonConfigMenu" class="tab-pane fade">
-			<div id="daemonConfigDIV"></div>
-		</div>
-		<div id="assignMenu" class="tab-pane fade">
-			<h3>Work in progress ...</h3>
-			<p>Todo: Implement this.</p>
-			<p>Or not.</p>
-			<p>¯\_(ツ)_/¯</p>
-		</div>
-	</div>
-
-	<div class="pull-right">
-		<!-- TODO: Reset Button should't call loadConfig instead do not reset the select input... but how? -->
-		<button class="btn btn-warning" type="reset" onclick="loadConfig($('#select_config'));">
-			<!-- TODO: Add discardChanges to the main-> globalVariables -->
-			<span class="glyphicon glyphicon-refresh"></span> {{lang_discardChanges}}
-		</button>
-		<button type="submit" id="configFormButton" class="btn btn-primary">
-			<span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}
-		</button>
-	</div>
-
-</form>
-<script type="text/javascript">
-	document.addEventListener("DOMContentLoaded", function () {
-		$('#select_config').change();
-		$('#saveAsNewConfig_CB').bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
-			if (state) {
-				$('#saveAsNewConfig').val(1);
-			} else {
-				$('#saveAsNewConfig').val(0);
-			}
-		});
-	});
-
-	function loadConfig(selectedOption) {
-		var configID = selectedOption.value;
-		var configName = $('#select_config option:selected').text();
-		$('#daemonConfigDIV').load("?do=usblockoff&action=loadDaemonConfig&id=" + configID);
-		$('#rulesConfigDIV').load("?do=usblockoff&action=loadRulesConfig&id=" + configID);
-		$('#configID').val(configID);
-		if (configID == 0) {
-			$('#configName').val('');
-		} else {
-			$('#configName').val(configName);
-		}
-	}
-
-	function deleteConfig(event) {
-		event.preventDefault();
-
-		BootstrapDialog.confirm({
-			title: '{{lang_delete}}',
-			message: '{{lang_deleteConfigMessage}}',
-			type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
-			closable: false, // <-- Default value is false
-			draggable: false, // <-- Default value is false
-			btnCancelLabel: '{{lang_cancel}}', // <-- Default value is 'Cancel',
-			btnOKLabel: '<span class="glyphicon glyphicon-trash"></span> {{lang_delete}}', // <-- Default value is 'OK',
-			btnOKClass: 'btn-danger', // <-- If you didn't specify it, dialog type will be used,
-			callback: function (result) {
-				if (result) {
-					var configID = $('#select_config option:selected').val();
-					$('#configID').val(configID);
-					$('#formAction').val('deleteConfig');
-					$('#configForm').submit();
-				}
-			}
-		});
-	}
-</script>
diff --git a/modules-available/usblockoff/templates/usb-configuration-table.html b/modules-available/usblockoff/templates/usb-configuration-table.html
new file mode 100644
index 00000000..eb3a8839
--- /dev/null
+++ b/modules-available/usblockoff/templates/usb-configuration-table.html
@@ -0,0 +1,70 @@
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="page-header">
+				<h1>{{lang_usb-lock-off}}</h1>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<table id="configurationTable" class="table table-condensed table-hover stupidtable">
+				<thead>
+					<tr>
+						<th data-sort="string">{{lang_serverName}}</th>
+						<th>{{lang_ruleInfoTODO}}</th>
+						<th>{{lang_edit}}</th>
+						<th>{{lang_delete}}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{{#config_list}}
+					<tr>
+						<td data-sort-value="{{config_name}}">{{config_name}}</td>
+						<td>TODO: Show Rule information here</td>
+						<td>
+							<a class="btn btn-xs btn-info" href="?do=usblockoff&amp;show=edit-config&amp;configid={{config_id}}">
+								<span class="glyphicon glyphicon-edit"></span>
+							</a>
+						</td>
+						<td>
+							<a class="btn btn-xs btn-danger" onclick="deleteConfig(event, {{config_id}});">
+								<span class="glyphicon glyphicon-trash"></span>
+							</a>
+						</td>
+					</tr>
+					{{/config_list}}
+				</tbody>
+			</table>
+			<div class="buttonbar text-right">
+				<a class="btn btn-success" href="?do=usblockoff&amp;show=edit-config&amp;configid=new-default">
+					<span class="glyphicon glyphicon-plus"></span>
+					{{lang_configuration}}
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	function deleteConfig(event, id) {
+		event.preventDefault();
+
+		BootstrapDialog.confirm({
+			title: '{{lang_delete}}',
+			message: '{{lang_deleteConfigMessage}}',
+			type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
+			closable: false, // <-- Default value is false
+			draggable: false, // <-- Default value is false
+			btnCancelLabel: '{{lang_cancel}}', // <-- Default value is 'Cancel',
+			btnOKLabel: '<span class="glyphicon glyphicon-trash"></span> {{lang_delete}}', // <-- Default value is 'OK',
+			btnOKClass: 'btn-danger', // <-- If you didn't specify it, dialog type will be used,
+			callback: function (result) {
+				if (result) {
+					url = "?do=usblockoff&action=deleteConfig&id=" + id;
+					window.location = url;
+				}
+			}
+		});
+	}
+</script>
\ No newline at end of file
diff --git a/modules-available/usblockoff/templates/usb-device-list.html b/modules-available/usblockoff/templates/usb-device-list.html
index 459c6801..a7c9afed 100644
--- a/modules-available/usblockoff/templates/usb-device-list.html
+++ b/modules-available/usblockoff/templates/usb-device-list.html
@@ -55,11 +55,11 @@
 			<div class="panel-heading">{{lang_ruleOptions}}</div>
 			<div class="panel-body">
 				<div class="list-group">
-
-					{{#settings}}
-					{{{settingHtml}}}
-					{{/settings}}
-
+					<div id="settingsDIV">
+						{{#settings}}
+						{{{settingHtml}}}
+						{{/settings}}
+					</div>
 				</div>
 			</div>
 		</div>
@@ -120,7 +120,7 @@
 		$('.selected').each(function () {
 			var rule = $('#prop-action').val();
 			var selected = $(this);
-			$('.settings-bs-switch').each(function () {
+			$('#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'));
diff --git a/modules-available/usblockoff/templates/usb-edit-config.html b/modules-available/usblockoff/templates/usb-edit-config.html
new file mode 100644
index 00000000..fc7aabfb
--- /dev/null
+++ b/modules-available/usblockoff/templates/usb-edit-config.html
@@ -0,0 +1,68 @@
+<form method="post" action="?do=usblockoff" id="configForm">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="action" id="formAction" value="updateConfig">
+	<input type="hidden" name="id" value="{{configid}}" id="configID">
+
+	<div class="panel panel-default">
+		<div class="panel-heading">{{lang_general}}</div>
+		<div class="panel-body">
+			<div class="list-group">
+
+				<div class="list-group-item">
+					<div class="row">
+						<div class="col-sm-3">
+							<label>{{lang_configName}}</label>
+						</div>
+						<div class="col-sm-7">
+							<input required class="form-control" name="configName" id="configName" value="{{configName}}">
+						</div>
+						<div class="col-sm-2">
+							<a class="btn btn-default" title="{{lang_configName_helptext}}">
+								<span class="glyphicon glyphicon-question-sign"></span>
+							</a>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+	</div>
+
+	<ul class="nav nav-tabs">
+		<li class="active"><a data-toggle="tab" href="#rulesConfigMenu">{{lang_rulesConfig}}</a></li>
+		<li><a data-toggle="tab" href="#deamonConfigMenu">{{lang_daemonConfig}}</a></li>
+		<li><a data-toggle="tab" href="#assignMenu">{{lang_assignMenu}}</a></li>
+	</ul>
+
+	<div class="tab-content">
+		<div id="rulesConfigMenu" class="tab-pane fade in active">
+			<div id="rulesConfigDIV">
+				{{{rulesConfigHtml}}}
+			</div>
+		</div>
+		<div id="deamonConfigMenu" class="tab-pane fade">
+			<div id="daemonConfigDIV">
+				{{{daemonConfigHtml}}
+			</div>
+		</div>
+		<div id="assignMenu" class="tab-pane fade">
+			<h3>Work in progress ...</h3>
+			<p>Todo: Implement this.</p>
+			<p>Or not.</p>
+			<p>¯\_(ツ)_/¯</p>
+		</div>
+	</div>
+
+	<div class="pull-right">
+		<!-- TODO: Reset Button should't call loadConfig instead do not reset the select input... but how? -->
+		<button class="btn btn-warning" type="reset" onclick="loadConfig($('#select_config'));">
+			<!-- TODO: Add discardChanges to the main-> globalVariables -->
+			<span class="glyphicon glyphicon-refresh"></span> {{lang_discardChanges}}
+		</button>
+		<a href="?do=usblockoff" class="btn btn-default">Cancel</a>
+		<button type="submit" id="configFormButton" class="btn btn-primary">
+			<span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}
+		</button>
+	</div>
+
+</form>
diff --git a/modules-available/usblockoff/templates/usb-rules-config.html b/modules-available/usblockoff/templates/usb-rules-config.html
index ab3dc664..3827dc03 100644
--- a/modules-available/usblockoff/templates/usb-rules-config.html
+++ b/modules-available/usblockoff/templates/usb-rules-config.html
@@ -1,6 +1,24 @@
 <div class="panel panel-default">
-	<div class="panel-heading">rules.conf</div>
-	<div class="panel-body">
+	<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-body" id="casualRules">
+		<div class="list-group">
+
+			<!-- TEST_AREA -->
+
+			<div>
+				Work in progress ...
+			</div>
+
+			<!-- /TEST_AREA -->
+
+		</div>
+	</div>
+
+	<div class="panel-body" id="expertRules" style="display: none;">
 		<div class="list-group">
 
 			<div class="form-group">
@@ -23,8 +41,7 @@
 					<span>{{lang_devices}}</span>
 				</a>
 			</div>
-		</div>
-	</div>
+		</div></div>
 </div>
 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
@@ -44,7 +61,29 @@
 </div>
 
 <script type="text/javascript">
-	$('a.btn[title]').tooltip({placement: "auto", html: true});
+	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");
+
+		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";
+			}
+		});
+	});
 
 	function loadAddDeviceModal() {
 		$('#myModalHeader').text("{{lang_device-list}}").css("font-weight", "Bold");