WoL Update

src/components/DataTable/columns/WolClientColumns.tsx

@@ -0,0 +1,50 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function WolClientColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.hostname) {
+						return `${row.hostname}`;
+					}
+					return '';
+				},
+				id: 'hostname',
+				header: 'Hostname',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.macAddress) {
+						return `${row.macAddress}`;
+					}
+					return '';
+				},
+				id: 'macAddress',
+				header: 'MAC Address',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/index.ts

@@ -9,3 +9,4 @@ export { CategoryColumns } from './DataTable/columns/CategoryColumns';
 export { MessagesColumns } from './DataTable/columns/MessagesColumns';
 export { PersonalizationColumns } from './DataTable/columns/PersonalizationColumns';
 export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns';
+export { WolClientColumns } from './DataTable/columns/WolClientColumns';

src/hooks/helpers.ts

@@ -45,11 +45,3 @@ export function containsProtocol(str: any) {
 	const pattern = /^(https?:\/\/).*/i;
 	return !!pattern.test(str);
 }
-
-export function runWakeCommand() {
-	const requestOptions = {
-		method: 'GET',
-		headers: { 'Content-Type': 'application/json' },
-	};
-	fetch(`/${import.meta.env.VITE_BASE_URL}/api/wakeDakota`, requestOptions);
-}

src/hooks/index.ts

@@ -1,3 +1,3 @@
 export { useQueryAPI, useWeatherAPI, useMutationAPI } from './useAPI';
-export { date, greet, runWakeCommand, validURL, containsProtocol } from './helpers';
+export { date, greet, validURL, containsProtocol } from './helpers';
 export { useCommonHooks } from './useCommonHooks';

src/hooks/useCommonHooks.ts

@@ -56,6 +56,12 @@ export function useCommonHooks() {
 		isFetching: providersIsFetching,
 		isLoading: providersIsLoading,
 	} = useQueryAPI({ endpoint: 'api/providers' });
+	const {
+		data: wolClients,
+		isFetched: wolClientsIsFetched,
+		isFetching: wolClientsIsFetching,
+		isLoading: wolClientsIsLoading,
+	} = useQueryAPI({ endpoint: 'api/wolClients' });
 	const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });
 	const { data: weather } = useWeatherAPI({ endpoint: 'current' });
 	const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
@@ -147,6 +153,14 @@ export function useCommonHooks() {
 		}
 	}, [providers, providersIsFetched]);
 
+	const [wolClientsData, setWolClientsData] = useState<any>([]);
+
+	useEffect(() => {
+		if (wolClients && wolClientsIsFetched) {
+			setWolClientsData(wolClients);
+		}
+	}, [wolClients, wolClientsIsFetched]);
+
 	return {
 		isMobile,
 		theme,
@@ -203,6 +217,11 @@ export function useCommonHooks() {
 		personalIsFetched,
 		personalIsFetching,
 		personalIsLoading,
+		wolClients,
+		wolClientsData,
+		wolClientsIsFetched,
+		wolClientsIsFetching,
+		wolClientsIsLoading,
 		notify,
 	};
 }

src/pages/homepage/components/SettingsButton.tsx

@@ -4,11 +4,12 @@ import {
 	Group,
 	Menu,
 	MultiSelect,
+	Select,
 	Stack,
 	Text,
 	Tooltip,
 } from '@mantine/core';
