CopyBot/crypto-price-widget
1
0
Fork 0
mirror of https://github.com/nathanp/crypto-price-widget.git synced 2025-11-06 03:08:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

The adding and removing of coins is much more smooth now. The app doesn't have to do a full reload. All new coins added are placed at the bottom. Still need to add/remove them from the portfolio screen. Code optimizations.

Browse Source
This commit is contained in:
Nathan Parikh 2017-10-11 09:18:22 -05:00
parent e4bc240bf2
commit c0eb800259
1 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
js/app_common.js
View File

@ -47,20 +47,27 @@ function append(parent, el) {
const ul = document.getElementById('prices'); // Get the list where we will place coins const ul = document.getElementById('prices'); // Get the list where we will place coins
const portfolio_ul = document.getElementById('portfolio-list');; 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"); var pinCheck = document.getElementById("pin-to-top");
function clearData() {
ul.innerHTML = '';
clearTimeout(appRefresh);
}
function initData() { 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) fetch(url)
.then( .then(
function(response) { function(response) {
// Examine the response // Examine the response
response.json().then(function(data) { response.json().then(function(data) {
console.log(url);
//console.log(data); //console.log(data);
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol 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
var i = 0; var i = 0;
for (let key of Object.keys(pricesDISPLAY)) { for (let key of Object.keys(pricesDISPLAY)) {
let coin = pricesDISPLAY[key]; let coin = pricesDISPLAY[key];
@ -76,23 +83,21 @@ function initData() {
//span = document.querySelector("#coin-"+[key]+" span"); //span = document.querySelector("#coin-"+[key]+" span");
span.setAttribute("class", "draggable"); span.setAttribute("class", "draggable");
li.setAttribute("sortorder", settings.get(li.id+'.order')); //when adding a new coin, default sortorder to 999
//alert(settings.get(li.id+'.order')); 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(li, span);
append(ul, li); append(ul, li);
i++; i++;
} //for } //for
//console.log(data.RAW.BTC.USD.PRICE) //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 //sort your coins
sortable('#prices', { sortable('#prices', {
handle: 'span' handle: 'span'
@ -126,6 +131,15 @@ function initData() {
remote.getCurrentWindow().setAlwaysOnTop(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 }); //response.json
updateData(); updateData();
} //function(response) } //function(response)
@ -144,6 +158,8 @@ function initData() {
}//initData }//initData
function updateData() { 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? ** What data needs to be grabbed/changed?
** Base currency ** Base currency
@ -196,10 +212,7 @@ function updateData() {
//console.log(coinDISPLAY); //console.log(coinDISPLAY);
let li = document.getElementById("coin-"+[key]), let li = document.getElementById("coin-"+[key]),
span = document.querySelector("#coin-"+[key]+" span"); span = document.querySelector("#coin-"+[key]+" span");
//when adding a new coin, default sortorder to 999
if( li.getAttribute('sortorder')=="undefined" ) {
li.setAttribute("sortorder", 999);
}
let coinSymbol = coinRAW[base].FROMSYMBOL; let coinSymbol = coinRAW[base].FROMSYMBOL;
let coinRate = coinDISPLAY[base].PRICE.replace(/ /g,''); //.replace(/ /g,'') removes space after $ let coinRate = coinDISPLAY[base].PRICE.replace(/ /g,''); //.replace(/ /g,'') removes space after $
@ -238,8 +251,10 @@ function updateData() {
let quantityValue = document.querySelector("#coin-"+[key]+" .quantity-value"); let quantityValue = document.querySelector("#coin-"+[key]+" .quantity-value");
let quantityNumber = settings.get('quantity.'+[key]); let quantityNumber = settings.get('quantity.'+[key]);
let regp = /[^0-9.-]+/g; 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 // sum of all total coin values
portfolioSum += quantityTotal; portfolioSum += quantityTotal;
// put sum into the markup // put sum into the markup
@ -251,7 +266,7 @@ function updateData() {
quantityValue.innerHTML = quantityTotal.toFixed(8); quantityValue.innerHTML = quantityTotal.toFixed(8);
portfolioTotalValue.innerHTML = portfolioSum.toFixed(8); portfolioTotalValue.innerHTML = portfolioSum.toFixed(8);
} }
else { else if(quantityValue != null) {
//standard currency format //standard currency format
quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
@ -293,7 +308,7 @@ function updateData() {
}); //response.json().then }); //response.json().then
} //function(response) } //function(response)
) //then ) //then
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds appRefresh = setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
} //updateData() } //updateData()
// Let's do this thing! // Let's do this thing!
@ -307,9 +322,10 @@ document.getElementById('saveCoins').onclick = function(){
settings.set('user.coins', 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 // 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); //location.reload(false);
//alert(settings.get('user.currency')); clearData();
initData();
} }
/*********** /***********
@ -336,7 +352,7 @@ for (let key of Object.keys(portfolio_list)) {
} }
else { else {
inputValue = '0'; 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>'; 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>';