add js script, remove vendor

js/script.js

@@ -0,0 +1,112 @@
+let sumCompute, detailCompute, pgCompute, detailEncoder, pgEncoder, detailDecoder, pgDecoder, coreTemp, memoryUsed, pgMemory, procList;
+
+window.addEventListener('load', () => {
+    loadElements();
+    setTimeout(tick, 2000);
+});
+
+function loadElements() {
+    sumCompute = document.getElementById("sum-compute");
+    detailCompute = document.getElementById("detail-compute");
+    pgCompute = document.getElementById("pg-compute");
+
+    detailEncoder = document.getElementById("detail-encoder");
+    pgEncoder = document.getElementById("pg-encoder");
+
+    detailDecoder = document.getElementById("detail-decoder");
+    pgDecoder = document.getElementById("pg-decoder");
+
+    coreTemp = document.getElementById("core-temp");
+
+    memoryUsed = document.getElementById("memory-used");
+    pgMemory = document.getElementById("pg-memory");
+
+    procList = document.getElementById("proc-list");
+}
+
+function tick() {
+    update();
+    setTimeout(tick, 2000);
+}
+
+function update() {
+    const jsonURL = location.href + "/json"
+    
+    axios({
+        method: 'get',
+        url: jsonURL
+    }).then((res) => {
+        const gpu = res.data;
+        setCompute(gpu.usage.compute);
+        setEncoder(gpu.usage.encoder);
+        setDecoder(gpu.usage.decoder);
+        setCoreTemp(gpu.coreTemperature);
+        setMemory(gpu.memory.used, gpu.memory.total);
+        setProcessList(gpu.processes);
+    })
+}
+
+function setCompute(value) {
+    const placeholder = `${value}%`;
+    sumCompute.innerText = placeholder;
+    detailCompute.innerText = placeholder;
+    pgCompute.style.width = placeholder;
+    pgCompute.setAttribute("aria-valuenow", value);
+}
+
+function setEncoder(value) {
+    const placeholder = `${value}%`;
+    detailEncoder.innerText = placeholder;
+    pgEncoder.style.width = placeholder;
+    pgEncoder.setAttribute("aria-valuenow", value);
+}
+
+function setDecoder(value) {
+    const placeholder = `${value}%`;
+    detailDecoder.innerText = placeholder;
+    pgDecoder.style.width = placeholder;
+    pgDecoder.setAttribute("aria-valuenow", value);
+}
+
+function setCoreTemp(value) {
+    const placeholder = `${value}°C`;
+    coreTemp.innerText = placeholder;
+}
+
+function setMemory(used, total) {
+    const placeholder = formatBytes(used);
+    const p = (used/total)*100;
+    memoryUsed.innerText = placeholder;
+    pgMemory.style.width = p+'%';
+    pgMemory.setAttribute("aria-valuenow", p);
+}
+
+function setProcessList(processes) {
+    procList.innerHTML = "";
+    for (const process of processes) {
+        const row = document.createElement("tr");
+        
+        const pid = document.createElement("td");
+        pid.innerText = process.pid;
+        const type = document.createElement("td");
+        type.innerText = process.type;
+        const name = document.createElement("td");
+        name.innerText = process.commandLine;
+        const mem = document.createElement("td");
+        mem.innerText = formatBytes(process.memoryUsed);
+        row.append(pid, type, name, mem);
+        procList.append(row);
+    }
+}
+
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes) return '0 Bytes'
+
+    const k = 1024
+    const dm = decimals < 0 ? 0 : decimals
+    const sizes = ['B', 'KB', 'MB', 'GB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
+}