css/style.css

@@ -196,6 +196,24 @@ p:first-child {
   margin-top: 40px;
   text-align: center;
 }
+#spinner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  z-index: 200;
+  transition: all ease-in-out 0.5s;
+}
+#spinner.ng-hide {
+  opacity: 0;
+}
+#spinner > img {
+  margin: auto;
+}
 .scrollLock {
   overflow: hidden;
 }

less/style.less

@@ -234,6 +234,27 @@ p:first-child{
 	}
 }
 
+#spinner{
+	position:absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	align-items: center;
+	text-align: center;
+	display: flex;
+	z-index: 200;
+	transition: all ease-in-out 0.5s;
+
+	&.ng-hide{
+		opacity: 0;
+	}
+	
+	>img{
+		margin: auto;
+	}
+}
+
 .scrollLock{
 	overflow:hidden;
 }

scripts/controllers/main.js

@@ -41,23 +41,61 @@ var app = angular.module("robware", ['ngAnimate'], function($httpProvider) {
 		return query.length ? query.substr(0, query.length - 1) : query;
 	};
 	// Override $http service's default transformRequest
-	$httpProvider.defaults.transformRequest = [function(data) {
-		return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
-	}];
+	$httpProvider.defaults.transformRequest = [
+		function(data) {
+			return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
+		}
+	];
+
+	$httpProvider.interceptors.push([
+		'$rootScope',
+		'$q',
+		function($rootScope, $q) {
+			return {
+				request: function(config) {
+					if (!config.dontShowSpinner)
+						$rootScope.showSpinner();
+					return config;
+				},
+				requestError: function(rejection) {
+					$rootScope.hideSpinner();
+					return $q.reject(rejection);
+				},
+				response: function(response) {
+					$rootScope.hideSpinner();
+					return response;
+				},
+				responseError: function(rejection) {
+					$rootScope.hideSpinner();
+					return $q.reject(rejection);
+				}
+			};
+		}
+	]);
 });
 
-app.controller("main", function($scope) {
-	var largeWindowBoundary = 1023;
+app.controller("main", ['$scope', '$rootScope', function($scope, $rootScope) {
+		var largeWindowBoundary = 1023;
 
-	$scope.menuVisible = false;//window.innerWidth > largeWindowBoundary;
+		$scope.menuVisible = false;//window.innerWidth > largeWindowBoundary;
 
-	$scope.shouldShowMenu = function() {
-		return $scope.menuVisible || window.innerWidth > largeWindowBoundary;
-	};
+		$scope.shouldShowMenu = function() {
+			return $scope.menuVisible || window.innerWidth > largeWindowBoundary;
+		};
+
+		$scope.spinnerVisible = false;
+
+		$rootScope.showSpinner = function() {
+			$scope.spinnerVisible = true;
+		};
+
+		$rootScope.hideSpinner = function() {
+			$scope.spinnerVisible = false;
+		};
 
-	$(window).on("resize.doResize", function() {
-		$scope.$apply(function() {
-			//$scope.menuVisible = false;
+		$(window).on("resize.doResize", function() {
+			$scope.$apply(function() {
+				//$scope.menuVisible = false;
+			});
 		});
-	});
-});
+	}]);

scripts/services/statusService.js

@@ -40,20 +40,20 @@ app.service('statusService', function($http) {
 	}
 	
 	this.getProcesses = function() {
-		return $http.get('/status/getprocesses').then(function(response) {
+		return $http.get('/status/getprocesses', {dontShowSpinner:true}).then(function(response) {
 			parsedData = parseProcessData(response.data);
 			return {headers: parsedData[0], data: parsedData[1]};
 		});
 	};
 	
 	this.getSystemInfo=function(){
-		return $http.get('/status/getsysteminfo').then(function(response){
+		return $http.get('/status/getsysteminfo', {dontShowSpinner:true}).then(function(response){
 			return response.data;
 		});
 	};
 	
 	this.getUptime=function(){
-		return $http.get('/status/getuptime').then(function(response){
+		return $http.get('/status/getuptime', {dontShowSpinner:true}).then(function(response){
 			return response.data;
 		})
 	};

scripts/services/temperatureService.js

@@ -1,12 +1,12 @@
 app.service('temperatureService', function($http) {
 	this.getReadings = function() {
-		return $http.get('/temperature/getreadings').then(function(response) {
+		return $http.get('/temperature/getreadings', {dontShowSpinner:true}).then(function(response) {
 			return response.data;
 		});
 	};
 
 	this.getCurrentTemperatureData = function() {
-		return $http.get("/temperature/GetTemperatureData").then(function(response) {
+		return $http.get("/temperature/GetTemperatureData", {dontShowSpinner:true}).then(function(response) {
 			return response.data;
 		});
 	}

scripts/services/weightService.js

@@ -3,7 +3,7 @@ app.service('weightService', function($http) {
 		return $http({
 			method:'post',
 			url:'/weight/add',
-			data:{weight:weight, fat:fat},
+			data:{weight:weight, fat:fat}
 		}).then(function(response){
 			return response.data;
 		});
@@ -12,7 +12,7 @@ app.service('weightService', function($http) {
 		return $http({
 			method:'post',
 			url:'/weight/delete',
-			data:{id:id},
+			data:{id:id}
 		}).then(function(response){
 			return response.data;
 		});

template.php

@@ -49,7 +49,7 @@ function FormatURI(URI $uri, $base=""){
 		<style media="(max-width:680px)">
 			{@CSSSmall}
 		</style>
-		<script src="//<?=$angularSource?>/<?=$angularVersion?>/angular.min.js" defer></script>
+		<script src="//<?=$angularSource?>/<?=$angularVersion?>/angular.js" defer></script>
 		<script src="//<?=$angularSource?>/<?=$angularVersion?>/angular-animate.min.js" defer></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" defer></script>
@@ -65,7 +65,7 @@ function FormatURI(URI $uri, $base=""){
 			{@JavaScript}
 		</script>
 	</head>
-	<body ng-controller="main" ng-class="{scrollLock: menuVisible && window.innerWidth < 1024}">
+	<body ng-controller="main" ng-class="{scrollLock: (menuVisible && window.innerWidth < 1024) || spinnerVisible}">
 		<div id="main-header">
 			<div class="header">
 				<img src="/images/menu.svg" id="menu-button" ng-click="menuVisible=!menuVisible" /><?php // using php tags to remove HTML space but to keep source tidy
@@ -136,6 +136,9 @@ function FormatURI(URI $uri, $base=""){
 			</div>
 			<div id="footer">{@Footer}</div>
 		</div>
-		<div class="backdrop" ng-show="shouldShowMenu()" ng-click="menuVisible=false"></div>
+		<div class="backdrop" ng-show="shouldShowMenu() || spinnerVisible" ng-click="menuVisible=false"></div>
+		<div id="spinner" ng-show="spinnerVisible">
+			<img src="/images/spinner.svg" />
+		</div>
 	</body>
 </html>