diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/js/mod_import_progress.js | 64 | ||||
| -rw-r--r-- | view/tpl/import_progress.tpl | 42 |
2 files changed, 106 insertions, 0 deletions
diff --git a/view/js/mod_import_progress.js b/view/js/mod_import_progress.js new file mode 100644 index 000000000..69e4c5242 --- /dev/null +++ b/view/js/mod_import_progress.js @@ -0,0 +1,64 @@ +$(document).ready(function() { + + console.log('import_progress'); + + setInterval(get_progress, 5000); + + + function get_progress(){ + console.log('get'); + + $.get('import_progress', function(data) { + update_progress(data); + }); + } + + function update_progress(data){ + console.log('update'); + console.log(data); + console.log(data.cprogress); + console.log(data.fprogress); + + + if (typeof data.cprogress == 'number') { + $('#cprogress-label').html(data.cprogress + '%'); + $('#cprogress-bar').css('width', data.cprogress + '%'); + + if (data.cprogress == 100) { + $('#cprogress-resume').addClass('d-none'); + $('#cprogress-complete').removeClass('d-none'); + $('#cprogress-bar').removeClass('progress-bar-animated'); + } + else if (data.cprogress < 100) { + $('#cprogress-resume').removeClass('d-none'); + $('#cprogress-complete').addClass('d-none'); + $('#cprogress-bar').addClass('progress-bar-animated'); + } + } + else { + $('#cprogress-label').html(data.cprogress); + $('#cprogress-bar').css('width', '0%'); + + } + + if (typeof data.fprogress == 'number') { + $('#fprogress-label').html(data.fprogress + '%'); + $('#fprogress-bar').css('width', data.fprogress + '%'); + + if (data.fprogress == 100) { + $('#fprogress-resume').addClass('d-none'); + $('#fprogress-complete').removeClass('d-none'); + $('#fprogress-bar').removeClass('progress-bar-animated'); + } + else if (data.fprogress < 100) { + $('#fprogress-resume').removeClass('d-none'); + $('#fprogress-complete').addClass('d-none'); + $('#fprogress-bar').addClass('progress-bar-animated'); + } + } + else { + $('#fprogress-label').html(data.fprogress); + $('#fprogress-bar').css('width', '0%'); + } + } +}); diff --git a/view/tpl/import_progress.tpl b/view/tpl/import_progress.tpl new file mode 100644 index 000000000..34a93e7c8 --- /dev/null +++ b/view/tpl/import_progress.tpl @@ -0,0 +1,42 @@ +<h3>Channel clone status: 100%</h3> + +<div> + <div class="progress mb-2"> + <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> + </div> + <div> + <span class="text-muted">Channel cloning completed!</span> + </div> +</div> + +<hr> + +<h3>Item sync status: <span id="cprogress-label">{{$cprogress_str}}</span></h3> + +<div id="cprogress"> + <div class="progress mb-2"> + <div id="cprogress-bar" class="progress-bar progress-bar-striped bg-warning{{if $fprogress < 100}} progress-bar-animated{{/if}}" role="progressbar" style="width: {{$cprogress}}%" aria-valuenow="{{$cprogress}}" aria-valuemin="0" aria-valuemax="100"></div> + </div> + <div id="cprogress-resume" class=""> + <a href="/import_progress/restart_itemsync">[ RESUME ]</a> <span class="text-muted">Only resume if sync stalled!</span> + </div> + <div id="cprogress-complete" class="d-none"> + <span class="text-muted">Item sync completed!</span> + </div> +</div> + +<hr> + +<h3>File sync status: <span id="fprogress-label">{{$fprogress_str}}</span></h3> + +<div id="fprogress"> + <div class="progress mb-2"> + <div id="fprogress-bar" class="progress-bar progress-bar-striped bg-info{{if $fprogress < 100}} progress-bar-animated{{/if}}" role="progressbar" style="width: {{$fprogress}}%" aria-valuenow="{{$fprogress}}" aria-valuemin="0" aria-valuemax="100"></div> + </div> + <div id="fprogress-resume" class="{{if $fprogress == 100}}d-none{{/if}}"> + <a href="/import_progress/restart_filesync">[ RESUME ]</a> <span class="text-muted">Only resume if sync stalled!</span> + </div> + <div id="fprogress-complete" class="{{if $fprogress < 100}}d-none{{/if}}"> + <span class="text-muted">File sync completed!</span> + </div> +</div> |