From 7d63604ac4f444a67a5d2d1ae59b3b1cd1246dee Mon Sep 17 00:00:00 2001
From: Andy Nogueira <andy.nogueira@outlook.com>
Date: Thu, 16 Feb 2017 15:52:03 -0500
Subject: [PATCH] Added logic to demo app to display a offline/online status
 connection on the Whisper tab and hide controls if offline

---
 demo/app/css/main.css | 23 +++++++++++++++++++++++
 demo/app/index.html   |  8 ++++----
 demo/app/js/index.js  |  4 +++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/demo/app/css/main.css b/demo/app/css/main.css
index abfcd67f5..e0043e37b 100644
--- a/demo/app/css/main.css
+++ b/demo/app/css/main.css
@@ -24,3 +24,26 @@ div {
   margin-bottom: 0;
 }
 
+.status-offline {
+  vertical-align: middle;
+  margin-left: 5px;
+  margin-top: 4px;
+  width: 12px;
+  height: 12px;
+  background: red;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.status-online {
+  vertical-align: middle;
+  margin-left: 5px;
+  margin-top: 4px;
+  width: 12px;
+  height: 12px;
+  background: mediumseagreen;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
diff --git a/demo/app/index.html b/demo/app/index.html
index 417f60960..6544e05d1 100644
--- a/demo/app/index.html
+++ b/demo/app/index.html
@@ -10,7 +10,7 @@
     <ul class="nav nav-tabs" role="tablist" id="myTabs">
       <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
       <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)</a></li>
-      <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (whisper/orbit)</a></li>
+      <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (whisper/orbit)<span class="pull-right" id="status-communication"></span></a></li>
     </ul>
 
     <div class="tab-content">
@@ -75,8 +75,8 @@
 
       </div>
       <div role="tabpanel" class="tab-pane" id="communication">
-        <span class="error">The node you are using does not support whisper</span>
-
+        <div class="error alert alert-danger" role="alert">The node you are using does not support whisper</div>
+        <div id="communication-controls">
         <h3>Listen To channel</h3>
         <div class="form-group form-inline listen">
           <input type="text" class="channel text form-control" placeholder="channel">
@@ -97,7 +97,7 @@
         <div class="logs">
           <br> EmbarkJS.Messages.setProvider('whisper')
         </div>
-
+      </div>
       </div>
     </div>
 
diff --git a/demo/app/js/index.js b/demo/app/js/index.js
index e5a1ebe6b..60147b1b1 100644
--- a/demo/app/js/index.js
+++ b/demo/app/js/index.js
@@ -76,8 +76,11 @@ $(document).ready(function() {
   web3.version.getWhisper(function(err, res) {
     if (err) {
       $("#communication .error").show();
+      $("#communication-controls").hide();
++     $("#status-communication").addClass('status-offline');
     } else {
       EmbarkJS.Messages.setProvider('whisper');
+      $("#status-communication").addClass('status-online');
     }
   });
 
@@ -98,4 +101,3 @@ $(document).ready(function() {
   });
 
 });
-