refactor: rename modules to components

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/auth-layer-view.jsx

@@ -1,5 +1,5 @@
 import { createSignal, onMount } from "solid-js";
-import Spinner from "../modules/spinner";
+import Spinner from "../components/spinner";
 import MainView from "./main-view";
 import LoginView from "./login-view";
 import UserService from "../services/user-service";

www/src/views/devices-view.jsx

@@ -6,7 +6,7 @@ import {
   Show,
 } from "solid-js";
 
-import List from "../modules/list";
+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";

www/src/views/login-view.jsx

@@ -1,6 +1,6 @@
 import { createSignal, mergeProps } from "solid-js";
 import UserService from "../services/user-service";
-import Spinner from "../modules/spinner";
+import Spinner from "../components/spinner";
 
 const IDLE = "idle";
 const LOGGING_IN = "logging-in";

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

@@ -1,7 +1,8 @@
 import { createResource, onMount } from "solid-js";
-import List from "../../modules/list";
+import List from "../../components/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 (
@@ -83,7 +89,7 @@ function CommandsList(props) {
             html: (
               <>
                 <button
-                  class="btn btn-outline-secondary me-2"
+                  class="btn btn-sm btn-outline-secondary me-2"
                   onClick={(event) => {
                     event.stopPropagation();
                     handleDeleteCommand(command);

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

@@ -1,5 +1,5 @@
 import { createResource, onMount } from "solid-js";
-import List from "../../modules/list";
+import List from "../../components/list";
 import RemotesService from "../../services/remotes-service";
 
 function RemotesList(props) {
@@ -49,14 +49,14 @@ function RemotesList(props) {
           id: {
             html: <span class="font-monospace">{remote.getId()}</span>,
           },
-          name: {
+          title: {
             text: remote.getTitle(),
           },
           options: {
             html: (
               <>
                 <button
-                  class="btn btn-outline-secondary me-2"
+                  class="btn btn-sm btn-outline-secondary me-2"
                   onClick={(event) => {
                     event.stopPropagation();
                     handleDeleteRemote(remote);

www/src/views/settings-view.jsx

@@ -1,6 +1,6 @@
 import { Show, createEffect, createResource, createSignal } from "solid-js";
-import ChangePasswordSettings from "../modules/settings/change-password";
-import UserList from "../modules/settings/users-list";
+import ChangePasswordSettings from "../components/settings/change-password";
+import UserList from "../components/settings/users-list";
 import UserService from "../services/user-service";
 
 function SettingsView(props) {