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

implement node-card element,

Browse Source 
add populating node-cards on init
This commit is contained in:
Arthur Lu 2022-12-10 22:49:10 -08:00
parent 82b739af8e
commit 438e220db0
4 changed files with 80 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,9 @@
<title>tronnet - client</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="index.js" type="module"></script>
<script src="node.js" type="module"></script>
</head>
<body>
<div id="node-container" class="center-div"></div>
</body>
</html>

46
index.js
View File

@ -1,3 +1,5 @@
import {requestTicket, setTicket, request} from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
async function init () {
@ -10,44 +12,10 @@ async function init () {
}
let nodes = await request("/nodes", "GET", null);
console.log(nodes);
let nodeContainer = document.getElementById("node-container")
for (let i = 0; i < nodes.data.length; i++) {
let newNode = document.createElement("node-card");
newNode.data = nodes.data[i];
nodeContainer.append(newNode);
}
async function requestTicket (username, password) {
let prms = new URLSearchParams({username: `${username}@pve`, password: password});
let response = await fetch("https://pve.tronnet.net/api2/json/access/ticket", {
method: "POST",
mode: "cors",
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: prms.toString()
});
let data = await response.json();
return data;
}
async function request (path, method, body) {
let prms = new URLSearchParams(body);
let response = await fetch(`https://pve.tronnet.net/api2/json${path}`, {
method: method,
mode: "cors",
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Cookie": document.cookie
}
});
if(method == "POST") {
response.body = prms.toString();
}
let data = await response.json();
return data;
}
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`;
}

32
node.js Normal file
View File

@ -0,0 +1,32 @@
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);
}
}
customElements.define("node-card", Node);

38
utils.js Normal file
View File

@ -0,0 +1,38 @@
export async function requestTicket (username, password) {
let prms = new URLSearchParams({username: `${username}@pve`, password: password});
let response = await fetch("https://pve.tronnet.net/api2/json/access/ticket", {
method: "POST",
mode: "cors",
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: prms.toString()
});
let data = await response.json();
return data;
}
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) {
let prms = new URLSearchParams(body);
let response = await fetch(`https://pve.tronnet.net/api2/json${path}`, {
method: method,
mode: "cors",
credentials: "include",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Cookie": document.cookie
}
});
if(method == "POST") {
response.body = prms.toString();
}
let data = await response.json();
return data;
}