From 9871a3b81edc4db941eb072cc9de501bb48856ff Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Fri, 25 Feb 2022 15:10:18 +0100
Subject: [PATCH] detect not running guests and add start button

akin to what we now have in novnc
css classes copied from novnc, so that we have the same look

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/www/index.html.hbs.in |  6 +++
 src/www/index.html.tpl.in |  6 +++
 src/www/main.js           | 89 +++++++++++++++++++++++++++++----------
 src/www/style.css         | 59 ++++++++++++++++++++++++++
 4 files changed, 138 insertions(+), 22 deletions(-)
diff --git a/src/www/index.html.hbs.in b/src/www/index.html.hbs.in
index 0dba066..0520340 100644
--- a/src/www/index.html.hbs.in
+++ b/src/www/index.html.hbs.in
@@ -11,6 +11,12 @@
     <body>
 	<div id="status_bar"></div>
 	<div id="wrap">
+	<div class="center">
+	    <div id="connect_dlg">
+		<div id="pve_start_info">Guest not running</div>
+		<div id="connect_btn"><div> Start Now </div></div>
+	    </div>
+	</div>
 	<div id="terminal-container"></div>
 	</div>
 	<script type="text/javascript">
diff --git a/src/www/index.html.tpl.in b/src/www/index.html.tpl.in
index 5002035..f38e0b2 100644
--- a/src/www/index.html.tpl.in
+++ b/src/www/index.html.tpl.in
@@ -11,6 +11,12 @@
     <body>
 	<div id="status_bar"></div>
 	<div id="wrap">
+	<div class="center">
+	    <div id="connect_dlg">
+		<div id="pve_start_info">Guest not running</div>
+		<div id="connect_btn"><div> Start Now </div></div>
+	    </div>
+	</div>
 	<div id="terminal-container"></div>
 	</div>
 	<script type="text/javascript">
diff --git a/src/www/main.js b/src/www/main.js
index c2811f6..2c81e7f 100644
--- a/src/www/main.js
+++ b/src/www/main.js
@@ -97,10 +97,59 @@ function updateState(newState, msg, code) {
 
 var terminalContainer = document.getElementById('terminal-container');
 document.getElementById('status_bar').addEventListener('click', hideMsg);
+document.getElementById('connect_btn').addEventListener('click', startGuest);
 const fitAddon = new FitAddon.FitAddon();
 
 createTerminal();
 
+function startConnection(url, params, term) {
+    API2Request({
+	method: 'POST',
+	params: params,
+	url: url + '/termproxy',
+	success: function(result) {
+	    var port = encodeURIComponent(result.data.port);
+	    ticket = result.data.ticket;
+	    socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/api2/json' + url + '/vncwebsocket?port=' + port + '&vncticket=' + encodeURIComponent(ticket);
+
+	    term.open(terminalContainer, true);
+	    socket = new WebSocket(socketURL, 'binary');
+	    socket.binaryType = 'arraybuffer';
+	    socket.onopen = runTerminal;
+	    socket.onclose = tryReconnect;
+	    socket.onerror = tryReconnect;
+	    updateState(states.connecting);
+	},
+	failure: function(msg) {
+	    updateState(states.disconnected,msg);
+	}
+    });
+}
+
+function startGuest() {
+    let api_type = type === 'kvm' ? 'qemu' : 'lxc';
+    API2Request({
+	method: 'POST',
+	url: `/nodes/${nodename}/${api_type}/${vmid}/status/start`,
+	success: function(result) {
+	    showMsg('Guest started successfully', 0);
+	    setTimeout(function() {
+		location.reload();
+	    }, 1000);
+	},
+	failure: function(msg) {
+	    if (msg.match(/already running/)) {
+		showMsg('Guest started successfully', 0);
+		setTimeout(function() {
+		    location.reload();
+		}, 1000);
+	    } else {
+		updateState(states.disconnected,msg);
+	    }
+	}
+    });
+}
+
 function createTerminal() {
     term = new Terminal(getTerminalSettings());
     term.loadAddon(fitAddon);
@@ -132,28 +181,24 @@ function createTerminal() {
 	    }
 	    break;
     }
-    API2Request({
-	method: 'POST',
-	params: params,
-	url: url + '/termproxy',
-	success: function(result) {
-	    var port = encodeURIComponent(result.data.port);
-	    ticket = result.data.ticket;
-	    socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/api2/json' + url + '/vncwebsocket?port=' + port + '&vncticket=' + encodeURIComponent(ticket);
-
-	    term.open(terminalContainer, true);
-	    socket = new WebSocket(socketURL, 'binary');
-	    socket.binaryType = 'arraybuffer';
-	    socket.onopen = runTerminal;
-	    socket.onclose = tryReconnect;
-	    socket.onerror = tryReconnect;
-	    updateState(states.connecting);
-	},
-	failure: function(msg) {
-	    updateState(states.disconnected,msg);
-	}
-    });
-
+    if (type === 'kvm' || type === 'lxc') {
+	API2Request({
+	    method: 'GET',
+	    url: `${url}/status/current`,
+	    success: function(result) {
+		if (result.data.status === 'running') {
+		    startConnection(url, params, term);
+		} else {
+		    document.getElementById('connect_dlg').classList.add('pve_open');
+		}
+	    },
+	    failure: function(msg) {
+		updateState(states.disconnected, msg);
+	    },
+	});
+    } else {
+	startConnection(url, params, term);
+    }
 }
 
 function runTerminal() {
diff --git a/src/www/style.css b/src/www/style.css
index 20959c0..04db7d5 100644
--- a/src/www/style.css
+++ b/src/www/style.css
@@ -83,3 +83,62 @@ html,body {
 #status_bar.warning {
   background: rgba(180,180,30,0.9);
 }
+
+#pve_start_info {
+    color: white;
+    text-align: center;
+    font-size: 20px;
+    padding: 6px;
+}
+
+#connect_dlg {
+  transition: 0.2s ease-in-out;
+
+  transform: scale(0, 0);
+  visibility: hidden;
+  opacity: 0;
+  font-family: Helvetica;
+}
+
+#connect_dlg.pve_open {
+  transform: scale(1, 1);
+  visibility: visible;
+  opacity: 1;
+}
+
+#connect_btn {
+  cursor: pointer;
+  padding: 6px;
+  color: white;
+  background:#4c4c4c;;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 20px;
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
+}
+#connect_btn div {
+  margin: 2px;
+  padding: 5px 30px;
+  border: 1px solid #2f2f2f;
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  background:#4c4c4c;;
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
+}
+#connect_btn div:active {
+  border-bottom-width: 1px;
+  margin-top: 3px;
+}
+
+div.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
