Web UI: Add progress bar

Closes issue #3
smc · Jun 30, 2018 · c238b7f · c238b7f
1 parent 8839448
commit c238b7f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/web/static/main.js b/web/static/main.js
@@ -26,22 +26,26 @@ function formatResult( result ) {
 
 function onGenerateClick() {
 	$( '.genresult' ).empty();
+	$( '#genresult-progress' ).show();
 	$.getJSON( '/api/generate', {
 		word: morphemechipsInstance.getDataString()
 	}, ( data ) => {
 		var result = data.result;
 		$.each( result, ( key, value ) => {
 			$( '.genresult' ).append( $( '<div>' ).addClass( 'result' ).text( value ) );
 		} );
+		$( '#genresult-progress' ).hide();
 	} );
 }
 
 function onAnalysisClick() {
 	$( '.analresult' ).find( 'tbody' ).empty();
 	$( '.analresult' ).show();
+	$( '#analresult-progress' ).show();
 	$.post( '/api/analyse', {
 		text: $( 'textarea[name="text"]' ).val()
 	}, ( data ) => {
+		$( '#analresult-progress' ).hide();
 		let result = data.result;
 		$.each( result, ( key, values ) => {
 			if ( !key || !key.trim() ) {
@@ -80,6 +84,8 @@ function fetchTags() {
 }
 
 $( function () {
+	$( '#analresult-progress' ).hide();
+	$( '#genresult-progress' ).hide();
 	fetchTags().then( ( tags )=>{
 		tagInfo = tags;
 		init();

diff --git a/web/static/style.css b/web/static/style.css
@@ -50,3 +50,8 @@ header {
 .morphemes .autocomplete-content img {
     display: none;
 }
+
+progress {
+    width: 100%;
+    height: 5px;
+}
diff --git a/web/templates/mlmorph.html b/web/templates/mlmorph.html
@@ -7,6 +7,7 @@ <h5>Analysis</h5>
 			<label for="text_to_analyse">Text to analyse</label>
 			<a id='analyse' class="waves-effect waves-light btn">Analyse</a>
 		</div>
+		<progress id="analresult-progress"></progress>
 		<table class='analresult highlight col s10'>
 			<thead>
 				<tr>
@@ -29,6 +30,7 @@ <h5>Generation</h5>
 		<div class="chips chips-autocomplete  morphemes"></div>
 
 		<a id='generate' class="waves-effect waves-light btn">Generate</a>
+		<progress id="genresult-progress"></progress>
 		<div class="genresult col s12"></div>
 	</section>
 	{% endblock %}