From f1503d69e0b15caa5d8fd0f4fb30b91d516db2ea Mon Sep 17 00:00:00 2001
From: Maxim Devaev <mdevaev@gmail.com>
Date: Tue, 5 Nov 2024 18:17:00 +0200
Subject: [PATCH] pikvm/pikvm#1207: Draw UI tips via meta.yaml

---
 web/kvm/index.html          | 19 ++++++++++++++++---
 web/kvm/index.pug           | 10 ++++++++--
 web/kvm/window-about.pug    |  9 +++++++++
 web/login/index.html        |  2 +-
 web/login/index.pug         |  2 +-
 web/share/css/main.css      |  4 ++--
 web/share/css/navbar.css    | 30 ++++++++++++++++++++++++++++++
 web/share/js/kvm/session.js | 18 +++++++++---------
 8 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 960535f2..0c40cc83 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -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>
\ No newline at end of file
diff --git a/web/kvm/index.pug b/web/kvm/index.pug
index a6c53f70..ef694dde 100644
--- a/web/kvm/index.pug
+++ b/web/kvm/index.pug
@@ -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
diff --git a/web/kvm/window-about.pug b/web/kvm/window-about.pug
index 42503c6c..a9c50aac 100644
--- a/web/kvm/window-about.pug
+++ b/web/kvm/window-about.pug
@@ -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")
 
diff --git a/web/login/index.html b/web/login/index.html
index 26b07640..99fa2aed 100644
--- a/web/login/index.html
+++ b/web/login/index.html
@@ -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>
diff --git a/web/login/index.pug b/web/login/index.pug
index 5ee3855b..26b955af 100644
--- a/web/login/index.pug
+++ b/web/login/index.pug
@@ -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.
diff --git a/web/share/css/main.css b/web/share/css/main.css
index cd8b6342..8a074aa7 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -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 {
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index eb125f9a..af704add 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -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);
+}
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index d3bd7f94..27b18b21 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -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