feat: add remotes and commands data types and lists

www/src/data/command.js

@@ -0,0 +1,73 @@
+function Command({ id, protocol, command, device, command_type, title } = {}) {
+  let _id = id;
+  let _protocol = protocol;
+  let _command = command;
+  let _device = device;
+  let _command_type = command_type;
+  let _title = title;
+
+  function getId() {
+    return _id;
+  }
+
+  function setId(id) {
+    _id = id;
+  }
+
+  function getProtocol() {
+    return _protocol;
+  }
+
+  function setProtocol(protocol) {
+    _protocol = protocol;
+  }
+
+  function getCommand() {
+    return _command;
+  }
+
+  function setCommand(command) {
+    _command = command;
+  }
+
+  function getDevice() {
+    return _device;
+  }
+
+  function setDevice(device) {
+    _device = device;
+  }
+
+  function getCommandType() {
+    return _command_type;
+  }
+
+  function setCommandType(command_type) {
+    _command_type = command_type;
+  }
+
+  function getTitle() {
+    return _title;
+  }
+
+  function setTitle(title) {
+    _title = title;
+  }
+
+  return {
+    getId,
+    setId,
+    getProtocol,
+    setProtocol,
+    getCommand,
+    setCommand,
+    getDevice,
+    setDevice,
+    getCommandType,
+    setCommandType,
+    getTitle,
+    setTitle,
+  };
+}
+
+export default Command;

www/src/data/remote.js

@@ -0,0 +1,40 @@
+function Remote({ id, title, commands } = {}) {
+  let _id = id;
+  let _title = title;
+  let _commands = commands;
+
+  function getId() {
+    return _id;
+  }
+
+  function setId(id) {
+    _id = id;
+  }
+
+  function getTitle() {
+    return _title;
+  }
+
+  function setTitle(title) {
+    _title = title;
+  }
+
+  function getCommands() {
+    return _commands;
+  }
+
+  function setCommands(commands) {
+    _commands = commands;
+  }
+
+  return {
+    getId,
+    setId,
+    getTitle,
+    setTitle,
+    getCommands,
+    setCommands,
+  };
+}
+
+export default Remote;

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

@@ -27,30 +27,6 @@ function CommandsList(props) {
         </div>
       </div>
       <List
-        items={(commands() || []).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={[
           {
@@ -59,8 +35,18 @@ function CommandsList(props) {
             width: 6,
           },
           {
-            id: "name",
+            id: "title",
-            name: "Name",
+            name: "Title",
+          },
+          {
+            id: "protocol",
+            name: "Protocol",
+            width: 10,
+          },
+          {
+            id: "type",
+            name: "Type",
+            width: 6,
           },
           {
             id: "options",
@@ -68,6 +54,36 @@ function CommandsList(props) {
             width: 4,
           },
         ]}
+        items={(commands() || []).map((command) => ({
+          id: {
+            html: <span class="font-monospace">{command.getId()}</span>,
+          },
+          title: {
+            text: command.getTitle(),
+          },
+          protocol: {
+            text: command.getProtocol(),
+          },
+          type: {
+            text: command.getCommandType(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteCommand(command);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          command,
+        }))}
       ></List>
     </>
   );

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

@@ -3,8 +3,9 @@ import List from "../../modules/list";
 import RemotesService from "../../services/remotes-service";
 
 function RemotesList(props) {
-  const [remotes, { refetch: refetchRemotes }] =
+  const [remotes, { refetch: refetchRemotes }] = createResource(
-    createResource(RemotesService.getRemotes);
+    RemotesService.getRemotes
+  );
 
   onMount(() => {
     refetchRemotes();
@@ -26,19 +27,6 @@ function RemotesList(props) {
         </div>
       </div>
       <List
-        onListItemClick={() => {}}
-        items={(remotes() || []).map((device) => ({
-          id: {
-            html: <span class="font-monospace">{device.getId()}</span>,
-          },
-          name: {
-            text: device.getName(),
-          },
-          description: {
-            text: device.getDescription(),
-          },
-          device,
-        }))}
         class={"flex-fill"}
         columns={[
           {
@@ -47,15 +35,40 @@ function RemotesList(props) {
             width: 6,
           },
           {
-            id: "name",
+            id: "title",
-            name: "Name",
+            name: "Title",
-            width: 10,
           },
           {
-            id: "description",
+            id: "options",
-            name: "Description",
+            name: "",
+            width: 4,
           },
         ]}
+        onListItemClick={() => {}}
+        items={(remotes() || []).map((remote) => ({
+          id: {
+            html: <span class="font-monospace">{remote.getId()}</span>,
+          },
+          name: {
+            text: remote.getTitle(),
+          },
+          options: {
+            html: (
+              <>
+                <button
+                  class="btn btn-outline-secondary me-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleDeleteRemote(remote);
+                  }}
+                >
+                  <i class="bi bi-trash-fill"></i>
+                </button>
+              </>
+            ),
+          },
+          remote,
+        }))}
       ></List>
     </>
   );

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

@@ -10,10 +10,10 @@ import RemotesList from "./remotes-list-view";
 
 function RemotesView(props) {
   props = mergeProps({ onIntegrationClicked: () => {} }, props);
-  const REMOTES_LIST_TYPE = "remotes";
+  const REMOTES_LIST_VIEW = "remotes_list";
-  const COMMANDS_LIST_TYPE = "commands";
+  const COMMANDS_LIST_VIEW = "commands_list";
 
-  const [listType, setListType] = createSignal(REMOTES_LIST_TYPE);
+  const [currentView, setCurrentView] = createSignal(REMOTES_LIST_VIEW);
 
   function Navigation(props) {
     return (
@@ -21,9 +21,9 @@ function RemotesView(props) {
         <button
           class={
             "btn me-2 mb-3" +
-            (listType() === REMOTES_LIST_TYPE ? " btn-secondary" : " btn-dark")
+            (currentView() === REMOTES_LIST_VIEW ? " btn-secondary" : " btn-dark")
           }
-          onClick={() => setListType(REMOTES_LIST_TYPE)}
+          onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
         >
           <i class="bi bi-tv me-2"></i>
           Remotes
@@ -31,9 +31,9 @@ function RemotesView(props) {
         <button
           class={
             "btn me-2 mb-3" +
-            (listType() === COMMANDS_LIST_TYPE ? " btn-secondary" : " btn-dark")
+            (currentView() === COMMANDS_LIST_VIEW ? " btn-secondary" : " btn-dark")
           }
-          onClick={() => setListType(COMMANDS_LIST_TYPE)}
+          onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
         >
           <i class="bi bi-gear me-2"></i>
           Commands
@@ -50,10 +50,10 @@ function RemotesView(props) {
       }
     >
       <Switch>
-        <Match when={listType() === REMOTES_LIST_TYPE}>
+        <Match when={currentView() === REMOTES_LIST_VIEW}>
           <RemotesList navigation={<Navigation />} />
         </Match>
-        <Match when={listType() === COMMANDS_LIST_TYPE}>
+        <Match when={currentView() === COMMANDS_LIST_VIEW}>
           <CommandsList navigation={<Navigation />} />
         </Match>
       </Switch>