kdmukai/btclock_v3
1
0
Fork 0
forked from btclock/btclock_v3
Code Pull requests Activity
btclock_v3/data/src/index.html

311 lines
No EOL
13 KiB
HTML
Raw Blame History

<!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/style.css" rel="stylesheet">
<title>&#8383;TClock</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">&#8383;TClock</span>
</div>
</nav>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h2>Status</h2>
<div class="body">
<div class="btn-group btn-group-sm" role="group" aria-label="Screens 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}}
{{#if ledStatus }}
<p>LED status:</p>
{{#each ledStatus }}
<div style="background: #{{ this }}">&nbsp;</div>
{{/each}}
{{/if}}
<div>
<p>Screen cycle:
<span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
{{#if timerRunning}}
&#9205; running
{{else}}
&#9208; stopped
{{/if}}
</span>
</p>
</div>
<hr>
<div>
<div class="progress" role="progressbar" aria-label="Memory free" aria-valuenow="{{ memFreePercent }}" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: {{ memFreePercent }}%">{{ memFreePercent }}%</div>
</div>
<div class="d-flex justify-content-between">
<div>Memory free</div>
<div>{{ memFree }} / {{ memTotal }} KiB</div>
</div>
</div>
<hr>
<div>
<p>Uptime: {{#if uptime.h }}{{ uptime.h }}h {{/if}}{{ uptime.m }}m {{ uptime.s }}s</p>
<p>
WS Price connection:
<span>
{{#if connectionStatus.price}}
&#9989;
{{else}}
&#10060;
{{/if}}
</span>
-
WS Mempool.space connection:
<span>
{{#if connectionStatus.blocks}}
&#9989;
{{else}}
&#10060;
{{/if}}
</span><br>
<small>If you use "Fetch &euro; price" the WS Price connection will show &#10060; since it uses another data source.</small>
</p>
</div>
</div>
</div>
</script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="p-3 border rounded-2">
<h2>Custom text</h2>
<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>
<hr>
<h2>LEDs</h2>
<form id="ledsForm" name="ledsForm">
<div class="row">
<label for="ledColorPicker" class="col-sm-6 col-form-label">LEDs color</label>
<div class="col-sm-6">
<input type="color" id="ledColorPicker" name="pickedColor" value="#ff8800">
</div>
</div>
<button type="button" class="btn btn-secondary" id="turnOffLedsBtn">Turn off</button>
<button type="submit" class="btn btn-primary">Set color</button>
</form>
<hr>
<h2>System info</h2>
<ul class="small" id="system_info">
<li>Version: <span id="gitRev"></span></li>
<li>Build time: <span id="lastBuildTime"></span></li>
<li>IP: <span id="ipAddress"></span></li>
<li>Hostname: <span id="hostname"></span></li>
</ul>
<button type="button" class="btn btn-danger" id="restartBtn">Restart</button>
<button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
</div>
</div>
<div class="col-sm-5">
<div id="output" class="p-3 border rounded-2">Loading, please wait...</div>
</div>
<div class="col-sm-4">
<div class="h-100 p-3 border rounded-2">
<h2>Settings</h2>
<form method="post" action="/api/settings" name="settings" id="settingsForm">
<div class="row">
<label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>
<div class="col-sm-6">
<select class="form-select form-select-sm" id="fgColor" name="fgColor">
<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 col-form-label-sm">Background color</label>
<div class="col-sm-6">
<select class="form-select form-select-sm" id="bgColor" name="bgColor">
<option value="0xFFFF">White</option>
<option value="0x0">Black</option>
</select>
</div>
</div>
<div class="row">
<label for="timePerScreen" class="col-sm-6 col-form-label col-form-label-sm">Time per screen</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<input type="number" min="1" name="timePerScreen" id="timePerScreen" class="form-control">
<span class="input-group-text">minutes</span>
</div>
</div>
</div>
<div class="row">
<label for="fullRefreshMin" class="col-sm-6 col-form-label col-form-label-sm">Full refresh every</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<input type="number" min="1" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
<span class="input-group-text">minutes</span>
</div>
</div>
</div>
<div class="row">
<label for="minSecPriceUpd" class="col-sm-6 col-form-label col-form-label-sm">Time between price updates</label>
<div class="col-sm-6 mb-3">
<div class="input-group input-group-sm">
<input type="number" name="minSecPriceUpd" min="1" id="minSecPriceUpd" class="form-control">
<span class="input-group-text">seconds</span>
</div>
<div class="form-text">Short amounts might shorten lifespan.</div>
</div>
</div>
<div class="row">
<label for="tzOffset" class="col-sm-6 col-form-label col-form-label-sm">Timezone offset</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<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 class="form-text">A restart is required to apply TZ offset.</div>
</div>
</div>
<div class="row">
<label class="col-sm-6 col-form-label col-form-label-sm" for="ledBrightness">LED brightness</label>
<div class="col-sm-6">
<input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
max="255">
</div>
</div>
<div class="row">
<label for="mempoolInstance" class="col-sm-6 col-form-label col-form-label-sm">Mempool Instance</label>
<div class="col-sm-6">
<input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="ledTestOnPower" name="ledTestOnPower" value="1">
<label class="form-check-label" for="ledTestOnPower">LED power-on test</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<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 new block</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock"
value="1">
<label class="form-check-label" for="stealFocusOnBlock">Steal focus on new block</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mcapBigChar" name="mcapBigChar" value="1">
<label class="form-check-label" for="mcapBigChar">Use big characters for market cap</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="otaEnabled" name="otaEnabled" value="1">
<label class="form-check-label" for="otaEnabled">OTA updates (restart required)</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mdnsEnabled" name="mdnsEnabled" value="1">
<label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="fetchEurPrice" name="fetchEurPrice" value="1">
<label class="form-check-label" for="fetchEurPrice">Fetch &euro; price (restart required)</label>
</div>
</div>
</div>
<div>
<script id="screens-template" type="text/x-handlebars-template">
<div class="row">
<div class="col-sm-6">
{{#each screens }}
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
<label class="form-check-label" for="screen{{id}}">{{name}}</label>
</div>
{{#ifEquals @index 2}}
</div>
<div class="col-sm-6">
{{/ifEquals}}
{{/each}}
</div>
</div>
</script>
<h3>Screens</h3>
<div id="outputScreens"></div>
<div class="d-grid gap-2 d-md-block">
<button type="submit" class="btn btn-secondary">Reset</button>
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
</footer>
<script src="/js/script.js"></script>
</body>
</html>
View git blame Copy permalink