Add Status page.

2021-01-14 16:40:18 -05:00
parent 86c95bb012
commit 3ddd84ae16
3 changed files with 173 additions and 19 deletions
--- a/static/app.js
+++ b/static/app.js
@ -12,6 +12,7 @@ var mode = new URLSearchParams(window.location.search).get("mode");
 const archiveLink = document.querySelector("#archive-link")
 const pendingLink = document.querySelector("#pending-link")
 const statusLink = document.querySelector("#status-link")
+function handleForm(event) { event.preventDefault(); } 

 function main() {
    archiveLink.classList.remove("active");
@ -20,7 +21,7 @@ function main() {
    switch (mode) {
        case "status":
            statusLink.classList.add("active");
-            return;
+            return statusPage();
        case "pending":
            pendingLink.classList.add("active");
            break;
@ -40,6 +41,34 @@ function main() {

 }

+function statusPage() {
+    document.getElementById("main-app").innerHTML = '';
+    fetch(`https://thanos.nightmare.haus/api/config`)
+        .then(response => response.json())
+        .then(data => {
+            var node = document.createElement("config-status");
+
+            var upTime = document.createElement("div");
+            upTime.setAttribute("slot", "uptime");
+            upTime.innerText = data.Uptime;
+            node.appendChild(upTime);
+
+            var bumpTime = document.createElement("div");
+            bumpTime.setAttribute("slot", "lastbump")
+            bumpTime.innerText = new Date(data.BumpTime).toLocaleString();
+            node.appendChild(bumpTime);
+
+            node.setData(data);
+
+            document.getElementById("main-app").appendChild(node);
+
+
+            
+
+        });
+    
+}
+
 function searchPage() {
    var search = document.getElementById("search-bar");
    fetch('https://thanos.nightmare.haus/api/verifications')
@ -115,7 +144,6 @@ window.onclick = function (event) {
    }
 }
 var form = document.getElementById("search-form");
-function handleForm(event) { event.preventDefault(); } 
 form.addEventListener('submit', handleForm);

 main();
--- a/static/components.js
+++ b/static/components.js
@ -1,6 +1,18 @@
 const basicCard = document.createElement('basic-card');
-basicCard.innerHTML = `
+const configStatus = document.createElement('status');
+const style = `
 <style>
+.column {
+    float: left;
+    width: 33.33%;
+  }
+  
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
 p {
    text-align: center;
 }
@ -25,7 +37,22 @@ a {
  .container {
    padding: 6px 16px;
  }
+  label{
+    display: inline;
+    float: left;
+    clear: left;
+    width: 250px;
+    text-align: left;
+}
+input {
+  display: inline;
+  float: right;
+}
 </style>
+`;
+
+basicCard.innerHTML = `
+${style}
 <div id="card-container" class="container">
 <div class="card">
    <h4><p><slot name="username" /></p></h4>
@ -38,6 +65,104 @@ a {
 </div>
 `;

+configStatus.innerHTML = `
+${style}
+<div class="container">
+    <div class="row">
+    <div class="column">
+    <h4><p>Status</p></h4>
+    <p>Uptime: <slot name="uptime" /></p>
+    <p>Last Bump was <slot name="lastbump" /></p>
+    <p>by <slot id="lastbumper" name="lastbumper" /></p>
+    </div>
+    <div id="admin-stats" class="column">
+
+    <h4><p>Admin Stats</p></h4>
+    </div>
+    <div class="column">
+
+    <h4><p>Config</p></h4>
+    <form>
+            <label for="Guild">Guild: </label>
+            <input type="text" id="Guild" name="Guild" readonly/>
+            <label for="AdminChannel">Admin Channel: </label>
+            <input type="select" id="AdminChannel" name="AdminChannel"/>
+            <label for="AdminRole">Admin Role: </label>
+            <input type="select" id="AdminRole" name="AdminRole"/>
+            <label for="MonitorChannel">Monitor Channel: </label>
+            <input type="select" id="MonitorChannel" name="MonitorChannel"/>
+            <label for="MonitorRole">Monitor Role: </label>
+            <input type="select" id="MonitorRole" name="MonitorRole"/>
+            <label for="IntroChannel">Intro Channel: </label>
+            <input type="select" id="IntroChannel" name="IntroChannel"/>
+            <label for="VerifiedRole">Verified Role: </label>
+            <input type="select" id="VerifiedRole" name="VerifiedRole"/>
+            <label for="OutFile">Logging OutFile: </label>
+            <input type="text" id="OutFile" name="OutFile" />
+            <label for="KBTeam">KB Team: </label>
+            <input type="text" id="KBTeam" name="KBTeam" />
+            <label for="KBChann">KB Channel: </label>
+            <input type="text" id="KBChann" name="KBChann" />
+            <label for="level">Logging Level: </label>
+            <input type="number" id="Level" name="Level" />
+            <label for="ProgName">Program Name: </label>
+            <input type="text" id="ProgName" name="ProgName" />
+            <label for="UseStdout">Use stdout: </label>
+            <input type="checkbox" id="UseStdout" name="UseStdout"/>
+            <label for="submitchanges"></label>
+            <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
+    </form>
+    </div>
+</div>
+`;
+
+class ConfigStatusClass extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(configStatus.cloneNode(true));
+    }
+    async setData(data) {
+        this.shadowRoot.querySelector("#submitchanges").addEventListener('submit', handleForm);
+        this.shadowRoot.querySelector("#Guild").value = data.GuildID;
+        this.shadowRoot.querySelector("#AdminChannel").value = data.AdminChannel;
+        this.shadowRoot.querySelector("#AdminRole").value = data.AdminRole;
+        this.shadowRoot.querySelector("#MonitorChannel").value = data.MonitorChann;
+        this.shadowRoot.querySelector("#MonitorRole").value = data.MonitorRole;
+        this.shadowRoot.querySelector("#IntroChannel").value = data.IntroChann;
+        this.shadowRoot.querySelector("#VerifiedRole").value = data.VerifiedRole;
+        this.shadowRoot.querySelector("#OutFile").value = data.LogOpts.OutFile;
+        this.shadowRoot.querySelector("#KBTeam").value = data.LogOpts.KBTeam;
+        this.shadowRoot.querySelector("#KBChann").value = data.LogOpts.KBChann;
+        this.shadowRoot.querySelector("#Level").value = data.LogOpts.Level;
+        this.shadowRoot.querySelector("#ProgName").value = data.LogOpts.ProgName;
+        this.shadowRoot.querySelector("#UseStdout").checked = data.LogOpts.UseStdout == "true";
+        fetch('https://thanos.nightmare.haus/api/user?userID=' + data.LastBumper)
+            .then(response => response.json())
+            .then(userData => {
+                this.shadowRoot.querySelector("#lastbumper").innerHTML = userData.user.username;
+            });
+        this.loadStats(data.Stats)
+
+
+    }
+    async loadStats(data) {
+        var shadowRoot = this.shadowRoot;
+        Object.keys(data).forEach(function(uid) {
+            var score = data[uid];
+            fetch('https://thanos.nightmare.haus/api/user?userID=' + uid)
+            .then(response => response.json())
+            .then(userData => {
+                var stats = shadowRoot.querySelector("#admin-stats");
+                var userName = document.createElement("p");
+                userName.innerText = userData.user.username + ": " + score;
+                stats.appendChild(userName);
+            });
+        })
+    }
+
+}
+

 class UserCard extends HTMLElement {
    constructor() {
@ -53,20 +178,21 @@ class UserCard extends HTMLElement {
        const userID = this.shadowRoot.querySelector('#discord-id').assignedNodes()[0].textContent;
        const userPic = this.shadowRoot.querySelector("#pic-link").assignedNodes()[0].querySelector("a").getAttribute("href");
        fetch('https://thanos.nightmare.haus/api/user?userID=' + userID)
-        .then(response => response.json())
-        .then(data => {
-            if (data === undefined || data === null) {
-                alert("User not found.");
-                return;
-            }
-            document.querySelector("#myModal").style.display = "block";
-            document.querySelector('#modal-join').textContent = new Date(data.joined_at).toLocaleString();
-            document.querySelector('#modal-userID').textContent = data.user.username;
-            document.querySelector('#modal-avatar').src = `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=256`;
-            document.querySelector('#modal-verification').src = userPic;
-            document.querySelector('#modal-verification').style = "max-height: 500px;";
-        });
+            .then(response => response.json())
+            .then(data => {
+                if (data === undefined || data === null) {
+                    alert("User not found.");
+                    return;
+                }
+                document.querySelector("#myModal").style.display = "block";
+                document.querySelector('#modal-join').textContent = new Date(data.joined_at).toLocaleString();
+                document.querySelector('#modal-userID').textContent = data.user.username;
+                document.querySelector('#modal-avatar').src = `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=256`;
+                document.querySelector('#modal-verification').src = userPic;
+                document.querySelector('#modal-verification').style = "max-height: 500px;";
+            });
    }

 }
 window.customElements.define('user-card', UserCard);
+window.customElements.define('config-status', ConfigStatusClass);
--- a/static/index.html
+++ b/static/index.html
@ -16,7 +16,7 @@
    <link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet">
   
    <!-- My imports -->
-    <link href="/static/index.css" rel="stylesheet">
+    <link href="./static/index.css" rel="stylesheet">

    <!-- End of my imports -->

@ -75,8 +75,8 @@
    </div>
    <div id="main-app" style="display: flex; flex-wrap: wrap;">
    </div>
-    <script src="/static/components.js"></script>
-    <script src="/static/app.js"></script>
+    <script src="./static/components.js"></script>
+    <script src="./static/app.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->