1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<div class="panel panel-default">
<div class="panel-heading">
{{lang_rules}}
<div class="pull-right">
<span style="color: red;font-weight: bold;opacity: 0.75;">
<span class="glyphicon glyphicon-alert" style="margin-right: 5px;"></span>
{{lang_firstMatchingRuleCounts}}
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body" id="casualRules">
<div class="list-group">
<input type="hidden" name="rules" value="" id="rules">
<table id="rulesTable" class="table table-condensed table-hover fixedTableLayout">
<thead>
<tr>
<th style="width: 10%" data-sort="string"><span class="glyphicon glyphicon-th-list"></span></th>
<th style="width: 20%" class="tableWrapBreakWord" width="120">{{lang_action}}</th>
<th style="width: 50%" class="tableWrapBreakWord">{{lang_attributes}}</th>
<th style="width: 10%" class="tableWrapBreakWord">{{lang_edit}}</th>
<th style="width: 10%" class="tableWrapBreakWord">{{lang_delete}}</th>
</tr>
</thead>
<tbody id="tableBody" style="overflow: auto;">
{{#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 class="tableWrapBreakWord" style="vertical-align: middle; text-align: center;">{{target}}</td>
<td class="tableWrapBreakWord">
{{#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 class="tableWrapBreakWord">
<a class="btn btn-xs btn-info" href="?do=usblockoff&show=edit-rule&ruleid={{id}}&configid={{configid}}">
<span class="glyphicon glyphicon-edit"></span>
</a>
</td>
<td class="tableWrapBreakWord">
<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-success {{#newConfig}}disabled{{/newConfig}}"
{{^newConfig}}href="?do=usblockoff&show=add-generic-rule&configid={{configid}}"{{/newConfig}}
{{#newConfig}}title="{{lang_disabledButtons_helptext}}" style="pointer-events: auto;"{{/newConfig}}>
<span class="glyphicon glyphicon-plus"></span>
<span>{{lang_genericRule}}</span>
</a>
<a class="btn btn-success {{#newConfig}}disabled{{/newConfig}}"
{{^newConfig}}href="?do=usblockoff&show=add-devices&configid={{configid}}"{{/newConfig}}
{{#newConfig}}title="{{lang_disabledButtons_helptext}}" style="pointer-events: auto;"{{/newConfig}}>
<span class="glyphicon glyphicon-plus"></span>
<span>{{lang_devices}}</span>
</a>
</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});
$("#tableBody tr").each(function() {
rules.push(Number(this.id));
});
$('#rules').val(JSON.stringify(rules));
$('#tableBody').sortable({
opacity: 0.8,
handle: '.drag-handler',
start: function(evt, ui) {
oldIndex = ui.item.index();
ui.placeholder.css("visibility", "visible");
ui.placeholder.css("opacity", "0.152");
ui.placeholder.css("background-color", "LawnGreen");
},
stop: function(evt, ui) {
updateTable(ui.item.index());
}
});
$('a.overload').tooltip({placement: "auto", html: true});
});
// 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);
$('#rules').val(JSON.stringify(rules));
}
</script>
|
