update demo and test app; warn about whisper version

demo/app/js/index.js

@@ -114,11 +114,15 @@ $(document).ready(function() {
 $(document).ready(function() {
 
   $("#communication .error").hide();
-  web3.version.getWhisper(function(err, res) {
+  web3.version.getWhisper(function(err, version) {
     if (err) {
       $("#communication .error").show();
       $("#communication-controls").hide();
       $("#status-communication").addClass('status-offline');
+    } else if (version >= 5) {
+      $("#communication .errorVersion").show();
+      $("#communication-controls").hide();
+      $("#status-communication").addClass('status-offline');
     } else {
       EmbarkJS.Messages.setProvider('whisper');
       $("#status-communication").addClass('status-online');

test_app/app/css/main.css

@@ -24,3 +24,27 @@ 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;
+}
+

test_app/app/index.html

@@ -9,8 +9,8 @@
 
     <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="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></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">
@@ -37,7 +37,8 @@
         </div>
       </div>
       <div role="tabpanel" class="tab-pane" id="storage">
-        note: You need to have an IPFS node running
+        <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
+        <div id="storage-controls">
 
         <h3>Save text to IPFS</h3>
         <div class="form-group form-inline">
@@ -72,11 +73,12 @@
         <div class="logs">
           <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
         </div>
-
+      </div>
       </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 class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of 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 +99,7 @@
         <div class="logs">
           <br> EmbarkJS.Messages.setProvider('whisper')
         </div>
-
+      </div>
       </div>
     </div>
 

test_app/app/js/index.js

@@ -28,23 +28,59 @@ $(document).ready(function() {
 // Storage (IPFS) example
 // ===========================
 $(document).ready(function() {
+  // automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
   //EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
 
+  $("#storage .error").hide();
+  EmbarkJS.Storage.setProvider('ipfs')
+    .then(function(){
+      console.log('Provider set to IPFS');
+      EmbarkJS.Storage.ipfsConnection.ping()
+        .then(function(){
+            $("#status-storage").addClass('status-online');
+            $("#storage-controls").show();
+        })
+        .catch(function(err) {
+          if(err){
+            console.log("IPFS Connection Error => " + err.message);
+            $("#storage .error").show();
+            $("#status-storage").addClass('status-offline');
+            $("#storage-controls").hide();
+          }
+        });
+    })
+    .catch(function(err){
+      console.log('Failed to set IPFS as Provider:', err.message);
+      $("#storage .error").show();
+      $("#status-storage").addClass('status-offline');
+      $("#storage-controls").hide();
+    });
+
   $("#storage button.setIpfsText").click(function() {
     var value = $("#storage input.ipfsText").val();
     EmbarkJS.Storage.saveText(value).then(function(hash) {
       $("span.textHash").html(hash);
       $("input.textHash").val(hash);
+      addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
+    })
+    .catch(function(err) {
+      if(err){
+        console.log("IPFS saveText Error => " + err.message);
+      }
     });
-    addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
   });
 
   $("#storage button.loadIpfsHash").click(function() {
     var value = $("#storage input.textHash").val();
     EmbarkJS.Storage.get(value).then(function(content) {
       $("span.ipfsText").html(content);
+      addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
+    })
+    .catch(function(err) {
+      if(err){
+        console.log("IPFS get Error => " + err.message);
+      }
     });
-    addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
   });
 
   $("#storage button.uploadFile").click(function() {
@@ -52,8 +88,13 @@ $(document).ready(function() {
     EmbarkJS.Storage.uploadFile(input).then(function(hash) {
       $("span.fileIpfsHash").html(hash);
       $("input.fileIpfsHash").val(hash);
+      addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
+    })
+    .catch(function(err) {
+      if(err){
+        console.log("IPFS uploadFile Error => " + err.message);
+      }
     });
-    addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
   });
 
   $("#storage button.loadIpfsFile").click(function() {
@@ -73,13 +114,21 @@ $(document).ready(function() {
 $(document).ready(function() {
 
   $("#communication .error").hide();
-  //web3.version.getWhisper(function(err, res) {
+  $("#communication .errorVersion").hide();
-  //  if (err) {
+  web3.version.getWhisper(function(err, version) {
-  //    $("#communication .error").show();
+    if (err) {
-  //  } else {
+      $("#communication .error").show();
-  //    EmbarkJS.Messages.setProvider('whisper');
+      $("#communication-controls").hide();
-  //  }
+      $("#status-communication").addClass('status-offline');
-  //});
+    } else if (version >= 5) {
+      $("#communication .errorVersion").show();
+      $("#communication-controls").hide();
+      $("#status-communication").addClass('status-offline');
+    } else {
+      EmbarkJS.Messages.setProvider('whisper');
+      $("#status-communication").addClass('status-online');
+    }
+  });
 
   $("#communication button.listenToChannel").click(function() {
     var channel = $("#communication .listen input.channel").val();
@@ -98,4 +147,3 @@ $(document).ready(function() {
   });
 
 });
-