UI updates - new icons

css/app.css

@@ -1,17 +1,62 @@
+/*Fonts*/
+@font-face {
+    font-family: 'heeboregular';
+    src: url('../fonts/heebo-regular-webfont.woff2') format('woff2'),
+         url('../fonts/heebo-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'heebothin';
+    src: url('../fonts/heebo-thin-webfont.woff2') format('woff2'),
+         url('../fonts/heebo-thin-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'inconsolataregular';
+    src: url('../fonts/inconsolata-regular-webfont.woff2') format('woff2'),
+         url('../fonts/inconsolata-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body,
+button,
+#myInput,
+#saveCoins,
+#saveQuantities {
+  font-family: 'inconsolataregular', monospace;
+}
+.coin-list li .sym {
+  font-family: 'heeboregular', sans-serif;
+}
+
+
 body {
   background: rgba(0, 0, 0, 0.95);
-  font-family: 'Inconsolata', monospace;
   color: #fff;
-  margin-top: 5px;
+  margin-top: 35px;
 }
 ul {
   margin: 0;
   padding: 0;
 }
+img {
+  max-width: 100%;
+}
+
 .titlebar {
   -webkit-user-select: none;
   -webkit-app-region: drag;
   opacity: 0;
+  position: fixed;
+  width: 94%;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.95);
+  top: 0;
+  left: 0;
+  padding: 8px 3% 3px;
 }
   .titlebar:hover {
     opacity: 1;
@@ -20,12 +65,20 @@ ul {
     float: right;
     line-height: 0;
   }
+
 button {
   -webkit-app-region: no-drag;
-  background: none;
-  border: none;
-  outline: none;
+  background-color: #000000;
+  color: #fff;
+  border: 1px solid #252525;
+  padding: 5px 10px;
+  margin: -1px 0px 0px 0px;
 }
+  header button {
+    background: none;
+    border: none;
+    outline: none;
+  }
 
 #close-btn,
 #min-btn {
@@ -37,6 +90,11 @@ button {
   -webkit-border-radius: 50px;
   border-radius: 50px;
   padding: 0;
+  -webkit-transition: all 150ms ease;
+  -moz-transition: all 150ms ease;
+  -ms-transition: all 150ms ease;
+  -o-transition: all 150ms ease;
+  transition: all 150ms ease;
 }
 #close-btn {
   border-color: #ff2626;
@@ -57,10 +115,17 @@ button {
 .tabs button,
 .tabs button.active {
   display: inline-block;
+  vertical-align: top;
 }
 .tabs button img {
-  width: 19px;
+  width: 16px;
+  height: 16px;
   opacity: 0.5;
+  -webkit-transition: all 150ms ease;
+  -moz-transition: all 150ms ease;
+  -ms-transition: all 150ms ease;
+  -o-transition: all 150ms ease;
+  transition: all 150ms ease;
 }
   .tabs button:hover img,
   .tabs button.active img {
@@ -133,11 +198,18 @@ ul {
         border: 1px solid #252525;
         border-left-width: 2px;
         padding: 0px 5px 0px;
-        font-family: 'Heebo', sans-serif;
         font-size: 12px;
       }
         .coin-list li .sym:hover {
           cursor: -webkit-grab;
+          border-top-color: #4c4c4c;
+          border-right-color: #4c4c4c;
+          border-bottom-color: #4c4c4c;
+          -webkit-transition: all 250ms ease;
+          -moz-transition: all 250ms ease;
+          -ms-transition: all 250ms ease;
+          -o-transition: all 250ms ease;
+          transition: all 250ms ease;
         }
         /*Symbol Colors*/
         .coin-list li#coin-BTC .sym {
@@ -200,7 +272,7 @@ ul {
         }
       .coin-list li .change {
         padding: 2px 3px 2px;
-        font-size: 12px;
+        font-size: 14px;
         float: right;
         margin: 10px 0px 0px;
         background: #000;
@@ -224,7 +296,6 @@ ul {
       margin-top: 5px;
     }
     #myInput {
-      font-family: 'Inconsolata', monospace;
       border: none;
       padding: 0px 0px 10px;
       font-size: 14px;
@@ -242,7 +313,6 @@ ul {
       border: 1px solid #252525;
       padding: 5px 10px;
       margin: -1px 0px 0px 0px;
-      font-family: 'Inconsolata', monospace;
     }
     #coinlist {
       margin: 15px 0px 0px 0px;
@@ -263,15 +333,18 @@ ul {
 
       #coinlist label,
       .checkbox-styled-label {
-        height: auto;
-        width: 100%;
+        height: 18px;
         z-index: 0;
         display: inline-block;
         position: absolute;
         top: 0;
         left: 0;
         text-indent: 24px;
+        overflow: hidden;
       }
+        #coinlist label {
+          cursor: pointer;
+        }
       #coinlist label div,
       .checkbox-styled-label div {
         height: 12px;
@@ -283,6 +356,11 @@ ul {
         transition: all 0ms ease-in-out, border 0ms ease 0ms;
         position: absolute;
         top: 0;
+        -webkit-transition: all 250ms ease;
+        -moz-transition: all 250ms ease;
+        -ms-transition: all 250ms ease;
+        -o-transition: all 250ms ease;
+        transition: all 250ms ease;
       }
         #coinlist input:hover + label div,
         .checkbox-styled:hover + label div {
@@ -358,9 +436,12 @@ ul {
 
     ::-webkit-scrollbar-thumb:window-inactive,
     ::-webkit-scrollbar-thumb {
-      background:  #252525;
+      background-color:  #252525;
       -webkit-border-radius: 100px;
     }
+       ::-webkit-scrollbar-thumb:hover {
+        background-color: #4c4c4c;
+       }
 
     /*Select Boxes*/
     .custom-select {
@@ -405,4 +486,20 @@ ul {
       background: #252525;
       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;
+  }

index.html

@@ -2,9 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>Latest Crypto Prices</title>
-    <link href="https://fonts.googleapis.com/css?family=Heebo:100,400" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
+    <title>Crypto Price Widget</title>
     <link href="css/app.css" rel="stylesheet">
   </head>
 
@@ -15,9 +13,9 @@
         <button id="close-btn"></button>
       </div><!-- .controls -->
       <div class="tabs">
-        <button id="main-btn" href="#main"><img src="images/icons8-Home-64.png"></button>
-        <button id="portfolio-btn" href="#portfolio"><img src="images/icons8-Rebalance Portfolio-100.png"></button>
-        <button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
+        <button id="main-btn" href="#main"><img src="images/appbar.stock.png"></button>
+        <button id="portfolio-btn" href="#portfolio"><img src="images/appbar.pie.png"></button>
+        <button id="settings-btn" href="#settings"><img src="images/appbar.settings.png"></button>
       </div><!-- .tabs -->
     </header>
 
@@ -71,7 +69,6 @@
       </label>
       </div>
 
-
       <h3>Tip Jar</h3>
       <ul id="tips">
         <li>BTC: 17iENfaJkEpxGXW7mgdFh9hGMZV65R2zVL</li>
@@ -112,9 +109,9 @@
 
   <script>
     // You can also require other files to run in this process
-    require('./renderer.js')
+    //require('./renderer.js')
   </script>
   <script src="js/app_common.js"></script>
   <script src="js/html.sortable.min.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
+  <script src="js/Chart.min.js"></script>
 </html>

js/app_common.js

@@ -5,94 +5,37 @@
 const remote = require('electron').remote;
 //user settings
 const settings = require('electron-settings');
-settings.set('developer', {
-  first: 'Nathan',
-  last: 'Parikh'
-});
-  //default coins
-  if(settings.has('user.coins')) {
-    //do nothing because coins already set
-  }
-  else {
-     settings.set('user', {
-      coins: 'BTC,ETH,LTC'
-    });
-  }
-  //default base currency
-  if(settings.has('user.currency')) {
-    //do nothing because currency already set
-  }
-  else {
-     settings.set('user.currency', 'USD');
-  }
 
-(function() {
+//default coins
+if(settings.has('user.coins')) {
+  //do nothing because coins already set
+}
+else {
+  settings.set('user', {
+    coins: 'BTC,ETH,LTC'
+  });
+}
+//default base currency
+if(settings.has('user.currency')) {
+  //do nothing because currency already set
+}
+else {
+  settings.set('user.currency', 'USD');
+}
 
-  function loadJSON(callback) {   
-    var file = 'https://www.cryptocompare.com/api/data/coinlist/';
-    var xobj = new XMLHttpRequest();
-        xobj.overrideMimeType("application/json");
-        xobj.open('GET', file, true);
-        xobj.onreadystatechange = function () {
-          if (xobj.readyState == 4 && xobj.status == "200") {
-            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
-            callback(xobj.responseText);
-          }
-        };
-        xobj.send(null);  
-  } //loadJSON
-
-  // Generate the list of all coins
-  loadJSON(function(response) {
-    // Parse JSON string into object
-    var myDiv = document.getElementById("coinlist");
-    var actual_JSON = JSON.parse(response);
-    //alert(settings.get('user.coins'));
-    //console.log(actual_JSON.Data);
-    
-    //loop through data, get coin info, generate checkbox for each coin
-    Object.keys(actual_JSON.Data).forEach(function(key) {
-      //console.log(actual_JSON.Data[key].Name);
-      //console.log(actual_JSON.Data[key].CoinName);
-      var li = document.createElement("li");
-      var checkBox = document.createElement("input");
-        checkBox.className = "coinCode";
-      var label = document.createElement("label");
-        label.className = "coinName";
-      var div = document.createElement("div");
-      checkBox.type = "checkbox";
-      checkBox.value = actual_JSON.Data[key].Name;
-      checkBox.name = "cl[]";
-      //check the coins the user has already set
-      var str = String(settings.get('user.coins'));
-      var split_str = str.split(",");
-      if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) {
-          checkBox.checked = true;
-      }
-      myDiv.appendChild(li);
-      li.appendChild(checkBox);
-      li.appendChild(label);
-      label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName));
-      label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')'));
-      label.appendChild(div);
-    }); //forEach
-    
-  }); //loadJSON
- 
-  base = settings.get('user.currency'); // get the user's base currency
-  var currSel = document.getElementById('base'); //select the currency select box
-  currSel.value = settings.get('user.currency'); //select the option that corresponds to the user's currency
-  setBase = function() {
-    //selected base currency
-    var sel = document.getElementById('base');
-    var x   = sel.selectedIndex;
-    var y   = sel.options;
-    base    = y[x].text;
-    settings.set('user.currency', base); //save the user's selection
-    updateData(); //immediately reflect the changed currency
-  };
-  
-})();
+/* Base Currency */
+base = settings.get('user.currency'); // get the user's base currency
+var currSel = document.getElementById('base'); //select the currency select box
+currSel.value = settings.get('user.currency'); //select the option that corresponds to the user's currency
+setBase = function() {
+  //selected base currency
+  var sel = document.getElementById('base');
+  var x   = sel.selectedIndex;
+  var y   = sel.options;
+  base    = y[x].text;
+  settings.set('user.currency', base); //save the user's selection
+  updateData(); //immediately reflect the changed currency
+};
 
 //Functions for creating/appending elements
 function createNode(element) {
@@ -102,67 +45,53 @@ function append(parent, el) {
   return parent.appendChild(el);
 }
 
-
-// Returns an array with values of the selected (checked) checkboxes in "frm"
-function getSelectedChbox(frm) {
-  var selchbox = []; // array that will store the value of selected checkboxes
-  // gets all the input tags in frm, and their number
-  var inpfields = frm.getElementsByTagName('input');
-  var nr_inpfields = inpfields.length;
-  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
-  for(var i=0; i<nr_inpfields; i++) {
-    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
-  }
-  return selchbox;
-}
-
 const ul = document.getElementById('prices'); // Get the list where we will place coins
 const portfolio_ul = document.getElementById('portfolio-list');; 
-const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
-
+var url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
 var pinCheck = document.getElementById("pin-to-top");
 
+function clearData() {
+  ul.innerHTML = '';
+  clearTimeout(appRefresh);
+}
+
 function initData() {
+  //need to redeclare the url variable here to grab the latest user coins, etc.
+  var url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
   fetch(url)
     .then(  
       function(response) {  
-        if (response.status !== 200) {  
-          console.log('Looks like there was a problem. Status Code: ' +  
-            response.status);  
-          return;  
-        }
-
         // Examine the response  
         response.json().then(function(data) {
-          //console.log(data);
-          let prices = data.DISPLAY;
+          //console.log(url);
+          let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
+          let pricesRAW     = data.RAW; // raw to get "BTC" instead of bitcoin symbol
+
           var i = 0;
-          for (let key of Object.keys(prices)) {
-            let coin = prices[key];
+          for (let key of Object.keys(pricesDISPLAY)) {
+            let coin = pricesDISPLAY[key];
             //console.log(coin);
             let li    = createNode('li'),
                 span  = createNode('span');
                 sym   = createNode('span');
             li.setAttribute("class", "price");
             li.setAttribute("id", "coin-"+[key]);
-            //alert("coin-"+[key])
-            //console.log(settings.get('coin.'+[key]+'.order'));
-            li.setAttribute("sortorder", settings.get(li.id+'.order'));
-            //alert(settings.get(li.id+'.order'));
+            
+            span.setAttribute("class", "draggable");
+
+            //when adding a new coin, default sortorder to 999
+            if( settings.get(li.id+'.order') == null) {
+              settings.set(li.id+'.order', 999);
+              li.setAttribute("sortorder", 999);
+            }
+            else {
+              li.setAttribute("sortorder", settings.get(li.id+'.order'));  
+            }
+            
             append(li, span);
             append(ul, li);
             i++;
           } //for
-          //console.log(data.RAW.BTC.USD.PRICE)
-
-          sortChildren(
-              document.getElementById('prices'),
-              function(li) { return +li.getAttribute('sortorder') }
-          );
-          sortChildren(
-              document.getElementById('portfolio-list'),
-              function(li) { return +li.getAttribute('sortorder') }
-          );
 
           //sort your coins
           sortable('#prices', {
@@ -188,30 +117,59 @@ function initData() {
             //alert(settings.get('coin.'+e+'.order'));
           }); //sortable
 
+          //Pin to Top - settings check - immediately set checkbox and window to saved state
+          if(settings.get('user.pinToTop') == 'yes') {
+            pinCheck.checked = true;
+            remote.getCurrentWindow().setAlwaysOnTop(true);
+          } else {
+            pinCheck.checked = false; 
+            remote.getCurrentWindow().setAlwaysOnTop(false);
+          }
+
+          sortChildren(
+              document.getElementById('prices'),
+              function(li) { return +li.getAttribute('sortorder') }
+          );
+          sortChildren(
+              document.getElementById('portfolio-list'),
+              function(li) { return +li.getAttribute('sortorder') }
+          );
+
         }); //response.json
+        updateData();
       } //function(response)
     ) //.then
     .catch(function(err) {  
-      console.log('Fetch Error :-S', err);  
-    });
-    updateData();
-}
+      console.log('Unable to connect!');
+      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);
+    });//catch
+}//initData
 
 function updateData() {
+  //need to redeclare the url variable here to grab the latest user coins, etc.
+  var url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
+    /*
+    ** What data needs to be grabbed/changed?
+    ** Base currency
+    ** Coin price
+    ** % change
+    ** Portfolio - Coin price affects current value / total
+    */
     //console.log(settings.get('user.coins'));
-    const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
     fetch(url)
       .then(
         function(response) {  
-          if (response.status !== 200) {  
-            console.log('Looks like there was a problem. Status Code: ' +  
-              response.status);  
-            return;  
-          }
           // Examine the text in the response  
           response.json().then(function(data) { 
             let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
-            let pricesRAW     = data.RAW; // raw to get BTC instead of bitcoin symbol
+            let pricesRAW     = data.RAW; // raw to get "BTC" instead of bitcoin symbol
             let portfolioSum  = 0;
 
             // Chart labels
@@ -241,25 +199,6 @@ function updateData() {
                 '#C2185B',
                 '#fff'
             ];
-            //randomize
-            function shuffle(array) {
-              var currentIndex = array.length, temporaryValue, randomIndex;
-
-              // While there remain elements to shuffle...
-              while (0 !== currentIndex) {
-
-                // Pick a remaining element...
-                randomIndex = Math.floor(Math.random() * currentIndex);
-                currentIndex -= 1;
-
-                // And swap it with the current element.
-                temporaryValue = array[currentIndex];
-                array[currentIndex] = array[randomIndex];
-                array[randomIndex] = temporaryValue;
-              }
-
-              return array;
-            }
 
             for (let key of Object.keys(pricesRAW)) {
               let coinDISPLAY = pricesDISPLAY[key];
@@ -268,7 +207,6 @@ function updateData() {
               //console.log(coinDISPLAY);
               let li = document.getElementById("coin-"+[key]),
                   span = document.querySelector("#coin-"+[key]+" span");
-              span.setAttribute("class", "draggable");
               
               let coinSymbol  = coinRAW[base].FROMSYMBOL;
               let coinRate    = coinDISPLAY[base].PRICE.replace(/ /g,''); //.replace(/ /g,'') removes space after $
@@ -288,6 +226,31 @@ function updateData() {
               //console.log(span);
               span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>'; 
 
+              //Price Alert Test - PRO Feature
+              /*
+              * Choose crypto
+              * Choose price
+              * Choose equals, greater than, or less than price
+              * Alert set to "on"
+              * Alert when matches conditions
+              * When click on notification, alert set to "off"
+              * Use electron settings, localStorage, or sessionStorage?
+              * Should this be included in the updateData or separate?
+              */
+
+              /*
+              var alerted = localStorage.getItem('alerted') || '';
+              if(coinSymbol.includes("BTC") && coinRAW[base].PRICE >= "5723" && alerted != 'yes') { 
+                let notif = new window.Notification('Price Alert', {
+                  body: "BTC has gone above 5790!"
+                });
+                notif.onclick = () => {
+                  //so it doesn't keep notifying us every 3 seconds.
+                  localStorage.setItem('alerted','yes');
+                }
+              }
+             */
+              
               // % Change
               let change = document.querySelector("#coin-"+[key]+" .change");
               if(coinDISPLAYchange > 0) {
@@ -307,8 +270,9 @@ function updateData() {
               let quantityValue   = document.querySelector("#coin-"+[key]+" .quantity-value");
               let quantityNumber  = settings.get('quantity.'+[key]);
               let regp = /[^0-9.-]+/g;
-              let quantityTotal   = parseFloat(coinRate.replace(regp, '')) * parseFloat(quantityNumber.replace(regp, ''));
-
+              if(quantityNumber != null) {
+                quantityTotal   = parseFloat(coinRate.replace(regp, '')) * parseFloat(quantityNumber.replace(regp, ''));  
+              }
               // sum of all total coin values
               portfolioSum += quantityTotal;
               // put sum into the markup
@@ -320,7 +284,7 @@ function updateData() {
                 quantityValue.innerHTML = quantityTotal.toFixed(8);
                 portfolioTotalValue.innerHTML = portfolioSum.toFixed(8);
               }
-              else {
+              else if(quantityValue != null) {
                 //standard currency format
                 quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                 portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
@@ -333,11 +297,6 @@ function updateData() {
               
             } //for
 
-            sortChildren(
-              document.getElementById('portfolio-list'),
-              function(li) { return +li.getAttribute('sortorder') }
-          );
-
             var newChartLabels = chartLabels;
            
             // Chart
@@ -364,37 +323,23 @@ function updateData() {
               }
             }); //myChart
             
-            //Pin to Top - settings check - immediately set checkbox and window to saved state
-            if(settings.get('user.pinToTop') == 'yes') {
-              pinCheck.checked = true;
-              remote.getCurrentWindow().setAlwaysOnTop(true);
-            } else {
-              pinCheck.checked = false; 
-              remote.getCurrentWindow().setAlwaysOnTop(false);
-            }
-
-          }); //then
-        }  
-      )
-    setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
-}
+          }); //response.json().then
+        } //function(response)
+      ) //then
+    appRefresh = setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
+} //updateData()
 
 // Let's do this thing!
 initData();
 
-/* Test this function */
-//document.getElementById('firstname').innerHTML = settings.get('user.coins');
 // Click on #saveCoins, save the coin selection to the user
 document.getElementById('saveCoins').onclick = function(){
   var coinForm = document.getElementById('coinlist');
   var selchb = getSelectedChbox(coinForm); // gets the array returned by getSelectedChbox()
-  //alert(selchb);
   settings.set('user.coins', selchb);
-
-  // just reloading the entire app because I have yet to figure out how to add/remove a coin from the primary list without a page reload
-  location.reload(false);
-
-  //alert(settings.get('user.currency'));
+  //clear and reload
+  clearData();
+  initData();
 }
 
 /***********
@@ -421,7 +366,7 @@ for (let key of Object.keys(portfolio_list)) {
   }
   else {
     inputValue = '0';
-    inputValue = settings.set('quantity.'+[coin], '0');
+    settings.set('quantity.'+[coin], '0');
   }
 
   span.innerHTML = '<span class="sym">' + coin + '</span> <span class="block quantity"><label for="quantity.' + coin +'">Quantity</label> <input type="number" name="quantity.' + coin +'" min="0" value="'+inputValue+'" step=".01"></span> <span class="block value"><label>Current Value</label><span class="quantity-value"></span></span>';
@@ -445,6 +390,78 @@ document.getElementById('saveQuantities').onclick = function(){
   //location.reload(false);
 }
 
+/***********
+* SETTINGS
+***********/
+// Settings - list of coins
+function loadJSON(callback) {   
+  //Stored local version of https://www.cryptocompare.com/api/data/coinlist/ for performance
+  var file = './coinlist.json';
+  var xobj = new XMLHttpRequest();
+      xobj.overrideMimeType("application/json");
+      xobj.open('GET', file, true);
+      xobj.onreadystatechange = function () {
+        if (xobj.readyState == 4 && xobj.status == "200") {
+          // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
+          callback(xobj.responseText);
+        }
+      };
+      xobj.send(null);  
+  
+} //loadJSON
+
+// Generate the list of all coins
+loadJSON(function(response) {
+  // Parse JSON string into object
+  var myDiv = document.getElementById("coinlist");
+  var actual_JSON = JSON.parse(response);
+  //alert(settings.get('user.coins'));
+  //console.log(actual_JSON.Data);
+  
+  //loop through data, get coin info, generate checkbox for each coin
+  Object.keys(actual_JSON.Data).forEach(function(key) {
+    //console.log(actual_JSON.Data[key].Name);
+    //console.log(actual_JSON.Data[key].CoinName);
+    var li = document.createElement("li");
+    var checkBox = document.createElement("input");
+      checkBox.className = "coinCode";
+    var label = document.createElement("label");
+      label.className = "coinName";
+    var div = document.createElement("div");
+    checkBox.type = "checkbox";
+    checkBox.value = actual_JSON.Data[key].Name;
+    checkBox.id = actual_JSON.Data[key].Name;
+    label.htmlFor = actual_JSON.Data[key].Name;
+    checkBox.name = "cl[]";
+    //check the coins the user has already set
+    var str = String(settings.get('user.coins'));
+    var split_str = str.split(",");
+    if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) {
+        checkBox.checked = true;
+    }
+    myDiv.appendChild(li);
+    li.appendChild(checkBox);
+    li.appendChild(label);
+    label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName));
+    label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')'));
+    label.appendChild(div);
+  }); //forEach
+  
+}); //loadJSON
+
+// Returns an array with values of the selected (checked) checkboxes in "frm"
+function getSelectedChbox(frm) {
+  var selchbox = []; // array that will store the value of selected checkboxes
+  // gets all the input tags in frm, and their number
+  var inpfields = frm.getElementsByTagName('input');
+  var nr_inpfields = inpfields.length;
+  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
+  for(var i=0; i<nr_inpfields; i++) {
+    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
+  }
+  return selchbox;
+}
+
 /***********
 * PIN TO TOP
 *************/

