btclock/btclock_v3
3
1
Fork 2
Code Issues 2 Pull requests 1 Projects Releases 26 Packages Wiki Activity Actions

Added EventSource for webUI updates, completed more features

Browse source
This commit is contained in:
Djuri 2023-11-08 15:27:22 +01:00
parent 91fd921e2e
commit 280764a2fa
16 changed files with 241 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

16
data/src/index.html
View file

@ -172,8 +172,8 @@
</div>
<div class="row">
<label for="tzOffset" class="col-sm-6 col-form-label">Timezone offset</label>
<div class="col-sm-6">
<div class="input-group mb-3">
<div class="col-sm-6 mb-3">
<div class="input-group">
<input type="number" name="tzOffset" id="tzOffset" class="form-control">
<span class="input-group-text">min</span>
<button class="btn btn-outline-secondary" type="button" id="getTzOffsetBtn">Auto</button>
@ -181,11 +181,21 @@
<div class="form-text">A restart is required to apply TZ offset.</div>
</div>
</div>
<div class="row">
<label for="minSecPriceUpd" class="col-sm-6 col-form-label">Time between price updates</label>
<div class="col-sm-6 mb-3">
<div class="input-group">
<input type="number" name="minSecPriceUpd" id="minSecPriceUpd" class="form-control">
<span class="input-group-text">sec</span>
</div>
<div class="form-text">Short amounts might shorten lifespan.</div>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="ledFlashOnUpdate" name="ledFlashOnUpd" value="1">
<label class="form-check-label" for="ledFlashOnUpdate">LED flash on update</label>
<label class="form-check-label" for="ledFlashOnUpdate">LED flash on new block</label>
</div>
</div>
</div>

93
data/src/js/script.ts
View file

@ -19,39 +19,65 @@ toTime = (secs) => {
return obj;
}
getBcStatus = () => {
fetch('/api/status', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => {
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
let processStatusData = (jsonData) => {
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var context = {
timerRunning: jsonData.timerRunning,
memUsage: Math.round(jsonData.espFreeHeap / jsonData.espHeapSize * 100),
memFree: Math.round(jsonData.espFreeHeap / 1024),
memTotal: Math.round(jsonData.espHeapSize / 1024),
uptime: toTime(jsonData.espUptime),
currentScreen: jsonData.currentScreen,
rendered: jsonData.rendered,
data: jsonData.data,
screens: screens,
ledStatus: jsonData.ledStatus ? jsonData.ledStatus.map((t) => (t).toString(16)) : [],
connectionStatus: jsonData.connectionStatus
};
var context = {
timerRunning: jsonData.timerRunning,
memUsage: Math.round(jsonData.espFreeHeap / jsonData.espHeapSize * 100),
memFree: Math.round(jsonData.espFreeHeap / 1024),
memTotal: Math.round(jsonData.espHeapSize / 1024),
uptime: toTime(jsonData.espUptime),
currentScreen: jsonData.currentScreen,
rendered: jsonData.data,
data: jsonData.data,
screens: screens,
ledStatus: jsonData.ledStatus ? jsonData.ledStatus.map((t) => (t).toString(16)) : [],
connectionStatus: jsonData.connectionStatus
};
document.getElementById('output').innerHTML = template(context);
})
.catch(err => {
//error block
});
document.getElementById('output').innerHTML = template(context);
}
interval = setInterval(getBcStatus, 2500);
getBcStatus();
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function (e) {
console.log("Status EventSource Connected");
if (e.data) {
processStatusData(JSON.parse(e.data));
}
}, false);
source.addEventListener('error', function (e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Status EventSource Disconnected");
}
source.close();
}, false);
source.addEventListener('status', function (e) {
processStatusData(JSON.parse(e.data));
}, false);
}
// getBcStatus = () => {
// fetch('/api/status', {
// method: 'get'
// })
// .then(response => response.json())
// .then()
// .catch(err => {
// //error block
// });
// }
// interval = setInterval(getBcStatus, 2500);
// getBcStatus();
fetch('/api/settings', {
method: 'get'
@ -77,17 +103,18 @@ fetch('/api/settings', {
if (jsonData.useBitcoinNode)
document.getElementById('useBitcoinNode').checked = true;
let nodeFields = ["rpcHost", "rpcPort", "rpcUser", "tzOffset"];
// let nodeFields = ["rpcHost", "rpcPort", "rpcUser", "tzOffset"];
for (let n of nodeFields) {
document.getElementById(n).value = jsonData[n];
}
// for (let n of nodeFields) {
// document.getElementById(n).value = jsonData[n];
// }
document.getElementById('timePerScreen').value = jsonData.timerSeconds / 60;
document.getElementById('ledBrightness').value = jsonData.ledBrightness;
document.getElementById('fullRefreshMin').value = jsonData.fullRefreshMin;
document.getElementById('wpTimeout').value = jsonData.wpTimeout;
document.getElementById('tzOffset').value = jsonData.tzOffset;
document.getElementById('mempoolInstance').value = jsonData.mempoolInstance;
document.getElementById('minSecPriceUpd').value = jsonData.minSecPriceUpd;
if (jsonData.gitRev)
document.getElementById('gitRev').innerHTML = "Version: " + jsonData.gitRev;