From d4b7545faea02f45886b4907c546ce1b667bf4d8 Mon Sep 17 00:00:00 2001 From: 0xboobface <0xboobface@gmail.com> Date: Sun, 21 Jul 2019 15:08:12 +0200 Subject: [PATCH] Add sorting for the recordings table --- .../src/main/resources/html/static/index.html | 356 ++++++++---------- 1 file changed, 165 insertions(+), 191 deletions(-) diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html index dc5c0150..7ba3f8e6 100644 --- a/server/src/main/resources/html/static/index.html +++ b/server/src/main/resources/html/static/index.html @@ -2,17 +2,6 @@ - - - @@ -79,35 +68,15 @@ aria-controls="profile" aria-selected="false">Recordings
  • Settings
    • - - -
    -
    +
    @@ -138,7 +107,7 @@
    -
    +
    @@ -147,11 +116,11 @@ - - - - - + + + + + @@ -160,10 +129,10 @@ - - - - + + + + @@ -182,60 +151,16 @@
    -

    Coming soon

    +
    +
    +
    +

    Not implemented, yet!

    +
    +
    +
    - - - @@ -280,21 +205,21 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "resume", "model": ' + JSON.stringify(model) + '}', - success : function(data) { - if (data.status === 'success') { - $.notify('Recording of ' + model.name + ' resumed', 'info'); - } else { - $.notify('Resuming recording of model ' + model.name + ' failed', 'error'); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "resume", "model": ' + JSON.stringify(model) + '}' + }) + .done(function(data) { + if (data.status === 'success') { + $.notify('Recording of ' + model.name + ' resumed', 'info'); + } else { $.notify('Resuming recording of model ' + model.name + ' failed', 'error'); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); + $.notify('Resuming recording of model ' + model.name + ' failed', 'error'); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } }, @@ -306,21 +231,21 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "suspend", "model": ' + JSON.stringify(model) + '}', - success : function(data) { - if (data.status === 'success') { - $.notify('Recording of ' + model.name + ' suspended', 'info'); - } else { - $.notify('Suspending recording of model ' + model.name + ' failed', 'error'); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "suspend", "model": ' + JSON.stringify(model) + '}' + }) + .done(function(data) { + if (data.status === 'success') { + $.notify('Recording of ' + model.name + ' suspended', 'info'); + } else { $.notify('Suspending recording of model ' + model.name + ' failed', 'error'); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); + $.notify('Suspending recording of model ' + model.name + ' failed', 'error'); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } }, @@ -332,27 +257,27 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "stop", "model": ' + JSON.stringify(model) + '}', - success : function(data) { - if (data.status === 'success') { - $.notify('Removed ' + model.name, 'info'); - observableModelsArray.remove(model); - } else { - $.notify('Removing model ' + model.name + ' failed', 'error'); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "stop", "model": ' + JSON.stringify(model) + '}' + }) + .done(function(data) { + if (data.status === 'success') { + $.notify('Removed ' + model.name, 'info'); + observableModelsArray.remove(model); + } else { $.notify('Removing model ' + model.name + ' failed', 'error'); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); + $.notify('Removing model ' + model.name + ' failed', 'error'); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } }, deleteRecording: function(recording) { - let name = recording.model.name + ' ' + recording.date; + let name = recording.model.name + ' ' + recording.ko_date(); try { $.ajax({ type : 'POST', @@ -360,22 +285,22 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "delete", "recording": ' + JSON.stringify(recording) + '}', - success : function(data) { - if (data.status === 'success') { - $.notify('Removed recording ' + name, 'info'); - observableRecordingsArray.remove(recording); - } else { - $.notify('Removing recording ' + name + ' failed', 'error'); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "delete", "recording": ' + JSON.stringify(recording) + '}' + }) + .done(function(data) { + if (data.status === 'success') { + $.notify('Removed recording ' + name, 'info'); + observableRecordingsArray.remove(recording); + } else { $.notify('Removing recording ' + name + ' failed', 'error'); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); + $.notify('Removing recording ' + name + ' failed', 'error'); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } } }; @@ -442,21 +367,21 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "listOnline"}', - success : function(data) { - if (data.status === 'success') { - onlineModels = data.models; - } else { - console.log('request failed', data); - } - updateModels(); - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "listOnline"}' + }) + .done(function(data, textStatus, jqXHR) { + if (data.status === 'success') { + onlineModels = data.models; + } else { + console.log('request failed', data); } + updateModels(); + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(jqXHR, textStatus, errorThrown); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } setTimeout(updateOnlineModels, 3000); } @@ -481,7 +406,6 @@ for (let idx in observableModelsArray()) { let model = observableModelsArray()[idx]; if(!isModelInArray(models, model)) { - console.log('remove', model); observableModelsArray.remove(model); } } @@ -552,20 +476,85 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "list"}', - success : function(data) { - if (data.status === 'success') { - syncModels(data.models); - } else { - console.log('request failed', data); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "list"}' + }) + .done(function(data) { + if (data.status === 'success') { + syncModels(data.models); + } else { + console.log('request failed', data); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); + } + } + + function isRecordingInArray(array, recording) { + for (let idx in array) { + let r = array[idx]; + if(r.path === recording.path) { + return true; + } + } + return false; + } + + /** + * Synchronizes recordings from the server with the displayed + * knockout recordings table + */ + function syncRecordings(recordings) { + // remove recordings from the observable array, which are not in the + // updated list + for (let idx in observableRecordingsArray()) { + let recording = observableRecordingsArray()[idx]; + if(!isRecordingInArray(recordings, recording)) { + observableRecordingsArray.remove(recording); + } + } + + // add recordings to the observable array, which are new in the + // updated list + for (let idx in recordings) { + let recording = recordings[idx]; + if (!isRecordingInArray(observableRecordingsArray(), recording)) { + recording.ko_date = ko.computed(function() { + return new Date(recording.startDate).toLocaleString('default', { + 'day': '2-digit', + 'month': '2-digit', + 'year': 'numeric', + 'hour': '2-digit', + 'minute': '2-digit', + 'second': '2-digit' + }) + }); + recording.ko_progressString = ko.observable(recording.progress === -1 ? '' : recording.progress); + recording.ko_size = ko.observable(calculateSize(recording.sizeInByte)); + recording.ko_status = ko.observable(recording.status); + recording.playlist = '/hls' + recording.path + '/playlist.m3u8'; + observableRecordingsArray.push(recording); + } + } + + // update existing recordings + for (let i in recordings) { + let recording = recordings[i]; + for (let j in observableRecordingsArray()) { + let r = observableRecordingsArray()[j]; + if(recording.path === r.path) { + r.progress = recording.progress; + r.sizeInByte = recording.sizeInByte; + r.status = recording.status; + r.startDate = recording.startDate; + r.ko_progressString(recording.progress === -1 ? '' : (recording.progress + '%')); + r.ko_size(calculateSize(recording.sizeInByte)); + r.ko_status(recording.status); + } + } } } @@ -577,37 +566,22 @@ dataType : 'json', async : true, timeout : 60000, - data : '{"action": "recordings"}', - success : function(data) { - if (data.status === 'success') { - observableRecordingsArray.removeAll(); - for ( let idx in data.recordings) { - let recording = data.recordings[idx]; - recording.date = new Date(recording.startDate).toLocaleString('default', { - 'day': '2-digit', - 'month': '2-digit', - 'year': 'numeric', - 'hour': '2-digit', - 'minute': '2-digit', - 'second': '2-digit' - }); - recording.progressString = recording.progress === -1 ? '' : recording.progress; - recording.size = calculateSize(recording.sizeInByte); - recording.playlist = '/hls' + recording.path + '/playlist.m3u8'; - observableRecordingsArray.push(recording); - } - } else { - console.log('request failed', data); - } - }, - error : function(jqXHR, textStatus, errorThrown) { - console.log(textStatus, errorThrown); + data : '{"action": "recordings"}' + }) + .done(function(data) { + if (data.status === 'success') { + syncRecordings(data.recordings); + } else { + console.log('request failed', data); } + }) + .fail(function(jqXHR, textStatus, errorThrown) { + console.log(textStatus, errorThrown); }); } catch (e) { - console.log(e); + console.log('Unexpected error', e); } - setTimeout(updateRecordings, 60000); + setTimeout(updateRecordings, 3000); } updateOnlineModels();
    ModelDateStatusProgressSizeModelDateStatusProgressSize