main.js

@@ -32,7 +32,7 @@ function createWindow () {
     width: mainWindowState.width,
     height: mainWindowState.height,
     maxWidth: 360,
-    minWidth: 280,
+    minWidth: 290,
     minHeight: 100,
     maximizable: false,
     fullscreenable: false,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "crypto-price-widget",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -41,22 +41,6 @@
         }
       }
     },
-    "aggregate-error": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-1.0.0.tgz",
-      "integrity": "sha1-iINE2tAiCnLjr1CQYRf0h3GSX6w=",
-      "requires": {
-        "clean-stack": "1.3.0",
-        "indent-string": "3.2.0"
-      },
-      "dependencies": {
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok="
-        }
-      }
-    },
     "ajv": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
@@ -1305,11 +1289,6 @@
       "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
       "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
     },
-    "clean-stack": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-1.3.0.tgz",
-      "integrity": "sha1-noIVAa6XmYbEax1m0tQy2y/UrjE="
-    },
     "clean-yaml-object": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/clean-yaml-object/-/clean-yaml-object-0.1.0.tgz",
@@ -1704,23 +1683,6 @@
       "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.0.tgz",
       "integrity": "sha1-HMPIOkkNZ/ldkeOfatHy4Ia2MEg="
     },
-    "dns-packet": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.2.2.tgz",
-      "integrity": "sha512-kN+DjfGF7dJGUL7nWRktL9Z18t1rWP3aQlyZdY8XlpvU3Nc6GeFTQApftcjtWKxAZfiggZSGrCEoszNgvnpwDg==",
-      "requires": {
-        "ip": "1.1.5",
-        "safe-buffer": "5.1.1"
-      }
-    },
-    "dns-socket": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/dns-socket/-/dns-socket-1.6.2.tgz",
-      "integrity": "sha512-Ztbaf5fToBfm/4+sVEJi7mT2mJOLYYpI+TpgOhxwp5l28UwunTpHMccVhTe9L0F6pQ2cUF0ja9ukuTCtzYq2Ig==",
-      "requires": {
-        "dns-packet": "1.2.2"
-      }
-    },
     "doctrine": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
