path: root/modules-available/usblockoff/templates/usb-device-list.html

<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>
				</div>
			</div>
		</div>

	</form>
</div>

<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);

	function clickRow(tbody, uid) {
		$(tbody).toggleClass('selected');
		countSelected();
	}

	function countSelected() {
		var numSelected = $('.selected').length;
		if (numSelected == 0) {
			$('#myModalAddButton').prop('disabled', true);
		} else {
			$('#myModalAddButton').prop('disabled', false);
		}
		if (numSelected == 1) {
			$('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_device}}');
		} else {
			$('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_devices}}');
		}
	}

	function search() {
		var searchForIndex = $('#searchFor').val();
		// Declare variables
		var input, filter, table, tr, td, i;
		input = document.getElementById("myInput");
		filter = input.value.toUpperCase();
		table = document.getElementById("myTable");
		tr = table.getElementsByTagName("tr");

		// Loop through all table rows, and hide those who don't match the search query
		for (i = 0; i < tr.length; i++) {
			td = tr[i].getElementsByTagName("td")[searchForIndex];
			if (td) {
				if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
					tr[i].style.display = "";
				} else {
					tr[i].style.display = "none";
				}
			}
		}
	}

	function addDevices() {
		$('.selected').each(function () {
			var rule = $('#prop-action').val();
			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() + '"';
					}
				}
			});
			if ($('#rules').val() != "") {
				$('#rules').val($('#rules').val() + "\r\n");
			}
			$('#rules').val($('#rules').val() + rule);
		});
		$('#myModal').modal('toggle');
	}

</script>

<style type='text/css'>
	.selected {
		background-color: #F5F5F5;
	}

	#myTable {
		border-collapse: collapse; /* Collapse borders */
		width: 100%; /* Full-width */
		border: 1px solid #ddd; /* Add a grey border */
	}

	#myTable th, #myTable td {
		padding: 12px; /* Add padding */
	}

	#myTable tr {
		/* Add a bottom border to all table rows */
		border-bottom: 1px solid #ddd;
	}

	#myTable tr.header, #myTable tr:hover {
		/* Add a grey background color to the table header and on hover */
		background-color: #f1f1f1;
	}
</style>