feat(ui): add devices list and create modal

data/device_database.go

@@ -24,7 +24,7 @@ func (db *DeviceDatabase) Initialize() error {
 
 	_, error = db.Connection.Exec(`CREATE TABLE IF NOT EXISTS devices (
         id TEXT PRIMARY KEY,
-        device_name TEXT UNIQUE,
+        device_name TEXT,
 		description TEXT
     )`)
 	if error != nil {

www/src/data/playback-device.js

@@ -0,0 +1,40 @@
+function PlaybackDevice({id, name, description}) {
+    let _id = id;
+    let _name = name;
+    let _description = description;
+
+    function getId() {
+        return _id;
+    }
+
+    function getName() {
+        return _name;
+    }
+
+    function getDescription() {
+        return _description;
+    }
+    
+    function setId(id) {
+        _id = id;
+    }
+
+    function setName(name) {
+        _name = name;
+    }
+
+    function setDescription(description) {
+        _description = description;
+    }
+
+    return {
+        getId,
+        getName,
+        getDescription,
+        setId,
+        setName,
+        setDescription
+    };
+}
+
+export default PlaybackDevice;

www/src/data/serializer.js

@@ -1,3 +1,4 @@
+import PlaybackDevice from "./playback-device.js";
 import User from "./user.js";
 
 const Serializer = (function () {
@@ -10,9 +11,19 @@ const Serializer = (function () {
     return objects.map((object) => deserializeUser(object));
   }
 
+  function deserializeDevice(object) {
+    return new PlaybackDevice(object);
+  }
+
+  function deserializeDevices(objects) {
+    return objects.map((object) => deserializeDevice(object));
+  }
+
   return {
     deserializeUser,
     deserializeUsers,
+    deserializeDevice,
+    deserializeDevices,
   };
 })();
 

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

@@ -0,0 +1,108 @@
+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 ModalHandler from "./modal-handler.js";
+import DeviceService from "../services/device-service.js";
+
+const eventEmitter = new EventEmitter();
+const DEVICE_CREATED_EVENT = "success";
+const MIN_NAME_LENGTH = 3;
+
+function CreateDeviceModal(props) {
+  const [name, setName] = createSignal("");
+  const [isNameValid, setNameValid] = createSignal(true);
+  const [description, setDescription] = createSignal("");
+  const [isDescriptionValid, setDescriptionValid] = createSignal(true);
+  const [error, setError] = createSignal("");
+  
+  createEffect(() => setNameValid(checkIfNameValid(name())));
+  createEffect(() => setDescriptionValid(checkIfDescriptionValid(description())));
+  
+  function checkIfNameValid(name) {
+    return name.length >= MIN_NAME_LENGTH;
+  }
+  
+  function checkIfDescriptionValid(description) {
+    return true;
+  }
+
+  async function handleCreateDevice() {
+    let device;
+    try {
+      device = await DeviceService.createDevice({
+        name: name(),
+        description: description(),
+      });
+    } catch (e) {
+      setError(e.message);
+      return;
+    }
+    setName("");
+    setDescription("");
+    CreateDeviceModal.Handler.hide();
+    eventEmitter.dispatchEvent(DEVICE_CREATED_EVENT, device);
+  }
+
+  return (
+    <Modal
+      ref={props.ref}
+      id="createDeviceModal"
+      modalTitle="New Device"
+      centered={true}
+    >
+      <div class="modal-body">
+        <Show when={error() !== ""}>
+          <div class="alert alert-danger" role="alert">
+            {error()}
+          </div>
+        </Show>
+        <div class="mb-3 row">
+          <label for="new_name" class="col-form-label col-sm-2">
+            Name
+          </label>
+          <ValidatedTextInput
+            class="col-sm-10"
+            id="new_name"
+            valid={isNameValid()}
+            value={name()}
+            onInput={(e) => setName(e.target.value)}
+            errorText={"Device name too short"}
+          />
+        </div>
+        <div class="mb-3 row">
+          <label for="description" class="col-form-label col-sm-2">
+            Description
+          </label>
+          <ValidatedTextInput
+            class="col-sm-10"
+            id="description"
+            valid={isDescriptionValid()}
+            value={description()}
+            onInput={(e) => setDescription(e.target.value)}
+            errorText={"Invalid description"}
+          />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleCreateDevice}
+          class="btn btn-primary"
+          disabled={!isNameValid() && !isDescriptionValid()}
+        >
+          Create
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+CreateDeviceModal.Handler = new ModalHandler();
+CreateDeviceModal.onDeviceCreated = (callback) =>
+  eventEmitter.on(DEVICE_CREATED_EVENT, callback);
+
+export default CreateDeviceModal;

www/src/modals/modal-registry.jsx

@@ -3,6 +3,7 @@ import { onMount } from "solid-js";
 import CreateUserModal from "./create-user-modal.jsx";
 import DeleteUserModal from "./delete-user-modal.jsx";
 import UserSettingsModal from "./user-settings-modal.jsx";
+import CreateDeviceModal from "./create-device-modal.jsx";
 
 const ModalRegistry = (function () {
   const modals = [
@@ -21,6 +22,11 @@ const ModalRegistry = (function () {
       component: UserSettingsModal,
       ref: null,
     },
+    {
+      id: "createDeviceModal",
+      component: CreateDeviceModal,
+      ref: null,
+    },
   ];
 
   function getModals(props) {

www/src/services/device-service.js

@@ -0,0 +1,76 @@
+import Serializer from "../data/serializer";
+import Net from "../tools/net";
+
+function DeviceService() {
+  async function getDevices() {
+    let response = await Net.sendRequest({
+      method: "GET",
+      url: "/api/devices",
+    });
+
+    if (response.status !== 200) {
+      let responseData = JSON.parse(response.data);
+      throw new Error(responseData.error);
+    }
+
+    let deviceObjects = JSON.parse(response.data);
+    return Serializer.deserializeDevices(deviceObjects);
+  }
+
+  async function createDevice({ name, description }) {
+    let response = await Net.sendJsonRequest({
+      method: "POST",
+      url: "/api/devices",
+      data: { name, description },
+    });
+
+    if (response.status !== 200) {
+      let responseData = JSON.parse(response.data);
+      throw new Error(responseData.error);
+    }
+
+    let deviceObject = JSON.parse(response.data);
+    let device = Serializer.deserializeDevice(deviceObject);
+    return device;
+  }
+
+  async function updateDevice(deviceId, { name, description }) {
+    let response = await Net.sendJsonRequest({
+      method: "PUT",
+      url: "/api/devices/" + deviceId,
+      data: { name, description },
+    });
+
+    if (response.status !== 200) {
+      let responseData = JSON.parse(response.data);
+      throw new Error(responseData.error);
+    }
+
+    let deviceObject = JSON.parse(response.data);
+    let device = Serializer.deserializeDevice(deviceObject);
+    return device;
+  }
+
+  async function deleteDevice(deviceId) {
+    let response = await Net.sendJsonRequest({
+      method: "DELETE",
+      url: "/api/devices/" + deviceId,
+    });
+
+    if (response.status !== 200) {
+      let responseData = JSON.parse(response.data);
+      throw new Error(responseData.error);
+    }
+  }
+
+  return {
+    getDevices,
+    createDevice,
+    updateDevice,
+    deleteDevice,
+  };
+}
+
+DeviceService = new DeviceService();
+
+export default DeviceService;

www/src/views/devices-view.jsx

@@ -0,0 +1,108 @@
+import { createSignal, onMount } from "solid-js";
+
+import List from "../modules/list";
+import CreateDeviceModal from "../modals/create-device-modal";
+import DeviceService from "../services/device-service";
+
+function DevicesView(props) {
+  const DEVICES_LIST_TYPE = "devices";
+  const INTEGRATION_LIST_TYPE = "integrations";
+
+  const [listType, setListType] = createSignal(DEVICES_LIST_TYPE);
+  const [devices, setDevices] = createSignal([]);
+
+  CreateDeviceModal.onDeviceCreated(() => {
+    handleRefreshDevices();
+  });
+
+  onMount(() => {
+    handleRefreshDevices();
+  });
+
+  function handleNewDevice() {
+    CreateDeviceModal.Handler.show();
+  }
+
+  async function handleRefreshDevices() {
+    let devices = await DeviceService.getDevices();
+    setDevices(devices);
+  }
+
+  return (
+    <div
+      class={
+        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
+        props.class
+      }
+    >
+      <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" +
+              (listType() === INTEGRATION_LIST_TYPE
+                ? " btn-secondary"
+                : " btn-dark")
+            }
+            onClick={() => setListType(INTEGRATION_LIST_TYPE)}
+          >
+            <i class="bi bi-gear me-2"></i>
+            Integrations
+          </button>
+        </div>
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleNewDevice}>
+            <i class="bi bi-plus-square me-2"></i>
+            New Device
+          </button>
+        </div>
+      </div>
+      <List
+        onListItemClick={() => {}}
+        items={devices().map((device) => ({
+          id: {
+            html: <span class="font-monospace">{device.getId()}</span>,
+          },
+          name: {
+            text: device.getName(),
+          },
+          description: {
+            text: device.getDescription(),
+          },
+          device,
+        }))}
+        class={"flex-fill"}
+        columns={[
+          {
+            id: "id",
+            name: "id",
+            width: 6,
+          },
+          {
+            id: "name",
+            name: "Name",
+            width: 10,
+          },
+          {
+            id: "description",
+            name: "Description",
+          },
+        ]}
+      ></List>
+    </div>
+  );
+}
+
+export default DevicesView;

www/src/views/main-view.jsx

@@ -12,6 +12,7 @@ import UserService from "../services/user-service.js";
 import ModalRegistry from "../modals/modal-registry.jsx";
 import UrlUtils from "../tools/url-utils.js";
 import SettingsView from "./settings-view.jsx";
+import DevicesView from "./devices-view.jsx";
 
 import {
   DEVICES_VIEW,
@@ -121,7 +122,7 @@ const MainView = function (props) {
               }
               onClick={() => handleViewChange(DEVICES_VIEW)}
             >
-              <i class="bi-folder2 me-2"></i>
+              <i class="bi bi-tv me-2"></i>
               Devices
             </button>
             <button
@@ -131,7 +132,7 @@ const MainView = function (props) {
               }
               onClick={() => handleViewChange(REMOTES_VIEW)}
             >
-              <i class="bi-gear-fill me-2"></i>
+              <i class="bi bi-wifi me-2"></i>
               Remotes
             </button>
             <button
@@ -143,7 +144,7 @@ const MainView = function (props) {
               }
               onClick={() => handleViewChange(RECORDINGS_VIEW)}
             >
-              <i class="bi bi-terminal me-2"></i>
+              <i class="bi bi-record-circle me-2"></i>
               Recordings
             </button>
           </div>
@@ -200,6 +201,9 @@ const MainView = function (props) {
           <Match when={activeView() === SETTINGS_VIEW}>
             <SettingsView {...props} />
           </Match>
+          <Match when={activeView() === DEVICES_VIEW}>
+            <DevicesView {...props} />
+          </Match>
         </Switch>
       </div>
     );