From a6ecafadc5cafe71b303fc311ec55cfac695ab47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=A4=EB=B3=91=EC=A4=80?= <mail@luftaquila.io>
Date: Mon, 21 Oct 2024 13:15:13 +0900
Subject: [PATCH] improve: UX for filename and delete logs

---
 viewer/web/index.html | 31 +++++++++++++++++++++++++++----
 viewer/web/script.js  | 24 +++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/viewer/web/index.html b/viewer/web/index.html
index ae1442a..7486c00 100644
--- a/viewer/web/index.html
+++ b/viewer/web/index.html
@@ -61,6 +61,10 @@ <h2><i class="fa fw fa-file-import"></i>File Management</h2>
           <span id="export-json" class="btn small blue disabled"><i class="fas fw fa-file-code"></i>Export JSON</span>
           <span id="export-csv" class="btn small blue disabled"><i class="fas fw fa-file-csv"></i>Export CSV</span>
         </div>
+
+        <div style="font-size: 0.8rem;">
+          <i class="fas fa-fw fa-info-circle"></i> The timestamp at the beginning of the record's filename is important. Do NOT change it.
+        </div>
       </article>
 
       <article>
@@ -88,7 +92,8 @@ <h2><i class="fa fw fa-chart-line"></i>Graph Viewer</h2>
         </div>
 
         <div style="text-align: center;">
-          <span id="export-image" class="btn purple small disabled"><i class="fas fw fa-file-image"></i>Export Graph Image</span>
+          <span id="export-image" class="btn purple small disabled"><i class="fas fw fa-file-image"></i>Export Graph
+            Image</span>
         </div>
       </article>
     </div>
@@ -109,11 +114,29 @@ <h2><i class="fa fw fa-microchip"></i>Device</h2>
       </article>
 
       <article>
-        <h2><i class="fa fw fa-tower-broadcast"></i>Command</h2>
+        <h2><i class="fa fw fa-clock"></i>Clock synchronization</h2>
+
+        <div style="font-size: 0.8rem;">
+          <i class="fas fa-fw fa-info-circle"></i> Set the device clock to match the current time of the host PC.
+        </div>
+
+        <div style="display: flex; gap: 1rem;">
+          <span id="cmd-rtc" class="btn small green disabled"><i class="fas fw fa-arrows-rotate"></i>Sync RTC</span>
+        </div>
+      </article>
+
+      <article>
+        <h2><i class="fa fw fa-eraser"></i>Delete records</h2>
+
+        <div style="font-size: 0.8rem; line-height: 1.2rem;">
+            <i class="fas fa-fw fa-info-circle"></i> Delete all log files stored in the device storage.<br>
+            <i class="fas fa-fw fa-info-circle" style="color: transparent;"></i> Disconnect and re-connect the device to see the changes.<br>
+            <i class="fas fa-fw fa-triangle-exclamation" style="color: orange"></i> This operation cannot be undone.
+        </div>
 
         <div style="display: flex; gap: 1rem;">
-          <span id="cmd-rtc" class="btn small green disabled"><i class="fas fw fa-clock"></i>Sync Clock</span>
-          <span id="cmd-del" class="btn small red disabled"><i class="fas fw fa-trash"></i>Delete All Logs</span>
+          <span id="cmd-del" class="btn small red disabled"><i class="fas fw fa-trash"></i>Delete</span>
+          <span id="cmd-del-unlock" class="btn small purple disabled"><i class="fas fw fa-lock"></i>Unlock</span>
         </div>
       </article>
     </div>
diff --git a/viewer/web/script.js b/viewer/web/script.js
index 1fbcd1e..41a7169 100644
--- a/viewer/web/script.js
+++ b/viewer/web/script.js
@@ -25,6 +25,10 @@ function setup() {
       ext = file.name.split('.').pop();
       filename = file.name.replace(`.${ext}`, '');
 
+      if (!/^\d{4}-\d{2}-\d{2}-\d{2}-\d{2}-\d{2}/.test(filename)) {
+        return notyf.error("*.log file should contain the timestamp in the filename");
+      }
+
       document.getElementById("file-selected").innerText = "Processing data...";
 
       switch (ext) {
@@ -133,6 +137,8 @@ function setup() {
       document.getElementById("connect").classList.add('orange');
       document.getElementById("cmd-rtc").classList.add('disabled');
       document.getElementById("cmd-del").classList.add('disabled');
+      document.getElementById("cmd-del-unlock").classList.add('disabled');
+      document.getElementById("cmd-del-unlock").innerHTML = `<i class="fas fw fa-lock"></i>Unlock`;
 
       notyf.error("Device disconnected");
     });
@@ -158,7 +164,7 @@ function setup() {
     document.getElementById("connect").classList.remove('orange');
     document.getElementById("connect").classList.add('green', 'disabled');
     document.getElementById("cmd-rtc").classList.remove('disabled');
-    document.getElementById("cmd-del").classList.remove('disabled');
+    document.getElementById("cmd-del-unlock").classList.remove('disabled');
 
     notyf.success("Device connected");
   });
@@ -193,6 +199,22 @@ function setup() {
     notyf.success("Device RTC synchronized");
   });
 
+  document.getElementById("cmd-del-unlock").addEventListener("click", e => {
+    switch (e.target.innerText) {
+      case "Unlock": {
+        document.getElementById("cmd-del").classList.remove('disabled');
+        document.getElementById("cmd-del-unlock").innerHTML = `<i class="fas fw fa-lock-open"></i>Lock`;
+        break;
+      }
+
+      case "Lock": {
+        document.getElementById("cmd-del").classList.add('disabled');
+        document.getElementById("cmd-del-unlock").innerHTML = `<i class="fas fw fa-lock"></i>Unlock`;
+        break;
+      }
+    }
+  });
+
   document.getElementById("cmd-del").addEventListener("click", async e => {
     let res = await transceive(new Uint8Array([USB_CMD_MAGIC, USB_CMD.indexOf("USB_CMD_DEL"), ...new Array(6).fill(0)]), LEN_DEVICE_RES);