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

add drag icon to draggable items

Browse Source
This commit is contained in:
Arthur Lu 2023-08-19 03:32:52 +00:00
parent b9eac10811
commit 1827d5c73e
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
images/actions/drag.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

13
scripts/config.js
View File

@ -732,14 +732,14 @@ async function populateBoot () {
for (let i = 0; i < order.length; i++) { for (let i = 0; i < order.length; i++) {
const element = order[i]; const element = order[i];
const prefix = eligible.find((pref) => order[i].startsWith(pref)); const prefix = eligible.find((pref) => order[i].startsWith(pref));
const value = config.data[element]; const detail = config.data[element];
bootable[i] = { id: element, prefix, value }; bootable[i] = { id: element, prefix, detail };
} }
Object.keys(config.data).forEach((element) => { Object.keys(config.data).forEach((element) => {
const prefix = eligible.find((pref) => element.startsWith(pref)); const prefix = eligible.find((pref) => element.startsWith(pref));
const value = config.data[element]; const detail = config.data[element];
if (prefix && !order.includes(element)) { if (prefix && !order.includes(element)) {
bootable.disabled.push({ id: element, prefix, value }); bootable.disabled.push({ id: element, prefix, detail });
} }
}); });
Object.keys(bootable).sort(); Object.keys(bootable).sort();
@ -760,9 +760,10 @@ function addBootLine (container, data, before = null) {
const item = document.createElement("draggable-item"); const item = document.createElement("draggable-item");
item.data = data; item.data = data;
item.innerHTML = ` item.innerHTML = `
<img src="images/actions/drag.svg" id="drag">
<img src="${bootMetaData[data.prefix].icon}"> <img src="${bootMetaData[data.prefix].icon}">
<p style="margin: 0px;">${data.id}</p> <p style="margin: 0px;">${data.id}</p>
<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.value}</p> <p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
`; `;
item.draggable = true; item.draggable = true;
item.classList.add("drop-target"); item.classList.add("drop-target");
@ -774,6 +775,7 @@ function addBootLine (container, data, before = null) {
document.querySelector(`#${container}`).append(item); document.querySelector(`#${container}`).append(item);
} }
item.container = container; item.container = container;
item.value = data.id;
bootEntries[item.id] = item; bootEntries[item.id] = item;
} }
@ -805,6 +807,7 @@ async function handleFormExit () {
} }
else if (type === "qemu") { else if (type === "qemu") {
body.proctype = document.querySelector("#proctype").value; body.proctype = document.querySelector("#proctype").value;
body.boot = document.querySelector("#enabled").value;
} }
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
if (result.status === 200) { if (result.status === 200) {

27
scripts/draggable.js
View File

@ -39,6 +39,18 @@ class DraggableContainer extends HTMLElement {
return false; return false;
} }
} }
set value (value) {}
get value () {
const value = [];
this.content.childNodes.forEach((element) => {
if (element.value) {
value.push(element.value);
}
});
return value;
}
} }
class DraggableItem extends HTMLElement { class DraggableItem extends HTMLElement {
@ -49,11 +61,14 @@ class DraggableItem extends HTMLElement {
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
#wrapper { #wrapper {
grid-template-columns: auto 8ch 1fr; grid-template-columns: auto auto 8ch 1fr;
display: grid; display: grid;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
} }
#drag {
cursor: move;
}
img { img {
height: 1em; height: 1em;
width: 1em; width: 1em;
@ -67,8 +82,8 @@ class DraggableItem extends HTMLElement {
// add drag and drop listeners // add drag and drop listeners
this.addEventListener("dragstart", (event) => { this.addEventListener("dragstart", (event) => {
this.content.style.opacity = "0.5"; this.content.style.opacity = "0.5";
event.dataTransfer.setData("application/json", JSON.stringify(this.data)); const data = { data: this.data, content: this.content.innerHTML, value: this.value };
event.dataTransfer.setData("text/html", this.content.innerHTML); event.dataTransfer.setData("application/json", JSON.stringify(data));
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
}); });
this.addEventListener("dragend", (event) => { this.addEventListener("dragend", (event) => {
@ -103,13 +118,13 @@ class DraggableItem extends HTMLElement {
} }
if (event.target.classList.contains("drop-target")) { if (event.target.classList.contains("drop-target")) {
const data = JSON.parse(event.dataTransfer.getData("application/json")); const data = JSON.parse(event.dataTransfer.getData("application/json"));
const content = event.dataTransfer.getData("text/html");
const item = document.createElement("draggable-item"); const item = document.createElement("draggable-item");
item.data = data; item.data = data.data;
item.innerHTML = content; item.innerHTML = data.content;
item.draggable = true; item.draggable = true;
item.classList.add("drop-target"); item.classList.add("drop-target");
item.id = `boot-${data.id}`; item.id = `boot-${data.id}`;
item.value = data.value;
event.target.parentElement.insertBefore(item, event.target); event.target.parentElement.insertBefore(item, event.target);
} }
this.content.attributeStyleMap.clear(); this.content.attributeStyleMap.clear();