102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { Button, Menu, NavLink, Select, Stack } from '@mantine/core';
|
|
import { useEffect, useState } from 'react';
|
|
import { FiMenu, FiMonitor } from 'react-icons/fi';
|
|
import {useQueryAPI} from '../../../hooks/useAPI';
|
|
import button from '../../../styles/Button.module.css';
|
|
import menu from '../../../styles/Menu.module.css';
|
|
import navLink from '../../../styles/NavLink.module.css';
|
|
import selectClasses from '../../../styles/Select.module.css';
|
|
import { useAtom } from 'jotai';
|
|
import { HomepageFilters } from '../../../contexts/HomepageFilters';
|
|
|
|
function SettingsButton() {
|
|
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
|
|
const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
|
|
const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
|
|
const classNames = {
|
|
root: navLink.root,
|
|
body: navLink.body,
|
|
section: navLink.section,
|
|
label: navLink.label,
|
|
description: navLink.description,
|
|
chevron: navLink.chevron,
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(data) {
|
|
let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
|
|
list.unshift({value: 'All', label: 'All'});
|
|
setCategories(list);
|
|
}
|
|
}, [data, isFetched]);
|
|
|
|
function runWakeCommand() {
|
|
const requestOptions = {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
};
|
|
fetch('/trigger/api/wakeDakota', requestOptions);
|
|
}
|
|
return (
|
|
<Menu
|
|
withinPortal
|
|
withArrow
|
|
shadow='md'
|
|
position='top'
|
|
classNames={{
|
|
dropdown: menu.dropdown
|
|
}}
|
|
styles={{
|
|
dropdown: {
|
|
backgroundColor: 'var(--color-background)',
|
|
},
|
|
}}
|
|
>
|
|
<Menu.Target>
|
|
<Button className={button.settingsButton} classNames={button}>
|
|
<FiMenu />
|
|
</Button>
|
|
</Menu.Target>
|
|
<Menu.Dropdown
|
|
style={{
|
|
position: 'absolute',
|
|
}}
|
|
>
|
|
<NavLink
|
|
label='Settings'
|
|
component='a'
|
|
href='/trigger/settings'
|
|
classNames={classNames}
|
|
/>
|
|
<NavLink label='Quick Actions' classNames={classNames}>
|
|
<NavLink
|
|
label='Wake Dakota'
|
|
leftSection={<FiMonitor />}
|
|
onClick={() => runWakeCommand()}
|
|
classNames={classNames}
|
|
/>
|
|
</NavLink>
|
|
<Select
|
|
label='Homepage Filter'
|
|
data={categories ?? []}
|
|
defaultValue={localStorage.getItem('contenttype')}
|
|
withCheckIcon={false}
|
|
onChange={(data: any) => {
|
|
localStorage.setItem('contenttype', data || 'All');
|
|
setHomepageFilter({value: data, label: data});
|
|
}}
|
|
className={selectClasses.filterSelect}
|
|
classNames={selectClasses}
|
|
styles={{
|
|
label: {
|
|
color: 'var(--color-text-pri)',
|
|
},
|
|
}}
|
|
/>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default SettingsButton;
|