Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-01-05 23:29:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into i10n_dev

Browse Source
This commit is contained in:
Meier Lukas
2023-07-17 13:34:17 +02:00
committed by GitHub
parent e789c95984 24d15a0d7c
commit 630a9c40c5
26 changed files with 870 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/bug.yml vendored
View File

@@ -35,7 +35,7 @@ body:
label: Logs
description: Provide your Homarr logs so we can investigate what's going on
validations:
required: true
required: false
- type: textarea
id: context
attributes:

54
.github/workflows/docker_dev.yml vendored
View File

@@ -153,56 +153,4 @@ jobs:
- name: Build next.js app
# change this if your site requires a custom build command
run: yarn turbo build
# Here's the first place where next-bundle-analysis' own script is used
# This step pulls the raw bundle stats for the current bundle
- name: Analyze bundle
run: npx -p nextjs-bundle-analysis report
- name: Upload bundle
uses: actions/upload-artifact@v3
with:
name: bundle
path: .next/analyze/__bundle_analysis.json
- name: Download base branch bundle stats
uses: dawidd6/action-download-artifact@v2
continue-on-error: true
if: success() && github.event.number
with:
workflow: nextjs_bundle_analysis.yml
branch: ${{ github.event.pull_request.base.ref }}
path: .next/analyze/base
# And here's the second place - this runs after we have both the current and
# base branch bundle stats, and will compare them to determine what changed.
# There are two configurable arguments that come from package.json:
#
# - budget: optional, set a budget (bytes) against which size changes are measured
# it's set to 350kb here by default, as informed by the following piece:
# https://infrequently.org/2021/03/the-performance-inequality-gap/
#
# - red-status-percentage: sets the percent size increase where you get a red
# status indicator, defaults to 20%
#
# Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
# entry in your package.json file.
- name: Compare with base branch bundle
if: success() && github.event.number
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
- name: Get Comment Body
id: get-comment-body
if: success() && github.event.number
# https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
run: |
echo "body<<EOF" >> $GITHUB_OUTPUT
echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
echo EOF >> $GITHUB_OUTPUT
- name: Comment
uses: marocchino/sticky-pull-request-comment@v2
with:
header: next-touched-pages
message: ${{ steps.get-comment-body.outputs.body }}
run: yarn turbo build

2
README.md
View File

@@ -121,3 +121,5 @@ You can also support us by helping with [translating the entire project](https:/
**Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
All contributions, regardless of their size or scope, are welcome and highly appreciated! Thank you ❤️
![Alt](https://repobeats.axiom.co/api/embed/60a6f68f193faf831f64221bdf90782adec51c93.svg "Repobeats analytics image")

12
package.json
View File

@@ -63,7 +63,7 @@
"html-entities": "^2.3.3",
"i18next": "^22.5.1",
"js-file-download": "^0.4.12",
"next": "^13.4.2",
"next": "13.4.10",
"next-i18next": "^13.0.0",
"nzbget-api": "^0.0.3",
"prismjs": "^1.29.0",
@@ -76,7 +76,6 @@
"uuid": "^9.0.0",
"xml-js": "^1.6.11",
"xss": "^1.0.14",
"yarn": "^1.22.19",
"zod": "^3.21.4",
"zustand": "^4.3.7"
},
@@ -87,15 +86,15 @@
"@testing-library/react": "^14.0.0",
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
"@types/dockerode": "^3.3.9",
"@types/node": "18.16.18",
"@types/node": "18.16.19",
"@types/prismjs": "^1.26.0",
"@types/react": "^18.2.11",
"@types/uuid": "^9.0.0",
"@types/video.js": "^7.3.51",
"@typescript-eslint/eslint-plugin": "^5.50.0",
"@typescript-eslint/parser": "^5.30.7",
"@vitest/coverage-c8": "^0.32.0",
"@vitest/ui": "^0.32.0",
"@vitest/coverage-c8": "^0.33.0",
"@vitest/ui": "^0.33.0",
"eslint": "^8.0.1",
"eslint-config-next": "^13.4.5",
"eslint-plugin-promise": "^6.0.0",
@@ -113,10 +112,9 @@
"typescript": "^5.1.0",
"video.js": "^8.0.3",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.0",
"vitest": "^0.33.0",
"vitest-fetch-mock": "^0.2.2"
},
"packageManager": "yarn@3.6.0",
"nextBundleAnalysis": {
"budget": null,
"budgetPercentIncreaseRed": 20,

5
public/locales/en/modules/calendar.json
View File

@@ -14,7 +14,10 @@
"label": "Radarr release type"
},
"hideWeekDays": {
"label": ""
"label": "Hide week days"
},
"fontSize": {
"label": "Font Size"
}
}
}

