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

10 files changed, 252 insertions, 230 deletions

diff --git a/modules-available/usblockoff/config.json b/modules-available/usblockoff/config.json
index f15ba11d..12049689 100644
--- a/modules-available/usblockoff/config.json
+++ b/modules-available/usblockoff/config.json
@@ -1,4 +1,4 @@
 {
 	"category":"main.beta",
-	"dependencies": ["bootstrap_switch", "bootstrap_dialog", "statistics"]
+	"dependencies": ["bootstrap_switch", "bootstrap_dialog", "statistics", "permissionmanager"]
 }
diff --git a/modules-available/usblockoff/lang/de/template-tags.json b/modules-available/usblockoff/lang/de/template-tags.json
index 15a60aca..16466922 100644
--- a/modules-available/usblockoff/lang/de/template-tags.json
+++ b/modules-available/usblockoff/lang/de/template-tags.json
@@ -44,5 +44,8 @@
 	"lang_device-list": "Geräte Liste",
 	"lang_rulesConfig": "Regel Konfiguration",
 	"lang_daemonConfig": "Daemon Konfiguration",
-	"lang_assignMenu": "Zuweisungsmenü"
+	"lang_assignMenu": "Zuweisungsmenü",
+	"lang_serverName": "Servername",
+	"lang_configuration": "Konfiguration",
+	"lang_usb-lock-off": "USB Lock-Off"
 }
diff --git a/modules-available/usblockoff/lang/en/template-tags.json b/modules-available/usblockoff/lang/en/template-tags.json
index 3daffdb7..bfa52caf 100644
--- a/modules-available/usblockoff/lang/en/template-tags.json
+++ b/modules-available/usblockoff/lang/en/template-tags.json
@@ -44,5 +44,8 @@
 	"lang_device-list": "Device list",
 	"lang_rulesConfig": "Rules config",
 	"lang_daemonConfig": "Daemon config",
-	"lang_assignMenu": "Assign menu"
+	"lang_assignMenu": "Assign menu",
+	"lang_serverName": "Server name",
+	"lang_configuration": "Configuration",
+	"lang_usb-lock-off": "USB lock off"
 }
diff --git a/modules-available/usblockoff/page.inc.php b/modules-available/usblockoff/page.inc.php
index c02fadba..5e1b27b4 100644
--- a/modules-available/usblockoff/page.inc.php
+++ b/modules-available/usblockoff/page.inc.php
@@ -18,7 +18,7 @@ class Page_usblockoff extends Page
 			Util::redirect('?do=Main'); // does not return
 		}
 
-		$this->action = Request::post('action');
+		$this->action = Request::any('action');
 
 		if ($this->action === 'updateConfig') {
 			$this->updateConfig();
@@ -32,7 +32,25 @@ class Page_usblockoff extends Page
 	 */
 	protected function doRender()
 	{
-		$this->loadConfigChooser();
+		$show = Request::get("show", "config-table");
+		if ($show === "config-table") {
+			$this->loadConfigChooser();
+		} else if ($show === "edit-config") {
+			$configid = Request::get("configid", "");
+			$configName = Database::queryFirst("SELECT configname FROM `usb_configs` WHERE configid=:id", array(
+				'id' => $configid
+			));
+
+			$rulesConfigHtml = $this->loadRulesConfig($configid);
+			$daemonConfigHtml = $this->loadDaemonConfig($configid);
+
+			Render::addTemplate('usb-edit-config', array(
+				'configid' => $configid,
+				'configName' => $configName['configname'],
+				'rulesConfigHtml' => $rulesConfigHtml,
+				'daemonConfigHtml' => $daemonConfigHtml
+			));
+		}
 	}
 
 	protected function loadConfigChooser()
@@ -44,13 +62,12 @@ class Page_usblockoff extends Page
 			$config['config_name'] = $dbentry['configname'];
 			$configs[] = $config;
 		}
-
-		Render::addTemplate('usb-choose-config', array('config_list' => array_values($configs)));
+		Render::addTemplate('usb-configuration-table', array('config_list' => array_values($configs)));
 	}
 
 	protected function deleteConfig()
 	{
-		$configID = Request::post('id', 0, 'int');
+		$configID = Request::any('id', 0, 'int');
 
 		if ($configID != 0) {
 			Database::exec("DELETE FROM `usb_configs` WHERE configid=:configid", array('configid' => $configID));
@@ -121,33 +138,24 @@ class Page_usblockoff extends Page
 		Message::addSuccess('config-saved');
 	}
 
-	/**
-	 * AJAX
-	 */
-	protected function doAjax()
-	{
-		User::load();
-		if (!User::isLoggedIn()) {
-			die('Unauthorized');
-		}
-		$action = Request::any('action');
-		if ($action === 'deviceList') {
-			$this->ajaxDeviceList();
-		} elseif ($action === 'loadConfig') {
-			$id = Request::any('id', 0, 'int');
-			$this->ajaxConfig($id);
-		} elseif ($action === 'loadDaemonConfig') {
-			$id = Request::any('id', 0, 'int');
-			$this->ajaxDaemonConfig($id);
-		} elseif ($action === 'loadRulesConfig') {
-			$id = Request::any('id', 0, 'int');
-			$this->ajaxRulesConfig($id);
-		} elseif ($action === 'genericRuleBuilder') {
-			$this->ajaxGenericRuleBuilder();
+	private function loadRulesConfig($id) {
+		$rulesConf = null;
+
+		if ($id == 0) {
+			$currentdir = getcwd();
+
+			$rulesConf = file_get_contents($currentdir . '/modules/usblockoff/inc/default-configs/rules.conf');
+		} else {
+			$dbquery = Database::queryFirst("SELECT * FROM `usb_configs` WHERE configid=:id", array('id' => $id));
+			$rulesConf = $dbquery['rulesconfig'];
 		}
+
+		return Render::parse('usb-rules-config', array(
+			'rules' => $rulesConf,
+		));
 	}
 
-	private function ajaxDaemonConfig($id)
+	private function loadDaemonConfig($id)
 	{
 		$form = array();
 		$rulesConf = null;
@@ -182,28 +190,30 @@ class Page_usblockoff extends Page
 			}
 		}
 
-		echo Render::parse('usb-daemon-config', array(
+		return Render::parse('usb-daemon-config', array(
 			'list' => array_values($form),
 		));
 	}
 
-	private function ajaxRulesConfig($id) {
-		$rulesConf = null;
-
-		if ($id == 0) {
-			$currentdir = getcwd();
-
-			$rulesConf = file_get_contents($currentdir . '/modules/usblockoff/inc/default-configs/rules.conf');
-		} else {
-			$dbquery = Database::queryFirst("SELECT * FROM `usb_configs` WHERE configid=:id", array('id' => $id));
-			$rulesConf = $dbquery['rulesconfig'];
+	/**
+	 * AJAX
+	 */
+	protected function doAjax()
+	{
+		User::load();
+		if (!User::isLoggedIn()) {
+			die('Unauthorized');
+		}
+		$action = Request::any('action');
+		if ($action === 'deviceList') {
+			$this->ajaxDeviceList();
+		} elseif ($action === 'genericRuleBuilder') {
+			$this->ajaxGenericRuleBuilder();
 		}
-
-		echo Render::parse('usb-rules-config', array(
-			'rules' => $rulesConf,
-		));
 	}
 
+
+
 	private function ajaxGenericRuleBuilder() {
 		$settings = array();
 
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");