@@ -1782,11 +1744,6 @@
         }
       }
     },
-    "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
-    },
     "eastasianwidth": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.1.1.tgz",
@@ -2672,11 +2629,6 @@
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
     },
-    "get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-    },
     "getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@@ -2984,16 +2936,6 @@
         "loose-envify": "1.3.1"
       }
     },
-    "ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
-    },
-    "ip-regex": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
-    },
     "irregular-plurals": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.3.0.tgz",
@@ -3103,14 +3045,6 @@
         "is-extglob": "1.0.0"
       }
     },
-    "is-ip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-2.0.0.tgz",
-      "integrity": "sha1-aO6gfooKCpTC0IDdZ0xzGrKkYas=",
-      "requires": {
-        "ip-regex": "2.1.0"
-      }
-    },
     "is-js-type": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-js-type/-/is-js-type-2.0.0.tgz",
@@ -3173,47 +3107,6 @@
         "symbol-observable": "0.2.4"
       }
     },
-    "is-online": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-online/-/is-online-7.0.0.tgz",
-      "integrity": "sha1-fiQIwK4efje6jVC9sjcmDTK/2W4=",
-      "requires": {
-        "got": "6.7.1",
-        "p-any": "1.1.0",
-        "p-timeout": "1.2.0",
-        "public-ip": "2.3.5"
-      },
-      "dependencies": {
-        "got": {
-          "version": "6.7.1",
-          "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-          "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-          "requires": {
-            "create-error-class": "3.0.2",
-            "duplexer3": "0.1.4",
-            "get-stream": "3.0.0",
-            "is-redirect": "1.0.0",
-            "is-retry-allowed": "1.1.0",
-            "is-stream": "1.1.0",
-            "lowercase-keys": "1.0.0",
-            "safe-buffer": "5.1.1",
-            "timed-out": "4.0.1",
-            "unzip-response": "2.0.1",
-            "url-parse-lax": "1.0.0"
-          }
-        },
-        "timed-out": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-          "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
-        },
-        "unzip-response": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
-          "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
-        }
-      }
-    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -4016,19 +3909,6 @@
         "os-tmpdir": "1.0.2"
       }
     },
