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

v1.4.0 - updating packages, coin list, etc.

Browse Source
This commit is contained in:
Nathan Parikh 2020-06-13 01:58:27 -05:00
parent 4b795fb375
commit 073a483bf2
12 changed files with 6461 additions and 4945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules node_modules
release-builds release-builds
out/ out/
*.code-workspace

2
coinlist.json
View File

File diff suppressed because one or more lines are too long

10
index.html
View File

@ -77,6 +77,11 @@
<li>DOGE: DFHBdwUbcvGezfgHHbWmH8eLWjAjUhFSZ2</li> <li>DOGE: DFHBdwUbcvGezfgHHbWmH8eLWjAjUhFSZ2</li>
</ul> </ul>
<h4>Build Info</h4>
node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</div><!-- #settings --> </div><!-- #settings -->
<div id="portfolio" class="panel"> <div id="portfolio" class="panel">
@ -92,10 +97,6 @@
<div id="portfolio-total-value">Total Value: <span class="value"></span></div> <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
<div class="chart-container" style="position: relative; height:40vh; width:94vw">
<canvas id="portfolioChart" width="360" height="360"></canvas>
</div>
<!-- show what % each coin is of portfolio --> <!-- show what % each coin is of portfolio -->
<!-- Enter avg. purchase price for each coin --> <!-- Enter avg. purchase price for each coin -->
@ -110,5 +111,4 @@
</script> </script>
<script src="js/app_common.js"></script> <script src="js/app_common.js"></script>
<script src="js/html.sortable.min.js"></script> <script src="js/html.sortable.min.js"></script>
<script src="js/Chart.min.js"></script>
</html> </html>

629
js/app_common.js
View File

