81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { FiPower } from 'react-icons/fi';
|
|
import { buttonClasses, selectClasses, stackClasses } from 'styles';
|
|
import type { WolClient } from 'types';
|
|
|
|
function WakeOnLan({
|
|
wolClients,
|
|
selectedClient,
|
|
setSelectedClient,
|
|
handleWakeRequest,
|
|
}: {
|
|
wolClients: WolClient[];
|
|
selectedClient: WolClient | null;
|
|
setSelectedClient: any;
|
|
handleWakeRequest: () => void;
|
|
}) {
|
|
const { isMobile } = useCommonHooks();
|
|
return (
|
|
<Stack
|
|
gap={0}
|
|
pos={'relative'}
|
|
className={stackClasses.menuStack}
|
|
classNames={stackClasses}
|
|
style={{ aspectRatio: isMobile ? undefined : '1/1' }}
|
|
>
|
|
<Menu.Label>Wake on LAN</Menu.Label>
|
|
<Button
|
|
classNames={buttonClasses}
|
|
className={buttonClasses.wakeButton}
|
|
disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
|
|
onClick={() => {
|
|
handleWakeRequest();
|
|
}}
|
|
>
|
|
<FiPower size={32} />
|
|
</Button>
|
|
<Select
|
|
placeholder='Pick a host...'
|
|
defaultValue={wolClients?.[0]?.hostname}
|
|
onChange={(_, option: any) => {
|
|
setSelectedClient({
|
|
hostname: option?.hostname,
|
|
macAddress: option?.macAddress,
|
|
});
|
|
}}
|
|
withCheckIcon={false}
|
|
data={
|
|
wolClients
|
|
?.map((wolClient: WolClient) => {
|
|
return {
|
|
value: wolClient.hostname,
|
|
label: `${wolClient.hostname} (${wolClient.macAddress})`,
|
|
hostname: wolClient.hostname,
|
|
macAddress: wolClient.macAddress,
|
|
};
|
|
})
|
|
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
|
|
a.label.localeCompare(b.label),
|
|
) ?? []
|
|
}
|
|
w='92%'
|
|
classNames={{
|
|
root: selectClasses.menuSelectRoot,
|
|
input: selectClasses.menuSelectInput,
|
|
label: selectClasses.menuSelectLabel,
|
|
options: selectClasses.menuSelectOptions,
|
|
option: selectClasses.menuSelectOption,
|
|
}}
|
|
comboboxProps={{
|
|
withinPortal: false,
|
|
position: 'top',
|
|
width: 'fit-content',
|
|
}}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default WakeOnLan;
|