[PATCH pve-xtermjs 3/3] xterm.js: fix obstructed start button

[Dominik Csapak <d.csapak@proxmox.com>]

Depending on the window height, the xterm.js container sometimes
overlapped the 'start now' button in case a guest is not running. This
made it impossible to press that button.

Fix this by adding a 'display: none' CSS style when the terminal is
disconnected.

Reported in the forum:
https://forum.proxmox.com/threads/186055/

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 xterm.js/src/index.html.hbs.in |  2 +-
 xterm.js/src/index.html.tpl.in |  2 +-
 xterm.js/src/main.js           | 26 ++++++++++++++++++++++++--
 xterm.js/src/style.css         |  4 ++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/xterm.js/src/index.html.hbs.in b/xterm.js/src/index.html.hbs.in
index 9857e9d..20c5814 100644
--- a/xterm.js/src/index.html.hbs.in
+++ b/xterm.js/src/index.html.hbs.in
@@ -18,7 +18,7 @@
 		<div id="connect_btn"><div> Start Now </div></div>
 	    </div>
 	</div>
-	<div id="terminal-container"></div>
+	<div id="terminal-container" class="disconnected"></div>
 	</div>
 	<script type="text/javascript">
 	    if (typeof(PVE) === 'undefined') PVE = {};
diff --git a/xterm.js/src/index.html.tpl.in b/xterm.js/src/index.html.tpl.in
index 0084158..2d36c0e 100644
--- a/xterm.js/src/index.html.tpl.in
+++ b/xterm.js/src/index.html.tpl.in
@@ -18,7 +18,7 @@
 		<div id="connect_btn"><div> Start Now </div></div>
 	    </div>
 	</div>
-	<div id="terminal-container"></div>
+	<div id="terminal-container" class="disconnected"></div>
 	</div>
 	<script type="text/javascript">
 	    if (typeof(PVE) === 'undefined') PVE = {};
diff --git a/xterm.js/src/main.js b/xterm.js/src/main.js
index e9097f1..66b00fa 100644
--- a/xterm.js/src/main.js
+++ b/xterm.js/src/main.js
@@ -47,36 +47,56 @@ function getBaseUrl() {
     return baseUrl;
 }
 
+function clearClasses(element) {
+    if (!element) {
+        return;
+    }
+
+    element.classList.values().forEach((cls) => element.classList.remove(cls));
+}
+
+function addClass(element, cls) {
+    if (!element || !cls) {
+        return;
+    }
+    element.classList.add(cls);
+}
+
 const baseUrl = getBaseUrl();
 const statusUrlSuffix = remote ? '/status' : '/status/current';
 const startUrlSuffix = remote ? '/start' : '/status/start';
 
 function updateState(newState, msg, code) {
-    var timeout, severity, message;
+    var timeout, severity, message, cls;
     switch (newState) {
         case states.connecting:
+            cls = 'connecting';
             message = 'Connecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.connected:
             window.onbeforeunload = windowUnload;
+            cls = 'connected';
             message = 'Connected';
             break;
         case states.disconnecting:
             window.onbeforeunload = undefined;
+            cls = 'disconnected';
             message = 'Disconnecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.reconnecting:
             window.onbeforeunload = undefined;
+            cls = 'reconnecting';
             message = 'Reconnecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.disconnected:
             window.onbeforeunload = undefined;
+            cls = 'disconnected';
             switch (state) {
                 case states.start:
                 case states.connecting:
@@ -106,6 +126,8 @@ function updateState(newState, msg, code) {
         default:
             throw 'unknown state';
     }
+    clearClasses(terminalContainer);
+    addClass(terminalContainer, cls);
     let msgArr = [];
     if (msg) {
         msgArr.push(msg);
@@ -227,7 +249,7 @@ function createTerminal() {
                 if (result.data.status === 'running') {
                     startConnection(params, term);
                 } else {
-                    document.getElementById('connect_dlg').classList.add('pve_open');
+                    addClass(document.getElementById('connect_dlg'), 'pve_open');
                 }
             },
             failure: function (msg) {
diff --git a/xterm.js/src/style.css b/xterm.js/src/style.css
index 7962ae3..001b4c7 100644
--- a/xterm.js/src/style.css
+++ b/xterm.js/src/style.css
@@ -36,6 +36,10 @@ body {
     width: auto;
 }
 
+#terminal-container.disconnected {
+    display: none;
+}
+
 #wrap {
     height: 100%;
     width: auto;
-- 
2.47.3