pikvm/pikvm#1207: Draw UI tips via meta.yaml

This commit is contained in:
Maxim Devaev 2024-11-05 18:17:00 +02:00
parent 0010dd1d11
commit f1503d69e0
8 changed files with 76 additions and 18 deletions

View File

@ -1999,7 +1999,12 @@
<input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
<label for="about-tab-meta-button">Meta</label>
<div class="tab">
<div class="code" id="about-meta"><span class="code-comment">No data</span>
<div class="code" id="about-meta">
<div><span class="code-comment">// You can get this JSON using handle <a target="_blank" href="/api/info?fields=meta">/api/info?fields=meta</a><br>
// In the standard configuration this data<br>
// is specified in the file /etc/kvmd/meta.yaml</span><br>
<pre id="kvmd-meta-json">No data</pre>
</div>
</div>
</div>
<input type="radio" name="about-tab-button" id="about-tab-hardware-button">
@ -2673,9 +2678,17 @@
</div>
<iframe id="webterm-iframe" src="" style="width: 100%; height: 100%"></iframe>
</div>
<ul class="navbar-bg-tips">
<li class="left">
<pre id="kvmd-meta-tips-left"></pre>
</li>
<li class="right">
<pre id="kvmd-meta-tips-right"></pre>
</li>
</ul>
<ul class="footer">
<li class="footer-left"><span id="kvmd-meta-server-host" title="Server name (see System/About)"></span>&nbsp; | &nbsp;<span id="kvmd-version-kvmd" title="KVMD version"></span>&nbsp; | &nbsp;<span id="kvmd-version-streamer" title="Streamer version"></span></li>
<li class="footer-right"><a target="_blank" href="https://pikvm.org">PiKVM Project</a>&nbsp; | &nbsp;<a target="_blank" href="https://docs.pikvm.org">Documentation</a>&nbsp; | &nbsp;<a target="_blank" href="https://pikvm.org/support">Support</a></li>
<li class="left"><span id="kvmd-meta-server-host" title="Server name (see System/About)"></span>&nbsp; | &nbsp;<span id="kvmd-version-kvmd" title="KVMD version"></span>&nbsp; | &nbsp;<span id="kvmd-version-streamer" title="Streamer version"></span></li>
<li class="right"><a target="_blank" href="https://pikvm.org">PiKVM Project</a>&nbsp; | &nbsp;<a target="_blank" href="https://docs.pikvm.org">Documentation</a>&nbsp; | &nbsp;<a target="_blank" href="https://pikvm.org/support">Support</a></li>
</ul>
</body>
</html>

View File

@ -11,14 +11,20 @@ block body
include navbar.pug
include windows.pug
ul(class="navbar-bg-tips")
li(class="left")
pre(id="kvmd-meta-tips-left")
li(class="right")
pre(id="kvmd-meta-tips-right")
ul(class="footer")
li(class="footer-left")
li(class="left")
span(id="kvmd-meta-server-host" title="Server name (see System/About)")
| &nbsp; | &nbsp;
span(id="kvmd-version-kvmd" title="KVMD version")
| &nbsp; | &nbsp;
span(id="kvmd-version-streamer" title="Streamer version")
li(class="footer-right")
li(class="right")
a(target="_blank" href="https://pikvm.org") PiKVM Project
| &nbsp; | &nbsp;
a(target="_blank" href="https://docs.pikvm.org") Documentation

View File

@ -29,6 +29,15 @@ div(id="about-window" class="window")
br
div(class="tabs-box")
+about_tab("meta", "Meta", true)
div
span(class="code-comment")
| // You can get this JSON using handle #[a(target="_blank" href="/api/info?fields=meta") /api/info?fields=meta]#[br]
| // In the standard configuration this data#[br]
| // is specified in the file /etc/kvmd/meta.yaml
br
pre(id="kvmd-meta-json")
| No data
+about_tab("hardware", "Hardware")
+about_tab("version", "Version")

View File

@ -82,7 +82,7 @@
</div>
</form>
<ul class="footer">
<li class="footer-left">This site is actively using JavaScript.<br>
<li class="left">This site is actively using JavaScript.<br>
It doesn't contain ads, but is blocked by some ad filters.<br>
Please turn it off to continue and reload the page.
</li>

View File

@ -27,7 +27,7 @@ block body
td #[button(id="login-button" class="key") Login]
ul(class="footer")
li(class="footer-left")
li(class="left")
| This site is actively using JavaScript.#[br]
| It doesn't contain ads, but is blocked by some ad filters.#[br]
| Please turn it off to continue and reload the page.

View File

@ -297,10 +297,10 @@ ul.footer {
ul.footer li {
padding: 0 10px;
}
ul.footer li.footer-left {
ul.footer li.left {
float: left;
}
ul.footer li.footer-right {
ul.footer li.right {
float: right;
}
ul.footer li a {

View File

@ -198,3 +198,33 @@ ul#navbar li div.menu img.sign {
margin-right: 10px;
height: 20px;
}
ul.navbar-bg-tips {
list-style-type: none;
top: 50px;
position: fixed;
width: 100%;
padding: 0;
font-size: 0.7em;
line-height: 1.5em;
color: var(--cs-page-obscure-fg);
z-index: -10;
}
ul.navbar-bg-tips li {
padding: 0 10px;
max-width: 20%;
}
ul.navbar-bg-tips li pre {
word-break: break-word;
white-space: break-spaces;
text-align: justify;
}
ul.navbar-bg-tips li.left {
float: left;
}
ul.navbar-bg-tips li.right {
float: right;
}
ul.navbar-bg-tips li a {
color: var(--cs-page-obscure-fg);
}

View File

@ -78,15 +78,8 @@ export function Session() {
var __setInfoStateMeta = function(state) {
if (state !== null) {
let text = tools.escape(JSON.stringify(state, undefined, 4)).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
$("about-meta").innerHTML = `
<span class="code-comment">// The PiKVM metadata.<br>
// You can get this JSON using handle <a target="_blank" href="/api/info?fields=meta">/api/info?fields=meta</a>.<br>
// In the standard configuration this data<br>
// is specified in the file /etc/kvmd/meta.yaml.</span><br>
<br>
${text}
`;
$("kvmd-meta-json").innerText = JSON.stringify(state, undefined, 4);
if (state.server && state.server.host) {
$("kvmd-meta-server-host").innerText = `Server: ${state.server.host}`;
document.title = `PiKVM Session: ${state.server.host}`;
@ -95,6 +88,13 @@ export function Session() {
document.title = "PiKVM Session";
}
if (state.tips && state.tips.left) {
$("kvmd-meta-tips-left").innerText = `${state.tips.left}`;
}
if (state.tips && state.tips.right) {
$("kvmd-meta-tips-right").innerText = `${state.tips.right}`;
}
// Don't use this option, it may be removed in any time
if (state.web && state.web.confirm_session_exit === false) {
window.onbeforeunload = null; // See main.js