feat: enhanced web mirror trmnl client

public/mirror/index.html

@@ -18,6 +18,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <script>
     var trmnl = {
+      STORAGE_KEY: "byos_laravel_mirror_settings",
       refreshTimer: null,
       renderedAt: 0,
       ui: {},
@@ -150,7 +151,11 @@
       },
 
       getSettings: function () {
-        return JSON.parse(localStorage.getItem("settings")) || {};
+        try {
+          return JSON.parse(localStorage.getItem(trmnl.STORAGE_KEY)) || {};
+        } catch (e) {
+          return {};
+        }
       },
 
       saveSettings: function (data) {
@@ -162,11 +167,105 @@
           }
         }
 
-        localStorage.setItem("settings", JSON.stringify(settings));
+        localStorage.setItem(trmnl.STORAGE_KEY, JSON.stringify(settings));
         console.log("Settings saved:", settings);
       },
 
+      cleanUrl: function () {
+        if (window.history && window.history.replaceState) {
+          try {
+            window.history.replaceState(
+              {},
+              document.title,
+              window.location.pathname
+            );
+          } catch (e) {
+            // iOS 9 / UIWebView: silent ignore
+          }
+        }
+      },
+
+      applySettingsFromUrl: function () {
+        var query = window.location.search.substring(1);
+        if (!query) return;
+
+        var pairs = query.split("&");
+        var newSettings = {};
+        var hasOverrides = false;
+
+        for (var i = 0; i < pairs.length; i++) {
+          var parts = pairs[i].split("=");
+          if (parts.length !== 2) continue;
+
+          var key = decodeURIComponent(parts[0]);
+          var value = decodeURIComponent(parts[1]);
+
+          if (key === "api_key" && value) {
+            newSettings.api_key = value;
+            hasOverrides = true;
+          }
+
+          if (key === "base_url" && value) {
+            newSettings.base_url = value;
+            hasOverrides = true;
+          }
+
+          if (key === "mac_address" && value) {
+            newSettings.mac_address = value;
+            hasOverrides = true;
+          }
+        }
+
+        if (hasOverrides) {
+          trmnl.saveSettings(newSettings);
+          console.log("Settings overridden from URL:", newSettings);
+        }
+      },
+
+      setDefaultBaseUrlIfMissing: function () {
+        var settings = trmnl.getSettings();
+
+        if (settings && settings.base_url) {
+          return;
+        }
+
+        var protocol = window.location.protocol;
+        var host = window.location.hostname;
+        var port = window.location.port;
+
+        var origin = protocol + "//" + host;
+        if (port) {
+          origin += ":" + port;
+        }
+
+        trmnl.saveSettings({
+          base_url: origin
+        });
+
+        console.log("Default base_url set to:", origin);
+      },
+
+      clearSettings: function () {
+        try {
+          localStorage.removeItem(trmnl.STORAGE_KEY);
+        } catch (e) {
+          // fallback ultra-safe
+          localStorage.setItem(trmnl.STORAGE_KEY, "{}");
+        }
+        console.log("Settings cleared");
+        window.location.reload();
+      },
+
       init: function () {
+
+        // override settings from GET params
+        trmnl.applySettingsFromUrl();
+
+        trmnl.cleanUrl();
+
+        // default base_url
+        trmnl.setDefaultBaseUrlIfMissing();
+
         // screen
         trmnl.ui.img = document.getElementById("screen");
         trmnl.ui.errorContainer = document.getElementById("error-container");
@@ -332,6 +431,14 @@
       cursor: pointer;
       display: block;
       width: 100%;
+    }
+
+    .btn-clear {
+      margin-top: 1em;
+      background-color: #777;
+    }
+
+    #error-container .btn {
       margin-left: 0.5em;
       margin-right: 0.5em;
     }
@@ -388,6 +495,11 @@
         </fieldset>
 
         <button class="btn">Save</button>
+
+        <button class="btn btn-clear" type="button" onclick="trmnl.clearSettings()">
+          Clear settings
+        </button>
+
       </form>
     </div>
   </div>