Merge pull request 'Fix Sync Issue with Instance Power Action' (#4) from instance-power-sync-fix into main

Reviewed-on: #4
This commit is contained in:
2025-05-13 17:41:28 +00:00
3 changed files with 84 additions and 5 deletions

View File

@@ -1,4 +1,4 @@
import { requestPVE, requestAPI, goToPage, setAppearance, getSearchSettings, goToURL, requestDash } from "./utils.js";
import { requestPVE, requestAPI, goToPage, setAppearance, getSearchSettings, goToURL, requestDash, setSVGSrc, setSVGAlt } from "./utils.js";
import { alert, dialog } from "./dialog.js";
import { setupClientSync } from "./clientsync.js";
import wfaInit from "../modules/wfa.js";
@@ -141,6 +141,16 @@ class InstanceCard extends HTMLElement {
}
}
setStatusLoading() {
this.status = "loading"
let statusicon = this.shadowRoot.querySelector("#status")
let powerbtn = this.shadowRoot.querySelector("#power-btn")
setSVGSrc(statusicon, "images/status/loading.svg")
setSVGAlt(statusicon, "instance is loading")
setSVGSrc(powerbtn, "images/status/loading.svg")
setSVGAlt(powerbtn, "")
}
async handlePowerButton () {
if (!this.actionLock) {
const header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
@@ -151,6 +161,7 @@ class InstanceCard extends HTMLElement {
const targetAction = this.status === "running" ? "stop" : "start";
const result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", { node: this.node.name, vmid: this.vmid });
this.setStatusLoading()
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));

View File

@@ -16,11 +16,11 @@
<p class="w3-col l1 m2 w3-hide-small">{{.Type}}</p>
<div class="w3-col l2 m3 s6 flex row nowrap">
{{if eq .Status "running"}}
<svg aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
<svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
{{else if eq .Status "stopped"}}
<svg aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
<svg id="status" aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
{{else if eq .Status "loading"}}
<svg aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
{{else}}
{{end}}
<p>{{.Status}}</p>