From e36fca383a648488f0a4dee3f3d9eac5e23ad2af Mon Sep 17 00:00:00 2001
From: Andy Nogueira <andy.nogueira@outlook.com>
Date: Fri, 17 Feb 2017 18:11:20 -0500
Subject: [PATCH] Implemented logic to detect if IPFS node is running or not
 and display online/offline status and error message in the demo app
 boilerplate

---
 demo/app/index.html  | 11 ++++++-----
 demo/app/js/index.js | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/demo/app/index.html b/demo/app/index.html
index 6544e05d1..9dcde0444 100644
--- a/demo/app/index.html
+++ b/demo/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="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (whisper/orbit)<span class="pull-right" id="status-communication"></span></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)<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,10 +73,10 @@
         <div class="logs">
           <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
         </div>
-
+      </div>
       </div>
       <div role="tabpanel" class="tab-pane" id="communication">
-        <div class="error alert alert-danger" role="alert">The node you are using does not support whisper</div>
+        <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">
diff --git a/demo/app/js/index.js b/demo/app/js/index.js
index 60147b1b1..c430bbf91 100644
--- a/demo/app/js/index.js
+++ b/demo/app/js/index.js
@@ -30,6 +30,21 @@ $(document).ready(function() {
 $(document).ready(function() {
   EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
 
+  $("#storage .error").hide();
+  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();
+      }
+  });
+
   $("#storage button.setIpfsText").click(function() {
     var value = $("#storage input.ipfsText").val();
     EmbarkJS.Storage.saveText(value).then(function(hash) {