diff options
Diffstat (limited to 'modules-available/usblockoff/templates/usb-device-list.html')
| -rw-r--r-- | modules-available/usblockoff/templates/usb-device-list.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/modules-available/usblockoff/templates/usb-device-list.html b/modules-available/usblockoff/templates/usb-device-list.html new file mode 100644 index 00000000..2c26996b --- /dev/null +++ b/modules-available/usblockoff/templates/usb-device-list.html @@ -0,0 +1,180 @@ +<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> |