added some GP feedback

civicmapper · Oct 2, 2017 · 63a9c3a · 63a9c3a
1 parent 593a40f
commit 63a9c3a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/project/static/css/main.css b/project/static/css/main.css
@@ -138,4 +138,15 @@ body {
 .alert-none {
   background-color: rgb(231, 231, 231);
   color: rgb(75, 75, 75);
+}
+
+.has-feedback .form-control-feedback {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
 }
diff --git a/project/static/js/calcControl.js b/project/static/js/calcControl.js
@@ -290,6 +290,8 @@ var Param = function(primary_class, defaultValue, validLower, validUpper, switch
         c = "has-error";
       } else if (validation === "warning") {
         c = "has-warning";
+      } else {
+        resetParamStatus();
       }
       this.s().closest('div', 'form-group').addClass(c);
     },
@@ -623,7 +625,7 @@ var paramControl = {
     $('.results').empty();
   },
   /**
-   * parameter validation alert generation
+   * parameter messages alert generation
    */
   notifications: {
     id: '#params-notification',

diff --git a/project/static/js/geoControl.js b/project/static/js/geoControl.js
@@ -139,7 +139,8 @@ var gpControl = {
    * @param L.Layer drawnPolyline the polyline drawn with Leaflet.Draw
    */
   gpElevProfile: function (drawnPolyline) {
-    //Hydropower.params.head.setOnForm('Calculating...');
+    Hydropower.params.head.resetParamStatus();
+    $('#gp-msg-head').fadeIn();
     var elevProfileService = L.esri.GP.service({
       url: "http://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer/Profile",
       useCors: true,
@@ -161,6 +162,7 @@ var gpControl = {
       //$('#'+messageControl.messages.elevprofile.id).show();
       // run the task
       elevProfileTask.run(function(error, result, response) {
+        $('#gp-msg-head').fadeOut();
         if (error) {
           // messages
           msg = "Elevation Profile: " + error.message + "(code:" + error.code + ")";
@@ -180,6 +182,8 @@ var gpControl = {
     });
   },
   gpWatershed: function(drawnPoint) {
+    Hydropower.params.area.resetParamStatus();
+    $('#gp-msg-area').fadeIn();
     //Hydropower.params.area.setOnForm('Calculating...');
     var watershedService = L.esri.GP.service({
       url: "http://hydro.arcgis.com/arcgis/rest/services/Tools/Hydrology/GPServer/Watershed",
@@ -208,6 +212,7 @@ var gpControl = {
       //messageControl.messages.watershed.addMsg(msg, 'info');
       //$('#'+messageControl.messages.watershed.id).show();
       watershedTask.run(function(error, result, response) {
+        $('#gp-msg-area').fadeOut();
         // show the message window
         if (error) {
           // messages

diff --git a/project/static/js/ready.js b/project/static/js/ready.js
@@ -32,6 +32,7 @@ $(document).on("ready", function() {
 	// set up the draw control
 	drawControl.initDrawListeners(map);
 
+	$(".gp-msg").hide();
 
 	console.log("document is ready");
 	console.log("*****************************");
@@ -42,5 +43,6 @@ $(document).on("ready", function() {
  */
 $(document).on("load", function() {
 	$("#loading").hide();
+
 	console.log("window is loaded");
 });
diff --git a/project/templates/pages/map.html b/project/templates/pages/map.html
@@ -100,27 +100,29 @@ <h4>Head & Area</h4>
 
 								  <br>
 
-									<div class="form-group">
+									<div class="form-group has-feedback">
 										<label class="control-label col-sm-2" for="head-form-field">Head</label>
 										<div class="col-sm-3">
 											<input id="head-form-check" type="checkbox" data-on="Form&nbsp;" data-off="Map" class="switch params-head" data-toggle="toggle">
 										</div>
 										<div class="col-sm-7">
 											<div class="input-group">
 												<input disabled id="head-form-field" type="text" class="form-control params params-head" aria-describedby="head-form-units" placeholder="Sketch a microhydro installation on the map to derive this parameter">
+												<span id="gp-msg-head" class="gp-msg fa fa-2x fa-cog fa-spin fa-fw form-control-feedback"></span>
 												<span class="input-group-addon" id="head-form-units"><small>Meters</small></span>
 											</div>
 										</div>
 									</div>
 
-									<div class="form-group">
+									<div class="form-group has-feedback">
 										<label class="control-label col-sm-2" for="area-form-field">Area</label>
 										<div class="col-sm-3">
 											<input id="area-form-check" type="checkbox" data-on="Form&nbsp;" data-off="Map" class="switch params-area" data-toggle="toggle">
 										</div>			
 										<div class="col-sm-7">
 											<div class="input-group">
 												<input disabled id="area-form-field" type="text" class="form-control params params-area" aria-describedby="area-form-units" placeholder="Sketch a microhydro installation on the map to derive this parameter">
+												<span id="gp-msg-area" class="gp-msg fa fa-2x fa-cog fa-spin fa-fw form-control-feedback"></span>
 												<span class="input-group-addon" id="area-form-units"><small>Sq. Km.</small></span>
 											</div>
 										</div>