Add progress bar for disk space

This commit is contained in:
0xboobface 2019-07-21 17:13:53 +02:00
parent c36984f72d
commit 2417ee0069
1 changed files with 47 additions and 4 deletions

View File

@ -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();