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

Separated markup, logic, and styling. Also fixed issue #3

Browse Source
This commit is contained in:
Nathan Parikh 2017-09-11 16:17:34 -05:00
parent 8684427f76
commit 3a8dbd63f0
3 changed files with 686 additions and 698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
css/app.css Normal file
View File

@ -0,0 +1,336 @@
body {
background: rgba(0, 0, 0, 0.95);
font-family: 'Inconsolata', monospace;
color: #fff;
margin-top: 5px;
}
ul {
margin: 0;
padding: 0;
}
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
opacity: 0;
}
.titlebar:hover {
opacity: 1;
}
.titlebar .controls {
float: right;
line-height: 0;
}
button {
-webkit-app-region: no-drag;
background: none;
border: none;
outline: none;
}
#close-btn,
#min-btn {
height: 12px;
width: 12px;
background: none;
border: 2px solid #000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 0;
}
#close-btn {
border-color: #ff2626;
}
#close-btn:hover {
background: #ff2626;
}
#min-btn {
border-color: #ffbd45;
}
#min-btn:hover {
background: #ffbd45;
}
#settings-btn {
padding: 0;
}
#settings-btn img {
width: 24px;
opacity: 0.5;
}
#settings-btn:hover img {
opacity: 1;
}
ul {
list-style-type: none;
}
#prices {
margin: 0;
padding: 0;
font-size: 28px;
font-weight: 400;
}
#prices li {
margin: 0px 0px 15px 0px;
padding: 0px 0px 15px 0px;
border-bottom: 1px solid #252525;
}
#prices li:last-child {
border-bottom: none;
}
#prices li span {
}
#prices li span.draggable {
width: 100%;
}
#prices 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 {
cursor: -webkit-grab;
}
/*Symbol Colors*/
#prices li#coin-BTC .sym {
border-left-color: #F9A847;
}
#prices li#coin-XRP .sym {
border-left-color: #0997D2;
}
#prices li#coin-LTC .sym {
border-left-color: #F1F1F1;
}
#prices li#coin-NEO .sym,
#prices li#coin-GAS .sym {
border-left-color: #9CD115;
}
#prices li#coin-OMG .sym {
border-left-color: #1A53F0;
}
#prices li#coin-BCH .sym {
border-left-color: #F7931A;
}
#prices li#coin-DASH .sym {
border-left-color: #0475B6;
}
#prices li#coin-XMR .sym {
border-left-color: #FF6600;
}
#prices li#coin-ETC .sym {
border-left-color: #689274;
}
#prices li#coin-ZEC .sym {
border-left-color: #EFB948;
}
#prices li#coin-GNT .sym {
border-left-color: #00AFBF;
}
#prices li#coin-BAT .sym {
border-left-color: #662F92;
}
#prices li#coin-FCT .sym {
border-left-color: #E3A77D;
}
#prices li#coin-ARK .sym {
border-left-color: #CB0101;
}
#prices li#coin-DOGE .sym {
border-left-color: #BBA034;
}
#prices li#coin-CVC .sym {
border-left-color: #41BB2E;
}
#prices li#coin-MCO .sym {
border-left-color: #82344C;
}
#prices li#coin-UBQ .sym {
border-left-color: #00EA90;
}
#prices li#coin-DNT .sym {
border-left-color: #7CF7FA;
}
#prices li .change {
padding: 2px 3px 2px;
font-size: 12px;
float: right;
margin: 10px 0px 0px;
background: #000;
}
#prices li .change.positive {
color: #b2ff93;
}
#prices li .change.negative {
color: #ff6765;
}
.active {
display: block;
}
.inactive {
display: none;
}
/*Settings Page*/
#settings h3:first-child {
margin-top: 5px;
}
#myInput {
font-family: 'Inconsolata', monospace;
border: none;
padding: 0px 0px 10px;
font-size: 14px;
background: rgba(0, 0, 0, 0);
color: #fff;
outline: none;
border-bottom: 1px solid #252525;
display: block;
width: 100%;
}
#saveCoins {
background-color: #000000;
color: #fff;
border: 1px solid #252525;
padding: 5px 10px;
margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
}
#coinlist {
margin: 15px 0px 0px 0px;
padding: 0;
max-height: 218px;
overflow-y: scroll;
}
#coinlist li {
position: relative;
margin: 0px 0px 5px 0px;
}
/* Custom checkboxes inspired by https://codepen.io/sderoij/pen/VvJJwE */
#coinlist label {
height: auto;
width: 100%;
z-index: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
text-indent: 24px;
}
#coinlist label div {
height: 12px;
width: 12px;
border: solid 2px rgba(255, 255, 255, 0.6);
margin: 0;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0ms ease-in-out, border 0ms ease 0ms;
position: absolute;
top: 0;
}
#coinlist input:hover + label div {
border-color: rgba(138, 255, 131, 0.9);
}
#coinlist input {
height: auto;
width: 18px;
margin: 0;
opacity: 0;
z-index: 1;
position: relative;
cursor: pointer;
}
#coinlist input:checked + label > div {
border-radius: 0;
border-top: 0;
border-left: 0;
border-color: rgba(138, 255, 131, 0.9);
height: 15px;
width: 12px;
margin-top: -4px;
margin-left: 0px;
transform: rotate(40deg);
transition: all 0ms ease-in-out;
}
#tips {
font-size: 12px;
}
#tips li {
}
.creds {
font-size: 8px;
color: #252525;
margin: 15px 0px 0px 0px;
}
.creds a {
text-decoration: none;
color: #252525;
}
/*Scrollbar*/
::-webkit-scrollbar-corner {
background-color: #000;
}
::-webkit-scrollbar {
background-color: rgba(0, 0, 0, 100);
}
::-webkit-scrollbar {
width: .5em;
height: .5em;
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
background: #252525;
-webkit-border-radius: 100px;
}
/*Select Boxes*/
.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
border: 1px solid #252525;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline: none;
line-height: 1.2;
background: #000000;
-webkit-appearance: none;
width: 145px;
color: #fff;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select select:focus {
-webkit-box-shadow: 0 0 3px 1px #00afc1;
-moz-box-shadow: 0 0 3px 1px #00afc1;
box-shadow: 0 0 3px 1px #00afc1;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #252525;
color: white;
pointer-events: none;
}

