Add progress bar for disk space
This commit is contained in:
parent
c36984f72d
commit
2417ee0069
|
@ -109,6 +109,18 @@
|
||||||
</section>
|
</section>
|
||||||
<section id="recordings" class="tab-pane fade active show" role="tabpanel" aria-labelledby="recordings-tab">
|
<section id="recordings" class="tab-pane fade active show" role="tabpanel" aria-labelledby="recordings-tab">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 mx-auto">
|
||||||
|
Space left
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0"
|
||||||
|
data-bind="attr: {'aria-valuemax': space.total, 'aria-valuenow': space.free},
|
||||||
|
style: { width: space.percent() + '%' },
|
||||||
|
text: space.percent() + '%'">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-10 mx-auto">
|
<div class="col-lg-10 mx-auto">
|
||||||
<p class="lead"></p>
|
<p class="lead"></p>
|
||||||
|
@ -134,13 +146,13 @@
|
||||||
<td data-bind="text: ko_progressString"></td>
|
<td data-bind="text: ko_progressString"></td>
|
||||||
<td data-bind="text: ko_size"></td>
|
<td data-bind="text: ko_size"></td>
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="enable: status == 'FINISHED', click: play"></button>
|
<button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="enable: ko_status() == 'FINISHED', click: play"></button>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-secondary fa fa-download" title="Download recording" data-bind="enable: status == 'FINISHED', click: function() { $.notify('Not implemented, yet', 'info'); }"></button>
|
<button class="btn btn-secondary fa fa-download" title="Download recording" data-bind="enable: ko_status() == 'FINISHED', click: function() { $.notify('Not implemented, yet', 'info'); }"></button>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-secondary fa fa-trash" title="Delete recording" data-bind="enable: status == 'FINISHED', click: ctbrec.deleteRecording"></button>
|
<button class="btn btn-secondary fa fa-trash" title="Delete recording" data-bind="enable: ko_status() == 'FINISHED', click: ctbrec.deleteRecording"></button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -196,6 +208,12 @@
|
||||||
let onlineModels = [];
|
let onlineModels = [];
|
||||||
let observableModelsArray = ko.observableArray();
|
let observableModelsArray = ko.observableArray();
|
||||||
let observableRecordingsArray = ko.observableArray();
|
let observableRecordingsArray = ko.observableArray();
|
||||||
|
let space = {
|
||||||
|
free: ko.observable(0),
|
||||||
|
total: ko.observable(0),
|
||||||
|
percent: ko.observable(0)
|
||||||
|
};
|
||||||
|
|
||||||
let ctbrec = {
|
let ctbrec = {
|
||||||
resume: function(model) {
|
resume: function(model) {
|
||||||
try {
|
try {
|
||||||
|
@ -356,7 +374,8 @@
|
||||||
|
|
||||||
ko.applyBindings({
|
ko.applyBindings({
|
||||||
models : observableModelsArray,
|
models : observableModelsArray,
|
||||||
recordings: observableRecordingsArray
|
recordings: observableRecordingsArray,
|
||||||
|
space
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateOnlineModels() {
|
function updateOnlineModels() {
|
||||||
|
@ -571,6 +590,7 @@
|
||||||
.done(function(data) {
|
.done(function(data) {
|
||||||
if (data.status === 'success') {
|
if (data.status === 'success') {
|
||||||
syncRecordings(data.recordings);
|
syncRecordings(data.recordings);
|
||||||
|
updateDiskSpace();
|
||||||
} else {
|
} else {
|
||||||
console.log('request failed', data);
|
console.log('request failed', data);
|
||||||
}
|
}
|
||||||
|
@ -583,6 +603,29 @@
|
||||||
}
|
}
|
||||||
setTimeout(updateRecordings, 3000);
|
setTimeout(updateRecordings, 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateDiskSpace() {
|
||||||
|
$.ajax({
|
||||||
|
type : 'POST',
|
||||||
|
url : '/rec',
|
||||||
|
dataType : 'json',
|
||||||
|
async : true,
|
||||||
|
timeout : 60000,
|
||||||
|
data : '{"action": "space"}'
|
||||||
|
})
|
||||||
|
.done(function(data) {
|
||||||
|
if (data.status === 'success') {
|
||||||
|
space.total(data.spaceTotal);
|
||||||
|
space.free(data.spaceFree);
|
||||||
|
space.percent( (data.spaceFree/data.spaceTotal*100).toFixed(2) );
|
||||||
|
} else {
|
||||||
|
console.log('request failed', data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.fail(function(jqXHR, textStatus, errorThrown) {
|
||||||
|
console.log(textStatus, errorThrown);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
updateOnlineModels();
|
updateOnlineModels();
|
||||||
updateRecordings();
|
updateRecordings();
|
||||||
|
|
Loading…
Reference in New Issue