|
|
<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>
|