@ -1,116 +1,124 @@
/****************** /******************
* APP FUNCTIONALITY * APP FUNCTIONALITY
******************/ ******************/
//access electron from here //access electron from here
const remote = require('electron').remote; const remote = require("electron").remote;
//user settings //user settings
const settings = require('electron-settings'); const settings = require("electron-settings");
//default coins //default coins
if(settings.has('user.coins')) { if (settings.has("user.coins")) {
//do nothing because coins already set //do nothing because coins already set
} } else {
else { settings.set("user", {
settings.set('user', { coins: ["BTC", "ETH", "LTC"],
coins: 'BTC,ETH,LTC'
}); });
} }
//default base currency //default base currency
if(settings.has('user.currency')) { if (settings.has("user.currency")) {
//do nothing because currency already set //do nothing because currency already set
} } else {
else { settings.set("user.currency", "USD");
settings.set('user.currency', 'USD');
} }
/* Base Currency */ /* Base Currency */
base = settings.get('user.currency'); // get the user's base currency base = settings.get("user.currency"); // get the user's base currency
var currSel = document.getElementById('base'); //select the currency select box 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 currSel.value = settings.get("user.currency"); //select the option that corresponds to the user's currency
setBase = function() { setBase = function () {
//selected base currency //selected base currency
var sel = document.getElementById('base'); var sel = document.getElementById("base");
var x = sel.selectedIndex; var x = sel.selectedIndex;
var y = sel.options; var y = sel.options;
base = y[x].text; base = y[x].text;
settings.set('user.currency', base); //save the user's selection settings.set("user.currency", base); //save the user's selection
updateData(); //immediately reflect the changed currency updateData(); //immediately reflect the changed currency
}; };
//Functions for creating/appending elements //Functions for creating/appending elements
function createNode(element) { function createNode(element) {
return document.createElement(element); return document.createElement(element);
} }
function append(parent, el) { function append(parent, el) {
return parent.appendChild(el); return parent.appendChild(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");
var 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() { function clearData() {
ul.innerHTML = ''; ul.innerHTML = "";
clearTimeout(appRefresh); clearTimeout(appRefresh);
} }
function initData() { function initData() {
//need to redeclare the url variable here to grab the latest user coins, etc. //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'; 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(url);
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];
//console.log(coin); //console.log(coin);
let li = createNode('li'), let li = createNode("li"),
span = createNode('span'); span = createNode("span");
sym = createNode('span'); sym = createNode("span");
li.setAttribute("class", "price"); li.setAttribute("class", "price");
li.setAttribute("id", "coin-"+[key]); li.setAttribute("id", "coin-" + [key]);
span.setAttribute("class", "draggable"); span.setAttribute("class", "draggable");
//when adding a new coin, default sortorder to 999 //when adding a new coin, default sortorder to 999
if( settings.get(li.id+'.order') == null) { if (settings.get(li.id + ".order") == null) {
settings.set(li.id+'.order', 999); settings.set(li.id + ".order", 999);
li.setAttribute("sortorder", 999); li.setAttribute("sortorder", 999);
} else {
li.setAttribute("sortorder", settings.get(li.id + ".order"));
} }
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
//sort your coins //sort your coins
sortable('#prices', { sortable("#prices", {
handle: 'span' handle: "span",
})[0].addEventListener('sortstop', function(e) { })[0].addEventListener("sortstop", function (e) {
// Declare variables // Declare variables
var ul, ulPortfolio, li, liPortfolio, i; var ul, ulPortfolio, li, liPortfolio, i;
ul = document.getElementById("prices"); ul = document.getElementById("prices");
ulPortfolio = document.getElementById("portfolio-list"); ulPortfolio = document.getElementById("portfolio-list");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName("li");
liPortfolio = ulPortfolio.getElementsByTagName('li'); liPortfolio = ulPortfolio.getElementsByTagName("li");
// Loop through all list items // Loop through all list items
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
li[i].setAttribute("sortorder", i); li[i].setAttribute("sortorder", i);
var elementID = li[i].id; var elementID = li[i].id;
//alert(elementID); //alert(elementID);
settings.set(elementID, { // coin-BTC settings.set(elementID, {
order: li[i].getAttribute('sortorder') // coin-BTC
order: li[i].getAttribute("sortorder"),
}); });
//alert(settings.get(elementID + '.order')); //alert(settings.get(elementID + '.order'));
} //for } //for
@ -118,127 +126,130 @@ function initData() {
}); //sortable }); //sortable
//Pin to Top - settings check - immediately set checkbox and window to saved state //Pin to Top - settings check - immediately set checkbox and window to saved state
if(settings.get('user.pinToTop') == 'yes') { if (settings.get("user.pinToTop") == "yes") {
pinCheck.checked = true; pinCheck.checked = true;
remote.getCurrentWindow().setAlwaysOnTop(true); remote.getCurrentWindow().setAlwaysOnTop(true);
} else { } else {
pinCheck.checked = false; pinCheck.checked = false;
remote.getCurrentWindow().setAlwaysOnTop(false); remote.getCurrentWindow().setAlwaysOnTop(false);
} }
sortChildren( sortChildren(document.getElementById("prices"), function (li) {
document.getElementById('prices'), return +li.getAttribute("sortorder");
function(li) { return +li.getAttribute('sortorder') } });
); sortChildren(document.getElementById("portfolio-list"), function (
sortChildren( li
document.getElementById('portfolio-list'), ) {
function(li) { return +li.getAttribute('sortorder') } return +li.getAttribute("sortorder");
); });
}); //response.json }); //response.json
updateData(); updateData();
} //function(response) } //function(response)
) //.then ) //.then
.catch(function(err) { .catch(function (err) {
console.log('Unable to connect!'); console.log("Unable to connect!");
var mainDiv = document.getElementById("main"); var mainDiv = document.getElementById("main");
var errorDiv = document.createElement('div'); var errorDiv = document.createElement("div");
errorDiv.className = 'error'; errorDiv.className = "error";
errorDiv.innerHTML = '<h2>Uh-oh! Looks like you&#39;re offline.</h2>\ errorDiv.innerHTML =
'<h2>Uh-oh! Looks like you&#39;re offline.</h2>\
<img src="images/offline_doge.jpg" />\ <img src="images/offline_doge.jpg" />\
<h4>Reconnect, then reload the app.</h4>\ <h4>Reconnect, then reload the app.</h4>\
<button type="button" class="refresh" onClick="location.reload(false);" >Reload</button>'; <button type="button" class="refresh" onClick="location.reload(false);" >Reload</button>';
document.getElementById('main').appendChild(errorDiv); document.getElementById("main").appendChild(errorDiv);
});//catch }); //catch
}//initData } //initData
function updateData() { function updateData() {
//need to redeclare the url variable here to grab the latest user coins, etc. //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'; var url =
/* "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=" +
** What data needs to be grabbed/changed? settings.get("user.coins") +
** Base currency "&tsyms=" +
** Coin price base +
** % change "&extraParams=crypto-price-widget";
** Portfolio - Coin price affects current value / total /*
*/ ** What data needs to be grabbed/changed?
//console.log(settings.get('user.coins')); ** Base currency
fetch(url) ** Coin price
.then( ** % change
function(response) { ** Portfolio - Coin price affects current value / total
// Examine the text in the response */
response.json().then(function(data) { //console.log(settings.get('user.coins'));
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol fetch(url).then(
let pricesRAW = data.RAW; // raw to get "BTC" instead of bitcoin symbol function (response) {
let portfolioSum = 0; // 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 portfolioSum = 0;
// Chart labels for (let key of Object.keys(pricesRAW)) {
var chartLabels = []; let coinDISPLAY = pricesDISPLAY[key];
// Chart data let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
var chartData = []; let coinRAW = pricesRAW[key];
// Chart colors - need to match these colors to the coin in a future release //console.log(coinDISPLAY);
var chartColors = [ let li = document.getElementById("coin-" + [key]),
'#FF9F1C', span = document.querySelector("#coin-" + [key] + " span");
'#2EC4B6',
'#E71D36',
'#011627',
'#FDFFFC',
'#D31EE8',
'#0288D1',
'#5FC42D',
'#E64A19',
'#0097A7',
'#FBC02D',
'#00796B',
'#388E3C',
'#689F38',
'#303F9F',
'#C2185B',
'#FFA000',
'#D32F2F',
'#C2185B',
'#fff'
];
for (let key of Object.keys(pricesRAW)) { let coinSymbol = coinRAW[base].FROMSYMBOL;
let coinDISPLAY = pricesDISPLAY[key]; let coinRate = coinDISPLAY[base].PRICE.replace(/ /g, ""); //.replace(/ /g,'') removes space after $
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
let coinRAW = pricesRAW[key];
//console.log(coinDISPLAY);
let li = document.getElementById("coin-"+[key]),
span = document.querySelector("#coin-"+[key]+" span");
let coinSymbol = coinRAW[base].FROMSYMBOL;
let coinRate = coinDISPLAY[base].PRICE.replace(/ /g,''); //.replace(/ /g,'') removes space after $
//replace currencies that have no symbols with easier to read formats
if(coinRate.includes("AUD")) { coinRate = coinRate.replace("AUD", "A$"); }
if(coinRate.includes("CAD")) { coinRate = coinRate.replace("CAD", "C$"); }
if(coinRate.includes("HKD")) { coinRate = coinRate.replace("HKD", "HK$"); }
if(coinRate.includes("MXN")) { coinRate = coinRate.replace("MXN", "$"); }
if(coinRate.includes("NOK")) { coinRate = coinRate.replace("NOK", "kr"); }
if(coinRate.includes("NZD")) { coinRate = coinRate.replace("NZD", "NZ$"); }
if(coinRate.includes("SEK")) { coinRate = coinRate.replace("SEK", "kr"); }
if(coinRate.includes("SGD")) { coinRate = coinRate.replace("SGD", "S$"); }
if(coinRate.includes("TRY")) { coinRate = coinRate.replace("TRY", "₺"); }
if(coinRate.includes("ZAR")) { coinRate = coinRate.replace("ZAR", "R"); }
//console.log(span); //replace currencies that have no symbols with easier to read formats
span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>'; if (coinRate.includes("AUD")) {
coinRate = coinRate.replace("AUD", "A$");
}
if (coinRate.includes("CAD")) {
coinRate = coinRate.replace("CAD", "C$");
}
if (coinRate.includes("HKD")) {
coinRate = coinRate.replace("HKD", "HK$");
}
if (coinRate.includes("MXN")) {
coinRate = coinRate.replace("MXN", "$");
}
if (coinRate.includes("NOK")) {
coinRate = coinRate.replace("NOK", "kr");
}
if (coinRate.includes("NZD")) {
coinRate = coinRate.replace("NZD", "NZ$");
}
if (coinRate.includes("SEK")) {
coinRate = coinRate.replace("SEK", "kr");
}
if (coinRate.includes("SGD")) {
coinRate = coinRate.replace("SGD", "S$");
}
if (coinRate.includes("TRY")) {
coinRate = coinRate.replace("TRY", "₺");
}
if (coinRate.includes("ZAR")) {
coinRate = coinRate.replace("ZAR", "R");
}
//Price Alert Test - PRO Feature //console.log(span);
/* span.innerHTML =
* Choose crypto '<span class="sym">' +
* Choose price coinSymbol +
* Choose equals, greater than, or less than price "</span> " +
* Alert set to "on" coinRate +
* Alert when matches conditions '<span class="change">' +
* When click on notification, alert set to "off" coinDISPLAYchange +
* Use electron settings, localStorage, or sessionStorage? "%</span>";
* Should this be included in the updateData or separate?
*/
/* //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') || ''; var alerted = localStorage.getItem('alerted') || '';
if(coinSymbol.includes("BTC") && coinRAW[base].PRICE >= "5723" && alerted != 'yes') { if(coinSymbol.includes("BTC") && coinRAW[base].PRICE >= "5723" && alerted != 'yes') {
let notif = new window.Notification('Price Alert', { let notif = new window.Notification('Price Alert', {
@ -250,183 +261,165 @@ function updateData() {
} }
} }
*/ */
// % Change
let change = document.querySelector("#coin-"+[key]+" .change");
if(coinDISPLAYchange > 0) {
change.className += " positive";
change.classList.remove("negative");
}
else if(coinDISPLAYchange < 0) {
change.className += " negative";
change.classList.remove("postive");
}
else {
change.classList.remove("postive");
change.classList.remove("negative");
}
// Portfolio // % Change
let quantityValue = document.querySelector("#coin-"+[key]+" .quantity-value"); let change = document.querySelector("#coin-" + [key] + " .change");
let quantityNumber = settings.get('quantity.'+[key]); if (coinDISPLAYchange > 0) {
let regp = /[^0-9.-]+/g; change.className += " positive";
if(quantityNumber != null) { change.classList.remove("negative");
quantityTotal = parseFloat(coinRate.replace(regp, '')) * parseFloat(quantityNumber.replace(regp, '')); } else if (coinDISPLAYchange < 0) {
} change.className += " negative";
// sum of all total coin values change.classList.remove("postive");
portfolioSum += quantityTotal; } else {
// put sum into the markup change.classList.remove("postive");
let portfolioTotalValue = document.querySelector("#portfolio-total-value .value"); change.classList.remove("negative");
}
// total value for each coin // Portfolio
if(coinRate.includes("Ƀ")) { let quantityValue = document.querySelector(
//because BTC has 8 decimal places "#coin-" + [key] + " .quantity-value"
quantityValue.innerHTML = quantityTotal.toFixed(8); );
portfolioTotalValue.innerHTML = portfolioSum.toFixed(8); let quantityNumber = settings.get("quantity." + [key]);
} let regp = /[^0-9.-]+/g;
else if(quantityValue != null) { if (quantityNumber != null) {
//standard currency format quantityTotal =
quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); parseFloat(coinRate.replace(regp, "")) *
portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 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"
);
// Chart labels // total value for each coin
chartLabels.push(key); if (coinRate.includes("Ƀ")) {
// Chart data //because BTC has 8 decimal places
chartData.push(quantityTotal); quantityValue.innerHTML = quantityTotal.toFixed(8);
portfolioTotalValue.innerHTML = portfolioSum.toFixed(8);
} //for } else if (quantityValue != null) {
//standard currency format
var newChartLabels = chartLabels; quantityValue.innerHTML = quantityTotal
.toFixed(2)
// Chart .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
var ctx = document.getElementById("portfolioChart"); portfolioTotalValue.innerHTML = portfolioSum
var myChart = new Chart(ctx, { .toFixed(2)
type: 'doughnut', .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
data: { }
datasets: [{ } //for
data: chartData, }); //response.json().then
backgroundColor: chartColors, } //function(response)
borderColor: '#000', ); //then
borderWidth: 0 appRefresh = setTimeout(function () {
}], updateData();
}, 5000); // run this once every 5 seconds
labels: newChartLabels
},
options: {
animation : false,
responsive: false,
maintainAspectRatio: true,
legend : {
position: 'bottom'
}
}
}); //myChart
}); //response.json().then
} //function(response)
) //then
appRefresh = setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
} //updateData() } //updateData()
// Let's do this thing! // Let's do this thing!
initData(); initData();
// Click on #saveCoins, save the coin selection to the user // Click on #saveCoins, save the coin selection to the user
document.getElementById('saveCoins').onclick = function(){ document.getElementById("saveCoins").onclick = function () {
var coinForm = document.getElementById('coinlist'); var coinForm = document.getElementById("coinlist");
var selchb = getSelectedChbox(coinForm); // gets the array returned by getSelectedChbox() var selchb = getSelectedChbox(coinForm); // gets the array returned by getSelectedChbox()
settings.set('user.coins', selchb); settings.set("user.coins", selchb);
//clear and reload //clear and reload
clearData(); clearData();
initData(); initData();
} };
/*********** /***********
* PORTFOLIO * PORTFOLIO
***********/ ***********/
var portfolio_list_container = document.querySelector('#portfolio-list'); var portfolio_list_container = document.querySelector("#portfolio-list");
var portfolio_list = settings.get('user.coins'); var portfolio_list = settings.get("user.coins");
//generate html from list of coins //generate html from list of coins
for (let key of Object.keys(portfolio_list)) { for (let key of Object.keys(portfolio_list)) {
let coin = portfolio_list[key]; let coin = portfolio_list[key];
//console.log(coin); //console.log(coin);
let li = createNode('li'), let li = createNode("li"),
span = createNode('span'); span = createNode("span");
sym = createNode('span'); sym = createNode("span");
li.setAttribute("id", "coin-"+[coin]); li.setAttribute("id", "coin-" + [coin]);
li.setAttribute("sortorder", settings.get(li.id+'.order')); li.setAttribute("sortorder", settings.get(li.id + ".order"));
append(li, span); append(li, span);
append(portfolio_ul, li); append(portfolio_ul, li);
if (settings.has('quantity.'+[coin])) { if (settings.has("quantity." + [coin])) {
inputValue = settings.get('quantity.'+[coin]); inputValue = settings.get("quantity." + [coin]);
} } else {
else { inputValue = "0";
inputValue = '0'; 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>';
i++; i++;
} //for } //for
// save quantities // save quantities
document.getElementById('saveQuantities').onclick = function(){ document.getElementById("saveQuantities").onclick = function () {
var items = portfolio_ul.getElementsByTagName("input"); var items = portfolio_ul.getElementsByTagName("input");
for (var i = 0; i < items.length; ++i) { for (var i = 0; i < items.length; ++i) {
// do something with items[i], which is a <li> element // do something with items[i], which is a <li> element
inputName = items[i].getAttribute("name"); inputName = items[i].getAttribute("name");
inputValue = items[i].value; inputValue = items[i].value;
//console.log(inputValue); //console.log(inputValue);
settings.set(inputName, 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 // 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);
} };
/*********** /***********
* SETTINGS * SETTINGS
***********/ ***********/
// Settings - list of coins // Settings - list of coins
function loadJSON(callback) { function loadJSON(callback) {
//Stored local version of https://www.cryptocompare.com/api/data/coinlist/ for performance //Stored local version of https://www.cryptocompare.com/api/data/coinlist/ for performance
var file = './coinlist.json'; var file = "./coinlist.json";
var xobj = new XMLHttpRequest(); var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json"); xobj.overrideMimeType("application/json");
xobj.open('GET', file, true); xobj.open("GET", file, true);
xobj.onreadystatechange = function () { xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") { 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 // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText); callback(xobj.responseText);
} }
}; };
xobj.send(null); xobj.send(null);
} //loadJSON } //loadJSON
// Generate the list of all coins // Generate the list of all coins
loadJSON(function(response) { loadJSON(function (response) {
// Parse JSON string into object // Parse JSON string into object
var myDiv = document.getElementById("coinlist"); var myDiv = document.getElementById("coinlist");
var actual_JSON = JSON.parse(response); var actual_JSON = JSON.parse(response);
//alert(settings.get('user.coins')); //alert(settings.get('user.coins'));
//console.log(actual_JSON.Data); //console.log(actual_JSON.Data);
//loop through data, get coin info, generate checkbox for each coin //loop through data, get coin info, generate checkbox for each coin
Object.keys(actual_JSON.Data).forEach(function(key) { Object.keys(actual_JSON.Data).forEach(function (key) {
//console.log(actual_JSON.Data[key].Name); //console.log(actual_JSON.Data[key].Name);
//console.log(actual_JSON.Data[key].CoinName); //console.log(actual_JSON.Data[key].CoinName);
var li = document.createElement("li"); var li = document.createElement("li");
var checkBox = document.createElement("input"); var checkBox = document.createElement("input");
checkBox.className = "coinCode"; checkBox.className = "coinCode";
var label = document.createElement("label"); var label = document.createElement("label");
label.className = "coinName"; label.className = "coinName";
var div = document.createElement("div"); var div = document.createElement("div");
checkBox.type = "checkbox"; checkBox.type = "checkbox";
checkBox.value = actual_JSON.Data[key].Name; checkBox.value = actual_JSON.Data[key].Name;
@ -434,54 +427,56 @@ loadJSON(function(response) {
label.htmlFor = actual_JSON.Data[key].Name; label.htmlFor = actual_JSON.Data[key].Name;
checkBox.name = "cl[]"; checkBox.name = "cl[]";
//check the coins the user has already set //check the coins the user has already set
var str = String(settings.get('user.coins')); var str = String(settings.get("user.coins"));
var split_str = str.split(","); var split_str = str.split(",");
if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) { if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) {
checkBox.checked = true; checkBox.checked = true;
} }
myDiv.appendChild(li); myDiv.appendChild(li);
li.appendChild(checkBox); li.appendChild(checkBox);
li.appendChild(label); li.appendChild(label);
label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName)); label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName));
label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')')); label.appendChild(
document.createTextNode(" (" + actual_JSON.Data[key].Name + ")")
);
label.appendChild(div); label.appendChild(div);
}); //forEach }); //forEach
}); //loadJSON }); //loadJSON
// Returns an array with values of the selected (checked) checkboxes in "frm" // Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) { function getSelectedChbox(frm) {
var selchbox = []; // array that will store the value of selected checkboxes var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number // gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input'); var inpfields = frm.getElementsByTagName("input");
var nr_inpfields = inpfields.length; var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) { for (var i = 0; i < nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value); if (inpfields[i].type == "checkbox" && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
} }
return selchbox; return selchbox;
} }
/*********** /***********
* PIN TO TOP * PIN TO TOP
*************/ *************/
pinCheck.onclick = function(event) { pinCheck.onclick = function (event) {
var window = remote.getCurrentWindow(); var window = remote.getCurrentWindow();
var checkbox = event.target; var checkbox = event.target;
if(checkbox.checked) { if (checkbox.checked) {
//Checkbox has been checked //Checkbox has been checked
window.setAlwaysOnTop(true); //immediately make the change to the window window.setAlwaysOnTop(true); //immediately make the change to the window
settings.set('user.pinToTop', 'yes'); settings.set("user.pinToTop", "yes");
} else { } else {
//Checkbox has been unchecked //Checkbox has been unchecked
window.setAlwaysOnTop(false); window.setAlwaysOnTop(false);
settings.set('user.pinToTop', 'no'); settings.set("user.pinToTop", "no");
} }
}; };
/******* /*******
* APP UI * APP UI
********/ ********/
//Window controls //Window controls
document.getElementById("close-btn").addEventListener("click", function (e) { document.getElementById("close-btn").addEventListener("click", function (e) {
@ -490,44 +485,44 @@ document.getElementById("close-btn").addEventListener("click", function (e) {
}); });
document.getElementById("min-btn").addEventListener("click", function (e) { document.getElementById("min-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow(); var window = remote.getCurrentWindow();
window.minimize(); window.minimize();
}); });
//Panel tabs //Panel tabs
var tabLinks = document.querySelectorAll('.tabs button'); var tabLinks = document.querySelectorAll(".tabs button");
for (var i = 0; i < tabLinks.length; i++) { for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].onclick = function() { tabLinks[i].onclick = function () {
var target = this.getAttribute('href').replace('#', ''); var target = this.getAttribute("href").replace("#", "");
var sections = document.querySelectorAll('.panel'); var sections = document.querySelectorAll(".panel");
for(var j=0; j < sections.length; j++) { for (var j = 0; j < sections.length; j++) {
sections[j].style.display = 'none'; sections[j].style.display = "none";
}
document.getElementById(target).style.display = 'block';
for(var k=0; k < tabLinks.length; k++) {
tabLinks[k].removeAttribute('class');
} }
this.setAttribute('class', 'active'); document.getElementById(target).style.display = "block";
for (var k = 0; k < tabLinks.length; k++) {
tabLinks[k].removeAttribute("class");
}
this.setAttribute("class", "active");
return false; return false;
} };
}; }
//Coin search filter //Coin search filter
function myFunction() { function myFunction() {
// Declare variables // Declare variables
var input, filter, ul, li, a, i; var input, filter, ul, li, a, i;
input = document.getElementById('myInput'); input = document.getElementById("myInput");
filter = input.value.toUpperCase(); filter = input.value.toUpperCase();
ul = document.getElementById("coinlist"); ul = document.getElementById("coinlist");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query // Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
label = li[i].getElementsByTagName("label")[0]; label = li[i].getElementsByTagName("label")[0];
checkbox = li[i].getElementsByTagName("input")[0].value; checkbox = li[i].getElementsByTagName("input")[0].value;
if (label.innerHTML.toUpperCase().indexOf(filter) > -1) { if (label.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = ""; li[i].style.display = "";
} else { } else {
li[i].style.display = "none"; li[i].style.display = "none";
} }
} //for } //for
} //myFunction } //myFunction
@ -535,16 +530,20 @@ function myFunction() {
//sort by attribute //sort by attribute
function sortChildren(wrap, f, isNum) { function sortChildren(wrap, f, isNum) {
var l = wrap.children.length, var l = wrap.children.length,
arr = new Array(l); arr = new Array(l);
for(var i=0; i<l; ++i) for (var i = 0; i < l; ++i) arr[i] = [f(wrap.children[i]), wrap.children[i]];
arr[i] = [f(wrap.children[i]), wrap.children[i]]; arr.sort(
arr.sort(isNum isNum
? function(a,b){ return a[0]-b[0]; } ? function (a, b) {
: function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; } return a[0] - b[0];
}
: function (a, b) {
return a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0;
}
); );
var par = wrap.parentNode, var par = wrap.parentNode,
ref = wrap.nextSibling; ref = wrap.nextSibling;
par.removeChild(wrap); par.removeChild(wrap);
for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]); for (var i = 0; i < l; ++i) wrap.appendChild(arr[i][1]);
par.insertBefore(wrap, ref); par.insertBefore(wrap, ref);
} //sortChildren } //sortChildren

