jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add dns disable timer (#2029)

Browse Source
This commit is contained in:
Yossi Hillali
2024-05-23 19:18:06 +03:00
committed by GitHub
parent cb2b28ca4b
commit afdca50bd2
8 changed files with 273 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/widgets/dnshole/DnsHoleControls.tsx
View File

@@ -1,21 +1,29 @@
import {
ActionIcon,
Badge,
Box,
Button,
Card,
Center,
Flex,
Group,
Image,
SimpleGrid,
Stack,
Text,
Title,
Tooltip,
UnstyledButton,
} from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
import { useDisclosure } from '@mantine/hooks';
import {
IconClockPause,
IconDeviceGamepad,
IconPlayerPlay,
IconPlayerStop,
} from '@tabler/icons-react';
import { useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import { useState } from 'react';
import { useConfigContext } from '~/config/provider';
import { api } from '~/utils/api';
@@ -23,6 +31,7 @@ import { defineWidget } from '../helper';
import { WidgetLoading } from '../loading';
import { IWidget } from '../widgets';
import { useDnsHoleSummeryQuery } from './DnsHoleSummary';
import { TimerModal } from './TimerModal';
const definition = defineWidget({
id: 'dns-hole-controls',
@@ -69,9 +78,10 @@ const dnsLightStatus = (
function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
const { data: sessionData } = useSession();
const [opened, { close, open }] = useDisclosure(false);
const [appId, setAppId] = useState('');
const { isInitialLoading, data, isFetching: fetchingDnsSummary } = useDnsHoleSummeryQuery();
const { mutateAsync, isLoading: changingStatus } = useDnsHoleControlMutation();
const { width, ref } = useElementSize();
const { t } = useTranslation(['common', 'modules/dns-hole-controls']);
const enableControls = sessionData?.user.isAdmin ?? false;
@@ -124,10 +134,17 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
return dnsList;
};
const toggleDns = async (action: 'enable' | 'disable', appsToChange?: string[]) => {
const toggleDns = async (
action: 'enable' | 'disable',
appsToChange?: string[],
hours: number = 0,
minutes: number = 0
) => {
const duration = hours * 3600 + minutes * 60;
await mutateAsync(
{
action,
duration,
configName,
appsToChange,
},
@@ -137,40 +154,68 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
},
}
);
setAppId('');
};
return (
<Stack justify="space-between" h={'100%'} spacing="0.25rem">
<Stack h="100%" spacing="0.25rem">
{enableControls && widget.properties.showToggleAllButtons && (
<SimpleGrid
ref={ref}
cols={width > 275 ? 2 : 1}
verticalSpacing="0.25rem"
spacing="0.25rem"
>
<Button
onClick={() => toggleDns('enable', getDnsStatus()?.disabled)}
disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerPlay size={20} />}
variant="light"
color="green"
h="2rem"
>
{t('enableAll')}
</Button>
<Button
onClick={() => toggleDns('disable', getDnsStatus()?.enabled)}
disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerStop size={20} />}
variant="light"
color="red"
h="2rem"
>
{t('disableAll')}
</Button>
</SimpleGrid>
<Flex gap="xs">
<Tooltip label={t('enableAll')}>
<Button
onClick={() => toggleDns('enable', getDnsStatus()?.disabled)}
disabled={
getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus
}
variant="light"
color="green"
fullWidth
h="2rem"
>
<IconPlayerPlay size={20} />
</Button>
</Tooltip>
<Tooltip label={t('setTimer')}>
<Button
onClick={open}
disabled={
getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus
}
variant="light"
color="yellow"
fullWidth
h="2rem"
>
<IconClockPause size={20} />
</Button>
</Tooltip>
<Tooltip label={t('disableAll')}>
<Button
onClick={() => toggleDns('disable', getDnsStatus()?.enabled)}
disabled={
getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus
}
variant="light"
color="red"
fullWidth
h="2rem"
>
<IconPlayerStop size={20} />
</Button>
</Tooltip>
</Flex>
)}
<TimerModal
toggleDns={toggleDns}
getDnsStatus={getDnsStatus}
opened={opened}
close={close}
appId={appId}
/>
<Stack
spacing="0.25rem"
display="flex"
@@ -203,36 +248,50 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
</Box>
<Stack spacing="0rem">
<Text>{app.name}</Text>
<UnstyledButton
onClick={() =>
toggleDns(dnsHole.status === 'enabled' ? 'disable' : 'enable', [app.id])
}
disabled={fetchingDnsSummary || changingStatus}
style={{ pointerEvents: enableControls ? 'auto' : 'none' }}
>
<Badge
variant="dot"
color={dnsLightStatus(fetchingDnsSummary || changingStatus, dnsHole.status)}
styles={(theme) => ({
root: {
'&:hover': {
background:
theme.colorScheme === 'dark'
? theme.colors.dark[4]
: theme.colors.gray[2],
},
'&:active': {
background:
theme.colorScheme === 'dark'
? theme.colors.dark[5]
: theme.colors.gray[3],
},
},
})}
<Flex direction="row" gap="md">
<UnstyledButton
onClick={() =>
toggleDns(dnsHole.status === 'enabled' ? 'disable' : 'enable', [app.id])
}
disabled={fetchingDnsSummary || changingStatus}
style={{ pointerEvents: enableControls ? 'auto' : 'none' }}
>
{t(dnsHole.status)}
</Badge>
</UnstyledButton>
<Badge
variant="dot"
color={dnsLightStatus(fetchingDnsSummary || changingStatus, dnsHole.status)}
styles={(theme) => ({
root: {
'&:hover': {
background:
theme.colorScheme === 'dark'
? theme.colors.dark[4]
: theme.colors.gray[2],
},
'&:active': {
background:
theme.colorScheme === 'dark'
? theme.colors.dark[5]
: theme.colors.gray[3],
},
},
})}
>
{t(dnsHole.status)}
</Badge>
</UnstyledButton>
<ActionIcon
size={20}
radius="xl"
top="2.67px"
variant="default"
onClick={() => {
setAppId(app.id);
open();
}}
>
<IconClockPause size={20} color="red" />
</ActionIcon>
</Flex>
</Stack>
</Group>
</Card>