feat: add integration view

www/src/data/constants.js

@@ -2,3 +2,4 @@ export const DEVICES_VIEW = "devices";
 export const REMOTES_VIEW = "remotes";
 export const RECORDINGS_VIEW = "recordings";
 export const SETTINGS_VIEW = "settings";
+export const INTEGRATION_VIEW = "integration";

www/src/data/serializer.js

@@ -17,6 +17,7 @@ const Serializer = (function () {
   }
 
   function deserializeDevices(objects) {
+    if (!objects) return [];
     return objects.map((object) => deserializeDevice(object));
   }
 

www/src/modals/create-device-modal.jsx

@@ -58,12 +58,12 @@ function CreateDeviceModal(props) {
           </div>
         </Show>
         <div class="mb-3 row">
-          <label for="new_name" class="col-form-label col-sm-2">
+          <label for="new_device_name" class="col-form-label col-sm-2">
             Name
           </label>
           <ValidatedTextInput
             class="col-sm-10"
-            id="new_name"
+            id="new_device_name"
             valid={isNameValid()}
             value={name()}
             onInput={(e) => setName(e.target.value)}

www/src/services/device-service.js

@@ -1,3 +1,4 @@
+import Integration from "../data/integration";
 import Serializer from "../data/serializer";
 import Net from "../tools/net";
 

www/src/views/devices-view.jsx

@@ -1,4 +1,10 @@
-import { createResource, createSignal, onMount, Show } from "solid-js";
+import {
+  createResource,
+  createSignal,
+  mergeProps,
+  onMount,
+  Show,
+} from "solid-js";
 
 import List from "../modules/list";
 import CreateDeviceModal from "../modals/create-device-modal";
@@ -7,10 +13,11 @@ 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(DEVICES_LIST_TYPE);
+  const [listType, setListType] = createSignal(INTEGRATION_LIST_TYPE);
   const [devices, setDevices] = createSignal([]);
   const [integrations, { refetch: refetchIntegrations }] = createResource(
     DeviceService.getIntegrations
@@ -45,6 +52,10 @@ function DevicesView(props) {
     DeleteIntegrationModal.Handler.show();
   }
 
+  function handleIntegrationItemClicked(item) {
+    props.onIntegrationClicked(item.integration);
+  }
+
   return (
     <div
       class={
@@ -54,18 +65,6 @@ function DevicesView(props) {
     >
       <div class="d-flex flex-row">
         <div class="d-flex flex-row flex-fill">
-          <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>
           <button
             class={
               "btn me-2 mb-3" +
@@ -78,6 +77,18 @@ function DevicesView(props) {
             <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}>
@@ -133,7 +144,7 @@ function DevicesView(props) {
       </Show>
       <Show when={listType() === INTEGRATION_LIST_TYPE}>
         <List
-          onListItemClick={() => {}}
+          onListItemClick={handleIntegrationItemClicked}
           items={(integrations() || []).map((integration) => ({
             id: {
               html: <span class="font-monospace">{integration.getId()}</span>,

www/src/views/integration-view.jsx

@@ -0,0 +1,26 @@
+import { createMemo, createSignal } from "solid-js";
+import Integration from "../data/integration";
+
+const [integration, setIntegration] = createSignal(null);
+
+function IntegrationView(props) {
+  const title = createMemo(() =>
+    integration && typeof integration === "function"
+      ? integration().getName()
+      : "Integration"
+  );
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <span>Integration</span>
+      <h1>{title}</h1>
+    </div>
+  );
+}
+
+IntegrationView.setIntegration = setIntegration;
+export default IntegrationView;

www/src/views/main-view.jsx

@@ -19,7 +19,9 @@ import {
   REMOTES_VIEW,
   RECORDINGS_VIEW,
   SETTINGS_VIEW,
+  INTEGRATION_VIEW,
 } from "../data/constants.js";
+import IntegrationView from "./integration-view.jsx";
 
 let [activeView, setActiveView] = createSignal(DEVICES_VIEW);
 
@@ -52,6 +54,7 @@ const MainView = function (props) {
 
   function setViewFromUrl() {
     let view = UrlUtils.getQueryParameter("view");
+    console.log(view)
     if (view) {
       setActiveView(view);
     }
@@ -100,6 +103,11 @@ const MainView = function (props) {
     UrlUtils.setUrl(url);
   }
 
+  function handleIntegrationClicked(integration) {
+    IntegrationView.setIntegration(integration);
+    handleViewChange(INTEGRATION_VIEW);
+  }
+
   function render() {
     return (
       <div class="d-flex flex-column" style="height:100vh">
@@ -202,7 +210,10 @@ const MainView = function (props) {
             <SettingsView {...props} />
           </Match>
           <Match when={activeView() === DEVICES_VIEW}>
-            <DevicesView {...props} />
+            <DevicesView {...props} onIntegrationClicked={handleIntegrationClicked} />
+          </Match>
+          <Match when={activeView() === INTEGRATION_VIEW}>
+            <IntegrationView {...props} />
           </Match>
         </Switch>
       </div>