improve channel import progress page

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>