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

Merge pull request #1229 from Tagaishi/media-request-ui-rework

Browse Source 
💄 Media requests stats widget stretch elements to fit tile
This commit is contained in:
Thomas Camlong
2023-08-01 09:02:18 +09:00
committed by GitHub
parent 454deaf069 837b589270
commit a8d94a0a36
2 changed files with 56 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/en/modules/media-requests-stats.json
View File

@@ -3,7 +3,10 @@
"name": "Media request stats",
"description": "Statistics about your media requests",
"settings": {
"title": "Media requests stats"
"title": "Media requests stats",
"direction": {
"label": "Direction of the layout."
}
}
},
"stats": {

90
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Center, Flex, Stack, Text } from '@mantine/core';
import { Card, Flex, Stack, Text } from '@mantine/core';
import { IconChartBar } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
@@ -11,14 +11,23 @@ import { MediaRequestStatus } from './media-request-types';
const definition = defineWidget({
id: 'media-requests-stats',
icon: IconChartBar,
options: {},
component: MediaRequestStatsTile,
options: {
direction: {
type: 'select',
defaultValue: 'row' as 'row' | 'column',
data: [
{ label: 'Horizontal', value: 'row' },
{ label: 'Vertical', value: 'column' },
],
},
},
gridstack: {
minWidth: 1,
minHeight: 2,
minHeight: 1,
maxWidth: 12,
maxHeight: 12,
},
component: MediaRequestStatsTile,
});
export type MediaRequestStatsWidget = IWidget<(typeof definition)['id'], typeof definition>;
@@ -36,41 +45,46 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
}
return (
<Flex gap="md" wrap="wrap">
<Card w={100} h={100} withBorder>
<Center h="100%">
<Stack spacing={0} align="center">
<Text>
{data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length}
</Text>
<Text color="dimmed" align="center" size="xs">
{t('stats.pending')}
</Text>
</Stack>
</Center>
</Card>
<Card w={100} h={100} withBorder>
<Center h="100%">
<Stack spacing={0} align="center">
<Text align="center">{data.filter((x) => x.type === 'tv').length}</Text>
<Text color="dimmed" align="center" size="xs">
{t('stats.tvRequests')}
</Text>
</Stack>
</Center>
</Card>
<Card w={100} h={100} withBorder>
<Center h="100%">
<Stack spacing={0} align="center">
<Text align="center">{data.filter((x) => x.type === 'movie').length}</Text>
<Text color="dimmed" align="center" size="xs">
{t('stats.movieRequests')}
</Text>
</Stack>
</Center>
</Card>
<Flex
w="100%"
h="100%"
gap="md"
direction={ widget.properties.direction?? 'row' }
>
<StatCard
number={data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length}
label={t('stats.pending')}
/>
<StatCard
number={data.filter((x) => x.type === 'tv').length}
label={t('stats.tvRequests')}
/>
<StatCard
number={data.filter((x) => x.type === 'movie').length}
label={t('stats.movieRequests')}
/>
</Flex>
);
}
export default definition;
interface StatCardProps {
number: number;
label: string;
}
const StatCard = ({ number, label }: StatCardProps) => {
return (
<Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
<Text align="center">
{number}
</Text>
<Text color="dimmed" align="center" size="xs">
{label}
</Text>
</Stack>
</Card>
);
};
export default definition;