Added working portfolio

css/app.css

@@ -62,109 +62,146 @@ button {
     opacity: 1;
   }
 
+#portfolio-btn, #main-btn {
+  color: #fff;
+}
+
+.panel {
+  display: none;
+}
+
 ul {
   list-style-type: none;
 }
-  #prices {
+  .coin-list {
     margin: 0;
     padding: 0;
     font-size: 28px;
     font-weight: 400;
   }
-    #prices li {
+    #portfolio-list.coin-list {
+      font-size: 16px;
+    }
+    .coin-list li {
       margin: 0px 0px 15px 0px;
       padding: 0px 0px 15px 0px;
       border-bottom: 1px solid #252525;
     }
-      #prices li:last-child {
+      #portfolio-list.coin-list li {
+        margin-bottom: 10px;
+        padding-bottom: 0px;
+      }
+      .coin-list li:last-child {
         border-bottom: none;
       }
-      #prices li span {
+      .coin-list li span {
         
       }
-      #prices li span.draggable {
+      .coin-list li span.draggable {
         width: 100%;
       }
-      #prices li .sym {
+      .coin-list input[type="number"] {
+        border: none;
+        padding: 5px;
+        background: rgba(0, 0, 0, 0);
+        color: #fff;
+        max-width: 85px;
+        display: inline-block;
+        outline: none;
+      }
+      .coin-list .block {
+        display: inline-block;
+        vertical-align: top;
+      }
+        .coin-list .block label {
+          font-size: 12px;
+          display: block;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 1px 2px 2px;
+        }
+        .coin-list .block .quantity-value {
+          color: #b2ff93;
+        }
+      .coin-list li .sym {
         border: 1px solid #252525;
         border-left-width: 2px;
         padding: 0px 5px 0px;
         font-family: 'Heebo', sans-serif;
         font-size: 12px;
       }
-        #prices li .sym:hover {
+        .coin-list li .sym:hover {
           cursor: -webkit-grab;
         }
         /*Symbol Colors*/
-        #prices li#coin-BTC .sym {
+        .coin-list li#coin-BTC .sym {
           border-left-color: #F9A847;
         }
-        #prices li#coin-XRP .sym {
+        .coin-list li#coin-XRP .sym {
           border-left-color: #0997D2;
         }
-        #prices li#coin-LTC .sym {
+        .coin-list li#coin-LTC .sym {
           border-left-color: #F1F1F1;
         }
-        #prices li#coin-NEO .sym,
+        .coin-list li#coin-NEO .sym,
-        #prices li#coin-GAS .sym {
+        .coin-list li#coin-GAS .sym {
           border-left-color: #9CD115;
         }
-        #prices li#coin-OMG .sym {
+        .coin-list li#coin-OMG .sym {
           border-left-color: #1A53F0;
         }
-        #prices li#coin-BCH .sym {
+        .coin-list li#coin-BCH .sym {
           border-left-color: #F7931A;
         }
-        #prices li#coin-DASH .sym {
+        .coin-list li#coin-DASH .sym {
           border-left-color: #0475B6;
         }
-        #prices li#coin-XMR .sym {
+        .coin-list li#coin-XMR .sym {
           border-left-color: #FF6600;
         }
-        #prices li#coin-ETC .sym {
+        .coin-list li#coin-ETC .sym {
           border-left-color: #689274;
         }
-         #prices li#coin-ZEC .sym {
+         .coin-list li#coin-ZEC .sym {
           border-left-color: #EFB948;
         }
-         #prices li#coin-GNT .sym {
+         .coin-list li#coin-GNT .sym {
           border-left-color: #00AFBF;
         }
-         #prices li#coin-BAT .sym {
+         .coin-list li#coin-BAT .sym {
           border-left-color: #662F92;
         }
-         #prices li#coin-FCT .sym {
+         .coin-list li#coin-FCT .sym {
           border-left-color: #E3A77D;
         }
-         #prices li#coin-ARK .sym {
+         .coin-list li#coin-ARK .sym {
           border-left-color: #CB0101;
         }
-         #prices li#coin-DOGE .sym {
+         .coin-list li#coin-DOGE .sym {
           border-left-color: #BBA034;
         }
-         #prices li#coin-CVC .sym {
+         .coin-list li#coin-CVC .sym {
           border-left-color: #41BB2E;
         }
-         #prices li#coin-MCO .sym {
+         .coin-list li#coin-MCO .sym {
           border-left-color: #82344C;
         }
-         #prices li#coin-UBQ .sym {
+         .coin-list li#coin-UBQ .sym {
           border-left-color: #00EA90;
         }
-         #prices li#coin-DNT .sym {
+         .coin-list li#coin-DNT .sym {
           border-left-color: #7CF7FA;
         }
-      #prices li .change {
+      .coin-list li .change {
         padding: 2px 3px 2px;
         font-size: 12px;
         float: right;
         margin: 10px 0px 0px;
         background: #000;
       }
-        #prices li .change.positive {
+        .coin-list li .change.positive {
           color: #b2ff93;
         }
-        #prices li .change.negative {
+        .coin-list li .change.negative {
           color: #ff6765;
         }
 
@@ -191,7 +228,8 @@ ul {
       display: block;
       width: 100%;
     }
-    #saveCoins {
+    #saveCoins,
+    #saveQuantities {
       background-color: #000000;
       color: #fff;
       border: 1px solid #252525;

index.html

@@ -13,17 +13,20 @@
       <div class="controls">
         <button id="min-btn"></button>
         <button id="close-btn"></button>