-import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiMenu, FiMonitor, FiSettings, FiShuffle } from 'react-icons/fi';
@@ -23,6 +24,7 @@ import {
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const { mutateAsync: wakeRequest } = useMutationAPI();
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const navigate = useNavigate();
 	const {
@@ -36,19 +38,30 @@ function SettingsButton() {
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
+		wolClients,
 		notify,
 	} = useCommonHooks();
 
+	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
+
+	const handleWakeRequest = () => {
+		wakeRequest({
+			method: 'POST',
+			endpoint: 'api/wakeClient',
+			body: selectedClient || wolClients?.[0],
+		});
+	};
+
 	useEffect(() => {
 		if (data) {
-			const list: [any] =
-				data.map((category: any) => {
-					return { value: category.filterName, label: category.filterName };
-				}) || [];
+			const list: [any] = data.map((category: any) => {
+				return { value: category.filterName, label: category.filterName };
+			});
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
 		}
 	}, [data, isFetched]);
+
 	return (
 		<Menu
 			classNames={menuClasses}
@@ -88,16 +101,35 @@ function SettingsButton() {
 							<Button
 								classNames={buttonClasses}
 								className={buttonClasses.wakeButton}
+								disabled={!wolClients?.length}
 								onClick={() => {
-									runWakeCommand();
+									handleWakeRequest();
 									notify('Wake command sent');
 								}}
 							>
 								<Stack gap={0} align='center'>
 									<FiMonitor size={40} />
-									<Text>Dakota</Text>
 								</Stack>
 							</Button>
+							<Select
+								labelProps={{ display: 'none' }}
+								placeholder='Pick a host...'
+								defaultValue={wolClients?.[0]?.hostname}
+								data={
+									wolClients?.map((wolClient: any) => {
+										return {
+											value: wolClient.hostname,
+											label: `${wolClient.hostname} (${wolClient.macAddress})`,
+											hostname: wolClient.hostname,
+											macAddress: wolClient.macAddress,
+										};
+									}) || []
+								}
+								classNames={selectClasses}
+								comboboxProps={{ withinPortal: false }}
+								onChange={(_value, option: any) => setSelectedClient(option)}
+								onLoad={(option: any) => setSelectedClient(option)}
+							/>
 						</Stack>
 						<Stack
 							gap={0}

src/pages/settings/Settings.tsx

@@ -7,6 +7,7 @@ import {
 	FiEdit,
 	FiGlobe,
 	FiMail,
+	FiMonitor,
 	FiSearch,
 	FiUser,
 } from 'react-icons/fi';
@@ -19,6 +20,7 @@ import Messages from './components/Messages';
 import Personalization from './components/Personalization';
 import SearchProviders from './components/SearchProviders';
 import Themes from './components/Themes';
+import WolClients from './components/WolClients';
 
 export function Settings() {
 	const { isMobile } = useCommonHooks();
@@ -60,6 +62,9 @@ export function Settings() {
 					<Tabs.Tab value='providers'>
 						{isMobile ? <FiSearch /> : 'Search Providers'}
 					</Tabs.Tab>
+					<Tabs.Tab value='wolClients'>
+						{isMobile ? <FiMonitor /> : 'WoL Clients'}
+					</Tabs.Tab>
 				</Tabs.List>
 				<Tabs.Panel value='personalization'>
 					<Personalization />
@@ -82,6 +87,9 @@ export function Settings() {
 				<Tabs.Panel value='providers'>
 					<SearchProviders />
 				</Tabs.Panel>
+				<Tabs.Panel value='wolClients'>
+					<WolClients />
+				</Tabs.Panel>
 			</Tabs>
 		</Stack>
 	);

src/pages/settings/components/WolClients.tsx

@@ -0,0 +1,26 @@
+import { Stack, Text } from '@mantine/core';
+import { DataTable, WolClientColumns } from 'components';
+import { useCommonHooks } from 'hooks';
+import { textClasses } from 'styles';
+
+const WolClientSettings = () => {
+	const endpoint = 'api/wolClients';
+	const { wolClientsData, wolClientsIsFetching, wolClientsIsLoading } = useCommonHooks();
+
+	return (
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				WoL Clients
+			</Text>
+			<DataTable
+				tableName='WoL Clients'
+				columns={WolClientColumns()}
+				tableData={wolClientsData}
+				isFetching={wolClientsIsFetching}
+				isLoading={wolClientsIsLoading}
+				endpoint={endpoint}
+			/>
+		</Stack>
+	);
+};
+export default WolClientSettings;