Made more options configurable in the web interface

This commit is contained in:
Djuri 2023-06-20 08:57:43 +02:00
parent fb1cd73acf
commit 81885e3f15
6 changed files with 111 additions and 20 deletions

View file

@ -109,12 +109,22 @@
<label for="timePerScreen" class="col-sm-6 col-form-label">Time per screen</label>
<div class="col-sm-6">
<div class="input-group mb-3">
<input type="text" name="timePerScreen" id="timePerScreen">
<span class="input-group-text" id="basic-addon2">minutes</span>
<input type="text" name="timePerScreen" id="timePerScreen" class="form-control">
<span class="input-group-text">minutes</span>
</div>
</div>
</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">
<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>
</div>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="form-check form-switch">
@ -123,6 +133,39 @@
</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="useBitcoinNode" name="useBitcoinNode" value="1">
<label class="form-check-label" for="useBitcoinNode">Use local node</label>
</div>
</div>
</div>
<div class="row">
<label for="rpcHost" class="col-sm-6 col-form-label">Node IP/hostname</label>
<div class="col-sm-6">
<input type="text" name="rpcHost" id="rpcHost" class="form-control">
</div>
</div>
<div class="row">
<label for="rpcPort" class="col-sm-6 col-form-label">RPC port</label>
<div class="col-sm-6">
<input type="number" name="rpcPort" id="rpcPort" class="form-control">
</div>
</div>
<div class="row">
<label for="rpcUser" class="col-sm-6 col-form-label">RPC username</label>
<div class="col-sm-6">
<input type="text" name="rpcUser" id="rpcUser" class="form-control">
</div>
</div>
<div class="row">
<label for="rpcPass" class="col-sm-6 col-form-label">RPC password</label>
<div class="col-sm-6">
<input type="password" name="rpcPass" id="rpcPass" class="form-control">
<div class="form-text">For security, password is not shown after saving.</div>
</div>
</div>
<script id="screens-template" type="text/x-handlebars-template">
{{#each screens }}
<div class="row">
@ -139,7 +182,7 @@
<button type="submit" class="btn btn-secondary">Reset</button>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>

View file

@ -1,10 +1,9 @@
//import "./handlebars.js";
import './helpers.js';
var screens = ["Block Height", "Moscow Time", "Ticker", "Time", "Halving countdown"];
getBcStatus = () => {
fetch('http://btclock3.local/api/status', {
fetch('/api/status', {
method: 'get'
})
.then(response => response.json())
@ -22,7 +21,7 @@ getBcStatus = () => {
interval = setInterval(getBcStatus, 2500);
getBcStatus();
fetch('http://btclock3.local/api/settings', {
fetch('/api/settings', {
method: 'get'
})
.then(response => response.json())
@ -42,6 +41,15 @@ fetch('http://btclock3.local/api/settings', {
if (jsonData.ledFlashOnUpdate)
document.getElementById('ledFlashOnUpdate').checked = true;
if (jsonData.useBitcoinNode)
document.getElementById('useBitcoinNode').checked = true;
let nodeFields = ["rpcHost", "rpcPort", "rpcUser", "tzOffset"];
for (let n of nodeFields) {
document.getElementById(n).value = jsonData[n];
}
document.getElementById('timePerScreen').value = jsonData.timerSeconds / 60;
var source = document.getElementById("screens-template").innerHTML;
@ -54,11 +62,12 @@ fetch('http://btclock3.local/api/settings', {
});
var settingsForm = document.querySelector('#settingsForm');
settingsForm.onsubmit = (event) => {
var formData = new FormData(settingsForm);
fetch("http://btclock3.local/api/settings",
fetch("/api/settings",
{
body: formData,
method: "post"
@ -88,6 +97,14 @@ turnOffLedsBtn.onclick = (event) => {
return false;
}
let tzOffsetBtn = document.getElementById('getTzOffsetBtn');
if (tzOffsetBtn)
tzOffsetBtn.onclick = (event) => {
document.getElementById("tzOffset").value = new Date(new Date().getFullYear(), 0, 1).getTimezoneOffset()*-1;
return false;
};
var textForm = document.querySelector('#customTextForm');
textForm.onsubmit = (event) => {
var formData = new FormData(textForm);