climate-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jo...@apache.org
Subject svn commit: r1482548 - in /incubator/climate/trunk/rcmet/src/main/ui/app: js/controllers.js partials/selectObservation.html
Date Tue, 14 May 2013 20:07:59 GMT
Author: joyce
Date: Tue May 14 20:07:59 2013
New Revision: 1482548

URL: http://svn.apache.org/r1482548
Log:
Resolves CLIMATE-15. Provide confirmation of local file load.

- "Load File" button now toggles between text and spinning-loading-wheel
  state to signify loading to the user.
- Changes the request layout in ObservationSelectCtrl.uploadLocalFile to
  use promises. This reduces the total amount of code and allows us to
  toggle the loading state easier.
- Adds a disabled function for the "Load File" button which prevents the
  user from submitting a file multiple time in a row.

Modified:
    incubator/climate/trunk/rcmet/src/main/ui/app/js/controllers.js
    incubator/climate/trunk/rcmet/src/main/ui/app/partials/selectObservation.html

Modified: incubator/climate/trunk/rcmet/src/main/ui/app/js/controllers.js
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/js/controllers.js?rev=1482548&r1=1482547&r2=1482548&view=diff
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/js/controllers.js (original)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/js/controllers.js Tue May 14 20:07:59 2013
@@ -310,7 +310,7 @@ function DatasetDisplayCtrl($rootScope, 
 }
 
 // Controller for observation selection in modal
