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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
<form id="tableDataForm" method="post" action="?do=rebootcontrol" class="form-inline">
<input type="hidden" name="token" value="{{token}}">
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-hover stupidtable" id="dataTable">
<thead>
<tr>
<th data-sort="string">{{lang_client}}</th>
<th data-sort="ipv4">{{lang_ip}}</th>
<th data-sort="string">{{lang_status}}</th>
<th data-sort="string">{{lang_session}}</th>
<th data-sort="string">{{lang_user}}</th>
<th data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
</tr>
</thead>
<tbody>
{{#data}}
<tr>
<td>
{{hostname}}
{{^hostname}}{{clientip}}{{/hostname}}
</td>
<td>{{clientip}}</td>
<td class="statusColumn">
{{#status}}
<span class="text-success">{{lang_on}}</span>
{{/status}}
{{^status}}
<span class="text-danger">{{lang_off}}</span>
{{/status}}
</td>
<td>{{#status}}{{currentsession}}{{/status}}</td>
<td>{{#status}}{{currentuser}}{{/status}}</td>
<td data-sort-value="0" class="checkboxColumn slx-smallcol">
<div class="checkbox">
<input id="m-{{machineuuid}}" type="checkbox" name="clients[]" value='{{machineuuid}}'>
<label for="m-{{machineuuid}}"></label>
</div>
</td>
</tr>
{{/data}}
</tbody>
</table>
</div>
</div>
<!-- Modals -->
<div class ="modal fade" id="rebootModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{lang_rebootButton}}</h4>
</div>
<div class="modal-body">
{{lang_rebootCheck}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
<button type="submit" {{perms.action.reboot.disabled}} name="action" value="reboot" class="btn btn-warning"><span class="glyphicon glyphicon-repeat"></span> {{lang_reboot}}</button>
</div>
</div>
</div>
</div>
<div class ="modal fade" id="shutdownModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel2">{{lang_shutdownButton}}</h4>
</div>
<div class="modal-body">
{{lang_shutdownCheck}}
{{lang_shutdownIn}} <input id="shutdownTimer" name="minutes" title="{{lang_shutdownIn}}" type="number" value="0" min="0" pattern="\d+"> {{lang_minutes}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
<button type="submit" {{perms.action.shutdown.disabled}} name="action" value="shutdown" class="btn btn-danger"><span class="glyphicon glyphicon-off"></span> {{lang_shutdownButton}}</button>
</div>
</div>
</div>
</div>
</form>
<script type="application/javascript">
var $dataTable;
document.addEventListener("DOMContentLoaded", function() {
$dataTable = $("#dataTable");
markCheckedRows();
// Handle change of checkboxes in table
$('input:checkbox').change(function() {
var $this = $(this);
//give each checkbox the function to mark the row (in green)
if ($this.is(':checked')) {
markRows($this.closest("tr"), true);
$this.closest("td").data("sort-value", 1);
} else {
markRows($this.closest("tr"), false);
$this.closest("td").data("sort-value", 0);
}
//if all are checked, change the selectAll-Button to unselectAll. if one is not checked, change unselectAll to selectAll
var unchecked = $dataTable.find("input:checkbox:not(:checked)").length;
var checked = $dataTable.find("input:checkbox:checked").length;
if (unchecked === 0) {
$('#selectAllButton').hide();
$('#unselectAllButton').show();
} else if (checked === 0) {
$('#selectAllButton').show();
$('#unselectAllButton').hide();
}
//if no client is selected, disable the shutdown/reboot button, and enable them if a client is selected
$('#rebootButton').prop('disabled', checked === 0 || '{{perms.action.reboot.disabled}}' === 'disabled');
$('#shutdownButton').prop('disabled', checked === 0 || '{{perms.action.shutdown.disabled}}' === 'disabled');
});
// Propagate click on column with checkbox to checkbox
$('.checkboxColumn').click(function(e) {
if (e.target === this) {
$(this).find('input:checkbox').click();
}
});
// Arm the (de)select all buttons
$('#selectAllButton').click(function() { selectAllRows(true); });
$('#unselectAllButton').click(function() { selectAllRows(false); });
});
// Check all checkboxes, change selectAll button, make shutdown/reboot button enabled as clients will certainly be selected
function selectAllRows(selected) {
var $box = $dataTable.find('input:checkbox');
if ($box.length === 0) return;
if (selected) {
$box = $box.filter(':not(:checked)');
} else {
$box = $box.filter(':checked');
}
if ($box.length === 0) return;
$box.prop('checked', !!selected).trigger('change');
}
// mark all previous checked rows (used when loading site), enable (de)select all if list is not empty
function markCheckedRows() {
var $checked = $dataTable.find("input:checkbox:checked");
markRows($checked.closest("tr"), true);
var $unchecked = $dataTable.find("input:checkbox:not(:checked)");
markRows($unchecked.closest("tr"), false);
if($unchecked.length === 0) {
$('#selectAllButton').hide();
$('#unselectAllButton').show();
}
if ($unchecked.length > 0 || $checked.length > 0) {
$('.select-button').prop('disabled', false);
}
}
function markRows($rows, marked) {
if (marked) {
$rows.addClass('active');
} else {
$rows.removeClass('active');
}
}
function generateNewKeypair() {
if (!confirm('{{lang_confirmNewKeypair}}'))
return;
$.ajax({
url: '?do=rebootcontrol',
type: 'POST',
data: { action: "generateNewKeypair", token: TOKEN },
success: function(value) {
$('#pubKey').text(value);
}
});
}
</script>
|
