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

add extra input fields for container specific options

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-02-23 21:58:42 +00:00
parent aeee33d705
commit 0639d53a5d
4 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/form.css
View File

@ -1,8 +1,3 @@
.center-div {
display: grid;
justify-content: center;
}
p { p {
text-align: left; text-align: left;
margin: 0px; margin: 0px;
@ -43,6 +38,7 @@ select {
border: solid white 1px; border: solid white 1px;
background-color: black; background-color: black;
color: white; color: white;
width: min-content;
} }
select:disabled { select:disabled {

1
index.html
View File

@ -6,6 +6,7 @@
<title>tronnet - client</title> <title>tronnet - client</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
<script src="scripts/index.js" type="module"></script> <script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script> <script src="scripts/instance.js" type="module"></script>
</head> </head>

8
scripts/config.js
View File

@ -207,7 +207,7 @@ async function handleDiskAttach () {
let diskImage = config.data[this.dataset.disk]; let diskImage = config.data[this.dataset.disk];
dialog.header = `Attach ${diskImage}`; dialog.header = `Attach ${diskImage}`;
dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>`; dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>`;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -245,7 +245,7 @@ async function handleDiskResize () {
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Resize ${this.dataset.disk}`; dialog.header = `Resize ${this.dataset.disk}`;
dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072" value="0"></input>`; dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072"></input>`;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -370,7 +370,7 @@ async function handleDiskAdd () {
dialog.formBody = ` dialog.formBody = `
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input> <label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
${select} ${select}
<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" value="0" required></input> <label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" required></input>
`; `;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
@ -425,7 +425,7 @@ async function handleCDAdd () {
let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`; let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`;
dialog.formBody = ` dialog.formBody = `
<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" value="0" required></input> <label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" required></input>
${storageSelect} ${storageSelect}
<label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select> <label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select>
`; `;

35
scripts/index.js
View File

@ -64,27 +64,50 @@ async function handleInstanceAdd () {
<option value="lxc">Container</option> <option value="lxc">Container</option>
<option value="qemu">Virtual Machine</option> <option value="qemu">Virtual Machine</option>
</select> </select>
<label for="name">Name</label>
<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</label> <label for="cpu">Cores</label>
<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</label> <label for="ram">Memory</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>
<label for="swap" disabled>Swap</label> <fieldset class="none" id="container-specific" style="grid-column: 1 / span 2; margin-top: 10px;">
<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input> <legend>Container Options</legend>
<div class="input-grid" style="grid-template-columns: auto 1fr;">
<label for="swap">Swap</label>
<input name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
<label for="template-storage">Template Storage</label>
<select name="template-storage" id="template-storage" required disabled></select>
<label for="template-storage">Template Image</label>
<select name="template-image" id="template-image" required disabled></select>
<label for="template-storage">ROOTFS Storage</label>
<select name="rootfs-storage" id="rootfs-storage" required disabled></select>
<label for="template-size">ROOTFS Size (GiB)</label>
<input name="template-size" id="template-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.querySelector(`label[for="swap"]`).disabled = true; dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = true});
dialog.shadowRoot.querySelector("#swap").disabled = true; dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = true});
dialog.shadowRoot.querySelector("#container-specific").classList.add("none");
} }
else { else {
dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = false; dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = false});
dialog.shadowRoot.querySelector("#swap").disabled = false; dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = false});
dialog.shadowRoot.querySelector("#container-specific").classList.remove("none");
} }
}); });
let vmidInput = dialog.shadowRoot.querySelector("#vmid");
//vmidInput.min = 200;
//vmidInput.max = 299;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {