|
|
<form method="post" action="?do=usblockoff" id="addDevicesForm">
<input type="hidden" name="token" value="{{token}}">
<input type="hidden" name="action" value="addDevices">
<input type="hidden" name="rules" value="" id="rules">
<input type="hidden" name="configid" value="{{configid}}" id="configid">
<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>
<div class="pull-right">
<a href="?do=usblockoff&show=edit-config&configid={{configid}}" class="btn btn-default">Cancel</a>
<button id="addButton" class="btn btn-primary" type="submit" onclick="addDevices();">
<span style="margin-right: 5px;" class="glyphicon glyphicon-floppy-disk"></span>
<span id="addButtonText"></span>
</button>
</div>
</form>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
$('a.btn[title]').tooltip();
$('.settings-bs-switch').bootstrapSwitch({size: 'small'});
countSelected();
});
function clickRow(tbody, uid) {
$(tbody).toggleClass('selected');
countSelected();
}
function countSelected() {
var numSelected = $('.selected').length;
if (numSelected == 0) {
$('#addButton').prop('disabled', true);
//$('#addButton').addClass('disabled');
} else {
$('#addButton').prop('disabled', false);
//$('#addButton').removeClass('disabled');
}
if (numSelected == 1) {
$('#addButtonText').text(' ' + numSelected + ' {{lang_device}}');
} else {
$('#addButtonText').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() {
var rules = [];
$('.selected').each(function () {
var rule = {};
rule['target'] = $('#prop-action').val();
rule['id'] = 0;
rule['attributes'] = [];
var selected = $(this);
$('#settingsDIV .settings-bs-switch').each(function () {
if ($(this).is(":checked")) {
var attr = {};
attr['prop'] = $(this).attr('name').substring(5);
attr['value'] = $('#' + $(selected).attr('id') + '-' + $(this).attr('name')).val();
rule['attributes'].push(attr);
}
});
rules.push(rule);
});
$('#rules').val(JSON.stringify(rules));
}
</script>
<style type='text/css'>
.selected {
background-color: rgba(124, 252, 0, 0.152);
}
.selected tr:hover {
background-color: rgba(124, 252, 0, 0.252) !important;
}
#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>
|
