feat(ui): add devices list and create modal

.gitignore

@@ -1,3 +1,3 @@
-users.db
+*.db
 start
 *.log

data/device_database.go

@@ -24,8 +24,8 @@ func (db *DeviceDatabase) Initialize() error {
 
 	_, error = db.Connection.Exec(`CREATE TABLE IF NOT EXISTS devices (
         id TEXT PRIMARY KEY,
-        device_name TEXT UNIQUE,
-		description TEXT,
+        device_name TEXT,
+		description TEXT
     )`)
 	if error != nil {
 		return fmt.Errorf("error creating devices table: %s", error)

main/main.go

@@ -30,12 +30,27 @@ func main() {
 	}
 	defer userDatabase.Close()
 
+	deviceDatabase := data.DeviceDatabase{}
+	deviceDatabase.SetDirectory(configuration.DatabaseDirectory)
+	err = deviceDatabase.Initialize()
+	if err != nil {
+		log.Error().Err(err).Msg("failed to initialize device database")
+		os.Exit(1)
+	}
+	defer deviceDatabase.Close()
+
 	userManager := management.UserManager{}
 	err = userManager.Initialize(&userDatabase)
 	if err != nil {
 		log.Error().Err(err).Msg("failed to initialize user manager")
 	}
 
+	deviceManager := management.DeviceManager{}
+	err = deviceManager.Initialize(&deviceDatabase)
+	if err != nil {
+		log.Error().Err(err).Msg("failed to initialize device manager")
+	}
+
 	webServer := server.WebServer{}
 	webServer.SetWebAppDirectoryPath("www")
 	webServer.SetPort(configuration.Port)
@@ -50,6 +65,11 @@ func main() {
 	userApiHandler.SetRouter(webServer.Router())
 	userApiHandler.Initialize(&authenticator)
 
+	deviceApiHandler := server.DeviceApiHandler{}
+	deviceApiHandler.SetDeviceManager(&deviceManager)
+	deviceApiHandler.SetRouter(webServer.Router())
+	deviceApiHandler.Initialize(&authenticator)
+
 	var wg sync.WaitGroup
 	wg.Add(1)
 	go func() {

management/device_manager.go

@@ -0,0 +1,84 @@
+package management
+
+import (
+	d "playback-device-server/data"
+)
+
+type DeviceManager struct {
+	deviceDatabase *d.DeviceDatabase
+}
+
+func (um *DeviceManager) Initialize(deviceDatabase *d.DeviceDatabase) error {
+	um.deviceDatabase = deviceDatabase
+	return nil
+}
+
+func (um *DeviceManager) CreateDevice(device *d.PlaybackDevice) (string, error) {
+	id, error := um.deviceDatabase.CreateDevice(device.Name, device.Description)
+	if error != nil {
+		return "", error
+	}
+	return id, nil
+}
+
+func (um *DeviceManager) DeviceIdExists(id string) (bool, error) {
+	exists, error := um.deviceDatabase.DeviceIdExists(id)
+	if error != nil {
+		return false, error
+	}
+	return exists, nil
+}
+
+//func (um *DeviceManager) Register(code string) (string, error) {
+//	device, error := um.GetDeviceByCode(code)
+//	if error != nil {
+//		return "", error
+//	}
+//
+//	expiryDate := time.Now().AddDate(0, 0, 30)
+//	token, error := um.deviceDatabase.CreateSession(device.ID, expiryDate)
+//	if error != nil {
+//		return "", error
+//	}
+//
+//	return token, nil
+//}
+
+func (um *DeviceManager) GetSession(sessionToken string) (*d.DeviceSession, error) {
+	session, error := um.deviceDatabase.GetSession(sessionToken)
+	if error != nil {
+		return nil, error
+	}
+	return session, nil
+}
+
+func (um *DeviceManager) GetDeviceById(id string) (*d.PlaybackDevice, error) {
+	device, error := um.deviceDatabase.GetDeviceById(id)
+	if error != nil {
+		return nil, error
+	}
+	return device, nil
+}
+
+func (um *DeviceManager) UpdateDevice(device *d.PlaybackDevice) error {
+	error := um.deviceDatabase.UpdateDevice(device)
+	return error
+}
+
+func (um *DeviceManager) DeleteSession(token string) error {
+	error := um.deviceDatabase.DeleteSessionByToken(token)
+	if error != nil {
+		return error
+	}
+	return nil
+}
+
+func (um *DeviceManager) GetDevices() (*[]d.PlaybackDevice, error) {
+	users, error := um.deviceDatabase.GetDevices()
+	return users, error
+}
+
+func (um *DeviceManager) DeleteDevice(ID string) error {
+	error := um.deviceDatabase.DeleteDevice(ID)
+	return error
+}

server/device_api_handler.go

@@ -0,0 +1,183 @@
+package server
+
+import (
+	"fmt"
+	d "playback-device-server/data"
+	m "playback-device-server/management"
+
+	"github.com/labstack/echo/v4"
+)
+
+type DeviceApiHandler struct {
+	router        *echo.Echo
+	deviceManager *m.DeviceManager
+}
+
+func (r *DeviceApiHandler) Initialize(authenticator *Authenticator) {
+	r.router.Use(authenticator.Authenticate("/api/devices", []string{}))
+	usersApi := r.router.Group("/api/devices")
+	//usersApi.POST("/register", r.handleRegister)
+	//usersApi.POST("/deregister", r.handleDeregister)
+	usersApi.GET("/session/info", r.handleGetSessionInfo)
+	usersApi.PUT("/:id", r.handleUpdateConfig)
+	usersApi.GET("", r.handleGetDevices)
+	usersApi.POST("", r.handleCreateDevice)
+	usersApi.DELETE("/:id", r.handleDeleteDevice)
+}
+
+//func (r DeviceApiHandler) handleRegister(context echo.Context) error {
+//	var registrationData struct {
+//		Code string `json:"code"`
+//	}
+//
+//	var errorResponse struct {
+//		Error string `json:"error"`
+//	}
+//
+//	error := context.Bind(&registrationData)
+//
+//	if error != nil {
+//		log.Info().Msgf("failed to bind registration data: %s", error)
+//		errorResponse.Error = fmt.Sprintf("%s", error)
+//		context.JSON(400, errorResponse)
+//		return error
+//	}
+//
+//	token, error := r.deviceManger.Register(registrationData.Code)
+//
+//	if error != nil {
+//		log.Info().Msgf("failed to register: %s", error)
+//		errorResponse.Error = fmt.Sprintf("%s", error)
+//		context.JSON(400, errorResponse)
+//		return error
+//	}
+//
+//	thirdyDays := 30 * 24 * 60 * 60
+//
+//	cookie := &http.Cookie{
+//		Name:     "token",
+//		Value:    token,
+//		Path:     "/",
+//		HttpOnly: true,
+//		MaxAge:   thirdyDays,
+//	}
+//
+//	context.SetCookie(cookie)
+//
+//	return context.JSON(200, "")
+//}
+
+//func (r UsersApiHandler) handleDeregister(context echo.Context) error {
+//	r.removeTokenCookie(&context)
+//	context.JSON(200, "")
+//
+//	authContext := context.(AuthContext)
+//
+//	session := authContext.Session
+//	r.userManager.DeleteSession(session.Token)
+//
+//	return nil
+//}
+
+func (r DeviceApiHandler) handleGetSessionInfo(context echo.Context) error {
+	//authContext := context.(AuthContext)
+	//user := authContext.User
+
+	response := struct {
+		IntegrationID   string `json:"integration_id"`
+		IntegrationName string `json:"integration_name"`
+		DeviceID        string `json:"device_id"`
+		DeviceName      string `json:"device_name"`
+	}{
+		IntegrationID:   "",
+		IntegrationName: "",
+		DeviceID:        "",
+		DeviceName:      "",
+	}
+
+	return context.JSON(200, response)
+}
+
+func (r DeviceApiHandler) handleGetDevices(context echo.Context) error {
+	users, error := r.deviceManager.GetDevices()
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("failed to get device list: %s", error))
+	}
+
+	return context.JSON(200, users)
+}
+
+func (r DeviceApiHandler) handleCreateDevice(context echo.Context) error {
+	var newDevice d.PlaybackDevice
+	error := context.Bind(&newDevice)
+
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to create playback device: %s", error))
+		return error
+	}
+
+	id, error := r.deviceManager.CreateDevice(&newDevice)
+
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to create playback device: %s", error))
+		return error
+	}
+
+	newDevice.ID = id
+
+	return context.JSON(200, newDevice)
+}
+
+func (r DeviceApiHandler) handleDeleteDevice(context echo.Context) error {
+	id := context.Param("id")
+
+	exists, error := r.deviceManager.DeviceIdExists(id)
+
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to delete playbac device: %s", error))
+		return error
+	}
+
+	if !exists {
+		SendError(404, context, fmt.Sprintf("Failed to delete playback device: Could not find device id %s", id))
+		return fmt.Errorf("not found")
+	}
+
+	error = r.deviceManager.DeleteDevice(id)
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to delete playback device: %s", error))
+		return error
+	}
+
+	return context.JSON(200, "")
+}
+
+func (r *DeviceApiHandler) handleUpdateConfig(context echo.Context) error {
+	id := context.Param("id")
+
+	var newDevice d.PlaybackDevice
+	error := context.Bind(&newDevice)
+
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to update device config: %s", error))
+		return error
+	}
+
+	newDevice.ID = id
+	error = r.deviceManager.UpdateDevice(&newDevice)
+
+	if error != nil {
+		SendError(500, context, fmt.Sprintf("Failed to update device config: %s", error))
+		return error
+	}
+
+	return context.JSON(200, newDevice)
+}
+
+func (r *DeviceApiHandler) SetRouter(router *echo.Echo) {
+	r.router = router
+}
+
+func (r *DeviceApiHandler) SetDeviceManager(deviceManager *m.DeviceManager) {
+	r.deviceManager = deviceManager
+}

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>
     );