diff --git a/css/form.css b/css/form.css
index 41486e6..005f653 100644
--- a/css/form.css
+++ b/css/form.css
@@ -1,8 +1,3 @@
-.center-div {
- display: grid;
- justify-content: center;
-}
-
p {
text-align: left;
margin: 0px;
@@ -43,6 +38,7 @@ select {
border: solid white 1px;
background-color: black;
color: white;
+ width: min-content;
}
select:disabled {
diff --git a/index.html b/index.html
index 362fe7e..a978aaf 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
tronnet - client
+
diff --git a/scripts/config.js b/scripts/config.js
index 3430b5a..d1b5223 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -207,7 +207,7 @@ async function handleDiskAttach () {
let diskImage = config.data[this.dataset.disk];
dialog.header = `Attach ${diskImage}`;
- dialog.formBody = ``;
+ dialog.formBody = ``;
dialog.callback = async (result, form) => {
if (result === "confirm") {
@@ -245,7 +245,7 @@ async function handleDiskResize () {
document.body.append(dialog);
dialog.header = `Resize ${this.dataset.disk}`;
- dialog.formBody = ``;
+ dialog.formBody = ``;
dialog.callback = async (result, form) => {
if (result === "confirm") {
@@ -370,7 +370,7 @@ async function handleDiskAdd () {
dialog.formBody = `
${select}
-
+
`;
dialog.callback = async (result, form) => {
@@ -425,7 +425,7 @@ async function handleCDAdd () {
let storageSelect = ``;
dialog.formBody = `
-
+
${storageSelect}
`;
diff --git a/scripts/index.js b/scripts/index.js
index 5af8cda..2e6449a 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -64,27 +64,50 @@ async function handleInstanceAdd () {
+
+
+
+
-
-
+
`;
let typeSelect = dialog.shadowRoot.querySelector("#type");
typeSelect.selectedIndex = -1;
typeSelect.addEventListener("change", () => {
if(typeSelect.value === "qemu") {
- dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = true;
- dialog.shadowRoot.querySelector("#swap").disabled = true;
+ dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.disabled = true});
+ dialog.shadowRoot.querySelectorAll("#container-specific select").forEach((element) => {element.disabled = true});
+ dialog.shadowRoot.querySelector("#container-specific").classList.add("none");
}
else {
- dialog.shadowRoot.querySelector(`label[for="swap"]`).disabled = false;
- dialog.shadowRoot.querySelector("#swap").disabled = false;
+ dialog.shadowRoot.querySelectorAll("#container-specific input").forEach((element) => {element.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) => {
if (result === "confirm") {