mirror of
https://github.com/nathanp/crypto-price-widget.git
synced 2025-11-06 03:08:55 -05:00
fonts are now local to help speed up the app load time
This commit is contained in:
Nathan Parikh
parent
03fe34fb08
commit
e4bc240bf2
1579
css/animate.css
vendored
Normal file
1579
css/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
37
css/app.css
37
css/app.css
@ -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 {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
font-family: 'Inconsolata', monospace;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -146,7 +180,6 @@ ul {
|
||||
border: 1px solid #252525;
|
||||
border-left-width: 2px;
|
||||
padding: 0px 5px 0px;
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
.coin-list li .sym:hover {
|
||||
|
||||
BIN
fonts/heebo-regular-webfont.woff
Normal file
BIN
fonts/heebo-regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/heebo-regular-webfont.woff2
Normal file
BIN
fonts/heebo-regular-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/heebo-thin-webfont.woff
Normal file
BIN
fonts/heebo-thin-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/heebo-thin-webfont.woff2
Normal file
BIN
fonts/heebo-thin-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/inconsolata-regular-webfont.woff
Normal file
BIN
fonts/inconsolata-regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/inconsolata-regular-webfont.woff2
Normal file
BIN
fonts/inconsolata-regular-webfont.woff2
Normal file
Binary file not shown.
@ -3,9 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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/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>
|
||||
|
||||
<body>
|
||||
|
||||
284
js/app_common.js
284
js/app_common.js
@ -5,84 +5,29 @@
|
||||
const remote = require('electron').remote;
|
||||
//user settings
|
||||
const settings = require('electron-settings');
|
||||
settings.set('developer', {
|
||||
first: 'Nathan',
|
||||
last: 'Parikh'
|
||||
});
|
||||
//default coins
|
||||
if(settings.has('user.coins')) {
|
||||
|
||||
//default coins
|
||||
if(settings.has('user.coins')) {
|
||||
//do nothing because coins already set
|
||||
}
|
||||
else {
|
||||
}
|
||||
else {
|
||||
settings.set('user', {
|
||||
coins: 'BTC,ETH,LTC'
|
||||
});
|
||||
}
|
||||
//default base currency
|
||||
if(settings.has('user.currency')) {
|
||||
}
|
||||
//default base currency
|
||||
if(settings.has('user.currency')) {
|
||||
//do nothing because currency already set
|
||||
}
|
||||
else {
|
||||
}
|
||||
else {
|
||||
settings.set('user.currency', 'USD');
|
||||
}
|
||||
}
|
||||
|
||||
(function() {
|
||||
// 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
|
||||
|
||||
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() {
|
||||
/* Base Currency */
|
||||
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
|
||||
var sel = document.getElementById('base');
|
||||
var x = sel.selectedIndex;
|
||||
@ -90,9 +35,7 @@ settings.set('developer', {
|
||||
base = y[x].text;
|
||||
settings.set('user.currency', base); //save the user's selection
|
||||
updateData(); //immediately reflect the changed currency
|
||||
};
|
||||
|
||||
})();
|
||||
};
|
||||
|
||||
//Functions for creating/appending elements
|
||||
function createNode(element) {
|
||||
@ -102,20 +45,6 @@ function append(parent, 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 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';
|
||||
@ -126,19 +55,15 @@ function initData() {
|
||||
fetch(url)
|
||||
.then(
|
||||
function(response) {
|
||||
if (response.status !== 200) {
|
||||
console.log('Looks like there was a problem. Status Code: ' +
|
||||
response.status);
|
||||
return;
|
||||
}
|
||||
|
||||
// Examine the response
|
||||
response.json().then(function(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;
|
||||
for (let key of Object.keys(prices)) {
|
||||
let coin = prices[key];
|
||||
for (let key of Object.keys(pricesDISPLAY)) {
|
||||
let coin = pricesDISPLAY[key];
|
||||
//console.log(coin);
|
||||
let li = createNode('li'),
|
||||
span = createNode('span');
|
||||
@ -147,6 +72,10 @@ function initData() {
|
||||
li.setAttribute("id", "coin-"+[key]);
|
||||
//alert("coin-"+[key])
|
||||
//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'));
|
||||
//alert(settings.get(li.id+'.order'));
|
||||
append(li, span);
|
||||
@ -188,49 +117,48 @@ function initData() {
|
||||
//alert(settings.get('coin.'+e+'.order'));
|
||||
}); //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
|
||||
updateData();
|
||||
} //function(response)
|
||||
) //.then
|
||||
.catch(function(err) {
|
||||
console.log('Unable to connect!');
|
||||
|
||||
|
||||
// Parse JSON string into object
|
||||
var mainDiv = document.getElementById("main");
|
||||
|
||||
var errorDiv = document.createElement('div');
|
||||
|
||||
errorDiv.className = 'error';
|
||||
|
||||
errorDiv.innerHTML = '<h2>Uh-oh! Looks like you're offline.</h2>\
|
||||
<img src="images/offline_doge.jpg" />\
|
||||
<h4>Reconnect, then reload the app.</h4>\
|
||||
<button type="button" class="refresh" onClick="location.reload(false);" >Reload</button>';
|
||||
|
||||
document.getElementById('main').appendChild(errorDiv);
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
});//catch
|
||||
}//initData
|
||||
|
||||
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'));
|
||||
const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
|
||||
fetch(url)
|
||||
.then(
|
||||
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
|
||||
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 pricesRAW = data.RAW; // raw to get "BTC" instead of bitcoin symbol
|
||||
let portfolioSum = 0;
|
||||
|
||||
// Chart labels
|
||||
@ -260,25 +188,6 @@ function updateData() {
|
||||
'#C2185B',
|
||||
'#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)) {
|
||||
let coinDISPLAY = pricesDISPLAY[key];
|
||||
@ -291,7 +200,6 @@ function updateData() {
|
||||
if( li.getAttribute('sortorder')=="undefined" ) {
|
||||
li.setAttribute("sortorder", 999);
|
||||
}
|
||||
span.setAttribute("class", "draggable");
|
||||
|
||||
let coinSymbol = coinRAW[base].FROMSYMBOL;
|
||||
let coinRate = coinDISPLAY[base].PRICE.replace(/ /g,''); //.replace(/ /g,'') removes space after $
|
||||
@ -326,16 +234,6 @@ function updateData() {
|
||||
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
|
||||
let quantityValue = document.querySelector("#coin-"+[key]+" .quantity-value");
|
||||
let quantityNumber = settings.get('quantity.'+[key]);
|
||||
@ -366,11 +264,6 @@ function updateData() {
|
||||
|
||||
} //for
|
||||
|
||||
sortChildren(
|
||||
document.getElementById('portfolio-list'),
|
||||
function(li) { return +li.getAttribute('sortorder') }
|
||||
);
|
||||
|
||||
var newChartLabels = chartLabels;
|
||||
|
||||
// Chart
|
||||
@ -397,26 +290,15 @@ function updateData() {
|
||||
}
|
||||
}); //myChart
|
||||
|
||||
//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);
|
||||
}
|
||||
|
||||
}); //then
|
||||
}
|
||||
)
|
||||
}); //response.json().then
|
||||
} //function(response)
|
||||
) //then
|
||||
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
|
||||
}
|
||||
} //updateData()
|
||||
|
||||
// Let's do this thing!
|
||||
initData();
|
||||
|
||||
/* Test this function */
|
||||
//document.getElementById('firstname').innerHTML = settings.get('user.coins');
|
||||
// Click on #saveCoins, save the coin selection to the user
|
||||
document.getElementById('saveCoins').onclick = function(){
|
||||
var coinForm = document.getElementById('coinlist');
|
||||
@ -478,6 +360,74 @@ document.getElementById('saveQuantities').onclick = function(){
|
||||
//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
|
||||
*************/
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
// This file is required by the index.html file and will
|
||||
// be executed in the renderer process for that window.
|
||||
// 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"
|
||||
})
|
||||
*/
|
||||
Loading…
x
Reference in New Issue
Block a user