Add status indicators in the footer on the home page

Author: salbahra

src/js/app.js

@@ -40,6 +40,9 @@ angular.module( "opengarage", [ "ionic", "opengarage.controllers", "opengarage.u
 		    }, 500 );
 		} );
 
+		// Define connected state of current controller
+		$rootScope.connected = false;
+
 		// Define version, build number and debug state
 		$rootScope.version = window.appVersion;
 
@@ -53,7 +56,7 @@ angular.module( "opengarage", [ "ionic", "opengarage.controllers", "opengarage.u
 		$rootScope.$on( "loading:show", function( e, data ) {
 
 			$rootScope.loadingCount++;
-			$rootScope.canceller = data.canceller.resolve;
+			$rootScope.canceller = data ? data.canceller.resolve : angular.noop;
 			$ionicLoading.show( {
 				template: "<ion-spinner></ion-spinner><br>One moment please<br><button class='button white icon-left ion-ios-close-outline button-clear' ng-click='$root.canceller()'>Cancel</button>"
 			} );
@@ -99,6 +102,8 @@ angular.module( "opengarage", [ "ionic", "opengarage.controllers", "opengarage.u
 
 					// If a user object is cached, proceed to load the app while updating user object in the background
 					$state.go( "app.home" );
+
+					Utils.updateController();
 		        } else {
 					$state.go( "app.controllerSelect" );
 		        }
@@ -164,6 +169,7 @@ angular.module( "opengarage", [ "ionic", "opengarage.controllers", "opengarage.u
 
 						if ( !$rootScope.activeController && total === 1 ) {
 							$rootScope.activeController = $rootScope.controllers[ 0 ];
+							Utils.updateController();
 							Utils.storage.set( { activeController: JSON.stringify( $rootScope.activeController ) } );
 							return;
 						}

src/js/controllers.js

@@ -9,6 +9,8 @@ angular.module( "opengarage.controllers", [ "opengarage.utils" ] )
 
 		$scope.setController = function( index ) {
 			$rootScope.activeController = $rootScope.controllers[ index ];
+			$rootScope.connected = false;
+			Utils.updateController();
 			Utils.storage.set( { activeController: JSON.stringify( $rootScope.activeController ) } );
 
 			$ionicHistory.nextViewOptions( {

src/js/utils.js

@@ -144,6 +144,8 @@ angular.module( "opengarage.utils", [] )
 						$rootScope.controllers.splice( index, 0, controller );
 						$rootScope.activeController = controller;
 
+						$rootScope.connected = true;
+
 						$rootScope.$broadcast( "controllerUpdated" );
 
 						storage.set( { "controllers": JSON.stringify( $rootScope.controllers ), "activeController": JSON.stringify( $rootScope.activeController ) } );

src/scss/ionic.app.scss

@@ -84,6 +84,12 @@ textarea {
   display: block
 }
 
+.round-button {
+  border-radius: 100px;
+  height: 31px;
+  width: 31px;
+}
+
 .history {
   table {
     font-size:12px;

www/cache.manifest

@@ -29,4 +29,4 @@ index.html
 NETWORK:
 *
 
-# hash: bfb07b911187da1769e582a6d854f3b05ec17f57a3bef76fe4d7a1b40596f646
+# hash: 3b7a82b4ad90826531faad542d50a9428f1d27f2c3190b1e515e580da19c8772

www/css/ionic.app.min.css

@@ -2026,6 +2026,7 @@ to{transform:scale(1);opacity:1}
 .ui-disabled{opacity:.3;zoom:1;cursor:default!important;pointer-events:none}
 .white{color:#fff!important}
 .door-button{background-color:#444;color:#fff;border-radius:100px;font-size:3em;font-weight:100;height:200px;line-height:200px;margin:auto;position:relative;text-align:center;width:200px;display:block}
+.round-button{border-radius:100px;height:31px;width:31px}
 .history table{font-size:12px;background:#eaebec;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 2px #d1d1d1;width:80%;margin:0 auto}
 .history table th{padding:21px 25px 22px;border-top:1px solid #fafafa;border-bottom:1px solid #e0e0e0;background:#ededed;background:linear-gradient(#ededed,#ebebeb)}
 .history table th:first-child{text-align:left;padding-left:20px}

www/js/app.min.js

@@ -1,5 +1,11 @@
 <ion-view view-title="{{$root.activeController.name}}">
-	<ion-content has-bouncing="false" class="vertical-center">
-		<button class="door-button" ng-click="toggleDoor()"">{{ $root.activeController.door ? "Close" : "Open" }}</button>
+	<ion-content has-bouncing="false" class="vertical-center has-footer">
+		<button class="door-button" ng-click="toggleDoor()">{{ $root.activeController.door ? "Close" : "Open" }}</button>
 	</ion-content>
+	<ion-footer-bar class="bar bar-footer center">
+		<button class="button round-button" ng-class="{'button-assertive': !$root.connected, 'button-balanced': $root.connected}"></button>
+		<h5 class="padding-left padding-right">{{ $root.connected ? "connected" : "disconnected" }}</h5>
+		<button class="button round-button" ng-class="{'button-assertive': !$root.activeController.door, 'button-balanced': $root.activeController.door}"></button>
+		<h5 class="padding-left">{{ $root.activeController.door ? "opened" : "closed" }}</h5>
+	</ion-footer-bar>
 </ion-view>