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

fonts are now local to help speed up the app load time

Browse Source
This commit is contained in:
Nathan Parikh 2017-10-11 07:52:31 -05:00
parent 03fe34fb08
commit e4bc240bf2
11 changed files with 1752 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1579
css/animate.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

37
css/app.css
View File

@ -1,6 +1,40 @@
/*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 { body {
background: rgba(0, 0, 0, 0.95); background: rgba(0, 0, 0, 0.95);
font-family: 'Inconsolata', monospace;
color: #fff; color: #fff;
margin-top: 5px; margin-top: 5px;
} }
@ -146,7 +180,6 @@ ul {
border: 1px solid #252525; border: 1px solid #252525;
border-left-width: 2px; border-left-width: 2px;
padding: 0px 5px 0px; padding: 0px 5px 0px;
font-family: 'Heebo', sans-serif;
font-size: 12px; font-size: 12px;
} }
.coin-list li .sym:hover { .coin-list li .sym:hover {

BIN
fonts/heebo-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/heebo-regular-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/heebo-thin-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/heebo-thin-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/inconsolata-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/inconsolata-regular-webfont.woff2 Normal file
View File

Binary file not shown.

5
index.html
View File

@ -3,9 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Latest Crypto Prices</title> <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">
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<!--<link href="css/animate.css" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css?family=Heebo:100,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">-->
</head> </head>
<body> <body>

284
js/app_common.js
View File

@ -5,84 +5,29 @@
const remote = require('electron').remote; const remote = require('electron').remote;
//user settings //user settings
const settings = require('electron-settings'); const settings = require('electron-settings');
settings.set('developer', {
first: 'Nathan', //default coins
last: 'Parikh' if(settings.has('user.coins')) {
});
//default 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');
} }
(function() { /* Base Currency */
// Settings - list of coins base = settings.get('user.currency'); // get the user's base currency
function loadJSON(callback) { var currSel = document.getElementById('base'); //select the currency select box
var file = 'https://www.cryptocompare.com/api/data/coinlist/'; currSel.value = settings.get('user.currency'); //select the option that corresponds to the user's currency
var xobj = new XMLHttpRequest(); setBase = function() {
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 //selected base currency
var sel = document.getElementById('base'); var sel = document.getElementById('base');
var x = sel.selectedIndex; var x = sel.selectedIndex;
@ -90,9 +35,7 @@ settings.set('developer', {
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) {
@ -102,20 +45,6 @@ function append(parent, el) {
return parent.appendChild(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 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'; const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
@ -126,19 +55,15 @@ function initData() {
fetch(url) fetch(url)
.then( .then(
function(response) { function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the response // Examine the response
response.json().then(function(data) { response.json().then(function(data) {
//console.log(data); //console.log(data);
let prices = data.DISPLAY; 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; var i = 0;
for (let key of Object.keys(prices)) { for (let key of Object.keys(pricesDISPLAY)) {
let coin = prices[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');
@ -147,6 +72,10 @@ function initData() {
li.setAttribute("id", "coin-"+[key]); li.setAttribute("id", "coin-"+[key]);
//alert("coin-"+[key]) //alert("coin-"+[key])
//console.log(settings.get('coin.'+[key]+'.order')); //console.log(settings.get('coin.'+[key]+'.order'));
//span = document.querySelector("#coin-"+[key]+" span");
span.setAttribute("class", "draggable");
li.setAttribute("sortorder", settings.get(li.id+'.order')); li.setAttribute("sortorder", settings.get(li.id+'.order'));
//alert(settings.get(li.id+'.order')); //alert(settings.get(li.id+'.order'));
append(li, span); append(li, span);
@ -188,49 +117,48 @@ function initData() {
//alert(settings.get('coin.'+e+'.order')); //alert(settings.get('coin.'+e+'.order'));
}); //sortable }); //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);
}
}); //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!');
// Parse JSON string into object
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
}//initData
});
}
function updateData() { function updateData() {
/*
** 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')); //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) fetch(url)
.then( .then(
function(response) { 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 // Examine the text in the response
response.json().then(function(data) { response.json().then(function(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
let portfolioSum = 0; let portfolioSum = 0;
// Chart labels // Chart labels
@ -260,25 +188,6 @@ function updateData() {
'#C2185B', '#C2185B',
'#fff' '#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)) { for (let key of Object.keys(pricesRAW)) {
let coinDISPLAY = pricesDISPLAY[key]; let coinDISPLAY = pricesDISPLAY[key];
@ -291,7 +200,6 @@ function updateData() {
if( li.getAttribute('sortorder')=="undefined" ) { if( li.getAttribute('sortorder')=="undefined" ) {
li.setAttribute("sortorder", 999); li.setAttribute("sortorder", 999);
} }
span.setAttribute("class", "draggable");
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 $
@ -326,16 +234,6 @@ function updateData() {
change.classList.remove("negative"); change.classList.remove("negative");
} }
// Apply Sorting
sortChildren(
document.getElementById('prices'),
function(li) { return +li.getAttribute('sortorder') }
);
sortChildren(
document.getElementById('portfolio-list'),
function(li) { return +li.getAttribute('sortorder') }
);
// Portfolio // Portfolio
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]);
@ -366,11 +264,6 @@ function updateData() {
} //for } //for
sortChildren(
document.getElementById('portfolio-list'),
function(li) { return +li.getAttribute('sortorder') }
);
var newChartLabels = chartLabels; var newChartLabels = chartLabels;
// Chart // Chart
@ -397,26 +290,15 @@ function updateData() {
} }
}); //myChart }); //myChart
//Pin to Top - settings check - immediately set checkbox and window to saved state }); //response.json().then
if(settings.get('user.pinToTop') == 'yes') { } //function(response)
pinCheck.checked = true; ) //then
remote.getCurrentWindow().setAlwaysOnTop(true);
} else {
pinCheck.checked = false;
remote.getCurrentWindow().setAlwaysOnTop(false);
}
}); //then
}
)
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
} } //updateData()
// Let's do this thing! // Let's do this thing!
initData(); initData();
/* Test this function */
//document.getElementById('firstname').innerHTML = settings.get('user.coins');
// 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');
@ -478,6 +360,74 @@ document.getElementById('saveQuantities').onclick = function(){
//location.reload(false); //location.reload(false);
} }
/***********
* SETTINGS
***********/
// Settings - list of coins
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
// 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 * PIN TO TOP
*************/ *************/

6
renderer.js
View File

@ -1,3 +1,9 @@
// This file is required by the index.html file and will // This file is required by the index.html file and will
// be executed in the renderer process for that window. // be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process. // 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"
})
*/