add delete button to insances,

add confirm message on start/stop,
change power action from shutdown to stop,
improve action button alt texts

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

scripts/instance.js

@@ -1,4 +1,5 @@
 import {requestPVE, goToPage, goToURL, instances} from "./utils.js";
+import { Dialog } from "./dialog.js";
 
 export class Instance extends HTMLElement {
 	constructor () {
@@ -23,8 +24,9 @@ export class Instance extends HTMLElement {
 			<hr>
 			<div class="btn-group">
 				<img id="power-btn">
-				<img id="configure-btn" alt="change instance configuration">
+				<img id="console-btn">
-				<img id="console-btn" alt="connect to instance console or display">
+				<img id="configure-btn">
+				<img id="delete-btn">
 			</div>
 		</article>
 		`;
@@ -80,17 +82,34 @@ export class Instance extends HTMLElement {
 		consoleButton.title = instances[this.status].consoleButtonAlt;
 		consoleButton.addEventListener("click", this.handleConsoleButton.bind(this));
 
+		let deleteButton = this.shadowElement.querySelector("#delete-btn");
+		deleteButton.src = instances[this.status].deleteButtonSrc;
+		deleteButton.alt = instances[this.status].deleteButtonAlt;
+		deleteButton.title = instances[this.status].deleteButtonAlt;
+		deleteButton.addEventListener("click", this.handleDeleteButton.bind(this));
+
 		if (this.node.status !== "online") {
 			powerButton.classList.add("hidden");
 			configButton.classList.add("hidden");
 			consoleButton.classList.add("hidden");
+			deleteButton.classList.add("hidden");
 		}
 	}
 
 	async handlePowerButton () {
+
 		if(!this.actionLock) {
+
+			let dialog = document.createElement("dialog-form");
+			document.body.append(dialog);
+
+			dialog.header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
+			dialog.formBody = `<p>Are you sure you want to ${this.status === "running" ? "stop" : "start"}</p><p>VM ${this.vmid}</p>`
+
+			dialog.callback = async (result, form) => {
+				if (result === "confirm") {
 					this.actionLock = true;
-			let targetAction = this.status === "running" ? "shutdown" : "start";
+					let targetAction = this.status === "running" ? "stop" : "start";
 					let targetStatus = this.status === "running" ? "stopped" : "running";
 					let prevStatus = this.status;
 					this.status = "loading";
@@ -123,6 +142,10 @@ export class Instance extends HTMLElement {
 				}
 			}
 
+			dialog.show();
+		}
+	}
+
 	handleConfigButton () {
 		if (!this.actionLock && this.status === "stopped") { // if the action lock is false, and the node is stopped, then navigate to the conig page with the node infor in the search query
 			goToPage("config.html", {node: this.node.name, type: this.type, vmid: this.vmid});
@@ -136,6 +159,8 @@ export class Instance extends HTMLElement {
 			goToURL("https://pve.tronnet.net", data, true);
 		}
 	}
+
+	handleDeleteButton () {}
 }
 
 customElements.define("instance-article", Instance);

scripts/utils.js

@@ -37,25 +37,31 @@ export const instances = {
 		powerButtonSrc: "images/actions/stop.svg",
 		powerButtonAlt: "Shutdown Instance",
 		configButtonSrc: "images/actions/config-inactive.svg",
-		configButtonAlt: "Configuration Disabled",
+		configButtonAlt: "Change Configuration (Inactive)",
 		consoleButtonSrc: "images/actions/console-active.svg",
-		consoleButtonAlt: "Open Console"
+		consoleButtonAlt: "Open Console",
+		deleteButtonSrc: "images/actions/delete-inactive.svg",
+		deleteButtonAlt: "Delete Instance (Inactive)"
 	},
 	stopped: {
 		powerButtonSrc: "images/actions/start.svg",
 		powerButtonAlt: "Start Instance",
 		configButtonSrc: "images/actions/config-active.svg",
-		configButtonAlt: "Configure Instance",
+		configButtonAlt: "Change Configuration",
 		consoleButtonSrc: "images/actions/console-inactive.svg",
-		consoleButtonAlt: "Console Inactive"
+		consoleButtonAlt: "Open Console (Inactive)",
+		deleteButtonSrc: "images/actions/delete-active.svg",
+		deleteButtonAlt: "Delete Instance"
 	},
 	loading: {
 		powerButtonSrc: "images/actions/loading.svg",
 		powerButtonAlt: "Loading Instance",
 		configButtonSrc: "images/actions/config-inactive.svg",
-		configButtonAlt: "Configuration Disabled",
+		configButtonAlt: "Change Configuration (Inactive)",
 		consoleButtonSrc: "images/actions/console-inactive.svg",
-		consoleButtonAlt: "Console Inactive"
+		consoleButtonAlt: "Open Console (Inactive)",
+		deleteButtonSrc: "images/actions/delete-inactive.svg",
+		deleteButtonAlt: "Delete Instance (Inactive)"
 	}
 }