Add Status page.

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();

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() {
@@ -70,3 +195,4 @@ class UserCard extends HTMLElement {
 
 }
 window.customElements.define('user-card', UserCard);
+window.customElements.define('config-status', ConfigStatusClass);

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/components.js"></script>
-    <script src="/static/app.js"></script>
+    <script src="./static/app.js"></script>
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->