64
main.js
View File

@ -1,29 +1,31 @@
const electron = require('electron') const electron = require("electron");
// Module to control application life. // Module to control application life.
const app = electron.app const app = electron.app;
// Module to create native browser window. // Module to create native browser window.
const BrowserWindow = electron.BrowserWindow const BrowserWindow = electron.BrowserWindow;
//Store Window size and position //Store Window size and position
const windowStateKeeper = require('electron-window-state'); const windowStateKeeper = require("electron-window-state");
const path = require("path");
const url = require("url");
const path = require('path') const settings = require("electron-settings");
const url = require('url')
const settings = require('electron-settings');
// Keep a global reference of the window object, if you don't, the window will // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected. // be closed automatically when the JavaScript object is garbage collected.
let mainWindow let mainWindow;
function createWindow () { function createWindow() {
// Load the previous state with fallback to defaults // Load the previous state with fallback to defaults
let mainWindowState = windowStateKeeper({ let mainWindowState = windowStateKeeper({
defaultWidth: 320, defaultWidth: 320,
defaultHeight: 240 defaultHeight: 240,
}); });
// Create the browser window. // Create the browser window.
mainWindow = new electron.BrowserWindow({ mainWindow = new electron.BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
title: app.getName(), title: app.getName(),
alwaysOnTop: false, alwaysOnTop: false,
//show: false, //show: false,
@ -37,10 +39,10 @@ function createWindow () {
maximizable: false, maximizable: false,
fullscreenable: false, fullscreenable: false,
frame: false, frame: false,
titleBarStyle: 'customButtonsOnHover', titleBarStyle: "customButtonsOnHover",
autoHideMenuBar: true, autoHideMenuBar: true,
transparent: true, transparent: true,
icon: 'images/icon.png' icon: "images/icon.png",
}); });
// Let us register listeners on the window, so we can update the state // Let us register listeners on the window, so we can update the state
@ -49,45 +51,47 @@ function createWindow () {
mainWindowState.manage(mainWindow); mainWindowState.manage(mainWindow);
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadURL(url.format({ mainWindow.loadURL(
pathname: path.join(__dirname, 'index.html'), url.format({
protocol: 'file:', pathname: path.join(__dirname, "index.html"),
slashes: true protocol: "file:",
})) slashes: true,
})
);
// Open the DevTools. // Open the DevTools.
// mainWindow.webContents.openDevTools() // mainWindow.webContents.openDevTools()
// Emitted when the window is closed. // Emitted when the window is closed.
mainWindow.on('closed', function () { mainWindow.on("closed", function () {
// Dereference the window object, usually you would store windows // Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time // in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element. // when you should delete the corresponding element.
mainWindow = null mainWindow = null;
}) });
} }
// This method will be called when Electron has finished // This method will be called when Electron has finished
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.on('ready', createWindow) app.on("ready", createWindow);
// Quit when all windows are closed. // Quit when all windows are closed.
app.on('window-all-closed', function () { app.on("window-all-closed", function () {
// On OS X it is common for applications and their menu bar // On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q // to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') { if (process.platform !== "darwin") {
app.quit() app.quit();
} }
}) });
app.on('activate', function () { app.on("activate", function () {
// On OS X it's common to re-create a window in the app when the // On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open. // dock icon is clicked and there are no other windows open.
if (mainWindow === null) { if (mainWindow === null) {
createWindow() createWindow();
} }
}) });
// In this file you can include the rest of your app's specific main process // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here. // code. You can also put them in separate files and require them here.

