Add logbook

2025-07-03 15:07:31 -04:00
parent 46d0008b72
commit 2b9ca9ad31
3 changed files with 74 additions and 1 deletions
--- a/www/index.html
+++ b/www/index.html
@@ -17,6 +17,7 @@
  <meta name="twitter:image" content="/preview.png" />

  <link rel="stylesheet" href="styles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
 </head>

 <body>
@@ -43,6 +44,9 @@
        <input type="number" id="tankBottomOffset" value="40" min="0" max="800" />
      </label>
    </div>
+    <div class="logbook">
+      <ul id="logList"></ul>
+    </div>
  </div>

  <script>
@@ -58,6 +62,7 @@
        const response = await fetch("data.json");
        tankData = await response.json();
        updateTank();
+        updateLogbook();
      } catch (error) {
        console.error("Error loading tank data:", error);
      }
@@ -134,6 +139,24 @@
      });
    }

+    function updateLogbook() {
+      const logList = document.getElementById("logList");
+      logList.innerHTML = "";
+      if (tankData.logs) {
+        tankData.logs.forEach(log => {
+          const li = document.createElement("li");
+          // If log.date is a string, try to parse as epoch seconds
+          let epoch = typeof log.date === 'number' ? log.date : Date.parse(log.date) / 1000;
+          // timesago expects ms
+          li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date} — ${log.text}`;
+          logList.appendChild(li);
+        });
+        // Auto-scroll to bottom
+        const logbookDiv = document.querySelector('.logbook');
+        if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
+      }
+    }
+
    // Update settings
    function updateSettings() {
      if (!tankData) return;
@@ -143,6 +166,7 @@
        tankBottomOffsetInput.value
      );
      updateTank();
+      updateLogbook();
    }

    // Event listeners