From 50943ce516b74ef96fecafec00de61dd95991452 Mon Sep 17 00:00:00 2001
From: "Jonathan Leibiusky @xetorthio" <ionathan@gmail.com>
Date: Tue, 15 Nov 2016 17:48:21 -0300
Subject: [PATCH] Show a server disconnected message when user is not able to
 connect to server.

---
 www/assets/app.js    | 8 ++++++++
 www/assets/style.css | 4 ++++
 www/index.html       | 5 ++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/www/assets/app.js b/www/assets/app.js
index 57e6e6e..8592672 100644
--- a/www/assets/app.js
+++ b/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;
diff --git a/www/assets/style.css b/www/assets/style.css
index 388c256..11a12aa 100644
--- a/www/assets/style.css
+++ b/www/assets/style.css
@@ -42,3 +42,7 @@ md-card-content.terminal {
     margin-bottom: auto;
     margin-top: 50px;
 }
+
+.disconnected {
+    background-color: #FDF4B6;
+}
diff --git a/www/index.html b/www/index.html
index 9e62218..5af9f25 100644
--- a/www/index.html
+++ b/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>