tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add icons to instance and node status

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
2023-04-06 21:21:11 +00:00
parent 0d4d2d4092
commit f89e5ceec6
14 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/config.js
View File

@@ -178,7 +178,7 @@ async function handleDiskDetach () {
dialog.callback = async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
@@ -213,7 +213,7 @@ async function handleDiskAttach () {
dialog.callback = async (result, form) => {
if (result === "confirm") {
let device = form.get("device");
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
@@ -246,7 +246,7 @@ async function handleDiskResize () {
dialog.callback = async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
@@ -295,7 +295,7 @@ async function handleDiskMove () {
dialog.callback = async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
@@ -329,7 +329,7 @@ async function handleDiskDelete () {
dialog.callback = async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg";
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,

14
scripts/instance.js
View File

@@ -1,4 +1,4 @@
import {requestPVE, requestAPI, goToPage, goToURL, instances} from "./utils.js";
import {requestPVE, requestAPI, goToPage, goToURL, instances, nodes} from "./utils.js";
import { Dialog } from "./dialog.js";
export class Instance extends HTMLElement {
@@ -13,9 +13,9 @@ export class Instance extends HTMLElement {
<p id="instance-id"></p>
<p id="instance-name"></p>
<p id="instance-type"></p>
<p id="instance-status"></p>
<div><img id="instance-status-icon"><p id="instance-status"></p></div>
<p id="node-name"></p>
<p id="node-status"></p>
<div><img id="node-status-icon"><p id="node-status"></p></div>
<div class="hidden"></div>
<div class="btn-group">
<img id="power-btn" class="clickable">
@@ -54,12 +54,20 @@ export class Instance extends HTMLElement {
let statusParagraph = this.shadowElement.querySelector("#instance-status");
statusParagraph.innerText = this.status;
let statusIcon = this.shadowElement.querySelector("#instance-status-icon");
statusIcon.src = instances[this.status].statusSrc;
statusIcon.alt = instances[this.status].statusAlt;
let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name;
let nodeStatusParagraph = this.shadowElement.querySelector("#node-status");
nodeStatusParagraph.innerText = this.node.status;
let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon");
nodeStatusIcon.src = nodes[this.node.status].statusSrc;
nodeStatusIcon.alt = nodes[this.node.status].statusAlt;
let powerButton = this.shadowElement.querySelector("#power-btn");
powerButton.src = instances[this.status].powerButtonSrc;
powerButton.alt = instances[this.status].powerButtonAlt;

23
scripts/utils.js
View File

@@ -34,6 +34,8 @@ export const resources = {
export const instances = {
running: {
statusSrc: "images/status/active.svg",
statusAlt: "Instance is running",
powerButtonSrc: "images/actions/instance/stop.svg",
powerButtonAlt: "Shutdown Instance",
configButtonSrc: "images/actions/instance/config-inactive.svg",
@@ -44,6 +46,8 @@ export const instances = {
deleteButtonAlt: "Delete Instance (Inactive)"
},
stopped: {
statusSrc: "images/status/inactive.svg",
statusAlt: "Instance is stopped",
powerButtonSrc: "images/actions/instance/start.svg",
powerButtonAlt: "Start Instance",
configButtonSrc: "images/actions/instance/config-active.svg",
@@ -54,7 +58,9 @@ export const instances = {
deleteButtonAlt: "Delete Instance"
},
loading: {
powerButtonSrc: "images/actions/loading.svg",
statusSrc: "images/status/loading.svg",
statusAlt: "Instance is loading",
powerButtonSrc: "images/status/loading.svg",
powerButtonAlt: "Loading Instance",
configButtonSrc: "images/actions/instance/config-inactive.svg",
configButtonAlt: "Change Configuration (Inactive)",
@@ -65,6 +71,21 @@ export const instances = {
}
}
export const nodes = {
online: {
statusSrc: "images/status/active.svg",
statusAlt: "Node is online",
},
offline: {
statusSrc: "images/status/inactive.svg",
statusAlt: "Node is offline",
},
uknown: {
statusSrc: "images/status/inactive.svg",
statusAlt: "Node status is unknown",
}
}
export function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);