10677
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "crypto-price-widget", "name": "crypto-price-widget",
"productName": "Crypto Price Widget", "productName": "Crypto Price Widget",
"version": "1.2.0", "version": "1.4.0",
"description": "A cross-platform app for tracking Crypto prices", "description": "A cross-platform app for tracking Crypto prices",
"main": "main.js", "main": "main.js",
"scripts": { "scripts": {
@ -22,18 +22,19 @@
"author": "Nathan Parikh", "author": "Nathan Parikh",
"license": "CC0-1.0", "license": "CC0-1.0",
"devDependencies": { "devDependencies": {
"electron": "~1.6.2", "electron": "^9.0.4",
"electron-packager": "^8.7.2" "electron-packager": "^14.2.1",
"electron-winstaller": "^4.0.0"
}, },
"dependencies": { "dependencies": {
"ava": "^0.15.2", "ava": "^3.8.2",
"cryptocurrencies": "^1.0.0", "cryptocurrencies": "^7.0.0",
"electron-settings": "^3.1.1", "electron-settings": "^3.2.0",
"electron-window-state": "^4.1.1", "electron-window-state": "^5.0.3",
"html5sortable": "^0.6.1", "html5sortable": "^0.9.17",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"lodash.sortby": "^4.7.0", "lodash.sortby": "^4.7.0",
"sortablejs": "^1.6.0", "sortablejs": "^1.10.2",
"xo": "^0.16.0" "xo": "^0.32.0"
} }
} }

BIN
release-builds/Crypto Price Widget-linux.zip
View File

Binary file not shown.

BIN
release-builds/Crypto Price Widget-macOS-1.0.0.zip
View File

Binary file not shown.

BIN
release-builds/Crypto Price Widget-macOS-1.1.0.zip
View File

Binary file not shown.

BIN
release-builds/Crypto Price Widget-windows-1.0.0.zip
View File

Binary file not shown.

BIN
release-builds/Crypto Price Widget-windows-1.1.0.zip
View File

Binary file not shown.