add boot order draggable list mockup

This commit is contained in:
Arthur Lu 2023-08-11 22:06:26 +00:00
parent 690c8b2938
commit 4440330c88
5 changed files with 151 additions and 8 deletions

View File

@ -55,6 +55,15 @@
</fieldset> </fieldset>
<fieldset class="w3-card w3-padding none" id="boot-card"> <fieldset class="w3-card w3-padding none" id="boot-card">
<legend>Boot Order</legend> <legend>Boot Order</legend>
<div id="enabled">
<label>Enabled</label>
<div class="drop-target spacer" id="enabled-spacer"></div>
</div>
<hr style="margin: 0.5em 0px;">
<div id="disabled">
<label>Disabled</label>
<div class="drop-target spacer" id="disabled-spacer"></div>
</div>
</fieldset> </fieldset>
<div class="w3-container w3-center" id="form-actions"> <div class="w3-container w3-center" id="form-actions">
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button> <button class="w3-button w3-margin" id="exit" type="button">EXIT</button>

View File

@ -46,4 +46,8 @@ input[type="checkbox"] {
input[type="radio"] { input[type="radio"] {
position: inherit; position: inherit;
} }
div[draggable="true"] {
cursor: grab;
}

View File

@ -102,4 +102,8 @@ hr, * {
.none { .none {
display: none; display: none;
}
.spacer {
min-height: 1em;
} }

View File

@ -1,4 +1,4 @@
import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader } from "./utils.js"; import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, bootConfig } from "./utils.js";
import { alert, dialog } from "./dialog.js"; import { alert, dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
@ -6,6 +6,7 @@ window.addEventListener("DOMContentLoaded", init); // do the dumb thing where th
const diskMetaData = resourcesConfig.disk; const diskMetaData = resourcesConfig.disk;
const networkMetaData = resourcesConfig.network; const networkMetaData = resourcesConfig.network;
const pcieMetaData = resourcesConfig.pcie; const pcieMetaData = resourcesConfig.pcie;
const bootMetaData = bootConfig;
let node; let node;
let type; let type;
@ -617,12 +618,6 @@ async function populateDevices () {
} }
} }
async function populateBoot () {
if (type === "qemu") {
document.querySelector("#boot-card").classList.remove("none");
}
}
function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) { function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
const field = document.querySelector(`#${fieldset}`); const field = document.querySelector(`#${fieldset}`);
@ -756,6 +751,124 @@ async function handleDeviceAdd () {
d.querySelector("#pcie").checked = true; d.querySelector("#pcie").checked = true;
} }
async function populateBoot () {
if (type === "qemu") {
document.querySelector("#boot-card").classList.remove("none");
document.querySelectorAll(".drop-target").forEach((element) => {
element.addEventListener("dragenter", (event) => {
event.target.style.borderTop = "1px dotted";
event.preventDefault();
});
element.addEventListener("dragleave", (event) => {
event.target.attributeStyleMap.clear();
event.preventDefault();
});
element.addEventListener("dragover", (event) => {
event.preventDefault();
});
element.addEventListener("drop", (event) => {
const data = event.dataTransfer.getData("text/plain");
event.target.attributeStyleMap.clear();
addBootLine(element.parentElement.id, JSON.parse(data), element);
event.preventDefault();
});
});
const order = config.data.boot.replace("order=", "").split(";");
const bootable = { disabled: [] };
const eligible = bootMetaData.eligiblePrefixes;
for (let i = 0; i < order.length; i++) {
const prefix = eligible.find((pref) => order[i].startsWith(pref));
bootable[i] = { id: order[i], prefix };
}
Object.keys(config.data).forEach((element) => {
const prefix = eligible.find((pref) => element.startsWith(pref));
if (prefix && !order.includes(element)) {
bootable.disabled.push({ id: element, prefix });
}
});
Object.keys(bootable).sort();
Object.keys(bootable).forEach((element) => {
if (element !== "disabled") {
addBootLine("enabled", bootable[element], document.querySelector("#enabled-spacer"));
}
else {
bootable.disabled.forEach((item) => {
addBootLine("disabled", item, document.querySelector("#disabled-spacer"));
});
}
});
}
}
function addBootLine (fieldset, bootable, before = null) {
const box = document.createElement("div");
const icon = document.createElement("img");
icon.src = bootMetaData[bootable.prefix].icon;
box.append(icon);
const label = document.createElement("p");
label.innerText = bootable.id;
label.style.margin = "0px";
box.append(label);
box.draggable = true;
box.classList.add("flex");
box.classList.add("row");
box.classList.add("drop-target");
box.id = `boot-${bootable.id}`;
// setup draggable event listeners
box.addEventListener("dragstart", (event) => {
event.target.style.opacity = "0.5";
event.dataTransfer.setData("text/plain", JSON.stringify(bootable));
event.dataTransfer.effectAllowed = "move";
});
box.addEventListener("dragend", (event) => {
if (event.dataTransfer.dropEffect === "move") {
box.parentElement.removeChild(box);
}
else {
event.target.attributeStyleMap.clear();
}
});
box.addEventListener("dragenter", (event) => {
if (event.target.parentElement.classList.contains("drop-target")) {
event.target.parentElement.style.borderTop = "1px dotted";
}
event.preventDefault();
});
box.addEventListener("dragleave", (event) => {
if (event.target.parentElement.classList.contains("drop-target")) {
event.target.parentElement.style.borderTop = "";
}
event.preventDefault();
});
box.addEventListener("dragover", (event) => {
event.preventDefault();
});
box.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
if (event.target.parentElement.classList.contains("drop-target")) {
event.target.parentElement.attributeStyleMap.clear();
}
addBootLine(box.parentElement.id, JSON.parse(data), box);
});
if (before) {
document.querySelector(`#${fieldset}`).insertBefore(box, before);
}
else {
document.querySelector(`#${fieldset}`).append(box);
}
}
class DraggableItem extends HTMLElement {
constructor () {
super();
}
}
customElements.define("draggable-item", DraggableItem);
window.customElement
async function handleFormExit () { async function handleFormExit () {
const body = { const body = {
cores: document.querySelector("#cores").value, cores: document.querySelector("#cores").value,

View File

@ -129,6 +129,19 @@ export const nodesConfig = {
} }
}; };
export const bootConfig = {
eligiblePrefixes: ["ide", "sata", "net"],
ide: {
icon: "images/resources/disk.svg"
},
sata: {
icon: "images/resources/drive.svg"
},
net: {
icon: "images/resources/network.svg"
}
};
export function getCookie (cname) { export function getCookie (cname) {
const name = cname + "="; const name = cname + "=";
const decodedCookie = decodeURIComponent(document.cookie); const decodedCookie = decodeURIComponent(document.cookie);