feat: add sub menu navigation

www/src/services/device-service.js

@@ -79,6 +79,23 @@ function DeviceService() {
     return codeObject.code;
   }
 
+  async function getIntegration(id) {
+    if (!id) return null;
+    let response = await Net.sendRequest({
+      method: "GET",
+      url: "/api/integrations/" + id,
+    });
+
+    if (response.status !== 200) {
+      let responseData = JSON.parse(response.data);
+      throw new Error(responseData.error);
+    }
+
+    let integration = JSON.parse(response.data);
+    integration = Serializer.deserializeIntegration(integration);
+    return integration;
+  }
+
   async function getIntegrations() {
     let response = await Net.sendRequest({
       method: "GET",
@@ -113,6 +130,7 @@ function DeviceService() {
     updateDevice,
     deleteDevice,
     getRegistrationCode,
+    getIntegration,
     getIntegrations,
     deleteIntegration,
   };

www/src/views/devices-view.jsx

@@ -1,195 +0,0 @@
-import {
-  createResource,
-  createSignal,
-  mergeProps,
-  onMount,
-  Show,
-} from "solid-js";
-
-import List from "../components/list";
-import CreateDeviceModal from "../modals/create-device-modal";
-import DeviceService from "../services/device-service";
-import ShowRegistrationCodeModal from "../modals/show-registration-code-modal";
-import DeleteIntegrationModal from "../modals/delete-integration-modal";
-
-function DevicesView(props) {
-  props = mergeProps({ onIntegrationClicked: () => {} }, props);
-  const DEVICES_LIST_TYPE = "devices";
-  const INTEGRATION_LIST_TYPE = "integrations";
-
-  const [listType, setListType] = createSignal(INTEGRATION_LIST_TYPE);
-  const [devices, setDevices] = createSignal([]);
-  const [integrations, { refetch: refetchIntegrations }] = createResource(
-    DeviceService.getIntegrations
-  );
-
-  CreateDeviceModal.onDeviceCreated(() => {
-    handleRefreshDevices();
-  });
-
-  onMount(() => {
-    handleRefreshDevices();
-    DeleteIntegrationModal.onIntegrationDeleted(() => {
-      refetchIntegrations();
-    });
-  });
-
-  function handleNewDevice() {
-    CreateDeviceModal.Handler.show();
-  }
-
-  async function handleRefreshDevices() {
-    let devices = await DeviceService.getDevices();
-    setDevices(devices);
-  }
-
-  function handleRegisterIntegration() {
-    ShowRegistrationCodeModal.Handler.show();
-  }
-
-  function handleDeleteIntegration(integration) {
-    DeleteIntegrationModal.setIntegration(integration);
-    DeleteIntegrationModal.Handler.show();
-  }
-
-  function handleIntegrationItemClicked(item) {
-    props.onIntegrationClicked(item.integration);
-  }
-
-  return (
-    <div
-      class={
-        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
-        props.class
-      }
-    >
-      <div class="d-flex flex-row">
-        <div class="d-flex flex-row flex-fill">
-          <button
-            class={
-              "btn me-2 mb-3" +
-              (listType() === INTEGRATION_LIST_TYPE
-                ? " btn-secondary"
-                : " btn-dark")
-            }
-            onClick={() => setListType(INTEGRATION_LIST_TYPE)}
-          >
-            <i class="bi bi-gear me-2"></i>
-            Integrations
-          </button>
-          <button
-            class={
-              "btn me-2 mb-3" +
-              (listType() === DEVICES_LIST_TYPE
-                ? " btn-secondary"
-                : " btn-dark")
-            }
-            onClick={() => setListType(DEVICES_LIST_TYPE)}
-          >
-            <i class="bi bi-tv me-2"></i>
-            Devices
-          </button>
-        </div>
-        <div class="d-flex flex-row justify-content-end flex-fill">
-          <Show when={listType() === DEVICES_LIST_TYPE}>
-            <button class="btn btn-dark me-2 mb-3" onClick={handleNewDevice}>
-              <i class="bi bi-plus-square me-2"></i>
-              New Device
-            </button>
-          </Show>
-          <Show when={listType() === INTEGRATION_LIST_TYPE}>
-            <button
-              class="btn btn-dark me-2 mb-3"
-              onClick={handleRegisterIntegration}
-            >
-              <i class="bi bi-plus-square me-2"></i>
-              Register
-            </button>
-          </Show>
-        </div>
-      </div>
-      <Show when={listType() === DEVICES_LIST_TYPE}>
-        <List
-          onListItemClick={() => {}}
-          items={devices().map((device) => ({
-            id: {
-              html: <span class="font-monospace">{device.getId()}</span>,
-            },
-            name: {
-              text: device.getName(),
-            },
-            description: {
-              text: device.getDescription(),
-            },
-            device,
-          }))}
-          class={"flex-fill"}
-          columns={[
-            {
-              id: "id",
-              name: "id",
-              width: 6,
-            },
-            {
-              id: "name",
-              name: "Name",
-              width: 10,
-            },
-            {
-              id: "description",
-              name: "Description",
-            },
-          ]}
-        ></List>
-      </Show>
-      <Show when={listType() === INTEGRATION_LIST_TYPE}>
-        <List
-          onListItemClick={handleIntegrationItemClicked}
-          items={(integrations() || []).map((integration) => ({
-            id: {
-              html: <span class="font-monospace">{integration.getId()}</span>,
-            },
-            name: {
-              text: integration.getName(),
-            },
-            options: {
-              html: (
-                <>
-                  <button
-                    class="btn btn-outline-secondary me-2"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleDeleteIntegration(integration);
-                    }}
-                  >
-                    <i class="bi bi-trash-fill"></i>
-                  </button>
-                </>
-              ),
-            },
-            integration: integration,
-          }))}
-          class={"flex-fill"}
-          columns={[
-            {
-              id: "id",
-              name: "id",
-              width: 6,
-            },
-            {
-              id: "name",
-              name: "Name",
-            },
-            {
-              id: "options",
-              name: "",
-              width: 4,
-            },
-          ]}
-        ></List>
-      </Show>
-    </div>
-  );
-}
-
-export default DevicesView;

www/src/views/devices/devices-list-view.jsx

@@ -0,0 +1,76 @@
+import { createSignal } from "solid-js";
+import List from "../../components/list";
+import CreateDeviceModal from "../../modals/create-device-modal";
+import DeviceService from "../../services/device-service";
+
+function DevicesListView(props) {
+  const [devices, setDevices] = createSignal([]);
+
+  handleRefreshDevices();
+
+  CreateDeviceModal.onDeviceCreated(() => {
+    handleRefreshDevices();
+  });
+
+  function handleNewDevice() {
+    CreateDeviceModal.Handler.show();
+  }
+
+  async function handleRefreshDevices() {
+    let devices = await DeviceService.getDevices();
+    setDevices(devices);
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <div class="d-flex flex-row">
+        {props.navigation}
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewDevice}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Device
+          </button>
+        </div>
+      </div>
+      <List
+        onListItemClick={() => {}}
+        items={devices().map((device) => ({
+          id: {
+            html: <span class="font-monospace">{device.getId()}</span>,
+          },
+          name: {
+            text: device.getName(),
+          },
+          description: {
+            text: device.getDescription(),
+          },
+          device,
+        }))}
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "name",
+            name: "Name",
+            width: 10,
+          },
+          {
+            id: "description",
+            name: "Description",
+          },
+        ]}
+      ></List>
+    </div>
+  );
+}
+
+export default DevicesListView;

