diff options
Diffstat (limited to 'modules-available/usblockoff/templates/usb-rules-config.html')
| -rw-r--r-- | modules-available/usblockoff/templates/usb-rules-config.html | 154 |
1 files changed, 78 insertions, 76 deletions
diff --git a/modules-available/usblockoff/templates/usb-rules-config.html b/modules-available/usblockoff/templates/usb-rules-config.html index 3827dc03..712eb2ab 100644 --- a/modules-available/usblockoff/templates/usb-rules-config.html +++ b/modules-available/usblockoff/templates/usb-rules-config.html @@ -1,105 +1,107 @@ <div class="panel panel-default"> - <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-heading">rules.conf</div> <div class="panel-body" id="casualRules"> <div class="list-group"> - <!-- TEST_AREA --> - - <div> - Work in progress ... - </div> - - <!-- /TEST_AREA --> - - </div> - </div> + <input type="hidden" name="rules" value="" id="rules"> + <table id="rulesTable" class="table table-condensed table-hover"> + <thead> + <tr> + <th data-sort="string" width="20"><span class="glyphicon glyphicon-th-list"></span></th> + <th width="120">{{lang_target}}</th> + <th>{{lang_attributes}}</th> + <th>{{lang_edit}}</th> + <th>{{lang_delete}}</th> + </tr> + </thead> + <tbody id="tableBody" style="overflow: auto;"> - <div class="panel-body" id="expertRules" style="display: none;"> - <div class="list-group"> - <div class="form-group"> - <textarea class="form-control" rows="10" name="rules" id="rules">{{rules}}</textarea> - </div> + {{#rules}} + <tr id="{{id}}"> + <td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;"> + <span class="glyphicon glyphicon-th-list"></span> + </td> + <td style="vertical-align: middle; text-align: center;">{{target}}</td> + <td> + {{#attributes}} + {{prop}}: {{value}}<br> + {{/attributes}} + {{#hasoverload}} + <a class="label label-default overload" style="background-color: #337ab7;" title="{{attributes_overload}}">+{{num_overload}}</a> + {{/hasoverload}} + </td> + <td> + <a class="btn btn-xs btn-info"> + <span class="glyphicon glyphicon-edit" onclick="alert('implement in new page');"></span> + </a> + </td> + <td> + <a class="btn btn-xs btn-danger" href="?do=usblockoff&action=deleteRule&id={{id}}&configid={{configid}}"> + <span class="glyphicon glyphicon-trash"></span> + </a> + </td> + </tr> + {{/rules}} + </tbody> + </table> <div class="pull-right"> - <a class="btn btn-default" title="{{lang_howToRuleLang}}" - href="https://usbguard.github.io/documentation/rule-language.html" - style="margin-right: -1px;" target="_blank"> - <span class="glyphicon glyphicon-question-sign"></span> - </a> - <a class="btn btn-success" onclick="loadAddGenericRuleModal();" - style="margin-right: 3px; float: none;"> - <span class="glyphicon glyphicon-plus"></span> + <a class="btn btn-success" href="?do=usblockoff&show=add-generic-rule&configid={{configid}}" + style="margin-right: 3px; float: right;"> + <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> <span>{{lang_genericRule}}</span> </a> - <a class="btn btn-success" style="float: right;" onclick="loadAddDeviceModal();"> + <a class="btn btn-success" href="?do=usblockoff&show=add-devices&configid={{configid}}" + style="margin-right: 3px;float: right;"> <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> <span>{{lang_devices}}</span> </a> </div> - </div></div> -</div> - -<div class="modal fade" id="myModal" tabindex="-1" role="dialog"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header" id="myModalHeader"></div> - <div class="modal-body" id="myModalBody"></div> - <div class="modal-footer"> - <a class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</a> - <button id="myModalAddButton" class="btn btn-success" type="button"> - <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> - <span id="myModalAddButtonText"></span> - </button> - </div> </div> + </div> </div> - <script type="text/javascript"> + var rules = []; + var oldIndex = -1; 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"); + $("#tableBody tr").each(function() { + rules.push(Number(this.id)); + }); + $('#rules').val(JSON.stringify(rules)); - 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"; - } + $('#tableBody').sortable({ + opacity: 0.8, + handle: '.drag-handler', + start: function(evt, ui) { + oldIndex = ui.item.index(); + }, + stop: function(evt, ui) { + updateTable(ui.item.index()); + }, }); + + $('a.overload').tooltip({placement: "auto", html: true}); }); - function loadAddDeviceModal() { - $('#myModalHeader').text("{{lang_device-list}}").css("font-weight", "Bold"); - $('#myModalAddButton').attr("form", "addDevicesForm"); - $('#myModal .modal-dialog').css('width', '60%'); - $('#myModal .modal-dialog').css('min-width', '60%'); - $('#myModal').modal('show'); - $('#myModalBody').load("?do=usblockoff&action=deviceList"); - } - function loadAddGenericRuleModal() { - $('#myModalHeader').text("{{lang_add-generic-rule}}").css("font-weight", "Bold"); - $('#myModalAddButton').attr("form", "addGenericRuleForm"); - $('#myModal .modal-dialog').css('width', '60%'); - $('#myModal .modal-dialog').css('min-width', '60%'); - $('#myModal').modal('show'); - $('#myModalBody').load("?do=usblockoff&action=genericRuleBuilder"); + // Called after a drag & drop event is finished. + function updateTable(new_index) { + var old_i = -1; + if (oldIndex == -1) { + return; + } else { + old_i = oldIndex; + oldIndex = -1; + } + var rule = rules[old_i]; + rules.splice(old_i, 1); + rules.splice(new_index, 0, rule); + console.log(JSON.stringify(rules)); + $('#rules').val(JSON.stringify(rules)); } </script>
\ No newline at end of file |