playback-device-server/www/src/views/devices-view.jsx

import {
  createResource,
  createSignal,
  mergeProps,
  onMount,
  Show,
} from "solid-js";

import List from "../modules/list";
import CreateDeviceModal from "../modals/create-device-modal";
import DeviceService from "../services/device-service";
import ShowRegistrationCodeModal from "../modals/show-registration-code-modal";
import DeleteIntegrationModal from "../modals/delete-integration-modal";

function DevicesView(props) {
  props = mergeProps({ onIntegrationClicked: () => {} }, props);
  const DEVICES_LIST_TYPE = "devices";
  const INTEGRATION_LIST_TYPE = "integrations";

  const [listType, setListType] = createSignal(INTEGRATION_LIST_TYPE);
  const [devices, setDevices] = createSignal([]);
  const [integrations, { refetch: refetchIntegrations }] = createResource(
    DeviceService.getIntegrations
  );

  CreateDeviceModal.onDeviceCreated(() => {
    handleRefreshDevices();
  });

  onMount(() => {
    handleRefreshDevices();
    DeleteIntegrationModal.onIntegrationDeleted(() => {
      refetchIntegrations();
    });
  });

  function handleNewDevice() {
    CreateDeviceModal.Handler.show();
  }

  async function handleRefreshDevices() {
    let devices = await DeviceService.getDevices();
    setDevices(devices);
  }

  function handleRegisterIntegration() {
    ShowRegistrationCodeModal.Handler.show();
  }

  function handleDeleteIntegration(integration) {
    DeleteIntegrationModal.setIntegration(integration);
    DeleteIntegrationModal.Handler.show();
  }

  function handleIntegrationItemClicked(item) {
    props.onIntegrationClicked(item.integration);
  }

  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() === INTEGRATION_LIST_TYPE
                ? " btn-secondary"
                : " btn-dark")
            }
            onClick={() => setListType(INTEGRATION_LIST_TYPE)}
          >
            <i class="bi bi-gear me-2"></i>
            Integrations
          </button>
          <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>
        </div>
        <div class="d-flex flex-row justify-content-end flex-fill">
          <Show when={listType() === DEVICES_LIST_TYPE}>
            <button class="btn btn-dark me-2 mb-3" onClick={handleNewDevice}>
              <i class="bi bi-plus-square me-2"></i>
              New Device
            </button>
          </Show>
          <Show when={listType() === INTEGRATION_LIST_TYPE}>
            <button
              class="btn btn-dark me-2 mb-3"
              onClick={handleRegisterIntegration}
            >
              <i class="bi bi-plus-square me-2"></i>
              Register
            </button>
          </Show>
        </div>
      </div>
      <Show when={listType() === DEVICES_LIST_TYPE}>
        <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>
      </Show>
      <Show when={listType() === INTEGRATION_LIST_TYPE}>
        <List
          onListItemClick={handleIntegrationItemClicked}
          items={(integrations() || []).map((integration) => ({
            id: {
              html: <span class="font-monospace">{integration.getId()}</span>,
            },
            name: {
              text: integration.getName(),
            },
            options: {
              html: (
                <>
                  <button
                    class="btn btn-outline-secondary me-2"
                    onClick={(event) => {
                      event.stopPropagation();
                      handleDeleteIntegration(integration);
                    }}
                  >
                    <i class="bi bi-trash-fill"></i>
                  </button>
                </>
              ),
            },
            integration: integration,
          }))}
          class={"flex-fill"}
          columns={[
            {
              id: "id",
              name: "id",
              width: 6,
            },
            {
              id: "name",
              name: "Name",
            },
            {
              id: "options",
              name: "",
              width: 4,
            },
          ]}
        ></List>
      </Show>
    </div>
  );
}

export default DevicesView;