www/src/views/devices/devices-view.jsx

@@ -0,0 +1,105 @@
+import {
+  createEffect,
+  createSignal,
+  Match,
+  mergeProps,
+  onCleanup,
+  Switch,
+} from "solid-js";
+
+import DevicesListView from "./devices-list-view";
+import IntegrationListView from "./integration-list-view";
+import UrlUtils from "../../tools/url-utils";
+import IntegrationView from "./integration-view";
+
+function DevicesView(props) {
+  props = mergeProps({ onIntegrationClicked: () => {} }, props);
+  const DEVICES_LIST_VIEW = "devices";
+  const INTEGRATION_LIST_VIEW = "integrations";
+  const INTEGRATION_VIEW = "integration";
+  const VIEWS = [DEVICES_LIST_VIEW, INTEGRATION_LIST_VIEW, INTEGRATION_VIEW];
+
+  const [currentView, setCurrentView] = createSignal(INTEGRATION_LIST_VIEW);
+
+  createEffect(() => {
+    let url = UrlUtils.getUrl();
+    url = UrlUtils.addQueryParameter(url, "tab", currentView());
+    UrlUtils.setUrl(url);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("popstate", setViewFromUrl);
+  });
+
+  setViewFromUrl();
+  window.addEventListener("popstate", setViewFromUrl);
+
+  function setViewFromUrl() {
+    let view = UrlUtils.getQueryParameter("tab");
+    if (!view) return;
+    if (!VIEWS.includes(view)) return;
+    setCurrentView(view);
+  }
+
+  function handleIntegrationClicked(integration) {
+    IntegrationView.setIntegration(integration);
+    setCurrentView(INTEGRATION_VIEW);
+  }
+
+  function Navigation() {
+    return (
+      <div class="d-flex flex-row flex-fill">
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (currentView() === INTEGRATION_LIST_VIEW
+              ? " btn-secondary"
+              : " btn-dark")
+          }
+          onClick={() => setCurrentView(INTEGRATION_LIST_VIEW)}
+        >
+          <i class="bi bi-gear me-2"></i>
+          Integrations
+        </button>
+        <button
+          class={
+            "btn me-2 mb-3" +
+            (currentView() === DEVICES_LIST_VIEW
+              ? " btn-secondary"
+              : " btn-dark")
+          }
+          onClick={() => setCurrentView(DEVICES_LIST_VIEW)}
+        >
+          <i class="bi bi-tv me-2"></i>
+          Devices
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden " +
+        props.class
+      }
+    >
+      <Switch>
+        <Match when={currentView() === INTEGRATION_LIST_VIEW}>
+          <IntegrationListView
+            navigation={<Navigation />}
+            onIntegrationClicked={handleIntegrationClicked}
+          />
+        </Match>
+        <Match when={currentView() === DEVICES_LIST_VIEW}>
+          <DevicesListView navigation={<Navigation />} />
+        </Match>
+        <Match when={currentView() === INTEGRATION_VIEW}>
+          <IntegrationView />
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+export default DevicesView;

www/src/views/devices/integration-list-view.jsx

@@ -0,0 +1,103 @@
+import { createResource, mergeProps } from "solid-js";
+import List from "../../components/list";
+import ShowRegistrationCodeModal from "../../modals/show-registration-code-modal";
+import DeleteIntegrationModal from "../../modals/delete-integration-modal";
+import DeviceService from "../../services/device-service";
+
+function IntegrationListView(props) {
+  props = mergeProps(
+    {
+      onIntegrationClicked: () => {},
+    },
+    props
+  );
+  const [integrations, { refetch: refetchIntegrations }] = createResource(
+    DeviceService.getIntegrations,
+    { initialValue: [] }
+  );
+
+  function handleRegisterIntegration() {
+    ShowRegistrationCodeModal.Handler.show();
+  }
+
+  DeleteIntegrationModal.onIntegrationDeleted(() => {
+    refetchIntegrations();
+  });
+
+  function handleDeleteIntegration(integration) {
+    DeleteIntegrationModal.setIntegration(integration);
+    DeleteIntegrationModal.Handler.show();
+  }
+
+  function handleIntegrationItemClicked(item) {
+    props.onIntegrationClicked(item.integration);
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <div class="d-flex flex-row">
+        {props.navigation}
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button
+            class="btn btn-dark me-2 mb-3"
+            onClick={handleRegisterIntegration}
+          >
+            <i class="bi bi-plus-square me-2"></i>
+            Register
+          </button>
+        </div>
+      </div>
+      <List
+        onListItemClick={handleIntegrationItemClicked}
+        items={integrations().map((integration) => ({
+          id: {
+            html: <span class="font-monospace">{integration.getId()}</span>,
+          },
+          name: {
+            text: integration.getName(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-sm btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteIntegration(integration);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          integration: integration,
+        }))}
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "name",
+            name: "Name",
+          },
+          {
+            id: "options",
+            name: "",
+            width: 4,
+          },
+        ]}
+      ></List>
+    </div>
+  );
+}
+
+export default IntegrationListView;

