Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 09:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Hide DNS-Hole control buttons option (#1384)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
public/locales/en/modules/dns-hole-controls.json
View File

@@ -1,6 +1,12 @@
{ {
"descriptor": { "descriptor": {
"name": "DNS hole controls", "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"
}
}
} }
} }

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

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