feat(panel.html): use ?query instead of #hash for client selection

src/judas_server/web/templates/panel.html

@@ -33,11 +33,12 @@
             });
         };
 
-        // load client_details for the client specified in the URL hash
-        const hash = window.location.hash;
-        if (hash) {
-          const clientId = hash.substring(1);
+        // load client_details for the client specified in the URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const clientId = urlParams.get("client");
+        if (clientId) {
           loadClientDetails(clientId);
+          $(`#client-list a[href="?client=${clientId}"]`).addClass("active");
         }
 
         $("#notify").hide();
@@ -141,7 +142,7 @@
               li.append(iconElement);
               const a = $("<a></a>")
                 .text(statusText)
-                .attr("href", `#${clientId}`);
+                .attr("href", `?client=${clientId}`);
 
               li.attr(
                 "title",
@@ -164,19 +165,19 @@
           $("#client-list li > a")
             .off("click")
             .on("click", function (e) {
-              const href = $(this).attr("href");
-              if (href.startsWith("#")) {
-                const clientId = href.substring(1);
-                loadClientDetails(clientId);
-                $("#client-list li > a").removeClass("active");
-                $(this).addClass("active");
-              }
-            });
+              let clientId = $(this).attr("href").substring(1);
+              // this is client=clientId
 
-          if (window.location.hash) {
-            const clientId = window.location.hash.substring(1);
-            loadClientDetails(clientId);
-          }
+              clientId = clientId.replace("client=", "");
+
+              loadClientDetails(clientId);
+              $("#client-list a").removeClass("active");
+              $(this).addClass("active");
+              e.preventDefault();
+
+              let newUrl = `${window.location.pathname}?client=${clientId}`;
+              window.history.pushState({ path: newUrl }, "", newUrl);
+            });
         });
       });
     </script>