-    "p-any": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-any/-/p-any-1.1.0.tgz",
-      "integrity": "sha512-Ef0tVa4CZ5pTAmKn+Cg3w8ABBXh+hHO1aV8281dKOoUHfX+3tjG2EaFcC+aZyagg9b4EYGsHEjz21DnEE8Og2g==",
-      "requires": {
-        "p-some": "2.0.0"
-      }
-    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
-    },
     "p-limit": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.1.0.tgz",
@@ -4044,22 +3924,6 @@
         "p-limit": "1.1.0"
       }
     },
-    "p-some": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-some/-/p-some-2.0.0.tgz",
-      "integrity": "sha512-CsRc5gwQNJgSh+pNaGUtgBWBSh9btl8jYLbIdeqLgOLAATZmDDX7xTS5V0mqJk5Dw0gz8FF6s8sAF4D0MvxLhw==",
-      "requires": {
-        "aggregate-error": "1.0.0"
-      }
-    },
-    "p-timeout": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.0.tgz",
-      "integrity": "sha1-mCD5lDTFgXhotPNICe5SkWYNW2w=",
-      "requires": {
-        "p-finally": "1.0.0"
-      }
-    },
     "package-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-1.2.0.tgz",
@@ -4414,47 +4278,6 @@
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
-    "public-ip": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/public-ip/-/public-ip-2.3.5.tgz",
-      "integrity": "sha1-fXhHYliBV2unofpBCwl43yOb33U=",
-      "requires": {
-        "dns-socket": "1.6.2",
-        "got": "6.7.1",
-        "is-ip": "2.0.0",
-        "pify": "2.3.0"
-      },
-      "dependencies": {
-        "got": {
-          "version": "6.7.1",
-          "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-          "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-          "requires": {
-            "create-error-class": "3.0.2",
-            "duplexer3": "0.1.4",
-            "get-stream": "3.0.0",
-            "is-redirect": "1.0.0",
-            "is-retry-allowed": "1.1.0",
-            "is-stream": "1.1.0",
-            "lowercase-keys": "1.0.0",
-            "safe-buffer": "5.1.1",
-            "timed-out": "4.0.1",
-            "unzip-response": "2.0.1",
-            "url-parse-lax": "1.0.0"
-          }
-        },
-        "timed-out": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-          "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
-        },
-        "unzip-response": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
-          "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
-        }
-      }
-    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",

renderer.js

@@ -1,3 +1,9 @@
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
+// Do this from the renderer process
+/*
+var notif = new window.Notification('Download Complete', {
+  body: "yolo"
+})
+*/