#821 - added icon indicator for server status (footer)

js/apps/system/aardvark/frontend/js/templates/footerView.ejs

@@ -11,6 +11,6 @@
 </div>
 
 <div class="footer-right">
-  <p><% if(n) { %>Server: <%=n%> <%=v%> <% } %></p>
+  <p><% if(n) { %><i class="isOnline fa fa-check-circle-o serverStatusIndicator"></i><a><%=n%> <%=v%> <% } %></a></i></p>
 </div>
 </script>

js/apps/system/aardvark/frontend/js/views/footerView.js

@@ -21,6 +21,19 @@
 
     template: templateEngine.createTemplate("footerView.ejs"),
 
+    showServerStatus: function(isOnline) {
+      if (isOnline === true) {
+        $('.serverStatusIndicator').addClass('isOnline');
+        $('.serverStatusIndicator').addClass('fa-check-circle-o');
+        $('.serverStatusIndicator').removeClass('fa-times-circle-o');
+      }
+      else {
+        $('.serverStatusIndicator').removeClass('isOnline');
+        $('.serverStatusIndicator').removeClass('fa-check-circle-o');
+        $('.serverStatusIndicator').addClass('fa-times-circle-o');
+      }
+    },
+
     getVersion: function () {
       var self = this;
 
@@ -33,12 +46,13 @@
         processData: false,
         async: true,
         success: function(data) {
+          self.showServerStatus(true);
           if (self.isOffline === true) {
             self.isOffline = false;
             self.isOfflineCounter = 0;
             if (!self.firstLogin) {
               window.setTimeout(function(){
-                //Heiko: notification for connected server
+                self.showServerStatus(true);
               }, 1000);
             } else {
               self.firstLogin = false;
@@ -51,8 +65,9 @@
         error: function (data) {
           self.isOffline = true;
           self.isOfflineCounter++;
-          if (self.isOfflineCounter >= 2) {
-            arangoHelper.arangoError("Server", "Server is offline");
+          if (self.isOfflineCounter >= 1) {
+            //arangoHelper.arangoError("Server", "Server is offline");
+            self.showServerStatus(false);
           }
         }
       });

js/apps/system/aardvark/frontend/scss/_footer.scss

@@ -42,4 +42,21 @@ div.footer-right {
     @extend %pull-right;
     color: $c-white;
   }
+
+  i {
+    color: $c-negative;
+    font-size: 18px;
+  }
+
+  a {
+    color: #fff;
+    margin-left: 5px;
+    position: relative;
+    top: -1px;
+  }
+
+  .isOnline {
+    color: $c-positive !important;
+  }
+
 }

js/apps/system/aardvark/frontend/scss/generated.css

@@ -21,37 +21,31 @@ textarea,
   font-style: normal;
   font-weight: 300;
   src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/opensans/OpenSansLight.woff") format("woff"); }
-
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans/OpenSans.woff") format("woff"); }
-
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
   src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/opensans/OpenSansBold.woff") format("woff"); }
-
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
   src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), url("../fonts/opensans/OpenSansLightItalic.woff") format("woff"); }
-
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
   src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/opensans/OpenSansItalic.woff") format("woff"); }
-
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
   src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans/OpenSansBoldItalic.woff") format("woff"); }
-
 /*!
  *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
@@ -64,7 +58,6 @@ textarea,
   src: url("../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }
-
 .fa {
   display: inline-block;
   font-family: FontAwesome;
@@ -140,35 +133,30 @@ textarea,
 
   100% {
     -moz-transform: rotate(359deg); } }
-
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg); }
 
   100% {
     -webkit-transform: rotate(359deg); } }
-
 @-o-keyframes spin {
   0% {
     -o-transform: rotate(0deg); }
 
   100% {
     -o-transform: rotate(359deg); } }
-
 @-ms-keyframes spin {
   0% {
     -ms-transform: rotate(0deg); }
 
   100% {
     -ms-transform: rotate(359deg); } }
-
 @keyframes spin {
   0% {
     transform: rotate(0deg); }
 
   100% {
     transform: rotate(359deg); } }
-
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
   -webkit-transform: rotate(90deg);
@@ -1456,7 +1444,7 @@ nav.navbar, footer.footer {
     background-color: #f87c0f; }
 
 .button-inactive {
-  background-color: lightgrey; }
+  background-color: lightgray; }
   .button-inactive:hover, .button-inactive:focus {
     background-color: gray; }
 
@@ -1659,6 +1647,16 @@ div.footer-right {
   width: 45%; }
   div.footer-right p {
     color: white; }
+  div.footer-right i {
+    color: #da4f49;
+    font-size: 16px; }
+  div.footer-right a {
+    color: #fff;
+    margin-left: 5px;
+    position: relative;
+    top: -1px; }
+  div.footer-right .isOnline {
+    color: #8aa051 !important; }
 
 .button-neutral, .button-primary, .button-notification, .button-success, .button-danger, .button-warning, .button-inactive, .button-close, .button-header {
   -moz-border-radius: 4px;
@@ -3246,7 +3244,7 @@ pre.gv-object-view {
     width: 5%; }
 
 .user-menu-img {
-  background-color: lightgrey;
+  background-color: lightgray;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;