feat: add delete command modal

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

@@ -0,0 +1,66 @@
+import { createSignal } from "solid-js";
+import Command from "../data/command.js";
+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 [command, setCommand] = createSignal(new Command());
+const eventEmitter = new EventEmitter();
+const COMMAND_DELETED_EVENT = "success";
+
+function DeleteCommandModal(props) {
+  const [error, setError] = createSignal("");
+
+  async function handleDeleteCommand() {
+    try {
+      await RemotesService.deleteCommand(command().getId());
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+    DeleteCommandModal.Handler.hide();
+    eventEmitter.dispatchEvent(COMMAND_DELETED_EVENT, command);
+  }
+
+  return (
+    <Modal
+      ref={props.ref}
+      id="deleteCommandModal"
+      modalTitle="Delete command"
+      centered={true}
+    >
+      <div class="modal-body">
+        <Show when={error() !== ""}>
+          <div class="alert alert-danger" role="alert">
+            {error()}
+          </div>
+        </Show>
+        <div class="mb-3 row">
+          <span>
+            Do you really want to delete the command {command().getTitle()} ({command().getId()})?
+          </span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleDeleteCommand}
+          class="btn btn-danger"
+        >
+          Delete
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+DeleteCommandModal.Handler = new ModalHandler();
+DeleteCommandModal.setCommand = setCommand;
+DeleteCommandModal.onCommandDeleted = (callback) =>
+  eventEmitter.on(COMMAND_DELETED_EVENT, callback);
+
+export default DeleteCommandModal;

www/src/modals/modal-registry.jsx

@@ -7,6 +7,7 @@ import CreateDeviceModal from "./create-device-modal.jsx";
 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";
 
 const ModalRegistry = (function () {
   const modals = [
@@ -45,6 +46,11 @@ const ModalRegistry = (function () {
       component: CreateCommandModal,
       ref: null,
     },
+    {
+      id: "deleteCommandModal",
+      component: DeleteCommandModal,
+      ref: null,
+    }
   ];
 
   function getModals(props) {

www/src/services/remotes-service.js

@@ -10,17 +10,27 @@ function RemotesService() {
   async function getCommands() {
     return [].concat(commands);
   }
-  
+
   async function createCommand(commandObject) {
     let command = Serializer.deserializeCommand(commandObject);
+    let id = Math.random().toString(36).substr(2, 9);
+    command.setId(id);
     commands.push(command);
     return command;
   }
 
+  async function deleteCommand(commandId) {
+    let index = commands.findIndex((command) => command.getId() === commandId);
+    if (index >= 0) {
+      commands.splice(index, 1);
+    }
+  }
+
   return {
     getRemotes,
     getCommands,
     createCommand,
+    deleteCommand,
   };
 }
 

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

@@ -2,6 +2,7 @@ import { createResource, onMount } from "solid-js";
 import List from "../../modules/list";
 import RemotesService from "../../services/remotes-service";
 import CreateCommandModal from "../../modals/create-command-modal";
+import DeleteCommandModal from "../../modals/delete-command-modal";
 
 function CommandsList(props) {
   const [commands, { refetch: refetchCommands }] = createResource(
@@ -13,7 +14,10 @@ function CommandsList(props) {
   });
 
   CreateCommandModal.onCommandCreated(() => {
-    console.log("CREATED");
+    refetchCommands();
+  });
+  
+  DeleteCommandModal.onCommandDeleted(() => {
     refetchCommands();
   });
 
@@ -23,6 +27,8 @@ function CommandsList(props) {
   }
   
   function handleDeleteCommand(command) {
+    DeleteCommandModal.setCommand(command);
+    DeleteCommandModal.Handler.show();
   }
 
   return (