116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
import { Heading } from "../../components/UI/Typography/Heading.tsx";
|
|
import { useAppStore } from "@app/core/stores/appStore.ts";
|
|
import { useDeviceStore } from "@app/core/stores/deviceStore.ts";
|
|
import { Button } from "@components/UI/Button.tsx";
|
|
import { Separator } from "@components/UI/Seperator.tsx";
|
|
import { Subtle } from "@components/UI/Typography/Subtle.tsx";
|
|
import {
|
|
BluetoothIcon,
|
|
ListPlusIcon,
|
|
NetworkIcon,
|
|
PlusIcon,
|
|
UsbIcon,
|
|
UsersIcon,
|
|
} from "lucide-react";
|
|
import { useMemo } from "react";
|
|
|
|
export const Dashboard = () => {
|
|
const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
|
|
const { getDevices } = useDeviceStore();
|
|
|
|
const devices = useMemo(() => getDevices(), [getDevices]);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-3 p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Heading as="h3">Connected Devices</Heading>
|
|
<Subtle>Manage, connect and disconnect devices</Subtle>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
|
|
{devices.length
|
|
? (
|
|
<ul className="grow divide-y divide-slate-200">
|
|
{devices.map((device) => {
|
|
return (
|
|
<li key={device.id}>
|
|
<button
|
|
type="button"
|
|
className="w-full px-4 py-4 sm:px-6"
|
|
onClick={() => {
|
|
setSelectedDevice(device.id);
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<p className="truncate text-sm font-medium text-accent">
|
|
{device.nodes.get(device.hardware.myNodeNum)?.user
|
|
?.longName ?? "UNK"}
|
|
</p>
|
|
<div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
|
|
{device.connection?.connType === "ble" && (
|
|
<>
|
|
<BluetoothIcon size={16} />
|
|
BLE
|
|
</>
|
|
)}
|
|
{device.connection?.connType === "serial" && (
|
|
<>
|
|
<UsbIcon size={16} />
|
|
Serial
|
|
</>
|
|
)}
|
|
{device.connection?.connType === "http" && (
|
|
<>
|
|
<NetworkIcon size={16} />
|
|
Network
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 sm:flex sm:justify-between">
|
|
<div className="flex gap-2 text-sm text-slate-500">
|
|
<UsersIcon
|
|
size={20}
|
|
className="text-slate-400"
|
|
aria-hidden="true"
|
|
/>
|
|
{device.nodes.size === 0
|
|
? 0
|
|
: device.nodes.size - 1}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)
|
|
: (
|
|
<div className="m-auto flex flex-col gap-3 text-center">
|
|
<ListPlusIcon
|
|
size={48}
|
|
className="mx-auto text-text-secondary"
|
|
/>
|
|
<Heading as="h3">No Devices</Heading>
|
|
<Subtle>Connect at least one device to get started</Subtle>
|
|
<Button
|
|
className="gap-2"
|
|
variant="default"
|
|
onClick={() => setConnectDialogOpen(true)}
|
|
>
|
|
<PlusIcon size={16} />
|
|
New Connection
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|