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

implement simple search logic

Browse Source
This commit is contained in:
Arthur Lu 2023-09-18 19:37:07 +00:00
parent 0f8a85d22a
commit 1b71c16eec
2 changed files with 68 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -68,8 +68,33 @@
<img class="small" style="height: 1lh; width: 1lh;" src="images/actions/instance/add.svg" alt="Create New Instance"> <img class="small" style="height: 1lh; width: 1lh;" src="images/actions/instance/add.svg" alt="Create New Instance">
</button> </button>
</div> </div>
<div>
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
<div class="w3-col l1 m2">
<p>VM ID</p>
</div>
<div class="w3-col l2 m3">
<p>VM Name</p>
</div>
<div class="w3-col l1 m2">
<p>VM Type</p>
</div>
<div class="w3-col l2 m3">
<p>VM Status</p>
</div>
<div class="w3-col l2 w3-hide-medium">
<p>Host Name</p>
</div>
<div class="w3-col l2 w3-hide-medium">
<p>Host Status</p>
</div>
<div class="w3-col l2 m2">
<p>Actions</p>
</div>
</div>
<div id="instance-container"></div> <div id="instance-container"></div>
</div> </div>
</div>
</section> </section>
</main> </main>
</body> </body>

78
scripts/index.js
View File

@ -4,6 +4,8 @@ import { setupClientSync } from "./clientsync.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
let instances = [];
async function init () { async function init () {
setTitleAndHeader(); setTitleAndHeader();
const cookie = document.cookie; const cookie = document.cookie;
@ -12,19 +14,19 @@ async function init () {
} }
document.querySelector("#instance-add").addEventListener("click", handleInstanceAdd); document.querySelector("#instance-add").addEventListener("click", handleInstanceAdd);
document.querySelector("#vm-search").addEventListener("input", populateInstances);
setupClientSync(populateInstances); setupClientSync(refreshInstances);
document.querySelector("#vm-search").addEventListener("input", () => {
});
} }
async function populateInstances () { async function refreshInstances () {
const resources = await requestPVE("/cluster/resources", "GET"); await getInstances();
const instanceContainer = document.getElementById("instance-container"); await populateInstances();
const instances = []; }
async function getInstances () {
const resources = await requestPVE("/cluster/resources", "GET");
instances = [];
resources.data.forEach((element) => { resources.data.forEach((element) => {
if (element.type === "lxc" || element.type === "qemu") { if (element.type === "lxc" || element.type === "qemu") {
const nodeName = element.node; const nodeName = element.node;
@ -33,34 +35,38 @@ async function populateInstances () {
instances.push(element); instances.push(element);
} }
}); });
}
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); async function populateInstances () {
const searchQuery = document.querySelector("#search").value;
instanceContainer.innerHTML = ` let criteria;
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;"> if (searchQuery === "") {
<div class="w3-col l1 m2"> criteria = (a, b) => {
<p>VM ID</p> return (a.vmid > b.vmid) ? 1 : -1;
</div> };
<div class="w3-col l2 m3"> }
<p>VM Name</p> else {
</div> criteria = (a, b) => {
<div class="w3-col l1 m2"> const a_inc = a.name.includes(searchQuery);
<p>VM Type</p> const b_inc = b.name.includes(searchQuery);
</div> if (a_inc && b_inc) {
<div class="w3-col l2 m3"> return a.vmid > b.vmid ? 1 : -1;
<p>VM Status</p> }
</div> else if (a_inc && !b_inc) {
<div class="w3-col l2 w3-hide-medium"> return -1;
<p>Host Name</p> }
</div> else if (!a_inc && b_inc) {
<div class="w3-col l2 w3-hide-medium"> return 1;
<p>Host Status</p> }
</div> else {
<div class="w3-col l2 m2"> return a.vmid > b.vmid ? 1 : -1;
<p>Actions</p> }
</div> };
</div> }
`; instances.sort(criteria);
//console.log(instances)
const instanceContainer = document.querySelector("#instance-container");
instanceContainer.innerHTML = ``;
for (let i = 0; i < instances.length; i++) { for (let i = 0; i < instances.length; i++) {
const newInstance = document.createElement("instance-card"); const newInstance = document.createElement("instance-card");
newInstance.data = instances[i]; newInstance.data = instances[i];