add v3.3

content/api/v31.md

@@ -1,7 +1,7 @@
 ---
 menu: apiversions
 
-title: v3.1 - v3.3
+title: v3.1 / v3.2
 version: v31
 aliases:
   - latest

content/api/v33.md

@@ -0,0 +1,9 @@
+---
+menu: apiversions
+
+title: v3.3
+version: v33
+aliases:
+  - latest
+  - api/
+---

static/logviewer.html

@@ -73,17 +73,17 @@
       const startingEl = document.getElementById("starting");
       const tableEl = document.getElementById("logs");
 
-      // Click handler (open file select)
-      startingEl?.addEventListener("click", (ev) => {
-        // Create temporary file input and click it
-        const fileSelect = document.createElement("input");
-        fileSelect.type = "file";
-        fileSelect.accept = ".log";
-        fileSelect.addEventListener("change", (ev) => {
-          if (ev.target instanceof HTMLInputElement && ev.target.files) {
-            const file = ev.target.files[0];
-            startingEl.innerHTML = "Loading...";
-            if (file) {
+      if (!mainEl || !startingEl || !tableEl) {
+        throw new Error("Missing elements");
+      }
+
+      /**
+       * Reads a log file and populates a table with the parsed logs.
+       *
+       * @param {File} file - The log file to be read.
+       * @return {void}
+       */
+      function readLogFile(file) {
         const reader = new FileReader();
         reader.addEventListener("load", (ev) => {
           const logs =
@@ -97,29 +97,88 @@
               }) || [];
           tableEl?.querySelector("tbody")?.replaceChildren(...logs);
           tableEl?.classList.remove("hidden");
-                startingEl.classList.add("hidden");
+          startingEl?.classList.add("hidden");
         });
         reader.readAsText(file);
       }
+
+      // Click handler (open file select)
+      startingEl.addEventListener("click", (ev) => {
+        // Create temporary file input and click it
+        const fileSelect = document.createElement("input");
+        fileSelect.type = "file";
+        fileSelect.accept = ".log";
+        fileSelect.addEventListener("change", (ev) => {
+          if (ev.target instanceof HTMLInputElement && ev.target.files) {
+            const file = ev.target.files[0];
+            startingEl.innerHTML = "Loading...";
+            if (file) {
+              readLogFile(file);
+            }
           }
         });
         fileSelect.click();
       });
 
+      // Drag and drop handler
+      mainEl.addEventListener("dragover", (ev) => {
+        ev.preventDefault();
+      });
+      mainEl.addEventListener("drop", (ev) => {
+        ev.preventDefault();
+        if (ev.dataTransfer?.files) {
+          const file = ev.dataTransfer.files[0];
+          startingEl.innerHTML = "Loading...";
+          if (file) {
+            readLogFile(file);
+          }
+        }
+      });
+
+      /**
+       * Creates a log entry as a table row element.
+       *
+       * @param log - An object representing a log entry with properties level, ts, caller, msg, and data.
+       *
+       * @returns A table row element representing the log entry.
+       */
       function makeLog(log) {
         const tr = document.createElement("tr");
         const { level, ts, caller, msg, ...data } = log;
         tr.appendChild(makeCell(level));
-        tr.appendChild(makeCell(new Date(ts * 1000).toISOString()));
+        tr.appendChild(makeCell(makeDateElement(new Date(ts * 1000))));
         tr.appendChild(makeCell(caller));
         tr.appendChild(makeCell(msg));
         tr.appendChild(makeCell(JSON.stringify(data)));
         return tr;
       }
 
-      function makeCell(text) {
+      /**
+       * Creates a new date element with the given date.
+       *
+       * @param {Date} date - The date to be used for the new date element.
+       * @returns {HTMLTimeElement} The newly created date element.
+       */
+      function makeDateElement(date) {
+        const time = document.createElement("time");
+        time.setAttribute("datetime", date.toISOString());
+        time.appendChild(document.createTextNode(date.toLocaleTimeString()));
+        return time;
+      }
+
+      /**
+       * Creates a table cell element with the given text as its content.
+       *
+       * @param {string | HTMLElement} el - A string or a DOM element to be used as the content of the cell.
+       * @returns {HTMLTableCellElement} - A table cell element with the given text as its content.
+       */
+      function makeCell(el) {
         const td = document.createElement("td");
-        td.appendChild(document.createTextNode(text));
+        if (typeof el === "string") {
+          td.appendChild(document.createTextNode(el));
+        } else {
+          td.appendChild(el);
+        }
         return td;
       }
     </script>