feat: add create remote modal

www/src/data/serializer.js

@@ -2,6 +2,7 @@ import PlaybackDevice from "./playback-device.js";
 import User from "./user.js";
 import Integration from "./integration.js";
 import Command from "./command.js";
+import Remote from "./remote.js";
 
 const Serializer = (function () {
   function deserializeUser(object) {
@@ -40,6 +41,15 @@ const Serializer = (function () {
     return objects.map((object) => deserializeCommand(object));
   }
   
+  function deserializeRemote(object) {
+    return new Remote(object);
+  }
+  
+  function deserializeRemotes(objects) {
+    if (!objects) return [];
+    return objects.map((object) => deserializeRemote(object));
+  }
+
   return {
     deserializeUser,
     deserializeUsers,
@@ -49,6 +59,8 @@ const Serializer = (function () {
     deserializeIntegrations,
     deserializeCommand,
     deserializeCommands,
+    deserializeRemote,
+    deserializeRemotes,
   };
 })();
 

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

@@ -1,5 +1,5 @@
 import { createEffect, createMemo, createSignal } from "solid-js";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
 import EventEmitter from "../tools/event-emitter.js";
 import ModalHandler from "./modal-handler.js";
 import Modal from "./modal.jsx";

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

@@ -1,7 +1,7 @@
 import { createEffect, createSignal } from "solid-js";
 import Modal from "./modal.jsx";
 import EventEmitter from "../tools/event-emitter.js";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
 import ModalHandler from "./modal-handler.js";
 import DeviceService from "../services/device-service.js";
 

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

@@ -0,0 +1,92 @@
+import { createMemo, createSignal } from "solid-js";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
+import RemotesService from "../services/remotes-service.js";
+import EventEmitter from "../tools/event-emitter.js";
+import ModalHandler from "./modal-handler.js";
+import Modal from "./modal.jsx";
+
+const eventEmitter = new EventEmitter();
+const REMOTE_CREATED_EVENT = "success";
+const MIN_TITLE_LENGTH = 3;
+
+function CreateRemoteModal(props) {
+  const [title, setTitle] = createSignal("");
+  const [commands, setCommands] = createSignal([]);
+  const [error, setError] = createSignal("");
+
+  const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH);
+
+  const isFormValid = createMemo(() => isTitleValid());
+
+  async function handleCreateRemote() {
+    let remote;
+    try {
+      remote = await RemotesService.createRemote({
+        title: title(),
+        commands: commands(),
+      });
+    } catch (e) {
+      setError(e.message);
+      return;
+    }
+    resetFields();
+    CreateRemoteModal.Handler.hide();
+    eventEmitter.dispatchEvent(REMOTE_CREATED_EVENT, remote);
+  }
+
+  function resetFields() {
+    setTitle("");
+    setCommands([]);
+    setError("");
+  }
+
+  return (
+    <Modal
+      ref={props.ref}
+      id="createRemoteModal"
+      modalTitle="New Remote"
+      centered={true}
+    >
+      <div class="modal-body" style="overflow-y:inherit !important;">
+        <Show when={error() !== ""}>
+          <div class="alert alert-danger" role="alert">
+            {error()}
+          </div>
+        </Show>
+        <div class="mb-3 row">
+          <label for="new_remote_title" class="col-form-label col-sm-3">
+            Title
+          </label>
+          <ValidatedTextInput
+            class="col-sm-9"
+            id="new_remote_title"
+            valid={isTitleValid()}
+            value={title()}
+            onInput={(e) => setTitle(e.target.value)}
+            errorText={`Title must be at least ${MIN_TITLE_LENGTH} characters long`}
+          />
+        </div>
+      </div>
+      
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleCreateRemote}
+          class="btn btn-primary"
+          disabled={!isFormValid()}
+        >
+          Create
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+CreateRemoteModal.Handler = new ModalHandler();
+CreateRemoteModal.onRemoteCreated = (callback) =>
+  eventEmitter.on(REMOTE_CREATED_EVENT, callback);
+
+export default CreateRemoteModal;

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

@@ -2,7 +2,7 @@ import { createEffect, createSignal } from "solid-js";
 import Modal from "./modal.jsx";
 import UserService from "../services/user-service.js";
 import EventEmitter from "../tools/event-emitter.js";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
 import ModalHandler from "./modal-handler.js";
 
 const [users, setUsers] = createSignal([]);

www/src/modals/delete-integration-modal.jsx

@@ -1,12 +1,9 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
-import Modal from "./modal.jsx";
-import UserService from "../services/user-service.js";
-import EventEmitter from "../tools/event-emitter.js";
-import User from "../data/user.js";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
-import ModalHandler from "./modal-handler.js";
 import Integration from "../data/integration.js";
 import DeviceService from "../services/device-service.js";
+import EventEmitter from "../tools/event-emitter.js";
+import ModalHandler from "./modal-handler.js";
+import Modal from "./modal.jsx";
 
 const [integration, setIntegration] = createSignal(new Integration());
 const eventEmitter = new EventEmitter();

www/src/modals/delete-user-modal.jsx

@@ -3,7 +3,7 @@ import Modal from "./modal.jsx";
 import UserService from "../services/user-service.js";
 import EventEmitter from "../tools/event-emitter.js";
 import User from "../data/user.js";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
 import ModalHandler from "./modal-handler.js";
 
 const [user, setUser] = createSignal(new User());

www/src/modals/modal-registry.jsx

@@ -8,6 +8,7 @@ import ShowRegistrationCodeModal from "./show-registration-code-modal.jsx";
 import DeleteIntegrationModal from "./delete-integration-modal.jsx";
 import CreateCommandModal from "./create-command-modal.jsx";
 import DeleteCommandModal from "./delete-command-modal.jsx";
+import CreateRemoteModal from "./create-remote-modal.jsx";
 
 const ModalRegistry = (function () {
   const modals = [
@@ -50,7 +51,12 @@ const ModalRegistry = (function () {
       id: "deleteCommandModal",
       component: DeleteCommandModal,
       ref: null,
-    }
+    },
+    {
+      id: "createRemoteModal",
+      component: CreateRemoteModal,
+      ref: null,
+    },
   ];
 
   function getModals(props) {

www/src/modals/user-settings-modal.jsx

@@ -7,7 +7,7 @@ import {
 import EventEmitter from "../tools/event-emitter.js";
 import User from "../data/user.js";
 import Modal from "./modal.jsx";
-import ValidatedTextInput from "../modules/validated-text-input.jsx";
+import ValidatedTextInput from "../components/validated-text-input.jsx";
 import ModalHandler from "./modal-handler.js";
 import UserService from "../services/user-service.js";
 

www/src/services/remotes-service.js

@@ -2,9 +2,18 @@ import Serializer from "../data/serializer";
 
 function RemotesService() {
   let commands = [];
+  let remotes = [];
 
   async function getRemotes() {
-    return [];
+    return [].concat(remotes);
+  }
+  
+  async function createRemote(remoteObject) {
+    let remote = Serializer.deserializeRemote(remoteObject);
+    let id = Math.random().toString(36).substr(2, 9);
+    remote.setId(id);
+    remotes.push(remote);
+    return remote;
   }
 
   async function getCommands() {
@@ -28,6 +37,7 @@ function RemotesService() {
 
   return {
     getRemotes,
+    createRemote,
     getCommands,
     createCommand,
     deleteCommand,

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

@@ -1,6 +1,7 @@
 import { createResource, onMount } from "solid-js";
 import List from "../../components/list";
 import RemotesService from "../../services/remotes-service";
+import CreateRemoteModal from "../../modals/create-remote-modal";
 
 function RemotesList(props) {
   const [remotes, { refetch: refetchRemotes }] = createResource(
@@ -11,7 +12,15 @@ function RemotesList(props) {
     refetchRemotes();
   });
 
-  function handleNewRemote() {}
+  CreateRemoteModal.onRemoteCreated(() => {
+    refetchRemotes();
+  });
+
+  function handleNewRemote() {
+    CreateRemoteModal.Handler.show();
+  }
+
+  function handleDeleteRemote(remote) {}
 
   return (
     <>