10
public/locales/en/settings/customization/accessibility.json
View File

@@ -1,11 +1,11 @@
{
"disablePulse": {
"label": "",
"description": ""
"label": "Disable ping pulse",
"description": "By default, ping indicators in Homarr will pulse. This may be irritating. This slider will deactivate the animation"
},
"replaceIconsWithDots": {
"label": "",
"description": ""
"label": "Replace ping dots with icons",
"description": "For colorblind users, ping dots may be unrecognizable. This will replace indicators with icons"
},
"alert": ""
"alert": "Are you missing something? We'll gladly extend the accessibility of Homarr"
}

4
public/locales/en/settings/customization/general.json
View File

@@ -18,8 +18,8 @@
"description": "Customize the background, colors and apps appearance"
},
"accessibility": {
"name": "",
"description": ""
"name": "Accessibility",
"description": "Configure Homarr for disabled and handicapped users"
}
}
}

112
src/components/Dashboard/Tiles/Apps/AppPing.tsx
View File

@@ -1,10 +1,12 @@
import { Indicator, Tooltip } from '@mantine/core';
import { Box, Indicator, Tooltip } from '@mantine/core';
import { IconCheck, IconCheckbox, IconDownload, IconLoader, IconX } from '@tabler/icons-react';
import Consola from 'consola';
import { motion } from 'framer-motion';
import { TargetAndTransition, Transition, motion } from 'framer-motion';
import { useTranslation } from 'next-i18next';
import { api } from '~/utils/api';
import { useConfigContext } from '../../../../config/provider';
import { AppType } from '../../../../types/app';
import { api } from '~/utils/api';
interface AppPingProps {
app: AppType;
@@ -16,19 +18,53 @@ export const AppPing = ({ app }: AppPingProps) => {
const active =
(config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
false;
const { data, isLoading, error } = usePingQuery(app, active);
const isOnline = data?.state === 'online';
const { data, isLoading, isFetching, isSuccess } = api.app.ping.useQuery(app.id, {
retry: false,
enabled: active,
select: (data) => {
const isOk = getIsOk(app, data.status);
Consola.info(`Ping ${app.name} (${app.url}) ${data.status} ${isOk}`);
return {
status: data.status,
state: isOk ? ('online' as const) : ('down' as const),
statusText: data.statusText,
};
},
});
if (!active) return null;
const isOnline = data?.state === 'online';
const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
const replaceDotWithIcon =
config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
const scaleAnimation = isOnline ? [1, 0.7, 1] : 1;
const animate: TargetAndTransition | undefined = disablePulse
? undefined
: {
scale: scaleAnimation,
};
const transition: Transition | undefined = disablePulse
? undefined
: {
repeat: Infinity,
duration: 2.5,
ease: 'easeInOut',
};
return (
<motion.div
style={{ position: 'absolute', bottom: 20, right: 20, zIndex: 2 }}
animate={{
scale: isOnline ? [1, 0.7, 1] : 1,
style={{
position: 'absolute',
bottom: replaceDotWithIcon ? 5 : 20,
right: replaceDotWithIcon ? 8 : 20,
zIndex: 2,
}}
transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
animate={animate}
transition={transition}
>
<Tooltip
withinPortal
@@ -36,40 +72,46 @@ export const AppPing = ({ app }: AppPingProps) => {
label={
isLoading
? t('states.loading')
: isOnline
? t('states.online', { response: data.status })
: t('states.offline', { response: data?.status ?? error?.data?.httpStatus })
: data?.state === 'online'
? t('states.online', { response: data?.status ?? 'N/A' })
: `${data?.statusText} ${data?.status}`
}
>
<Indicator
size={15}
color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
children={null}
/>
{config?.settings.customization.accessibility?.replacePingDotsWithIcons ? (
<Box>
<AccessibleIndicatorPing isLoading={isLoading} isOnline={isOnline} />
</Box>
) : (
<Indicator
size={15}
color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
children={null}
/>
)}
</Tooltip>
</motion.div>
);
};
const usePingQuery = (app: AppType, isEnabled: boolean) =>
api.app.ping.useQuery(
{
url: app.url,
},
{
enabled: isEnabled,
select: (data) => {
const statusCode = data.status;
const isOk = getIsOk(app, statusCode);
return {
status: statusCode,
state: isOk ? ('online' as const) : ('down' as const),
};
},
}
);
const AccessibleIndicatorPing = ({
isLoading,
isOnline,
}: {
isOnline: boolean;
isLoading: boolean;
}) => {
if (isOnline) {
return <IconCheck color="green" />;
}
const getIsOk = (app: AppType, status: number) => {
if (isLoading) {
return <IconLoader />;
}
return <IconX color="red" />;
};
export const getIsOk = (app: AppType, status: number) => {
if (app.network.okStatus === undefined || app.network.statusCodes.length >= 1) {
Consola.log('Using new status codes');
return app.network.statusCodes.includes(status.toString());

80
src/components/Settings/Customization/Accessibility/AccessibilitySettings.tsx Normal file
View File

@@ -0,0 +1,80 @@
import { Alert, Stack, Switch } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { BaseSyntheticEvent } from 'react';
import { useConfigStore } from '../../../../config/store';
import { useConfigContext } from '../../../../config/provider';
import { useTranslation } from 'react-i18next';
export const AccessibilitySettings = () => {
const { t } = useTranslation('settings/customization/accessibility');
const { updateConfig } = useConfigStore();
const { config, name: configName } = useConfigContext();
return (
<Stack>
<Switch
label={t('disablePulse.label')}
description={t('disablePulse.description')}
defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
onChange={(value: BaseSyntheticEvent) => {
if (!configName) {
return;
}
updateConfig(
configName,
(previousConfig) => ({
...previousConfig,
settings: {
...previousConfig.settings,
customization: {
...previousConfig.settings.customization,
accessibility: {
...previousConfig.settings.customization.accessibility,
disablePingPulse: value.target.checked,
},
},
},
}),
false,
true
);
}}
/>
<Switch
label={t('replaceIconsWithDots.label')}
description={t('replaceIconsWithDots.description')}
defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
onChange={(value: BaseSyntheticEvent) => {
if (!configName) {
return;
}
updateConfig(
configName,
(previousConfig) => ({
...previousConfig,
settings: {
...previousConfig.settings,
customization: {
...previousConfig.settings.customization,
accessibility: {
...previousConfig.settings.customization.accessibility,
replacePingDotsWithIcons: value.target.checked,
},
},
},
}),
false,
true
);
}}
/>
<Alert icon={<IconInfoCircle size="1rem" />} color="blue">
{t('alert')}
</Alert>
</Stack>
);
};

10
src/components/Settings/Customization/CustomizationAccordeon.tsx
View File

@@ -1,5 +1,5 @@
import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
import { IconAccessible, IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
import { i18n, useTranslation } from 'next-i18next';
import { ReactNode } from 'react';
import { GridstackConfiguration } from './Layout/GridstackConfiguration';
@@ -13,6 +13,7 @@ import { ColorSelector } from './Theme/ColorSelector';
import { CustomCssChanger } from './Theme/CustomCssChanger';
import { DashboardTilesOpacitySelector } from './Theme/OpacitySelector';
import { ShadeSelector } from './Theme/ShadeSelector';
import { AccessibilitySettings } from './Accessibility/AccessibilitySettings';
export const CustomizationSettingsAccordeon = () => {
const items = getItems().map((item) => (
@@ -70,6 +71,13 @@ const getItems = () => {
description: t('accordeon.gridstack.description'),
content: <GridstackConfiguration />,
},
{
id: 'accessibility',
image: <IconAccessible />,
label: t('accordeon.accessibility.name'),
description: t('accordeon.accessibility.description'),
content: <AccessibilitySettings />,
},
{
id: 'page_metadata',
image: <IconChartCandle />,

2
src/components/Settings/Customization/Layout/LayoutSelector.tsx
View File

@@ -159,7 +159,7 @@ export const LayoutSelector = () => {
/>
<Checkbox
label={t('layout.enableping')}
checked={ping}
checked={enabledPing}
onChange={(ev) => handleChange('enabledPing', ev, setPing)}
/>
</Stack>

2
src/modules/Docker/DockerModule.tsx
View File

@@ -31,6 +31,8 @@ export default function DockerMenuButton(props: any) {
setSelection([]);
};
if (!dockerEnabled) return null;
return (
<>
<Drawer

2
src/pages/api/modules/dns-hole/control.ts
View File

@@ -57,7 +57,7 @@ const processAdGuard = async (app: ConfigAppType, enable: boolean) => {
};
const processPiHole = async (app: ConfigAppType, enable: boolean) => {
const pihole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
const pihole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
if (enable) {
await pihole.enable();

6
src/pages/api/modules/dns-hole/summary.spec.ts
View File

@@ -28,7 +28,7 @@ describe('DNS hole', () => {
type: 'pihole',
properties: [
{
field: 'password',
field: 'apiKey',
type: 'private',
value: 'hf3829fj238g8',
},
@@ -130,7 +130,7 @@ describe('DNS hole', () => {
type: 'pihole',
properties: [
{
field: 'password',
field: 'apiKey',
type: 'private',
value: 'hf3829fj238g8',
},
@@ -144,7 +144,7 @@ describe('DNS hole', () => {
type: 'pihole',
properties: [
{
field: 'password',
field: 'apiKey',
type: 'private',
value: 'ayaka',
},

2
src/pages/api/modules/dns-hole/summary.ts
View File

@@ -32,7 +32,7 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
try {
switch (app.integration?.type) {
case 'pihole': {
const piHole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
const piHole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
const summary = await piHole.getSummary();
data.domainsBeingBlocked += summary.domains_being_blocked;

78
src/server/api/routers/app.ts
View File

@@ -1,46 +1,58 @@
import { z } from 'zod';
import axios, { AxiosError } from 'axios';
import https from 'https';
import Consola from 'consola';
import { TRPCError } from '@trpc/server';
import axios, { AxiosError } from 'axios';
import Consola from 'consola';
import { getCookie } from 'cookies-next';
import https from 'https';
import { z } from 'zod';
import { getIsOk } from '~/components/Dashboard/Tiles/Apps/AppPing';
import { getConfig } from '~/tools/config/getConfig';
import { AppType } from '~/types/app';
import { createTRPCRouter, publicProcedure } from '../trpc';
export const appRouter = createTRPCRouter({
ping: publicProcedure
.input(
z.object({
url: z.string(),
})
)
.query(async ({ input }) => {
const agent = new https.Agent({ rejectUnauthorized: false });
const res = await axios
.get(input.url, { httpsAgent: agent, timeout: 2000 })
.then((response) => ({
status: response.status,
statusText: response.statusText,
}))
.catch((error: AxiosError) => {
if (error.response) {
Consola.warn(`Unexpected response: ${error.message}`);
ping: publicProcedure.input(z.string()).query(async ({ input }) => {
const agent = new https.Agent({ rejectUnauthorized: false });
const configName = getCookie('config-name');
const config = getConfig(configName?.toString() ?? 'default');
const app = config.apps.find((app) => app.id === input);
const url = app?.url;
if (url === undefined || !app) {
throw new TRPCError({
code: 'NOT_FOUND',
message: 'App or url not found',
});
}
const res = await axios
.get(url, { httpsAgent: agent, timeout: 2000 })
.then((response) => ({
status: response.status,
statusText: response.statusText,
}))
.catch((error: AxiosError) => {
if (error.response) {
if (getIsOk(app as AppType, error.response.status)) {
return {
state: 'offline',
status: error.response.status,
statusText: error.response.statusText,
};
}
if (error.code === 'ECONNABORTED') {
throw new TRPCError({
code: 'TIMEOUT',
message: 'Request Timeout',
});
}
Consola.error(`Unexpected error: ${error.message}`);
}
if (error.code === 'ECONNABORTED') {
throw new TRPCError({
code: 'INTERNAL_SERVER_ERROR',
message: 'Internal Server Error',
code: 'TIMEOUT',
message: 'Request Timeout',
});
}
Consola.error(`Unexpected response: ${error.message}`);
throw new TRPCError({
code: 'INTERNAL_SERVER_ERROR',
cause: app.id,
message: error.message,
});
return res;
}),
});
return res;
}),
});

4
src/server/api/routers/dns-hole.ts
View File

@@ -97,7 +97,7 @@ const processAdGuard = async (app: ConfigAppType, enable: boolean) => {
};
const processPiHole = async (app: ConfigAppType, enable: boolean) => {
const pihole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
const pihole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
if (enable) {
await pihole.enable();
@@ -108,7 +108,7 @@ const processPiHole = async (app: ConfigAppType, enable: boolean) => {
};
const collectPiHoleSummary = async (app: ConfigAppType) => {
const piHole = new PiHoleClient(app.url, findAppProperty(app, 'password'));
const piHole = new PiHoleClient(app.url, findAppProperty(app, 'apiKey'));
const summary = await piHole.getSummary();
return {

48
src/tools/config/getFrontendConfig.ts
View File

@@ -1,11 +1,13 @@
import Consola from 'consola';
import fs from 'fs';
import { IntegrationField } from '~/types/app';
import { BackendConfigType, ConfigType } from '../../types/config';
import { getConfig } from './getConfig';
import { fetchCity } from '~/server/api/routers/weather';
export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
let config = getConfig(name);
let shouldMigrateConfig = false;
const anyWeatherWidgetWithStringLocation = config.widgets.some(
(widget) => widget.type === 'weather' && typeof widget.properties.location === 'string'
@@ -13,6 +15,27 @@ export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
if (anyWeatherWidgetWithStringLocation) {
config = await migrateLocation(config);
shouldMigrateConfig = true;
}
const anyPiholeIntegrationWithPassword = config.apps.some(
(app) =>
app?.integration?.type === 'pihole' &&
app?.integration?.properties.length &&
app.integration.properties.some((property) => property.field === 'password')
);
if (anyPiholeIntegrationWithPassword) {
config = migratePiholeIntegrationField(config);
shouldMigrateConfig = true;
}
if (shouldMigrateConfig) {
Consola.info(`Migrating config ${config.configProperties.name}`);
fs.writeFileSync(
`./data/configs/${config.configProperties.name}.json`,
JSON.stringify(config, null, 2)
);
}
Consola.info(`Requested frontend content of configuration '${name}'`);
@@ -54,7 +77,6 @@ export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
const migrateLocation = async (config: BackendConfigType) => {
Consola.log('Migrating config file to new location schema...', config.configProperties.name);
const configName = config.configProperties.name;
const migratedConfig = {
...config,
widgets: await Promise.all(
@@ -82,7 +104,27 @@ const migrateLocation = async (config: BackendConfigType) => {
),
};
fs.writeFileSync(`./data/configs/${configName}.json`, JSON.stringify(migratedConfig, null, 2));
return migratedConfig;
};
const migratePiholeIntegrationField = (config: BackendConfigType) => {
Consola.log('Migrating pihole integration field to apiKey...', config.configProperties.name);
return {
...config,
apps: config.apps.map((app) => {
if (app?.integration?.type === 'pihole' && Array.isArray(app?.integration?.properties)) {
const migratedProperties = app.integration.properties.map((property) => {
if (property.field === 'password') {
return {
...property,
field: 'apiKey' as IntegrationField,
};
}
return property;
});
return { ...app, integration: { ...app.integration, properties: migratedProperties } };
}
return app;
}),
};
};

4
src/tools/config/migrateConfig.ts
View File

@@ -44,6 +44,10 @@ export function migrateConfig(config: Config): BackendConfigType {
enabledRightSidebar: false,
enabledSearchbar: config.modules.search?.enabled ?? true,
},
accessibility: {
disablePingPulse: false,
replacePingDotsWithIcons: false,
},
},
},
wrappers: [

1
src/tools/server/translation-namespaces.ts
View File

@@ -13,6 +13,7 @@ export const dashboardNamespaces = [
'settings/general/internationalization',
'settings/general/search-engine',
'settings/general/widget-positions',
'settings/customization/accessibility',
'settings/customization/general',
'settings/customization/color-selector',
'settings/customization/page-appearance',

2
src/types/app.ts
View File

@@ -86,7 +86,7 @@ export const integrationFieldProperties: {
transmission: ['username', 'password'],
jellyfin: ['username', 'password'],
plex: ['apiKey'],
pihole: ['password'],
pihole: ['apiKey'],
adGuardHome: ['username', 'password'],
};

6
src/types/settings.ts
View File

@@ -45,6 +45,12 @@ export interface CustomizationSettingsType {
colors: ColorsCustomizationSettingsType;
appOpacity?: number;
gridstack?: GridstackSettingsType;
accessibility: AccessibilitySettings;
}
export interface AccessibilitySettings {
disablePingPulse: boolean;
replacePingDotsWithIcons: boolean;
}
export interface GridstackSettingsType {

66
src/widgets/calendar/CalendarDay.tsx
View File

@@ -1,18 +1,46 @@
import { Container, Indicator, IndicatorProps, Popover } from '@mantine/core';
import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { MediaList } from './MediaList';
import { MediasType } from './type';
interface CalendarDayProps {
date: Date;
medias: MediasType;
size: string;
}
export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
const [opened, { close, open }] = useDisclosure(false);
if (medias.totalCount === 0) {
return <div>{date.getDate()}</div>;
const { radius, fn } = useMantineTheme();
var indicatorSize = 10;
var indicatorOffset = -4;
switch(size){
case "xs": {
indicatorSize += 0;
indicatorOffset -= 0;
break;
}
case "sm": {
indicatorSize += 1;
indicatorOffset -= 1;
break;
}
case "md": {
indicatorSize += 2;
indicatorOffset -= 1;
break;
}
case "lg": {
indicatorSize += 3;
indicatorOffset -= 2;
break;
}
case "xl": {
indicatorSize += 4;
indicatorOffset -= 3;
break;
}
}
return (
@@ -29,11 +57,23 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
opened={opened}
>
<Popover.Target>
<Container p={10} onClick={open}>
<DayIndicator color="red" position="bottom-start" medias={medias.books}>
<DayIndicator color="yellow" position="top-start" medias={medias.movies}>
<DayIndicator color="blue" position="top-end" medias={medias.tvShows}>
<DayIndicator color="green" position="bottom-end" medias={medias.musics}>
<Container
onClick={medias.totalCount > 0 ? open : undefined}
sx={{ root: {
padding:'18% !important',
height: '100%',
width: '100%',
alignContent: 'center',
borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
borderStyle: "solid",
borderWidth: "0.2rem",
borderColor: opened ? fn.primaryColor() : 'transparent',
}}}
>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="green" position="bottom-end" medias={medias.musics}>
<div>{date.getDate()}</div>
</DayIndicator>
</DayIndicator>
@@ -49,17 +89,19 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
};
interface DayIndicatorProps {
size: any;
offset: any;
color: string;
medias: any[];
children: JSX.Element;
position: IndicatorProps['position'];
}
const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps) => {
const DayIndicator = ({ size, offset, color, medias, children, position }: DayIndicatorProps) => {
if (medias.length === 0) return children;
return (
<Indicator size={10} withBorder offset={-5} color={color} position={position}>
<Indicator size={size} withBorder offset={offset} color={color} position={position}>
{children}
</Indicator>
);

38
src/widgets/calendar/CalendarTile.tsx
View File

@@ -16,6 +16,10 @@ const definition = defineWidget({
id: 'calendar',
icon: IconCalendarTime,
options: {
hideWeekDays: {
type: 'switch',
defaultValue: true,
},
useSonarrv4: {
type: 'switch',
defaultValue: false,
@@ -33,6 +37,17 @@ const definition = defineWidget({
{ label: 'Digital', value: 'digitalRelease' },
],
},
fontSize:{
type: 'select',
defaultValue: 'xs',
data: [
{ label: 'Extra Small', value: 'xs' },
{ label: 'Small', value: 'sm' },
{ label: 'Medium', value: 'md' },
{ label: 'Large', value: 'lg' },
{ label: 'Extra Large', value: 'xl' },
]
},
},
gridstack: {
minWidth: 2,
@@ -50,7 +65,7 @@ interface CalendarTileProps {
}
function CalendarTile({ widget }: CalendarTileProps) {
const { colorScheme } = useMantineTheme();
const { colorScheme, radius } = useMantineTheme();
const { name: configName } = useConfigContext();
const [month, setMonth] = useState(new Date());
const isEditMode = useEditModeStore((x) => x.enabled);
@@ -73,17 +88,24 @@ function CalendarTile({ widget }: CalendarTileProps) {
defaultDate={new Date()}
onPreviousMonth={setMonth}
onNextMonth={setMonth}
size="xs"
size={widget.properties.fontSize}
locale={i18n?.resolvedLanguage ?? 'en'}
firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
hideWeekdays
style={{ position: 'relative', top: -10 }}
hideWeekdays={widget.properties.hideWeekDays}
style={{ position: 'relative' }}
date={month}
maxLevel="month"
hasNextLevel={false}
styles={{
calendarHeader: {
maxWidth: 'inherit',
marginBottom: '0.35rem !important',
},
calendarHeaderLevel: {
height:"100%",
},
calendarHeaderControl:{
height:"100%",
},
calendar: {
height: '100%',
@@ -100,15 +122,21 @@ function CalendarTile({ widget }: CalendarTileProps) {
flexDirection: 'column',
width: '100%',
},
monthCell:{
textAlign:'center',
},
month: {
flex: 1,
},
day:{
borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
},
}}
getDayProps={(date) => ({
bg: getBgColorByDateAndTheme(colorScheme, date),
})}
renderDay={(date) => (
<CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
<CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} size={widget.properties.fontSize} />
)}
/>
);

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

@@ -1,4 +1,5 @@
import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { useTranslation } from 'next-i18next';
import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
import { useConfigContext } from '../../config/provider';
@@ -15,8 +16,8 @@ const definition = defineWidget({
icon: IconDeviceGamepad,
options: {},
gridstack: {
minWidth: 3,
minHeight: 2,
minWidth: 2,
minHeight: 1,
maxWidth: 12,
maxHeight: 12,
},
@@ -32,6 +33,7 @@ interface DnsHoleControlsWidgetProps {
function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
const { isInitialLoading, data } = useDnsHoleSummeryQuery();
const { mutateAsync } = useDnsHoleControlMutation();
const { width, ref } = useElementSize();
const { t } = useTranslation('common');
const { name: configName, config } = useConfigContext();
@@ -41,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
}
return (
<Stack>
<Group grow>
<Stack justify="space-between" h={"100%"} spacing="0.25rem">
<SimpleGrid ref={ref} cols={ width > 275? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
<Button
onClick={async () => {
await mutateAsync({
@@ -54,6 +56,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerPlay size={20} />}
variant="light"
color="green"
h="2rem"
>
{t('enableAll')}
</Button>
@@ -68,41 +71,43 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerStop size={20} />}
variant="light"
color="red"
h="2rem"
>
{t('disableAll')}
</Button>
</Group>
</SimpleGrid>
{data.status.map((status, index) => {
const app = config?.apps.find((x) => x.id === status.appId);
<Stack spacing="0.25rem">
{data.status.map((status, index) => {
const app = config?.apps.find((x) => x.id === status.appId);
if (!app) {
return null;
}
if (!app) {
return null;
}
return (
<Card withBorder key={index} p="xs">
<Group position="apart">
return (
<Card withBorder={true} key={index} p="xs">
<Group>
<Box
sx={(theme) => ({
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
textAlign: 'center',
padding: 5,
borderRadius: theme.radius.md,
})}
>
<Image src={app.appearance.iconUrl} width={25} height={25} fit="contain" />
sx={(theme) => ({
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
textAlign: 'center',
padding: 5,
borderRadius: theme.radius.md,
})}
>
<Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
</Box>
<Text>{app.name}</Text>
<Stack spacing="0rem">
<Text>{app.name}</Text>
<StatusBadge status={status.status} />
</Stack>
</Group>
<StatusBadge status={status.status} />
</Group>
</Card>
);
})}
</Card>
);
})}
</Stack>
</Stack>
);
}

948
yarn.lock
View File

File diff suppressed because it is too large Load Diff