Improve device detail view

admin_ui/index.html

@@ -101,8 +101,48 @@
         a.classList.toggle('active', a === active);
       });
     }
+    // Dynamic deep-links: `#devices/<id>` and `#devices/<id>/exec`.
+    // The detail / exec fragments are designed to swap into the
+    // devices index page's `#devices-region` section, so when we
+    // land here from a page refresh we have to chain two ajax calls:
+    // first render the parent page (which provides `#devices-region`),
+    // then swap the fragment into it. htmx.ajax has returned a Promise
+    // since 1.9.4, so the `.then` chain is safe at our pinned 1.9.10.
+    const DEEP_LINK_PATTERNS = [
+      {
+        re: /^#devices\/([^/]+)\/exec$/,
+        parent: '/admin/pages/devices',
+        fragment: id => `/admin/pages/devices/${encodeURIComponent(id)}/exec`,
+      },
+      {
+        re: /^#devices\/([^/]+)$/,
+        parent: '/admin/pages/devices',
+        fragment: id => `/admin/pages/devices/${encodeURIComponent(id)}/detail`,
+      },
+    ];
+    function loadDeepLink(hash) {
+      for (const p of DEEP_LINK_PATTERNS) {
+        const m = hash.match(p.re);
+        if (!m) continue;
+        const id = decodeURIComponent(m[1]);
+        Promise.resolve(
+          htmx.ajax('GET', p.parent, { target: '#main', swap: 'innerHTML' })
+        ).then(() =>
+          htmx.ajax('GET', p.fragment(id), {
+            target: '#devices-region',
+            swap: 'innerHTML',
+          })
+        );
+        return true;
+      }
+      return false;
+    }
     function loadFromHash() {
       const hash = location.hash || '#users';
+      if (loadDeepLink(hash)) {
+        refreshActive();
+        return;
+      }
       const subUrl = SUB_ROUTES[hash];
       if (subUrl) {
         htmx.ajax('GET', subUrl, { target: '#main', swap: 'innerHTML' });