bug fixes and added an error screen if no internet connection present

css/app.css

@@ -8,6 +8,10 @@ ul {
   margin: 0;
   padding: 0;
 }
+img {
+  max-width: 100%;
+}
+
 .titlebar {
   -webkit-user-select: none;
   -webkit-app-region: drag;
@@ -20,12 +24,21 @@ ul {
     float: right;
     line-height: 0;
   }
+
 button {
   -webkit-app-region: no-drag;
+  background-color: #000000;
+  color: #fff;
+  border: 1px solid #252525;
+  padding: 5px 10px;
+  margin: -1px 0px 0px 0px;
+  font-family: 'Inconsolata', monospace;
+}
+  header button {
     background: none;
     border: none;
     outline: none;
-}
+  }
 
 #close-btn,
 #min-btn {
@@ -406,3 +419,19 @@ ul {
       color: white;
       pointer-events: none;
     }
+
+/*Offline*/
+.error {
+  text-align: center;
+}
+  .error h2,
+  .error h4 {
+    font-family: Arial,Helvetica,sans-serif;
+  }
+  .error button.refresh {
+    cursor: pointer;
+    background: #41BB2E;
+    border: none;
+    color: #000;
+    font-weight: bold;
+  }

js/app_common.js

@@ -27,7 +27,7 @@ settings.set('developer', {
   }
 
 (function() {
-
+  // Settings - list of coins
   function loadJSON(callback) {   
     var file = 'https://www.cryptocompare.com/api/data/coinlist/';
     var xobj = new XMLHttpRequest();
@@ -189,12 +189,31 @@ function initData() {
           }); //sortable
 
         }); //response.json
+        updateData();
       } //function(response)
     ) //.then
     .catch(function(err) {  
-      console.log('Fetch Error :-S', err);  
+      console.log('Unable to connect!');
+
+
+      // Parse JSON string into object
+      var mainDiv = document.getElementById("main");
+
+      var errorDiv = document.createElement('div');
+
+      errorDiv.className = 'error';
+
+      errorDiv.innerHTML = '<h2>Uh-oh! Looks like you&#39;re offline.</h2>\
+                            <img src="images/offline_doge.jpg" />\
+                            <h4>Reconnect, then reload the app.</h4>\
+                            <button type="button" class="refresh" onClick="location.reload(false);" >Reload</button>';
+
+       document.getElementById('main').appendChild(errorDiv);
+      
+        
+
     });
-    updateData();
+    
 }
 
 function updateData() {
@@ -268,6 +287,10 @@ function updateData() {
               //console.log(coinDISPLAY);
               let li = document.getElementById("coin-"+[key]),
                   span = document.querySelector("#coin-"+[key]+" span");
+              //when adding a new coin, default sortorder to 999
+              if( li.getAttribute('sortorder')=="undefined" ) {
+                li.setAttribute("sortorder", 999);
+              }
               span.setAttribute("class", "draggable");
               
               let coinSymbol  = coinRAW[base].FROMSYMBOL;
@@ -303,6 +326,16 @@ function updateData() {
                 change.classList.remove("negative");
               }
 
+              // Apply Sorting
+              sortChildren(
+                  document.getElementById('prices'),
+                  function(li) { return +li.getAttribute('sortorder') }
+              );
+              sortChildren(
+                  document.getElementById('portfolio-list'),
+                  function(li) { return +li.getAttribute('sortorder') }
+              );
+
               // Portfolio
               let quantityValue   = document.querySelector("#coin-"+[key]+" .quantity-value");
               let quantityNumber  = settings.get('quantity.'+[key]);