update debug panel

CVHS-student-sites · Aug 12, 2024 · b4884de · b4884de
1 parent d1d9d3b
commit b4884de
Showing 1 changed file with 33 additions and 4 deletions.
diff --git a/src/routes/(admin)/admin/debug/+page.svelte b/src/routes/(admin)/admin/debug/+page.svelte
@@ -5,13 +5,33 @@
 
     let logHtml = '';
 
+    let autoRefresh = false;
+
     onMount(async () => {
-        let test = await getDebugLogs()
+        await updateLogs();
+    });
 
-        const convert = new AnsiToHtml();
+    let interval
+    $: if (autoRefresh) {
+        interval = setInterval(updateLogs, 1000);
+    }
 
+    $: if (!autoRefresh) {
+        clearInterval(interval);
+    }
+
+    async function updateLogs() {
+        let test = await getDebugLogs()
+        const convert = new AnsiToHtml();
         logHtml = test.map(log => convert.toHtml(log)).join('')
-    });
+        await scrollToBottom(element);
+    }
+
+    let element;
+
+    const scrollToBottom = async (node) => {
+        node.scroll({top: node.scrollHeight, behavior: 'smooth'});
+    };
 </script>
 <svelte:head>
     <title>Locker - Debug</title>
@@ -40,11 +60,20 @@
         height: 100%;
         overflow-y: scroll;
     }
+
+    .check-text {
+        font-size: 12px;
+        font-family: "Montserrat", sans-serif;
+        color: #d6d6d6;
+    }
 </style>
 
 
 <div class="main">
-    <div class="log-entry">
+    <div class="top-menu">
+        <label class="check-text"><input type="checkbox" bind:checked={autoRefresh}/>Auto Refresh Logs</label>
+    </div>
+    <div class="log-entry" bind:this={element}>
         {@html logHtml}
     </div>
 </div>