summaryrefslogblamecommitdiffstats
path: root/modules-available/usblockoff/templates/usb-device-list.html
blob: a7ecf989da7d602bdb7b432bd8235c20980db510 (plain) (tree)









































































































































































                                                                                                                                                                  
<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">Rule Options</div>
    <div class="panel-body">
      <div class="list-group">

				{{#settings}}
				{{{settingHtml}}}
				{{/settings}}

      </div>
    </div>
  </div>

</form>
</div>

<script type="text/javascript">
	$('a.btn[title]').tooltip();
	$('.settings-bs-switch').bootstrapSwitch({size: 'small'});
	countSelected();

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

		// OLD SEND TO PHP STUFF
		//if ($(tbody).find('#uid').length == 1) {
		//	$(tbody).find('#uid').remove();
		//} else {
		//	$(tbody).append('<input type="hidden" name="uids[]" value="' + uid + '" id="uid">');
		//}
	}

	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);
			$('.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>