From 0f92fb17f52454fd3fcb276172deb5488329874a Mon Sep 17 00:00:00 2001 From: Nathan Parikh Date: Mon, 11 Sep 2017 23:26:20 -0500 Subject: [PATCH] Added working portfolio --- css/app.css | 100 +++++++++++++++++++++++++++++-------------- index.html | 30 +++++++++---- js/app_common.js | 108 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 184 insertions(+), 54 deletions(-) diff --git a/css/app.css b/css/app.css index 86024b0..94dbf9f 100644 --- a/css/app.css +++ b/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, - #prices li#coin-GAS .sym { + .coin-list li#coin-NEO .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; diff --git a/index.html b/index.html index df5d3ca..deab92f 100644 --- a/index.html +++ b/index.html @@ -13,17 +13,20 @@
-
- - + +
+ + + +
-
-
+

Choose Your Coins

@@ -73,8 +76,19 @@
- - +
+
+ +
+ +
    + +
+ + + +
Total Value:
+ @@ -82,7 +96,7 @@ - +
diff --git a/js/app_common.js b/js/app_common.js index fb9382d..022a6cd 100644 --- a/js/app_common.js +++ b/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 = '' + coin + ' '; + + 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
  • 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 -function toggleSettings() { - var divs = document.getElementsByClassName('panel'), i; - for (i = 0; i < divs.length; ++i) { - if(divs[i].classList.contains('inactive')) { - divs[i].classList.remove('inactive'); - divs[i].classList.add('active'); +//Panel tabs +var tabLinks = document.querySelectorAll('.tabs button'); +for (var i = 0; i < tabLinks.length; i++) { + tabLinks[i].onclick = function() { + var target = this.getAttribute('href').replace('#', ''); + var sections = document.querySelectorAll('.panel'); + for(var j=0; j < sections.length; j++) { + sections[j].style.display = 'none'; + } + document.getElementById(target).style.display = 'block'; + for(var k=0; k < tabLinks.length; k++) { + tabLinks[k].removeAttribute('class'); } - else { - divs[i].classList.remove('active'); - divs[i].classList.add('inactive'); - } - }//for -}//toggleSettings + this.setAttribute('class', 'active'); + return false; + } +}; //Coin search filter function myFunction() {