Merge pull request #38 from franela/server-disconnected-alert

Show a server disconnected message

www/assets/app.js

@@ -10,6 +10,7 @@
 		$scope.selectedInstance = null;
         $scope.isAlive = true;
         $scope.ttl = '--:--:--';
+        $scope.connected = true;
 
       angular.element($window).bind('resize', function(){
         if ($scope.selectedInstance) {
@@ -123,6 +124,13 @@
                     });
                 });
 
+                socket.on('connect_error', function() {
+                    $scope.connected = false;
+                });
+                socket.on('connect', function() {
+                    $scope.connected = true;
+                });
+
                 $scope.socket = socket;
 
 				var i = response.data;

www/assets/style.css

@@ -42,3 +42,7 @@ md-card-content.terminal {
     margin-bottom: auto;
     margin-top: 50px;
 }
+
+.disconnected {
+    background-color: #FDF4B6;
+}

www/index.html

@@ -18,6 +18,10 @@
                 <div flex></div>
               </md-content>
             </section>
+            <section ng-if="!connected" class="disconnected" layout="row" layout-align="center center">
+                <h1 class="md-headline">No connection to server. Reconnecting...</h1>
+                <md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
+            </section>
             <section id="popupContainer" layout="row" flex ng-if="isAlive">
               <md-sidenav
                   class="md-sidenav-left"
@@ -43,7 +47,6 @@
                 </md-content>
 
               </md-sidenav>
-
               <md-content flex layout-padding ng-if="!instances.length">
                 <div layout="column" layout-align="top center">
                   <p>