712
index.html
View File

@ -5,345 +5,7 @@
<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">
<style type="text/css">
/*@import url('https://rsms.me/interface/interface.css');*/
body {
background: rgba(0, 0, 0, 0.95);
font-family: 'Inconsolata', monospace;
color: #fff;
margin-top: 5px;
}
ul {
margin: 0;
padding: 0;
}
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
opacity: 0;
}
.titlebar:hover {
opacity: 1;
}
.titlebar .controls {
float: right;
line-height: 0;
}
button {
-webkit-app-region: no-drag;
background: none;
border: none;
outline: none;
}
#close-btn,
#min-btn {
height: 12px;
width: 12px;
background: none;
border: 2px solid #000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 0;
}
#close-btn {
border-color: #ff2626;
}
#close-btn:hover {
background: #ff2626;
}
#min-btn {
border-color: #ffbd45;
}
#min-btn:hover {
background: #ffbd45;
}
#settings-btn {
padding: 0;
}
#settings-btn img {
width: 24px;
opacity: 0.5;
}
#settings-btn:hover img {
opacity: 1;
}
ul {
list-style-type: none;
}
#prices {
margin: 0;
padding: 0;
font-size: 28px;
font-weight: 400;
}
#prices li {
margin: 0px 0px 15px 0px;
padding: 0px 0px 15px 0px;
border-bottom: 1px solid #252525;
}
#prices li:last-child {
border-bottom: none;
}
#prices li span {
}
#prices li span.draggable {
width: 100%;
}
#prices 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 {
cursor: -webkit-grab;
}
/*Symbol Colors*/
#prices li#coin-BTC .sym {
border-left-color: #F9A847;
}
#prices li#coin-XRP .sym {
border-left-color: #0997D2;
}
#prices li#coin-LTC .sym {
border-left-color: #F1F1F1;
}
#prices li#coin-NEO .sym,
#prices li#coin-GAS .sym {
border-left-color: #9CD115;
}
#prices li#coin-OMG .sym {
border-left-color: #1A53F0;
}
#prices li#coin-BCH .sym {
border-left-color: #F7931A;
}
#prices li#coin-DASH .sym {
border-left-color: #0475B6;
}
#prices li#coin-XMR .sym {
border-left-color: #FF6600;
}
#prices li#coin-ETC .sym {
border-left-color: #689274;
}
#prices li#coin-ZEC .sym {
border-left-color: #EFB948;
}
#prices li#coin-GNT .sym {
border-left-color: #00AFBF;
}
#prices li#coin-BAT .sym {
border-left-color: #662F92;
}
#prices li#coin-FCT .sym {
border-left-color: #E3A77D;
}
#prices li#coin-ARK .sym {
border-left-color: #CB0101;
}
#prices li#coin-DOGE .sym {
border-left-color: #BBA034;
}
#prices li#coin-CVC .sym {
border-left-color: #41BB2E;
}
#prices li#coin-MCO .sym {
border-left-color: #82344C;
}
#prices li#coin-UBQ .sym {
border-left-color: #00EA90;
}
#prices li#coin-DNT .sym {
border-left-color: #7CF7FA;
}
#prices li .change {
padding: 2px 3px 2px;
font-size: 12px;
float: right;
margin: 10px 0px 0px;
background: #000;
}
#prices li .change.positive {
color: #b2ff93;
}
#prices li .change.negative {
color: #ff6765;
}
.active {
display: block;
}
.inactive {
display: none;
}
/*Settings Page*/
#settings h3:first-child {
margin-top: 5px;
}
#myInput {
font-family: 'Inconsolata', monospace;
border: none;
padding: 0px 0px 10px;
font-size: 14px;
background: rgba(0, 0, 0, 0);
color: #fff;
outline: none;
border-bottom: 1px solid #252525;
display: block;
width: 100%;
}
#saveCoins {
background-color: #000000;
color: #fff;
border: 1px solid #252525;
padding: 5px 10px;
margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
}
#coinlist {
margin: 15px 0px 0px 0px;
padding: 0;
max-height: 218px;
overflow-y: scroll;
}
#coinlist li {
position: relative;
margin: 0px 0px 5px 0px;
}
/* Custom checkboxes inspired by https://codepen.io/sderoij/pen/VvJJwE */
#coinlist label {
height: auto;
width: 100%;
z-index: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
text-indent: 24px;
}
#coinlist label div {
height: 12px;
width: 12px;
border: solid 2px rgba(255, 255, 255, 0.6);
margin: 0;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0ms ease-in-out, border 0ms ease 0ms;
position: absolute;
top: 0;
}
#coinlist input:hover + label div {
border-color: rgba(138, 255, 131, 0.9);
}
#coinlist input {
height: auto;
width: 18px;
margin: 0;
opacity: 0;
z-index: 1;
position: relative;
cursor: pointer;
}
#coinlist input:checked + label > div {
border-radius: 0;
border-top: 0;
border-left: 0;
border-color: rgba(138, 255, 131, 0.9);
height: 15px;
width: 12px;
margin-top: -4px;
margin-left: 0px;
transform: rotate(40deg);
transition: all 0ms ease-in-out;
}
#tips {
font-size: 12px;
}
#tips li {
}
.creds {
font-size: 8px;
color: #252525;
margin: 15px 0px 0px 0px;
}
.creds a {
text-decoration: none;
color: #252525;
}
/*Scrollbar*/
::-webkit-scrollbar-corner {
background-color: #000;
}
::-webkit-scrollbar {
background-color: rgba(0, 0, 0, 100);
}
::-webkit-scrollbar {
width: .5em;
height: .5em;
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
background: #252525;
-webkit-border-radius: 100px;
}
/*Select Boxes*/
.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
border: 1px solid #252525;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline: none;
line-height: 1.2;
background: #000000;
-webkit-appearance: none;
width: 145px;
color: #fff;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select select:focus {
-webkit-box-shadow: 0 0 3px 1px #00afc1;
-moz-box-shadow: 0 0 3px 1px #00afc1;
box-shadow: 0 0 3px 1px #00afc1;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #252525;
color: white;
pointer-events: none;
}
</style>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
@ -353,6 +15,7 @@
<button id="close-btn"></button>
</div>
<button id="settings-btn" onclick="toggleSettings()"><img src="images/icons8-Settings.png"></button>
<button id="settings-btn" onclick="toggleSettings()">folio</button>
</header>
<div id="main" class="panel active">
@ -410,370 +73,23 @@
</div>
</div><!-- #settings -->
<!--<div id="portfolio" class="panel active">-->
<!-- manual selection of coins - separate from what's tracking -->
<!-- manual entry of quantity -->
<!-- grab coin prices same as above -->
<!-- show current portfolio value -->
<!-- show what % each coin is of portfolio -->
<!-- Enter avg. purchase price for each coin -->
<!-- See % gain/loss -->
<!--</div>-->
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
<script>
/******************
* APP FUNCTIONALITY
******************/
//user settings
const settings = require('electron-settings');
settings.set('developer', {
first: 'Nathan',
last: 'Parikh'
});
//default coins
if(settings.has('user.coins')) {
//do nothing because coins already set
}
else {
settings.set('user', {
coins: 'BTC,ETH,LTC'
});
}
//default base currency
if(settings.has('user.currency')) {
//do nothing because currency already set
}
else {
settings.set('user.currency', 'USD');
}
(function() {
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() {
//selected base currency
var sel = document.getElementById('base');
var x = sel.selectedIndex;
var y = sel.options;
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) {
return document.createElement(element);
}
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;
}
/* 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');
var selchb = getSelectedChbox(coinForm); // gets the array returned by getSelectedChbox()
//alert(selchb);
settings.set('user', {
coins: selchb
});
var selectedCoins = settings.get('user.coins');
//document.getElementById('firstname').innerHTML = selectedCoins;
// 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();
}
const ul = document.getElementById('prices'); // Get the list where we will place coins
const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=your_app_name';
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;
var i = 0;
for (let key of Object.keys(prices)) {
let coin = prices[key];
//console.log(coin);
let li = createNode('li'),
span = createNode('span');
sym = createNode('span');
li.setAttribute("class", "price");
li.setAttribute("id", "coin-"+[key]);
//alert("coin-"+[key])
//console.log(settings.get('coin.'+[key]+'.order'));
li.setAttribute("sortorder", settings.get(li.id+'.order'));
//alert(settings.get(li.id+'.order'));
append(li, span);
append(ul, li);
i++;
}
//console.log(data.RAW.BTC.USD.PRICE)
sortChildren(
document.getElementById('prices'),
function(li) { return +li.getAttribute('sortorder') }
);
//sort your coins
sortable('#prices', {
handle: 'span'
})[0].addEventListener('sortstop', function(e) {
// Declare variables
var ul, li, i;
ul = document.getElementById("prices");
li = ul.getElementsByTagName('li');
// Loop through all list items
for (i = 0; i < li.length; i++) {
li[i].setAttribute("sortorder", i);
var elementID = li[i].id;
//alert(elementID);
settings.set(elementID, { // coin-BTC
order: li[i].getAttribute('sortorder')
});
//alert(settings.get(elementID + '.order'));
}
//alert(settings.get('coin.'+e+'.order'));
/*
This event is triggered when the user stopped sorting and the DOM position has changed.
e.detail.item contains the current dragged element.
e.detail.index contains the new index of the dragged element (considering only list items)
e.detail.oldindex contains the old index of the dragged element (considering only list items)
e.detail.elementIndex contains the new index of the dragged element (considering all items within sortable)
e.detail.oldElementIndex contains the old index of the dragged element (considering all items within sortable)
e.detail.startparent contains the element that the dragged item comes from
e.detail.endparent contains the element that the dragged item was added to (new parent)
e.detail.newEndList contains all elements in the list the dragged item was dragged to
e.detail.newStartList contains all elements in the list the dragged item was dragged from
e.detail.oldStartList contains all elements in the list the dragged item was dragged from BEFORE it was dragged from it
*/
}); //sortable
}); //response.json
} //function(response)
) //.then
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
updateData();
}
function updateData() {
const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=your_app_name';
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
for (let key of Object.keys(pricesRAW)) {
let coinDISPLAY = pricesDISPLAY[key];
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
let coinRAW = pricesRAW[key];
//console.log(coinDISPLAY);
let li = document.getElementById("coin-"+[key]),
span = document.querySelector("#coin-"+[key]+" span");
span.setAttribute("class", "draggable");
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);
span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>';
// % 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");
}
}
});
}
)
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
}
// Let's do this thing!
initData();
/*******
* APP UI
********/
//Window controls
const remote = require('electron').remote;
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
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');
}
else {
divs[i].classList.remove('active');
divs[i].classList.add('inactive');
}
}//for
}//toggleSettings
//Coin search filter
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("coinlist");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
label = li[i].getElementsByTagName("label")[0];
checkbox = li[i].getElementsByTagName("input")[0].value;
if (label.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
} //for
} //myFunction
//sort by attribute
function sortChildren(wrap, f, isNum) {
var l = wrap.children.length,
arr = new Array(l);
for(var i=0; i<l; ++i)
arr[i] = [f(wrap.children[i]), wrap.children[i]];
arr.sort(isNum
? function(a,b){ return a[0]-b[0]; }
: function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; }
);
var par = wrap.parentNode,
ref = wrap.nextSibling;
par.removeChild(wrap);
for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]);
par.insertBefore(wrap, ref);
} //sortChildren
</script>
<script src="js/app_common.js"></script>
<script src="js/html.sortable.min.js"></script>
</html>

