mirror of
https://github.com/aljazceru/satshkd-vercel.git
synced 2025-12-17 05:04:24 +01:00
add handlebars
This commit is contained in:
Bitcarrot
46
index.js
46
index.js
@@ -7,7 +7,25 @@ var express = require("express");
|
|||||||
var logger = require('morgan');
|
var logger = require('morgan');
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
var app = express();
|
var app = express();
|
||||||
const product = require("./api/product");
|
const port = 3000;
|
||||||
|
|
||||||
|
//const product = require("./api/product");
|
||||||
|
//app.use("/api/product", product);
|
||||||
|
|
||||||
|
const handlebars = require('express-handlebars');
|
||||||
|
const zhcnjson = require('./locales/zh-cn.json');
|
||||||
|
const zhhkjson = require('./locales/zh-hk.json');
|
||||||
|
const enjson = require('./locales/en.json');
|
||||||
|
|
||||||
|
app.set('view engine', 'html');
|
||||||
|
|
||||||
|
app.engine('html', handlebars({
|
||||||
|
layoutsDir: __dirname + '/views/layouts',
|
||||||
|
extname: 'html',
|
||||||
|
}));
|
||||||
|
|
||||||
|
//Serves static files (we need it to import a css file)
|
||||||
|
app.use(express.static('public'))
|
||||||
|
|
||||||
// log requests
|
// log requests
|
||||||
app.use(logger('dev'));
|
app.use(logger('dev'));
|
||||||
@@ -34,11 +52,25 @@ app.use('/static', express.static(path.join(__dirname, 'public')));
|
|||||||
// multiple times! Here we're passing "./public/css",
|
// multiple times! Here we're passing "./public/css",
|
||||||
// this will allow "GET /style.css" instead of "GET /css/style.css":
|
// this will allow "GET /style.css" instead of "GET /css/style.css":
|
||||||
app.use(express.static(path.join(__dirname, 'public', 'css')));
|
app.use(express.static(path.join(__dirname, 'public', 'css')));
|
||||||
|
|
||||||
app.use(express.json({ extended: false }));
|
app.use(express.json({ extended: false }));
|
||||||
app.use("/api/product", product);
|
|
||||||
|
|
||||||
app.listen(3000);
|
app.get('/', function(req, res) {
|
||||||
console.log('listening on port 3000');
|
res.redirect('/en');
|
||||||
console.log('try:');
|
//res.render('index', { layout: 'main' });
|
||||||
console.log(' GET /index.html');
|
});
|
||||||
|
|
||||||
|
app.get('/en', function(req, res) {
|
||||||
|
res.render('sats', enjson)
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get('/zh-cn', function(req, res) {
|
||||||
|
res.render('sats', zhcnjson)
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get('/zh-hk', function(req, res) {
|
||||||
|
res.render('sats', zhhkjson)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//Makes the app listen to port 3000
|
||||||
|
app.listen(port, () => console.log(`App listening to port ${port}`));
|
||||||
@@ -1,10 +1,11 @@
|
|||||||
{
|
{
|
||||||
|
"layout": "main",
|
||||||
"Title": "1 HK dollar is currently worth ",
|
"Title": "1 HK dollar is currently worth ",
|
||||||
"subtitle" : "HKDSAT Historical Performance",
|
"subtitle": "HKDSAT Historical Performance",
|
||||||
"date" : "Date",
|
"date": "Date",
|
||||||
"price" : "Price",
|
"price": "Price",
|
||||||
"percentchange" : "Percent Change",
|
"percentchange": "Percent Change",
|
||||||
"footnote" : "data source from usdsat.com, adapted for HKD",
|
"footnote": "data source from usdsat.com, adapted for HKD",
|
||||||
"lang1_link": "/zh-cn/",
|
"lang1_link": "/zh-cn/",
|
||||||
"lang1": "中文(中国)",
|
"lang1": "中文(中国)",
|
||||||
"lang2_link": "/zh-hk/",
|
"lang2_link": "/zh-hk/",
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"Title": "1 港币现值 ",
|
"Title": "1 港币现值 ",
|
||||||
"subtitle" : "HKDSAT 过往表现",
|
"subtitle": "HKDSAT 过往表现",
|
||||||
"date" : "日期",
|
"date": "日期",
|
||||||
"price" : "价格",
|
"price": "价格",
|
||||||
"percentchange" : "百分比变化",
|
"percentchange": "百分比变化",
|
||||||
"footnote" : "来自usdsat.com的数据源",
|
"footnote": "来自usdsat.com的数据源",
|
||||||
"lang1_link": "/",
|
"lang1_link": "/",
|
||||||
"lang1": "EN",
|
"lang1": "EN",
|
||||||
"lang2_link": "/zh-hk/",
|
"lang2_link": "/zh-hk/",
|
||||||
|
|||||||
1570
package-lock.json
generated
Normal file
1570
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"name": "express-vercel",
|
"name": "satshkd-vercel",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Deploy express js to vercel.",
|
"description": "Deploy express js to vercel.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "14.x"
|
"node": "v15.14.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "node index.js"
|
"start": "node index.js"
|
||||||
@@ -21,8 +21,12 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/bitkarrot/express-vercel-example#readme",
|
"homepage": "https://github.com/bitkarrot/express-vercel-example#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"cookie-parser": "^1.4.5",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"node-cron": "^2.0.3",
|
"express-handlebars": "^5.3.4",
|
||||||
"morgan": "1.9.1"
|
"express-session": "^1.17.2",
|
||||||
|
"i18n": "^0.13.3",
|
||||||
|
"morgan": "1.9.1",
|
||||||
|
"node-cron": "^2.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,240 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<head>
|
|
||||||
<title>HKDSAT</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<!-- CSS only -->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/skeleton.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/normalize.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/metricsgraphics.css">
|
|
||||||
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway&display=swap" rel="stylesheet">
|
|
||||||
<script src="/static/jquery.min.js"></script>
|
|
||||||
<script src="/static/d3.v4.min.js"></script>
|
|
||||||
<script src="/static/metricsgraphics.js"></script>
|
|
||||||
|
|
||||||
<!-- JavaScript Bundle with Popper -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="p-1 bg-dark text-white">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="http://bitcoin.org.hk">
|
|
||||||
<img src="/static/bahk-logo-big-white.svg" alt="Bitcoin HK Logo" width="60">
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="true" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarText">
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link active px-2 text-secondary" aria-current="page" href="http://sats.bitcoin.org.hk">HKDsat</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link px-2 text-white" href="http://blocks.bitcoin.org.hk">Bitcoin Explorer</a>
|
|
||||||
</li>
|
|
||||||
<!--
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link px-2 text-white" href="#">DCA</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link px-2 text-white" href="#">Lightning</a>
|
|
||||||
</li>
|
|
||||||
-->
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link px-2 text-white" href="http://bitcoin.org.hk/contact/">Contact Us</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<span class="navbar-item" style="color: #fff">
|
|
||||||
<a class="px-2" href="{{ desc[6] }}" style="color: rgb(6, 168, 231)"> {{ desc[7] }} </a> |
|
|
||||||
<a class="px-2" href="{{ desc[8] }}" style="color: rgb(6, 168, 231)"> {{ desc[9] }}</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container" style="margin-top: 40px;">
|
|
||||||
<div class="row">
|
|
||||||
<center><h3> {{ desc[0] }} <span id="current"></span> sats</h3></center>
|
|
||||||
<script>
|
|
||||||
var currentPrice = 0; var ws_ticker_id, t;
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() { startWebSocket(); }, false);
|
|
||||||
|
|
||||||
function startWebSocket(){
|
|
||||||
t=new WebSocket("wss://api-pub.bitfinex.com/ws/2");
|
|
||||||
|
|
||||||
t.onmessage=function(e){
|
|
||||||
var i=JSON.parse(e.data);
|
|
||||||
if(i.event === 'subscribed' && i.channel == 'ticker'){ ws_ticker_id = i.chanId; }
|
|
||||||
if(ws_ticker_id == i[0]){ updatePrice(i); }
|
|
||||||
}
|
|
||||||
|
|
||||||
t.onopen=function(e){
|
|
||||||
console.log('Web socket open.');
|
|
||||||
t.send(JSON.stringify({"event":"subscribe", "channel": "ticker", "symbol": "BTCUSD"}));
|
|
||||||
setPingTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
t.onclose=function(e){
|
|
||||||
console.log('Web socket closed. Attempting to reopen.');
|
|
||||||
setTimeout(function(){ startWebSocket(); }, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
t.onerror=function(e){ console.log(e); }
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPingTimer() { setInterval(function(){ t.send("ping"); }, 10000); }
|
|
||||||
|
|
||||||
function updatePrice(i){
|
|
||||||
if(Array.isArray(i)){
|
|
||||||
i.forEach(function(item){
|
|
||||||
if(Array.isArray(item)){
|
|
||||||
var btc_price = item[0];
|
|
||||||
currentPrice = Math.round((1/btc_price)*100000000/7.75); // satoshis per HKD dollar
|
|
||||||
document.title = currentPrice.toLocaleString() + " sats";
|
|
||||||
document.querySelector('#current').textContent = currentPrice.toLocaleString();
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id='historical'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<table class="u-full-width">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>{{ desc[2] }} </th>
|
|
||||||
<th>{{ desc[3] }} </th>
|
|
||||||
<th>{{ desc[4] }} </th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for dict_item in my_list %}
|
|
||||||
<tr>
|
|
||||||
{% for key, value in dict_item.items() %}
|
|
||||||
<td>{{value}}</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
<p style="font-size: small;">
|
|
||||||
* {{ desc[5] }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
d3.json('/static/hkd_historical', function(data) {
|
|
||||||
data = MG.convert.date(data, 'date');
|
|
||||||
|
|
||||||
var windowWidth = $(window).width();
|
|
||||||
|
|
||||||
if (windowWidth < 550) {
|
|
||||||
var graphHeight = windowWidth / 1.9047;
|
|
||||||
} else if (windowWidth < 1200) {
|
|
||||||
var graphHeight = windowWidth * 0.8 / 1.9047;
|
|
||||||
} else {
|
|
||||||
var graphHeight = 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
var qhLink = function() {
|
|
||||||
window.open('https://en.bitcoin.it/wiki/Controlled_supply', '_blank');
|
|
||||||
};
|
|
||||||
|
|
||||||
var qeLink = function() {
|
|
||||||
window.open('https://en.wikipedia.org/wiki/Quantitative_easing', '_blank');
|
|
||||||
};
|
|
||||||
|
|
||||||
var markers = [{
|
|
||||||
'date': new Date('2008-11-25T00:00:00.000Z'),
|
|
||||||
'label': 'QE1',
|
|
||||||
'click': qeLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2010-11-03T00:00:00.000Z'),
|
|
||||||
'label': 'QE2',
|
|
||||||
'click': qeLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2012-09-13T00:00:00.000Z'),
|
|
||||||
'label': 'QE3',
|
|
||||||
'click': qeLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2012-11-28T00:00:00.000Z'),
|
|
||||||
'label': 'QH1',
|
|
||||||
'click': qhLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2016-07-09T00:00:00.000Z'),
|
|
||||||
'label': 'QH2',
|
|
||||||
'click': qhLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2019-10-11T00:00:00.000Z'),
|
|
||||||
'label': 'QE4',
|
|
||||||
'click': qeLink,
|
|
||||||
}, {
|
|
||||||
'date': new Date('2020-05-11T00:00:00.000Z'),
|
|
||||||
'label': 'QH3',
|
|
||||||
'click': qeLink,
|
|
||||||
}];
|
|
||||||
|
|
||||||
MG.data_graphic({
|
|
||||||
title: '{{ desc[1] }}',
|
|
||||||
data: data,
|
|
||||||
full_width: true,
|
|
||||||
height: graphHeight,
|
|
||||||
left: 52,
|
|
||||||
area: true,
|
|
||||||
color: '#FF9900',
|
|
||||||
markers: markers,
|
|
||||||
target: document.getElementById('historical'),
|
|
||||||
xax_count: 10,
|
|
||||||
yax_count: 8,
|
|
||||||
x_accessor: 'date',
|
|
||||||
y_accessor: 'sathkd_rate',
|
|
||||||
y_scale_type: 'log',
|
|
||||||
y_extended_ticks: true,
|
|
||||||
yax_units: ' sats',
|
|
||||||
yax_units_append: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
d3.select('svg')
|
|
||||||
.data(data)
|
|
||||||
.append('defs')
|
|
||||||
|
|
||||||
.append('pattern')
|
|
||||||
.attr('id', 'losermoney')
|
|
||||||
.attr('patternUnits', 'userSpaceOnUse')
|
|
||||||
.attr('width', '100%')
|
|
||||||
.attr('height', '100%')
|
|
||||||
|
|
||||||
.append('image')
|
|
||||||
.attr('width', '100%')
|
|
||||||
.attr('height', '100%')
|
|
||||||
.attr('xlink:href', '/static/assets/10hkd.jpg');
|
|
||||||
|
|
||||||
$('svg path')
|
|
||||||
.css('opacity', 1)
|
|
||||||
.css('stroke', 'green')
|
|
||||||
.attr('fill', 'url(#losermoney)');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
24
views/layouts/main.html
Normal file
24
views/layouts/main.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- <meta> tags> -->
|
||||||
|
<!---
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
|
||||||
|
-->
|
||||||
|
<title>SatsHKD</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- <div class="container"> -->
|
||||||
|
<div>
|
||||||
|
{{{body}}}
|
||||||
|
</div>
|
||||||
|
<!---
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
264
views/sats.html
Normal file
264
views/sats.html
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>HKDSAT</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<!-- CSS only -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/skeleton.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/normalize.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/metricsgraphics.css">
|
||||||
|
<link rel="shortcut icon" type="image/png" href="/static/favicon.png" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway&display=swap" rel="stylesheet">
|
||||||
|
<script src="/static/jquery.min.js"></script>
|
||||||
|
<script src="/static/d3.v4.min.js"></script>
|
||||||
|
<script src="/static/metricsgraphics.js"></script>
|
||||||
|
|
||||||
|
<!-- JavaScript Bundle with Popper -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="p-1 bg-dark text-white">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="http://bitcoin.org.hk">
|
||||||
|
<img src="/static/bahk-logo-big-white.svg" alt="Bitcoin HK Logo" width="60">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="true" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarText">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active px-2 text-secondary" aria-current="page" href="http://sats.bitcoin.org.hk">HKDsat</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2 text-white" href="http://blocks.bitcoin.org.hk">Bitcoin Explorer</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2 text-white" href="https://bits.bitcoin.org.hk">Lnbits</a>
|
||||||
|
</li>
|
||||||
|
<!--
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2 text-white" href="#">DCA or Lightning Laisee</a>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2 text-white" href="http://bitcoin.org.hk/contact/">Contact Us</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<span class="navbar-item" style="color: #fff">
|
||||||
|
<a class="px-2" href="{{ lang1_link }}" style="color: rgb(6, 168, 231)"> {{ lang1 }} </a> |
|
||||||
|
<a class="px-2" href="{{ lang2_link }}" style="color: rgb(6, 168, 231)"> {{ lang2 }}</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container" style="margin-top: 40px;">
|
||||||
|
<div class="row">
|
||||||
|
<center>
|
||||||
|
<h3> {{ Title }} <span id="current"></span> sats</h3>
|
||||||
|
</center>
|
||||||
|
<script>
|
||||||
|
var currentPrice = 0;
|
||||||
|
var ws_ticker_id, t;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
startWebSocket();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
function startWebSocket() {
|
||||||
|
t = new WebSocket("wss://api-pub.bitfinex.com/ws/2");
|
||||||
|
|
||||||
|
t.onmessage = function(e) {
|
||||||
|
var i = JSON.parse(e.data);
|
||||||
|
if (i.event === 'subscribed' && i.channel == 'ticker') {
|
||||||
|
ws_ticker_id = i.chanId;
|
||||||
|
}
|
||||||
|
if (ws_ticker_id == i[0]) {
|
||||||
|
updatePrice(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
t.onopen = function(e) {
|
||||||
|
console.log('Web socket open.');
|
||||||
|
t.send(JSON.stringify({
|
||||||
|
"event": "subscribe",
|
||||||
|
"channel": "ticker",
|
||||||
|
"symbol": "BTCUSD"
|
||||||
|
}));
|
||||||
|
setPingTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
t.onclose = function(e) {
|
||||||
|
console.log('Web socket closed. Attempting to reopen.');
|
||||||
|
setTimeout(function() {
|
||||||
|
startWebSocket();
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
t.onerror = function(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPingTimer() {
|
||||||
|
setInterval(function() {
|
||||||
|
t.send("ping");
|
||||||
|
}, 10000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePrice(i) {
|
||||||
|
if (Array.isArray(i)) {
|
||||||
|
i.forEach(function(item) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
var btc_price = item[0];
|
||||||
|
currentPrice = Math.round((1 / btc_price) * 100000000 / 7.75); // satoshis per HKD dollar
|
||||||
|
document.title = currentPrice.toLocaleString() + " sats";
|
||||||
|
document.querySelector('#current').textContent = currentPrice.toLocaleString();
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id='historical'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<table class="u-full-width">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{{ date }} </th>
|
||||||
|
<th>{{ price }} </th>
|
||||||
|
<th>{{ percentchange }} </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<!--
|
||||||
|
<tbody>
|
||||||
|
{% for dict_item in my_list %}
|
||||||
|
<tr>
|
||||||
|
{% for key, value in dict_item.items() %}
|
||||||
|
<td>{{value}}</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<p style="font-size: small;">
|
||||||
|
* {{ footnote }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
d3.json('/static/hkd_historical', function(data) {
|
||||||
|
data = MG.convert.date(data, 'date');
|
||||||
|
|
||||||
|
var windowWidth = $(window).width();
|
||||||
|
|
||||||
|
if (windowWidth < 550) {
|
||||||
|
var graphHeight = windowWidth / 1.9047;
|
||||||
|
} else if (windowWidth < 1200) {
|
||||||
|
var graphHeight = windowWidth * 0.8 / 1.9047;
|
||||||
|
} else {
|
||||||
|
var graphHeight = 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
var qhLink = function() {
|
||||||
|
window.open('https://en.bitcoin.it/wiki/Controlled_supply', '_blank');
|
||||||
|
};
|
||||||
|
|
||||||
|
var qeLink = function() {
|
||||||
|
window.open('https://en.wikipedia.org/wiki/Quantitative_easing', '_blank');
|
||||||
|
};
|
||||||
|
|
||||||
|
var markers = [{
|
||||||
|
'date': new Date('2008-11-25T00:00:00.000Z'),
|
||||||
|
'label': 'QE1',
|
||||||
|
'click': qeLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2010-11-03T00:00:00.000Z'),
|
||||||
|
'label': 'QE2',
|
||||||
|
'click': qeLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2012-09-13T00:00:00.000Z'),
|
||||||
|
'label': 'QE3',
|
||||||
|
'click': qeLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2012-11-28T00:00:00.000Z'),
|
||||||
|
'label': 'QH1',
|
||||||
|
'click': qhLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2016-07-09T00:00:00.000Z'),
|
||||||
|
'label': 'QH2',
|
||||||
|
'click': qhLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2019-10-11T00:00:00.000Z'),
|
||||||
|
'label': 'QE4',
|
||||||
|
'click': qeLink,
|
||||||
|
}, {
|
||||||
|
'date': new Date('2020-05-11T00:00:00.000Z'),
|
||||||
|
'label': 'QH3',
|
||||||
|
'click': qeLink,
|
||||||
|
}];
|
||||||
|
|
||||||
|
MG.data_graphic({
|
||||||
|
title: '{{ subtitle }}',
|
||||||
|
data: data,
|
||||||
|
full_width: true,
|
||||||
|
height: graphHeight,
|
||||||
|
left: 52,
|
||||||
|
area: true,
|
||||||
|
color: '#FF9900',
|
||||||
|
markers: markers,
|
||||||
|
target: document.getElementById('historical'),
|
||||||
|
xax_count: 10,
|
||||||
|
yax_count: 8,
|
||||||
|
x_accessor: 'date',
|
||||||
|
y_accessor: 'sathkd_rate',
|
||||||
|
y_scale_type: 'log',
|
||||||
|
y_extended_ticks: true,
|
||||||
|
yax_units: ' sats',
|
||||||
|
yax_units_append: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
d3.select('svg')
|
||||||
|
.data(data)
|
||||||
|
.append('defs')
|
||||||
|
|
||||||
|
.append('pattern')
|
||||||
|
.attr('id', 'losermoney')
|
||||||
|
.attr('patternUnits', 'userSpaceOnUse')
|
||||||
|
.attr('width', '100%')
|
||||||
|
.attr('height', '100%')
|
||||||
|
|
||||||
|
.append('image')
|
||||||
|
.attr('width', '100%')
|
||||||
|
.attr('height', '100%')
|
||||||
|
.attr('xlink:href', '/static/assets/10hkd.jpg');
|
||||||
|
|
||||||
|
$('svg path')
|
||||||
|
.css('opacity', 1)
|
||||||
|
.css('stroke', 'green')
|
||||||
|
.attr('fill', 'url(#losermoney)');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
Reference in New Issue
Block a user