-function ObservationSelectCtrl($rootScope, $scope, $http, selectedDatasetInformation) {
+function ObservationSelectCtrl($rootScope, $scope, $http, $q, selectedDatasetInformation)
{
 	// Initalize the option arrays and default to the first element
 	$scope.params      = ["Please select a file above"];
 	$scope.paramSelect = $scope.params[0];
@@ -328,12 +328,16 @@ function ObservationSelectCtrl($rootScop
 			$scope.pathLeader = data.leader;
 	});
 
-	// TODO: We could probably completely remove these variables...
+	// Toggle load button view depending on upload state of selected files
+	$scope.loadingFile = false;
+
 	$scope.latLonVals = [];
 	$scope.timeVals = [];
 	$scope.localSelectForm = {};
 
 	$scope.uploadLocalFile = function() {
+		$scope.loadingFile = true;
+
 		// TODO: Need to try to validate the input a bit. At least make sure we're not
 		// pointing at a directory perhaps?
 		
@@ -352,69 +356,49 @@ function ObservationSelectCtrl($rootScop
 		// Should check for fails and allow the user to make changes.
 		//
 		// Get model variables
-		$http.jsonp('http://localhost:8082/list/vars/"' + input + '"?callback=JSON_CALLBACK').
-			success(function(data) {
-				if ("FAIL" in data) {
-					$scope.params = ["Unable to find variable(s)"];
-				} else {
-					$scope.params = data['variables'];
-				}
-
-				// Select the first element so the display isn't empty
-				$scope.paramSelect = $scope.params[0];
-			}).
-			error(function(data) {
-				$scope.params = ["Unable to find variable(s)"];
-				$scope.paramSelect = $scope.params[0];
-			});		
-
+		var varsPromise = $http.jsonp('http://localhost:8082/list/vars/"' + input + '"?callback=JSON_CALLBACK');
 		// Get Lat and Lon variables
-		$http.jsonp('http://localhost:8082/list/latlon/"' + input + '"?callback=JSON_CALLBACK').
-			success(function(data) {
-				if (data["success"] == 0) {
-					$scope.lats = ["Unable to find variable(s)"];
-					$scope.lons = ["Unable to find variable(s)"];
-				} else {
-					$scope.lats = [data["latname"]];
-					$scope.lons = [data["lonname"]];
-
-					var tmpMinsMaxs = [data["latMin"], data["latMax"], data["lonMin"], data["lonMax"]];
-					$scope.latLonVals = tmpMinsMaxs.map(parseFloat);
-				}
-
-				// Select the first element so the displays aren't empty
-				$scope.latsSelect = $scope.lats[0];
-				$scope.lonsSelect = $scope.lons[0];
-			}).
-			error(function(data) {
-				$scope.lats = ["Unable to find variable(s)"];
-				$scope.lons = ["Unable to find variable(s)"];
-				$scope.latsSelect = $scope.lats[0];
-				$scope.lonsSelect = $scope.lons[0];
-			});		
-
+		var latlonPromise = $http.jsonp('http://localhost:8082/list/latlon/"' + input + '"?callback=JSON_CALLBACK');
 		// Get Time variables
-		$http.jsonp('http://localhost:8082/list/time/"' + input + '"?callback=JSON_CALLBACK').
-			success(function(data) {
-				if (data["success"] == 0) {
-					$scope.times = ["Unable to find variable(s)"];
-				} else {
-					if (data["timename"] instanceof Array) {
-						$scope.times = data["timename"];
-					} else {
-						$scope.times = [data["timename"]];
-					}
+		var timesPromise = $http.jsonp('http://localhost:8082/list/time/"' + input + '"?callback=JSON_CALLBACK');
 
-					$scope.timeVals = [data["start_time"], data["end_time"]];
+			$q.all([varsPromise, latlonPromise, timesPromise]).then(
+				// Handle success fetches!
+				function(arrayOfResults) {
+					$scope.loadingFile = false;
+
+					// Handle parameter results
+					var data = arrayOfResults[0].data.variables;
+					$scope.params = (data instanceof Array) ? data : [data];
+					$scope.paramSelect = $scope.params[0];
+
+					// Handle lat/lon results
+					var data = arrayOfResults[1].data;
+					$scope.lats = [data.latname];
+					$scope.lons = [data.lonname];
+					$scope.latLonVals = [data.latMin, data.latMax, data.lonMin, data.lonMax];
+					$scope.latsSelect = $scope.lats[0];
+					$scope.lonsSelect = $scope.lons[0];
+
+					// Handle time results
+					var data = arrayOfResults[2].data
+					$scope.times = [data.timename];
+					$scope.timeSelect = $scope.times[0];
+				},
+				// Uh oh! AT LEAST on of our fetches failed
+				function(arrayOfFailure) {
+					$scope.loadingFile = false;
+
+					$scope.params      = ["Unable to load variable(s)"];
+					$scope.paramSelect = $scope.params[0];
+					$scope.lats        = ["Unable to load variable(s)"];
+					$scope.latsSelect  = $scope.lats[0];
+					$scope.lons        = ["Unable to load variable(s)"];
+					$scope.lonsSelect  = $scope.lons[0];
+					$scope.times       = ["Unable to load variable(s)"];
+					$scope.timeSelect  = $scope.times[0];
 				}
-
-				// Select the first element so the display isn't empty
-				$scope.timeSelect = $scope.times[0];
-			}).
-			error(function(data) {
-				$scope.times = ["Unable to find variable(s)"];
-				$scope.timeSelect = $scope.times[0];
-			});		
+			);
 	};
 
 	$scope.addDataSet = function() {
@@ -466,6 +450,10 @@ function ObservationSelectCtrl($rootScop
 		// Clear the input box
 		$('#observationFileInput').val("");
 	}
+
+	$scope.shouldDisableLoadButton = function() {
+		return $scope.loadingFile;
+	}
 }
 
 function RcmedSelectionCtrl($rootScope, $scope, $http, selectedDatasetInformation) {

Modified: incubator/climate/trunk/rcmet/src/main/ui/app/partials/selectObservation.html
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/partials/selectObservation.html?rev=1482548&r1=1482547&r2=1482548&view=diff
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/partials/selectObservation.html (original)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/partials/selectObservation.html Tue May
14 20:07:59 2013
@@ -6,7 +6,10 @@
 
 <form class="form-inline" autocomplete="off">
 	<input id="observationFileInput" predictive-file-browser-input ng-model="filePathInput"
type="text" class="input-xlarge" autocomplete="off" />
-	<button class="btn" ng-click="uploadLocalFile()">Upload File</button>
+	<button class="btn" ng-click="uploadLocalFile()" ng-disabled="shouldDisableLoadButton()">
+    <div ng-hide="loadingFile">Load File</div>
+    <div ng-show="loadingFile"><i class="icon-spinner icon-spin"></i></div>
+  </button>
 </form>
 
 <div class="row">



Mime
View raw message