336
js/app_common.js Normal file
View File

@ -0,0 +1,336 @@
/******************
* APP FUNCTIONALITY
******************/
//user settings
const settings = require('electron-settings');
settings.set('developer', {
first: 'Nathan',
last: 'Parikh'
});
//default coins
if(settings.has('user.coins')) {
//do nothing because coins already set
}
else {
settings.set('user', {
coins: 'BTC,ETH,LTC'
});
}
//default base currency
if(settings.has('user.currency')) {
//do nothing because currency already set
}
else {
settings.set('user.currency', 'USD');
}
(function() {
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() {
//selected base currency
var sel = document.getElementById('base');
var x = sel.selectedIndex;
var y = sel.options;
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) {
return document.createElement(element);
}
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 url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
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;
var i = 0;
for (let key of Object.keys(prices)) {
let coin = prices[key];
//console.log(coin);
let li = createNode('li'),
span = createNode('span');
sym = createNode('span');
li.setAttribute("class", "price");
li.setAttribute("id", "coin-"+[key]);
//alert("coin-"+[key])
//console.log(settings.get('coin.'+[key]+'.order'));
li.setAttribute("sortorder", settings.get(li.id+'.order'));
//alert(settings.get(li.id+'.order'));
append(li, span);
append(ul, li);
i++;
}
//console.log(data.RAW.BTC.USD.PRICE)
sortChildren(
document.getElementById('prices'),
function(li) { return +li.getAttribute('sortorder') }
);
//sort your coins
sortable('#prices', {
handle: 'span'
})[0].addEventListener('sortstop', function(e) {
// Declare variables
var ul, li, i;
ul = document.getElementById("prices");
li = ul.getElementsByTagName('li');
// Loop through all list items
for (i = 0; i < li.length; i++) {
li[i].setAttribute("sortorder", i);
var elementID = li[i].id;
//alert(elementID);
settings.set(elementID, { // coin-BTC
order: li[i].getAttribute('sortorder')
});
//alert(settings.get(elementID + '.order'));
}
//alert(settings.get('coin.'+e+'.order'));
}); //sortable
}); //response.json
} //function(response)
) //.then
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
updateData();
}
function updateData() {
//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
for (let key of Object.keys(pricesRAW)) {
let coinDISPLAY = pricesDISPLAY[key];
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
let coinRAW = pricesRAW[key];
//console.log(coinDISPLAY);
let li = document.getElementById("coin-"+[key]),
span = document.querySelector("#coin-"+[key]+" span");
span.setAttribute("class", "draggable");
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);
span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>';
// % 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");
}
}
});
}
)
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
}
// 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');
var selchb = getSelectedChbox(coinForm); // gets the array returned by getSelectedChbox()
//alert(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
location.reload(false);
//alert(settings.get('user.currency'));
}
/*******
* APP UI
********/
//Window controls
const remote = require('electron').remote;
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
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');
}
else {
divs[i].classList.remove('active');
divs[i].classList.add('inactive');
}
}//for
}//toggleSettings
//Coin search filter
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("coinlist");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
label = li[i].getElementsByTagName("label")[0];
checkbox = li[i].getElementsByTagName("input")[0].value;
if (label.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
} //for
} //myFunction
//sort by attribute
function sortChildren(wrap, f, isNum) {
var l = wrap.children.length,
arr = new Array(l);
for(var i=0; i<l; ++i)
arr[i] = [f(wrap.children[i]), wrap.children[i]];
arr.sort(isNum
? function(a,b){ return a[0]-b[0]; }
: function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; }
);
var par = wrap.parentNode,
ref = wrap.nextSibling;
par.removeChild(wrap);
for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]);
par.insertBefore(wrap, ref);
} //sortChildren