move js to scripts folder,

move css to css folder

scripts/elements.js

@@ -0,0 +1,84 @@
+class Node extends HTMLElement {
+	constructor () { // <link rel="stylesheet" href="style.css" type="text/css">
+		super();
+		let shadowRoot = this.attachShadow({mode: "open"});
+
+		let nodeArticle = document.createElement("article");
+		shadowRoot.append(nodeArticle);
+
+		let styleLink = document.createElement("link");
+		styleLink.rel = "stylesheet";
+		styleLink.href = "style.css";
+		styleLink.type = "text/css";
+		shadowRoot.append(styleLink);
+
+		this.shadowElement = shadowRoot;
+	}
+
+	set data (data) {
+		let articleElement = this.shadowElement.querySelector("article");
+
+		let nodeName = document.createElement("h2");
+		nodeName.innerText = data.node;
+		articleElement.append(nodeName);
+
+		let onlineLabel = document.createElement("h3");
+		onlineLabel.innerText = data.status;
+		onlineLabel.style.color = data.status === "online" ? "#00ff00" : "#ff0000";
+		articleElement.append(onlineLabel);
+	}
+
+	set qemu (qemu) {
+		let articleElement = this.shadowElement.querySelector("article");
+
+		let qemuDiv = document.createElement("div");
+		for (let i = 0; i < qemu.length; i++) {
+			let newInstance = document.createElement("instance-div");
+			newInstance.data = qemu[i];
+			qemuDiv.append(newInstance);
+		}
+		articleElement.append(qemuDiv);
+	}
+
+	set lxc (lxc) {
+		let articleElement = this.shadowElement.querySelector("article");
+
+		let lxcDiv = document.createElement("div");
+		for (let i = 0; i < lxc.length; i++) {
+			let newInstance = document.createElement("instance-div");
+			newInstance.data = lxc[i];
+			lxcDiv.append(newInstance);
+		}
+		articleElement.append(lxcDiv);
+	}
+}
+
+class Instance extends HTMLElement {
+	constructor () {
+		super();
+		let shadowRoot = this.attachShadow({mode: "open"});
+
+		let instanceDiv = document.createElement("div");
+		shadowRoot.append(instanceDiv);
+
+		let styleLink = document.createElement("link");
+		styleLink.rel = "stylesheet";
+		styleLink.href = "style.css";
+		styleLink.type = "text/css";
+		shadowRoot.append(styleLink);
+
+		this.shadowElement = shadowRoot;
+	}
+
+	set data (data) {
+		let instanceDiv = this.shadowElement.querySelector("div");
+
+		let instanceParagraph = document.createElement("p");
+		instanceParagraph.innerText = `CT | ${data.vmid} | ${data.name} | ${data.status}`;
+		instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000";
+		instanceDiv.append(instanceParagraph);
+	}
+}
+
+customElements.define("node-article", Node);
+customElements.define("instance-div", Instance);

scripts/index.js

@@ -0,0 +1,28 @@
+import {requestTicket, setTicket, request} from "./utils.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+async function init () {
+	let cookie = document.cookie;
+	if (cookie === '') {
+		window.location.href = "login.html";
+	}
+
+	let nodes = await request("/nodes", "GET", null);
+	nodes.data.sort((a, b) => (a.node > b.node) ? 1 : -1);
+
+	let nodeContainer = document.getElementById("node-container")
+	for (let i = 0; i < nodes.data.length; i++) {
+		let newNode = document.createElement("node-article");
+		newNode.data = nodes.data[i];
+		
+		let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET", null);
+		qemu.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
+		let lxc = await request(`/nodes/${nodes.data[i].node}/lxc`, "GET", null);
+		lxc.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
+		newNode.qemu = qemu.data;
+		newNode.lxc = lxc.data;
+
+		nodeContainer.append(newNode);
+	}
+}

scripts/login.js

@@ -0,0 +1,20 @@
+import {requestTicket, setTicket} from "./utils.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+function init (){
+	let formSubmitButton = document.querySelector("#submit");
+	formSubmitButton.addEventListener("click", async (e) => {
+		e.preventDefault();
+		let form = document.querySelector("form");
+		let formData = new FormData(form);
+		try {
+			let ticket = await requestTicket(formData.get("username"), formData.get("password"));
+			await setTicket(ticket.data.ticket);
+			window.location.href = "index.html";
+		}
+		catch (error) {
+			console.log(error);
+		}
+	});
+}

scripts/utils.js

@@ -0,0 +1,61 @@
+class ResponseError extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "ResponseError";
+	}
+}
+
+class NetworkError extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "NetworkError";
+	}
+}
+
+export async function requestTicket (username, password) {
+	let response = await request("/access/ticket", "POST", {username: `${username}@pve`, password: password}, false);
+
+	return response;
+}
+
+export function setTicket (ticket) {
+	let d = new Date();
+	d.setTime(d.getTime() + (2*60*60*1000));
+	document.cookie = `PVEAuthCookie=${ticket}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net`;
+}
+
+export async function request (path, method, body, auth = true) {
+	let prms = new URLSearchParams(body);
+
+	let content = {
+		method: method,
+		mode: "cors",
+		credentials: "include",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded"
+		}
+	}
+	if(method === "POST") {
+		content.body = prms.toString();
+	}
+	if(auth) {
+		content.headers.Cookie = document.cookie;
+	}
+
+	let response = await fetch(`https://pve.tronnet.net/api2/json${path}`, content)
+	.then((response) => {
+		if (!response.ok) {
+			throw new ResponseError(`recieved response status code ${response.status}`);
+		}
+		return response;
+	})
+	.catch((error) => {
+		if (error instanceof ResponseError) {
+			throw error;
+		}
+		throw new NetworkError(error);
+	});
+
+	let data = await response.json();
+	return data;
+}