feat: Add progress icon

fusarium/static/fusarium/js/oatFloweringModelForm.js

@@ -121,7 +121,8 @@ var submitForm = function()
 	}
 	
 	// Erase previous results
-	displayResultHTML("");
+	document.getElementById("oatFloweringModelResults").style.display="none";
+	document.getElementById("progressIconRow").style.display="block";
 
 	// Start chain of async functions
 	createConfig();
@@ -137,15 +138,6 @@ const createConfig = async function(){
 	const theForm = document.getElementById(theFormId);
 	const weatherStationId = theForm.weatherStationId.options[theForm.weatherStationId.selectedIndex].value;
 	const dateOfSowing = getDateOfSowing();
-	const endDateNormalData = moment(dateOfSowing).month(9).date(1);
-	
-
-	var weatherDataUri = [weatherDataBaseUri,
-	                      "?startDate=", dateOfSowing.format("YYYY-MM-DD"),
-	                      (DEBUG ? "&today=" + now.format("YYYY-MM-DD") : ""),
-	                      "&weatherStationId=", weatherStationId//,
-	                      //"&callback=?"
-	                      ].join("");
 	
 	const normalDataRequestUri = LMTServicesBaseUri + "rest/vips/getdata/grovfornormal?" + 
 		"elementMeasurementTypes[]=TM&timeZone=Europe/Oslo" + 
@@ -178,7 +170,7 @@ const createConfig = async function(){
 	measuredData.sort(sortWeatherData);
 	const maxMeasuredDataTimestamp = moment(measuredData[measuredData.length-1].timeMeasured);
 	const mergedData = measuredData.concat(normalData.filter((obs) => moment(obs.timeMeasured) > maxMeasuredDataTimestamp));
-	console.info(mergedData);
+	//console.info(mergedData);
 	runModel(mergedData);		
 };
 
@@ -191,7 +183,7 @@ function sortWeatherData(a,b)
  * Calls the oatFlowering model in the VIPS forecasting system
  * Displays data when results are returned
  */
-var runModel = function(data)
+const runModel = async function(data)
 {
 	//console.log("runModel");
 	var dateOfSowing = getDateOfSowing();
@@ -207,32 +199,24 @@ var runModel = function(data)
 			"observations": data
 		}
 	};
+	const modelResponse = await fetch(runUri, {
+		method: "POST",
+		body: JSON.stringify(modelConfig),
+		headers: {
+			"Content-Type": "application/json",
+		}
+	});
 
-	//console.log(data);
-    var request = $.ajax({
-        type:"POST",
-        url: runUri,
-        data: JSON.stringify(modelConfig),
-        dataType: "json",
-        contentType: "application/json; charset=utf-8",
-    })
-    .done(function(data, textStatus, jqXHR) {
-		displayResults(data);
-	})
-	.fail(function( jqXHR, textStatus,errorThrown ) {
-		alert( "Request failed: " + errorThrown );
-	})
-	.always(function() {
-	//alert( "complete" );
-	})
-	;
-	
+	if(modelResponse.status == 200)
+	{
+		displayResults(await modelResponse.json());
+	}
 }
 
 /**
  * Analyze and display results from the OatFlowering model in VIPS
  */
-var displayResults = function(data)
+const displayResults = function(data)
 {
 	// getting the dates
 	var dateOfSowing = getDateOfSowing();
@@ -334,8 +318,10 @@ var getRawResults = function(data)
  */
 var displayResultHTML = function(text)
 {
-	document.getElementById("oatFloweringModelResults").style.display="block";
+	
 	document.getElementById("oatFloweringModelResults").innerHTML= "<h2>Resultater</h2>" + text;
+	document.getElementById("progressIconRow").style.display="none";
+	document.getElementById("oatFloweringModelResults").style.display="block";
 }
 
 /**

fusarium/templates/fusarium/oat_flowering.html

@@ -68,6 +68,11 @@
 			</div>
 		</div>
 	</div>
+	<div class="row" id="progressIconRow" style="margin-bottom: 10px; display: none;">
+		<div class="col-md-6">
+			<button type="button" class="btn btn-info" style="margin-left: 5px;"><i class="fa fa-hourglass-half fa-lg"></i>&nbsp;&nbsp;Vennligst vent...</button>
+		</div>
+	</div>
     <div id="oatFloweringModelResults" class="alert alert-info" role="alert" style="width:100%; display: none;"></div>
 </div>
 {% endblock %}