-      </div>
+      </div><!-- .controls -->
-      <button id="settings-btn" onclick="toggleSettings()"><img src="images/icons8-Settings.png"></button>
+      <div class="tabs">
-      <button id="settings-btn" onclick="toggleSettings()">folio</button>
+        <button id="main-btn" href="#main">main</button>
+        <button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
+        <button id="portfolio-btn" href="#portfolio">folio</button>
+      </div><!-- .tabs -->
     </header>
 
     <div id="main" class="panel active">
-      <ul id="prices">
+      <ul id="prices" class="coin-list">
       </ul>
     </div><!-- #main -->
     
-    <div id="settings" class="panel inactive">
+    <div id="settings" class="panel">
       <h3>Choose Your Coins</h3>
 
       <div id="coinsearch">
@@ -73,8 +76,19 @@
       </div>
     </div><!-- #settings -->
 
-    <!--<div id="portfolio" class="panel active">-->
+    <div id="portfolio" class="panel">
-      <!-- manual selection of coins - separate from what's tracking -->
+      <div class="chart">
+        
+      </div>
+
+      <ul id="portfolio-list" class="coin-list">
+        
+      </ul>
+
+      <button type="button" id="saveQuantities">Save</button>
+
+      <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
+
       <!-- manual entry of quantity -->
       <!-- grab coin prices same as above -->
       <!-- show current portfolio value -->
@@ -82,7 +96,7 @@
 
       <!-- Enter avg. purchase price for each coin -->
       <!-- See % gain/loss -->
-    <!--</div>-->
+    </div><!-- #portfolio -->
 
   </body>
 

js/app_common.js

@@ -115,6 +115,7 @@ function getSelectedChbox(frm) {
 }
 
 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';
 
 function initData() {
@@ -201,6 +202,7 @@ function updateData() {
           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 portfolioSum  = 0;
             for (let key of Object.keys(pricesRAW)) {
               let coinDISPLAY = pricesDISPLAY[key];
                 let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
@@ -242,8 +244,34 @@ function updateData() {
                 change.classList.remove("postive");
                 change.classList.remove("negative");
               }
+
+              // Portfolio
+              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, ''));
+
+              // sum of all total coin values
+              portfolioSum += quantityTotal;
+              // put sum into the markup
+              let portfolioTotalValue = document.querySelector("#portfolio-total-value .value");
+
+              // total value for each coin
+              if(coinRate.includes("Ƀ")) {
+                //because BTC has 8 decimal places
+                quantityValue.innerHTML = quantityTotal.toFixed(8);
+                portfolioTotalValue.innerHTML = portfolioSum.toFixed(8);
               }
-          });  
+              else {
+                //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,');
+              }
+              
+              
+            } //for
+
+          }); //then
         }  
       )
     setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
@@ -267,6 +295,53 @@ document.getElementById('saveCoins').onclick = function(){
   //alert(settings.get('user.currency'));
 }
 
+/***********
+* PORTFOLIO
+***********/
+var portfolio_list_container = document.querySelector('#portfolio-list');
+var portfolio_list = settings.get('user.coins');
+
+//generate html from list of coins
+for (let key of Object.keys(portfolio_list)) {
+  let coin = portfolio_list[key];
+  //console.log(coin);
+  let li    = createNode('li'),
+      span  = createNode('span');
+      sym   = createNode('span');
+  li.setAttribute("id", "coin-"+[coin]);
+
+  append(li, span);
+  append(portfolio_ul, li);
+
+  if (settings.has('quantity.'+[coin])) {
+    inputValue = settings.get('quantity.'+[coin]);
+  }
+  else {
+    inputValue = '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>';
+
+  i++;
+} //for
+
+// save quantities
+document.getElementById('saveQuantities').onclick = function(){
+  var items = portfolio_ul.getElementsByTagName("input");
+  for (var i = 0; i < items.length; ++i) {
+    // do something with items[i], which is a <li> element
+    inputName   = items[i].getAttribute("name");
+    inputValue  = items[i].value;
+    //console.log(inputValue);
+    settings.set(inputName, inputValue);
+  }
+  
+
+  // 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);
+}
+
+
 /*******
 * APP UI
 ********/
@@ -282,20 +357,23 @@ document.getElementById("min-btn").addEventListener("click", function (e) {
   window.minimize(); 
 });
 
-//settings tab/icon
+//Panel tabs
-function toggleSettings() {
+var tabLinks = document.querySelectorAll('.tabs button');
-  var divs = document.getElementsByClassName('panel'), i;
+for (var i = 0; i < tabLinks.length; i++) { 
-  for (i = 0; i < divs.length; ++i) {
+  tabLinks[i].onclick = function() {
-    if(divs[i].classList.contains('inactive')) {
+    var target = this.getAttribute('href').replace('#', '');
-      divs[i].classList.remove('inactive');
+    var sections = document.querySelectorAll('.panel');
-      divs[i].classList.add('active');
+    for(var j=0; j < sections.length; j++) {
+      sections[j].style.display = 'none';
     }    
-    else {
+    document.getElementById(target).style.display = 'block';
-      divs[i].classList.remove('active');
+    for(var k=0; k < tabLinks.length; k++) {
-      divs[i].classList.add('inactive');
+      tabLinks[k].removeAttribute('class');
     }
-  }//for
+    this.setAttribute('class', 'active');
-}//toggleSettings
+    return false;
+  }
+};
 
 //Coin search filter
 function myFunction() {