www/src/views/devices/integration-view.jsx

@@ -1,8 +1,10 @@
-import { createMemo, createSignal } from "solid-js";
-import Integration from "../data/integration";
-import WebRTCService from "../services/webrtc-service";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import WebRTCService from "../../services/webrtc-service";
+import Integration from "../../data/integration";
+import DeviceService from "../../services/device-service";
+import UrlUtils from "../../tools/url-utils";
 
-const [integration, setIntegration] = createSignal(null);
+const [integration, setIntegration] = createSignal(new Integration());
 
 function IntegrationView(props) {
   const title = createMemo(() =>
@@ -22,6 +24,26 @@ function IntegrationView(props) {
   WebRTCService.onStateChanged(handleConnectionStateChanged);
   let videoElement = null;
 
+  createEffect(() => {
+    let url = UrlUtils.getUrl();
+    url = UrlUtils.addQueryParameter(url, "id", integration()?.getId());
+    UrlUtils.setUrl(url);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("popstate", setIntegrationFromUrl);
+  });
+
+  setIntegrationFromUrl();
+  window.addEventListener("popstate", setIntegrationFromUrl);
+
+  async function setIntegrationFromUrl() {
+    let integrationId = UrlUtils.getQueryParameter("id");
+    if (!integrationId) return;
+    let integration = await DeviceService.getIntegration(integrationId)
+    setIntegration(integration);
+  }
+
   function handleConnectWebRTC() {
     let integrationId = integration().getId();
     WebRTCService.setVideoElement(videoElement);
@@ -43,7 +65,10 @@ function IntegrationView(props) {
         props.class
       }
     >
-      <span>Integration</span>
+      <a>
+        <i class="bi bi-arrow-left-short"></i>
+        <span>Integration</span>
+      </a>
       <h1>{title}</h1>
       <div class="d-flex flex-row">
         <div class="d-flex flex-row justify-content-end flex-fill">

www/src/views/main-view.jsx

@@ -11,7 +11,7 @@ import {
 import ModalRegistry from "../modals/modal-registry.jsx";
 import UserService from "../services/user-service.js";
 import UrlUtils from "../tools/url-utils.js";
-import DevicesView from "./devices-view.jsx";
+import DevicesView from "./devices/devices-view.jsx";
 import SettingsView from "./settings-view.jsx";
 
 import {
@@ -21,12 +21,12 @@ import {
   REMOTES_VIEW,
   SETTINGS_VIEW,
 } from "../data/constants.js";
-import IntegrationView from "./integration-view.jsx";
+import IntegrationView from "./devices/integration-view.jsx";
 import RemotesView from "./remotes/remotes-view.jsx";
 
 let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
 
-const MainView = function (props) {
+function MainView(props) {
   props = mergeProps({ onLogout: () => {} }, props);
 
   const [userInfo] = createResource(() => UserService.getUserInfo());
@@ -55,7 +55,6 @@ const MainView = function (props) {
 
   function setViewFromUrl() {
     let view = UrlUtils.getQueryParameter("view");
-    console.log(view)
     if (view) {
       setActiveView(view);
     }
@@ -100,7 +99,8 @@ const MainView = function (props) {
     if (activeView() === view) return;
     setActiveView(view);
     let url = UrlUtils.getUrl();
-    url = UrlUtils.addQueryParameter(url, "view", view);
+    url = UrlUtils.addQueryParameter(url, "view", activeView());
+    url = UrlUtils.removeQueryParameter(url, "tab");
     UrlUtils.setUrl(url);
   }
 
@@ -114,7 +114,7 @@ const MainView = function (props) {
       <div class="d-flex flex-column" style="height:100vh">
         <Modals></Modals>
         <HeaderBar></HeaderBar>
-        <ActiveView class={"bg-body-tertiary"}></ActiveView>
+        <ActiveView class={"bg-body-tertiary flex-fill"}></ActiveView>
       </div>
     );
   }
@@ -211,7 +211,10 @@ const MainView = function (props) {
             <SettingsView {...props} />
           </Match>
           <Match when={activeView() === DEVICES_VIEW}>
-            <DevicesView {...props} onIntegrationClicked={handleIntegrationClicked} />
+            <DevicesView
+              {...props}
+              onIntegrationClicked={handleIntegrationClicked}
+            />
           </Match>
           <Match when={activeView() === INTEGRATION_VIEW}>
             <IntegrationView {...props} />
@@ -225,7 +228,7 @@ const MainView = function (props) {
   }
 
   return render();
-};
+}
 
 MainView.setActiveView = setActiveView;
 

www/src/views/remotes/remotes-view.jsx

@@ -1,10 +1,13 @@
 import {
+  createEffect,
   createSignal,
   Match,
   mergeProps,
-  Switch
+  onCleanup,
+  Switch,
 } from "solid-js";
 
+import UrlUtils from "../../tools/url-utils";
 import CommandsList from "./commands-list-view";
 import RemotesList from "./remotes-list-view";
 
@@ -12,16 +15,39 @@ function RemotesView(props) {
   props = mergeProps({ onIntegrationClicked: () => {} }, props);
   const REMOTES_LIST_VIEW = "remotes_list";
   const COMMANDS_LIST_VIEW = "commands_list";
+  const VIEWS = [REMOTES_LIST_VIEW, COMMANDS_LIST_VIEW];
 
   const [currentView, setCurrentView] = createSignal(REMOTES_LIST_VIEW);
 
+  createEffect(() => {
+    let url = UrlUtils.getUrl();
+    url = UrlUtils.addQueryParameter(url, "tab", currentView());
+    UrlUtils.setUrl(url);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("popstate", setViewFromUrl);
+  });
+
+  setViewFromUrl();
+  window.addEventListener("popstate", setViewFromUrl);
+
+  function setViewFromUrl() {
+    let view = UrlUtils.getQueryParameter("tab");
+    if (!view) return;
+    if (!VIEWS.includes(view)) return;
+    setCurrentView(view);
+  }
+
   function Navigation(props) {
     return (
       <div class="d-flex flex-row flex-fill">
         <button
           class={
             "btn me-2 mb-3" +
-            (currentView() === REMOTES_LIST_VIEW ? " btn-secondary" : " btn-dark")
+            (currentView() === REMOTES_LIST_VIEW
+              ? " btn-secondary"
+              : " btn-dark")
           }
           onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
         >
@@ -31,7 +57,9 @@ function RemotesView(props) {
         <button
           class={
             "btn me-2 mb-3" +
-            (currentView() === COMMANDS_LIST_VIEW ? " btn-secondary" : " btn-dark")
+            (currentView() === COMMANDS_LIST_VIEW
+              ? " btn-secondary"
+              : " btn-dark")
           }
           onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
         >