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

implement instance add,

Browse Source 
fix multiple onclick listeners being added

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-27 23:03:19 +00:00
parent fc1972a344
commit 2df5284d90
2 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
scripts/index.js
View File

@ -1,4 +1,4 @@
import {requestPVE, goToPage, deleteAllCookies} from "./utils.js";
import {requestPVE, requestAPI, goToPage, deleteAllCookies} from "./utils.js";
import { Dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init);
@ -70,10 +70,10 @@ async function handleInstanceAdd () {
<input name="name" id="name" required></input>
<label for="vmid">ID</label>
<input name="vmid" id="vmid" type="number" required></input>
<label for="cpu">Cores (Threads)</label>
<input name="cpu" id="cpu" type="number" min="1" max="8192" required></input>
<label for="ram">Memory (MiB)</label>
<input name="ram" id="ram" type="number" min="16", step="1" required></input>
<label for="cores">Cores (Threads)</label>
<input name="cores" id="cores" type="number" min="1" max="8192" required></input>
<label for="memory">Memory (MiB)</label>
<input name="memory" id="memory" type="number" min="16", step="1" required></input>
<p class="container-specific none" style="grid-column: 1 / span 2; text-align: center;">Container Options</p>
<label class="container-specific none" for="swap">Swap (MiB)</label>
<input class="container-specific none" name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
@ -85,6 +85,8 @@ async function handleInstanceAdd () {
<select class="container-specific none" name="rootfs-storage" id="rootfs-storage" required disabled></select>
<label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
<input class="container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled></input>
<label class="container-specific none" for="password">Password</label>
<input class="container-specific none" name="password" id="password" type="password" required disabled></input>
`;
let typeSelect = dialog.shadowRoot.querySelector("#type");
@ -135,13 +137,42 @@ async function handleInstanceAdd () {
rootfsStorage.selectedIndex = -1;
});
let vmidInput = dialog.shadowRoot.querySelector("#vmid"); // suggest min and max based on user restrictions
let templateImage = dialog.shadowRoot.querySelector("#template-image"); // populate templateImage by
templateStorage.addEventListener("change", async () => {
let content = "vztmpl";
let images = await requestPVE(`/nodes/${nodeSelect.value}/storage/${templateStorage.value}/content`, "GET");
images.data.forEach((element) => {
if (element.content.includes(content)) {
templateImage.append(new Option(element.volid.replace(`${templateStorage.value}:${content}/`, ""), element.volid));
}
});
templateImage.selectedIndex = -1;
});
dialog.callback = async (result, form) => {
if (result === "confirm") {
let body = {
node: form.get("node"),
type: form.get("type"),
name: form.get("name"),
vmid: form.get("vmid"),
cores: form.get("cores"),
memory: form.get("memory")
};
if (form.get("type") === "lxc") {
body.swap = form.get("swap");
body.password = form.get("password");
body.ostemplate = form.get("template-image");
body.rootfslocation = form.get("rootfs-storage");
body.rootfssize = form.get("rootfs-size");
}
let result = await requestAPI("/instance", "POST", body);
if (result.status === 200) {
populateInstances();
}
else {
console.error(result);
}
}
}

8
scripts/instance.js
View File

@ -68,25 +68,25 @@ export class Instance extends HTMLElement {
powerButton.src = instances[this.status].powerButtonSrc;
powerButton.alt = instances[this.status].powerButtonAlt;
powerButton.title = instances[this.status].powerButtonAlt;
powerButton.addEventListener("click", this.handlePowerButton.bind(this));
powerButton.onclick = this.handlePowerButton.bind(this)
let configButton = this.shadowElement.querySelector("#configure-btn");
configButton.src = instances[this.status].configButtonSrc;
configButton.alt = instances[this.status].configButtonAlt;
configButton.title = instances[this.status].configButtonAlt;
configButton.addEventListener("click", this.handleConfigButton.bind(this));
configButton.onclick = this.handleConfigButton.bind(this);
let consoleButton = this.shadowElement.querySelector("#console-btn");
consoleButton.src = instances[this.status].consoleButtonSrc;
consoleButton.alt = instances[this.status].consoleButtonAlt;
consoleButton.title = instances[this.status].consoleButtonAlt;
consoleButton.addEventListener("click", this.handleConsoleButton.bind(this));
consoleButton.onclick = 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));
deleteButton.onclick = this.handleDeleteButton.bind(this);
if (this.node.status !== "online") {
powerButton.classList.add("hidden");