Refactor how logs are handled.

web/data/logs.html

@@ -1,24 +1,21 @@
 {{ define "content" }}
 
- <main role="main" class="inner DAU">
+ <main role="main" class="inner DAU" x-data="logs()" x-init="get_logs()">
    <h1 class="DAU-heading">Logs</h1>
    <p class="lead">Discord-auto-upload logs</p>
 
    <div class="container">
     <div class="row">
       <div class="col-sm">
-        <button type="button" onClick="debug=1; get_logs();" class="btn btn-primary">all logs</button>
+        <button type="button"  @click="debug = !debug" class="btn btn-primary" x-text="debug ? 'debug' : 'no debug'"></button>
       </div>
       <div class="col-sm">
-        <button type="button" onClick="debug=0; get_logs();" class="btn btn-primary">no debug</button>
-      </div>
-      <div class="col-sm">
-        <button type="button" id="scroll-button" onClick="toggle_scroll();" class="btn btn-primary">disable auto-scroll</button>
+        <button type="button" @click="scroll = !scroll" class="btn btn-primary" x-text="scroll ? 'auto-scroll' : 'no scroll'"></button>
       </div>
     </div>
   </div>
 
-  <pre id="logs" class="text-left pre-scrollable">
+  <pre id="logs" x-text="text" class="text-left pre-scrollable">
   </pre>
 </main>
 
@@ -27,35 +24,24 @@
 {{ define "js" }}
 
 <script>
-var debug = 0;
-var scrl = true;
-$(document).ready(function() {
-  get_logs();
-  setInterval(function() { get_logs(); }, 1000);
-});
-
-function toggle_scroll() {
-  scrl = !scrl;
-  if (scrl) {
-    $('#scroll-button').text('disable auto-scroll');
+  function logs() {
+    return {
+      text: '',  scroll: true, debug: false,
+      get_logs() {
+        fetch('/rest/logs?' + new URLSearchParams({ debug: this.debug  ? "1" : "0" }))
+          .then(response => response.text())  
+          .then(text => {
+            console.log(text);
+            this.text = text;
+            if (this.scroll) {
+              document.getElementById('logs').scrollTop =10000;
+            }
+            let self = this;
+            setTimeout(function() { self.get_logs(); }, 1000)
+          })
+        },
+    }
   }
-  else {
-    $('#scroll-button').text('auto-scroll');
-  }
-}
-
-function get_logs() {
-  $.ajax({ method: 'get', url: '/rest/logs', data: { debug : debug }})
-   .done(function(data) {
-     $('#logs').text(data);
-     console.log('scrl is ', scrl);
-     if (scrl) {
-       $('#logs').scrollTop(10000);
-     }
-  });
-}
-
 </script>
 
-
 {{ end }}