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

remove console.log,

Browse Source 
add node logic to new instance form

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-24 23:27:03 +00:00
parent 8e0fa94daa
commit b84186c9d6
2 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/config.js
View File

@ -31,7 +31,6 @@ async function init () {
async function getConfig () { async function getConfig () {
config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`, "GET"); config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`, "GET");
console.log(config);
} }
function populateResources () { function populateResources () {
@ -291,6 +290,8 @@ async function handleDiskMove () {
<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked required> <label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked required>
`; `;
dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { 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/actions/loading.svg";
@ -373,6 +374,8 @@ async function handleDiskAdd () {
<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" required></input> <label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" required></input>
`; `;
dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
let device = form.get("device"); let device = form.get("device");
@ -441,6 +444,7 @@ async function handleCDAdd () {
ISOSelect.append(new Option(element.volid.replace(`${storage}:${content}/`, ""), element.volid)); ISOSelect.append(new Option(element.volid.replace(`${storage}:${content}/`, ""), element.volid));
} }
}); });
ISOSelect.selectedIndex = -1;
}); });
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {

81
scripts/index.js
View File

@ -74,55 +74,70 @@ async function handleInstanceAdd () {
<input name="cpu" id="cpu" type="number" min="1" max="8192" required></input> <input name="cpu" id="cpu" type="number" min="1" max="8192" required></input>
<label for="ram">Memory (MiB)</label> <label for="ram">Memory (MiB)</label>
<input name="ram" id="ram" type="number" min="16", step="1" required></input> <input name="ram" id="ram" type="number" min="16", step="1" required></input>
<fieldset class="none" id="container-specific" style="grid-column: 1 / span 2; margin-top: 10px;"> <p class="container-specific none" style="grid-column: 1 / span 2; text-align: center;">Container Options</p>
<legend>Container Options</legend> <label class="container-specific none" for="swap">Swap (MiB)</label>
<div class="input-grid" style="grid-template-columns: auto 1fr;"> <input class="container-specific none" name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
<label for="swap">Swap (MiB)</label> <label class="container-specific none" for="template-storage">Template Storage</label>
<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input> <select class="container-specific none" name="template-storage" id="template-storage" required disabled></select>
<label for="template-storage">Template Storage</label> <label class="container-specific none" for="template-image">Template Image</label>
<select name="template-storage" id="template-storage" required disabled></select> <select class="container-specific none" name="template-image" id="template-image" required disabled></select>
<label for="template-image">Template Image</label> <label class="container-specific none" for="rootfs-storage">ROOTFS Storage</label>
<select name="template-image" id="template-image" required disabled></select> <select class="container-specific none" name="rootfs-storage" id="rootfs-storage" required disabled></select>
<label for="rootfs-storage">ROOTFS Storage</label> <label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
<select name="rootfs-storage" id="rootfs-storage" required disabled></select> <input class="container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled></input>
<label for="rootfs-size">ROOTFS Size (GiB)</label>
<input name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled></input>
</div>
</fieldset>
`; `;
let typeSelect = dialog.shadowRoot.querySelector("#type"); let typeSelect = dialog.shadowRoot.querySelector("#type");
typeSelect.selectedIndex = -1; typeSelect.selectedIndex = -1;
typeSelect.addEventListener("change", () => { typeSelect.addEventListener("change", () => {
if(typeSelect.value === "qemu") { if(typeSelect.value === "qemu") {
dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = true}); dialog.shadowRoot.querySelectorAll(".container-specific").forEach((element) => {
dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = true}); element.classList.add("none");
dialog.shadowRoot.querySelector("#container-specific").classList.add("none"); element.disabled = true;
});
} }
else { else {
dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = false}); dialog.shadowRoot.querySelectorAll(".container-specific").forEach((element) => {
dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = false}); element.classList.remove("none");
dialog.shadowRoot.querySelector("#container-specific").classList.remove("none"); element.disabled = false;
});
} }
}); });
let nodeSelect = dialog.shadowRoot.querySelector("#node");
nodeSelect.selectedIndex = -1;
// populate nodeSelect
nodeSelect.addEventListener("change", async () => { // change template and rootfs storage based on node
});
let vmidInput = dialog.shadowRoot.querySelector("#vmid");
//vmidInput.min = 200;
//vmidInput.max = 299;
let templateContent = "iso"; let templateContent = "iso";
let templateStorage = dialog.shadowRoot.querySelector("#template-storage"); let templateStorage = dialog.shadowRoot.querySelector("#template-storage");
let templateImage = dialog.shadowRoot.querySelector("#template-image"); templateStorage.selectedIndex = -1;
let rootfsContent = "rootdir"; let rootfsContent = "rootdir";
let rootfsStorage = dialog.shadowRoot.querySelector("#rootfs-storage"); let rootfsStorage = dialog.shadowRoot.querySelector("#rootfs-storage");
let rootfsSize = dialog.shadowRoot.querySelector("#rootfs-size"); rootfsStorage.selectedIndex = -1;
let nodeSelect = dialog.shadowRoot.querySelector("#node");
let nodes = await requestPVE("/nodes", "GET");
nodes.data.forEach((element) => {
if (element.status === "online") {
nodeSelect.add(new Option(element.node));
}
});
nodeSelect.selectedIndex = -1;
nodeSelect.addEventListener("change", async () => { // change template and rootfs storage based on node
let node = nodeSelect.value;
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
storage.data.forEach((element) => {
if (element.content.includes(templateContent)) {
templateStorage.add(new Option(element.storage));
}
if (element.content.includes(rootfsContent)) {
rootfsStorage.add(new Option(element.storage));
}
});
templateStorage.selectedIndex = -1;
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
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {