Hide DNS-Hole control buttons option (#1384)

This commit is contained in:
Tagaishi
2023-09-15 18:17:46 +02:00
committed by GitHub
parent 10a3898775
commit c777a774f7
2 changed files with 84 additions and 55 deletions

View File

@@ -1,6 +1,12 @@
{
"descriptor": {
"name": "DNS hole controls",
"description": "Control PiHole or AdGuard from your dashboard"
"description": "Control PiHole or AdGuard from your dashboard",
"settings": {
"title": "DNS hole controls settings",
"showToggleAllButtons": {
"label": "Show 'Enable/Disable All' Buttons"
}
}
}
}

View File

@@ -24,7 +24,12 @@ import { useDnsHoleSummeryQuery } from './DnsHoleSummary';
const definition = defineWidget({
id: 'dns-hole-controls',
icon: IconDeviceGamepad,
options: {},
options: {
showToggleAllButtons: {
type: 'switch',
defaultValue: true,
},
},
gridstack: {
minWidth: 2,
minHeight: 1,
@@ -102,51 +107,66 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
};
return (
<Stack justify="space-between" h={'100%'} spacing="0.25rem">
<SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
<Button
onClick={async () => {
await mutateAsync({
action: 'enable',
configName,
appsToChange: getDnsStatus()?.disabled,
},{
onSettled: () => {
reFetchSummaryDns();
}
});
}}
disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerPlay size={20} />}
variant="light"
color="green"
h="2rem"
>
{t('enableAll')}
</Button>
<Button
onClick={async () => {
await mutateAsync({
action: 'disable',
configName,
appsToChange: getDnsStatus()?.enabled,
},{
onSettled: () => {
reFetchSummaryDns();
}
});
}}
disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerStop size={20} />}
variant="light"
color="red"
h="2rem"
>
{t('disableAll')}
</Button>
</SimpleGrid>
<Stack h={'100%'} spacing="0.25rem">
{widget.properties.showToggleAllButtons && (
<SimpleGrid ref={ref} cols={width > 275 ? 2 : 1} spacing="0.25rem">
<Button
onClick={async () => {
await mutateAsync(
{
action: 'enable',
configName,
appsToChange: getDnsStatus()?.disabled,
},
{
onSettled: () => {
reFetchSummaryDns();
},
}
);
}}
disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerPlay size={20} />}
variant="light"
color="green"
h="2rem"
>
{t('enableAll')}
</Button>
<Button
onClick={async () => {
await mutateAsync(
{
action: 'disable',
configName,
appsToChange: getDnsStatus()?.enabled,
},
{
onSettled: () => {
reFetchSummaryDns();
},
}
);
}}
disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerStop size={20} />}
variant="light"
color="red"
h="2rem"
>
{t('disableAll')}
</Button>
</SimpleGrid>
)}
<Stack spacing="0.25rem">
<Stack
spacing="0.25rem"
display="flex"
style={{
flex: '1',
justifyContent: widget.properties.showToggleAllButtons ? 'flex-end' : 'space-evenly',
}}
>
{data.status.map((dnsHole, index) => {
const app = config?.apps.find((x) => x.id === dnsHole.appId);
@@ -155,7 +175,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
}
return (
<Card withBorder={true} key={dnsHole.appId} p="xs">
<Card withBorder={true} key={dnsHole.appId} p="xs" radius="md">
<Group>
<Box
sx={(theme) => ({
@@ -172,15 +192,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
<Text>{app.name}</Text>
<UnstyledButton
onClick={async () => {
await mutateAsync({
action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
configName,
appsToChange: [app.id],
},{
onSettled: () => {
reFetchSummaryDns();
await mutateAsync(
{
action: dnsHole.status === 'enabled' ? 'disable' : 'enable',
configName,
appsToChange: [app.id],
},
{
onSettled: () => {
reFetchSummaryDns();
},
}
});
);
}}
disabled={fetchingDnsSummary || changingStatus}
>