Initial commit
This commit is contained in:
commit
13a96beb9b
36 changed files with 24345 additions and 0 deletions
7
data/css/bootstrap.min.css
vendored
Normal file
7
data/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
73
data/css/style.css
Normal file
73
data/css/style.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
nav {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.splitText div:first-child::after {
|
||||
display: block;
|
||||
content: '';
|
||||
margin-top: 0px;
|
||||
border-bottom: 2px solid;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#btcclock-wrapper {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btclock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.btclock>div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fg-ffff .btclock>div {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.bg-ffff .btclock>div {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fg-f800 .btclock>div {
|
||||
color: #f00;
|
||||
border-color: #f00;
|
||||
}
|
||||
|
||||
.bg-f800 .btclock>div {
|
||||
background: #f00;
|
||||
}
|
||||
|
||||
.fg-0 .btclock>div {
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.bg-0 .btclock>div {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.splitText {
|
||||
font-size: 2.2rem;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.digit {
|
||||
font-size: 5rem;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.digit-blank {
|
||||
content: "abc";
|
||||
}
|
||||
8
data/font/oswald.css
Normal file
8
data/font/oswald.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('oswald.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('oswald.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
BIN
data/font/oswald.woff
Normal file
BIN
data/font/oswald.woff
Normal file
Binary file not shown.
BIN
data/font/oswald.woff2
Normal file
BIN
data/font/oswald.woff2
Normal file
Binary file not shown.
101
data/index.html
Normal file
101
data/index.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/font/oswald.css" rel="stylesheet">
|
||||
<link href="/css/style.css" rel="stylesheet">
|
||||
<script src="/js/handlebars-v4.7.7.js"></script>
|
||||
<title>₿TClock</title>
|
||||
</head>
|
||||
|
||||
<script src="/js/helpers.js"></script>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand mb-0 h1">₿TClock</span>
|
||||
</div>
|
||||
</nav>
|
||||
<script id="entry-template" type="text/x-handlebars-template">
|
||||
<div class="entry">
|
||||
<h1>Status</h1>
|
||||
<div class="body">
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
{{#each screens }}
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})">
|
||||
<label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
<p>Rendered:</p>
|
||||
{{#if rendered }}
|
||||
<div class="btcclock-wrapper" id="btcclock-wrapper">
|
||||
<div class="btclock">
|
||||
{{#each data }}
|
||||
{{{splitText this}}}
|
||||
{{/each}}
|
||||
</div></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="h-100 p-3 border bg-light">
|
||||
<h1>Custom text</h1>
|
||||
<form name="customText" id="customTextForm">
|
||||
<div class="row">
|
||||
<label for="customText" class="col-sm-4 col-form-label">Text</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="customText" name="customText" maxlength="7">
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<button type="submit" class="btn btn-primary">Show Text</button>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div id="output" class="p-3 border bg-light"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="h-100 p-3 border bg-light">
|
||||
<h1>Settings</h1>
|
||||
<form method="post" action="/api/settings" name="settings" id="settingsForm">
|
||||
<div class="row">
|
||||
<label for="fgColor" class="col-sm-6 col-form-label">Text color</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-select" id="fgColor" name="fgColor">
|
||||
<option value="0xF800">Red</option>
|
||||
<option value="0xFFFF">White</option>
|
||||
<option value="0x0">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="bgColor" class="col-sm-6 col-form-label">Background color</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-select" id="bgColor" name="bgColor">
|
||||
<option value="0xF800">Red</option>
|
||||
<option value="0xFFFF">White</option>
|
||||
<option value="0x0">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-secondary">Reset</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
29
data/js/handlebars-v4.7.7.js
Normal file
29
data/js/handlebars-v4.7.7.js
Normal file
File diff suppressed because one or more lines are too long
15
data/js/helpers.js
Normal file
15
data/js/helpers.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
Handlebars.registerHelper('splitText', function (aString) {
|
||||
if (aString.includes("/")) {
|
||||
var c = aString.split("/").map((el) => { return "<div class=\"flex-items\">" + el + "</div>"; }).join('');
|
||||
return "<div class=\"splitText\">" + c + "</div>";
|
||||
}
|
||||
if (aString.length == 0 || aString === " ") {
|
||||
aString = " ";
|
||||
}
|
||||
//return aString;
|
||||
return "<div class=\"digit\">" + aString + "</div>";
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
|
||||
return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
|
||||
});
|
||||
82
data/js/script.js
Normal file
82
data/js/script.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
var screens = ["Block Height", "Moscow Time", "Ticker", "Time"];
|
||||
|
||||
getBcStatus = () => {
|
||||
fetch('/api/status', {
|
||||
method: 'get'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(jsonData => {
|
||||
|
||||
var source = document.getElementById("entry-template").innerHTML;
|
||||
var template = Handlebars.compile(source);
|
||||
var context = { currentScreen: jsonData.currentScreen, rendered: jsonData.rendered, data: jsonData.data, screens: screens };
|
||||
document.getElementById('output').innerHTML = template(context);
|
||||
})
|
||||
.catch(err => {
|
||||
//error block
|
||||
});
|
||||
}
|
||||
|
||||
interval = setInterval(getBcStatus, 2500);
|
||||
getBcStatus();
|
||||
|
||||
fetch('/api/settings', {
|
||||
method: 'get'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(jsonData => {
|
||||
var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase());
|
||||
if (jsonData.epdColors == 2) {
|
||||
document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
|
||||
document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
|
||||
}
|
||||
|
||||
document.getElementById('output').classList.add("fg-" + jsonData.fgColor.toString(16));
|
||||
document.getElementById('output').classList.add("bg-" + jsonData.bgColor.toString(16));
|
||||
|
||||
document.getElementById('fgColor').value = fgColor;
|
||||
document.getElementById('bgColor').value = "0x" + jsonData.bgColor.toString(16).toUpperCase();
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('error', err);
|
||||
});
|
||||
|
||||
|
||||
var settingsForm = document.querySelector('#settingsForm');
|
||||
settingsForm.onsubmit = function (event) {
|
||||
var formData = new FormData(settingsForm);
|
||||
|
||||
fetch("/api/settings",
|
||||
{
|
||||
body: formData,
|
||||
method: "post"
|
||||
}).then(() => {
|
||||
console.log('Submitted');
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var textForm = document.querySelector('#customTextForm');
|
||||
textForm.onsubmit = function (event) {
|
||||
var formData = new FormData(textForm);
|
||||
|
||||
fetch('/api/show/text/' + encodeURIComponent(formData.get('customText')), {
|
||||
method: 'get'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.catch(err => {
|
||||
//error block
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
changeScreen = (id) => {
|
||||
fetch('/api/show/screen/' + encodeURIComponent(id), {
|
||||
method: 'get'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.catch(err => {
|
||||
//error block
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue