diff --git a/src/components/DataTable/columns/WolClientColumns.tsx b/src/components/DataTable/columns/WolClientColumns.tsx new file mode 100644 index 0000000..57a8bc3 --- /dev/null +++ b/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[]>( + () => [ + { + 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; +} diff --git a/src/components/index.ts b/src/components/index.ts index 5e5ab22..4231ba9 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/hooks/helpers.ts b/src/hooks/helpers.ts index fc7f8c7..269ff2b 100644 --- a/src/hooks/helpers.ts +++ b/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); -} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 4e18b62..f31da30 100644 --- a/src/hooks/index.ts +++ b/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'; diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 66ad763..f94765a 100644 --- a/src/hooks/useCommonHooks.ts +++ b/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([]); + + 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, }; } diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx index 6a5bf05..d0a9737 100644 --- a/src/pages/homepage/components/SettingsButton.tsx +++ b/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(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 ( { - runWakeCommand(); + handleWakeRequest(); notify('Wake command sent'); }} > - Dakota +