From 438e220db010b951b8b27b661c3d670e57fec398 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 10 Dec 2022 22:49:10 -0800 Subject: [PATCH] implement node-card element, add populating node-cards on init --- index.html | 2 ++ index.js | 48 ++++++++---------------------------------------- node.js | 32 ++++++++++++++++++++++++++++++++ utils.js | 38 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 40 deletions(-) create mode 100644 node.js create mode 100644 utils.js diff --git a/index.html b/index.html index 794977b..a6cfba5 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,9 @@ tronnet - client + +
\ No newline at end of file diff --git a/index.js b/index.js index d2527b7..6e81649 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,10 @@ +import {requestTicket, setTicket, request} from "./utils.js"; + window.addEventListener("DOMContentLoaded", init); async function init () { let cookie = document.cookie; - if(cookie === '') { + if (cookie === '') { let username = prompt("username: "); let password = prompt("password: ") let ticket = await requestTicket(username, password); @@ -10,44 +12,10 @@ async function init () { } let nodes = await request("/nodes", "GET", null); - console.log(nodes); -} - -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 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); } - 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`; } \ No newline at end of file diff --git a/node.js b/node.js new file mode 100644 index 0000000..c0eb821 --- /dev/null +++ b/node.js @@ -0,0 +1,32 @@ +class Node extends HTMLElement { + constructor () { // + 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); \ No newline at end of file diff --git a/utils.js b/utils.js new file mode 100644 index 0000000..2e8450c --- /dev/null +++ b/utils.js @@ -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; +} \ No newline at end of file