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

improve form populating

Browse Source
This commit is contained in:
Arthur Lu 2022-12-21 01:31:58 -08:00
parent 833307158c
commit 0c4917c77a
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config.html
View File

@ -13,11 +13,11 @@
<form> <form>
<fieldset> <fieldset>
<legend>Name</legend> <legend>Name</legend>
<div class="labels-inputs" id="name"></div> <div class="label-input" id="name"></div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Resources</legend> <legend>Resources</legend>
<div class="labels-inputs-units" id="resources"></div> <div class="label-input-unit" id="resources"></div>
</fieldset> </fieldset>
<fieldset class="fieldset-no-border"> <fieldset class="fieldset-no-border">
<div class="btn-group" id="form-actions"> <div class="btn-group" id="form-actions">

5
css/form.css
View File

@ -30,18 +30,19 @@ button {
margin-top: 0px; margin-top: 0px;
} }
.labels-inputs { .label-input {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
column-gap: 10px; column-gap: 10px;
} }
.labels-inputs-units { .label-input-unit {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
column-gap: 10px; column-gap: 10px;
} }
legend { legend {
top: -0.6em; top: -0.6em;
position: relative; position: relative;

23
scripts/config.js
View File

@ -24,38 +24,37 @@ async function populateForm (node, type, vmid) {
let config = await request(`/nodes/${node}/${type}/${vmid}/config`); let config = await request(`/nodes/${node}/${type}/${vmid}/config`);
console.log(config); console.log(config);
addFormLine("name", "name", "Name", {type: "text", value: config.data.name}); addFormLine("name", "Name", {type: "text", value: config.data.name});
addFormLine("resources", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads");
addFormLine("resources", "cores", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); addFormLine("resources", "Memory", {type: "number", value: config.data.memory / 1024, min: 16}, "GiB");
addFormLine("resources", "memory", "Memory", {type: "number", value: config.data.memory / 1024, min: 16}, "GiB");
let i = 0; let i = 0;
while(Object.hasOwn(config.data, `sata${i}`)){ while(Object.hasOwn(config.data, `sata${i}`)){
let sata = config.data[`sata${i}`]; let sata = config.data[`sata${i}`];
sata = `{"${sata.replaceAll(":", '":"').replaceAll("=", '":"').replaceAll(",", '","')}"}`; sata = `{"${sata.replaceAll(":", '":"').replaceAll("=", '":"').replaceAll(",", '","')}"}`;
sata = JSON.parse(sata); sata = JSON.parse(sata);
addFormLine("resources", `sata${i}`, `SATA ${i}`, {type: "text", value: sata.size.slice(0, sata.size.length - 1)}, sata.size.includes("G") ? "GiB" : "MiB"); let sizeUnit = sata.size.includes("G") ? "GiB" : "MiB";
addFormLine("resources", `SATA ${i}`, {type: "number", value: sizeUnit === "GiB" ? (sata.size).toFixed(3) : (sata.size / 1024).toFixed(3), min: 0.016}, "GiB");
i++; i++;
} }
} }
function addFormLine (fieldset, id, labelValue, inputAttr, unitValue="") { function addFormLine (fieldset, labelText, inputAttr, unitText=null) {
let field = document.querySelector(`#${fieldset}`); let field = document.querySelector(`#${fieldset}`);
let label = document.createElement("label"); let label = document.createElement("label");
label.for = id; label.innerHTML = labelText;
label.innerHTML = labelValue;
field.append(label); field.append(label);
let input = document.createElement("input"); let input = document.createElement("input");
input.id = id;
input.name = id;
for (let k in inputAttr) { for (let k in inputAttr) {
input.setAttribute(k, inputAttr[k]) input.setAttribute(k, inputAttr[k])
} }
field.append(input); field.append(input);
if (unitText) {
let unit = document.createElement("p"); let unit = document.createElement("p");
unit.innerText = unitValue; unit.innerText = unitText;
field.append(unit) field.append(unit);
}
} }