gitscope
/
← marzneshin / app/dashboard/src/pages/users/table/usage-slider.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/users/table/usage-slider.tsx · v0.1.2
Source
1 912788f Mardin 2y ago import { HStack, Text, SliderTrack, SliderFilledTrack, Slider, SliderProps } from '@chakra-ui/react';
2 5bb2712 Mardin 2y ago import { resetStrategy } from 'constants/Settings';
3 912788f Mardin 2y ago import { formatBytes } from 'utils/formatByte';
4 912788f Mardin 2y ago import { useTranslation } from 'react-i18next';
5 912788f Mardin 2y ago import { FC } from 'react';
6 912788f Mardin 2y ago
7 912788f Mardin 2y ago export const UsageSliderCompact: FC<UsageSliderProps> = (props) => {
8 912788f Mardin 2y ago const { used, total } = props;
9 912788f Mardin 2y ago const isUnlimited = total === 0 || total === null;
10 912788f Mardin 2y ago return (
11 912788f Mardin 2y ago <HStack
12 912788f Mardin 2y ago justifyContent="space-between"
13 912788f Mardin 2y ago fontSize="xs"
14 912788f Mardin 2y ago fontWeight="medium"
15 912788f Mardin 2y ago color="gray.600"
16 912788f Mardin 2y ago _dark={{
17 912788f Mardin 2y ago color: 'gray.400',
18 912788f Mardin 2y ago }}
19 912788f Mardin 2y ago >
20 912788f Mardin 2y ago <Text>
21 912788f Mardin 2y ago {formatBytes(used)} /{' '}
22 912788f Mardin 2y ago {isUnlimited ? (
23 912788f Mardin 2y ago <Text as="span" fontFamily="system-ui">
24 5bb2712 Mardin 2y ago ∞
25 912788f Mardin 2y ago </Text>
26 912788f Mardin 2y ago ) : (
27 912788f Mardin 2y ago formatBytes(total)
28 912788f Mardin 2y ago )}
29 912788f Mardin 2y ago </Text>
30 912788f Mardin 2y ago </HStack>
31 912788f Mardin 2y ago );
32 912788f Mardin 2y ago };
33 912788f Mardin 2y ago
34 912788f Mardin 2y ago type UsageSliderProps = {
35 5bb2712 Mardin 2y ago used: number;
36 5bb2712 Mardin 2y ago total: number | null;
37 5bb2712 Mardin 2y ago dataLimitResetStrategy: string | null;
38 5bb2712 Mardin 2y ago totalUsedTraffic: number;
39 912788f Mardin 2y ago } & SliderProps;
40 912788f Mardin 2y ago
41 912788f Mardin 2y ago const getResetStrategy = (strategy: string): string => {
42 912788f Mardin 2y ago for (var i = 0; i < resetStrategy.length; i++) {
43 912788f Mardin 2y ago const entry = resetStrategy[i];
44 912788f Mardin 2y ago if (entry.value == strategy) {
45 912788f Mardin 2y ago return entry.title;
46 912788f Mardin 2y ago }
47 912788f Mardin 2y ago }
48 912788f Mardin 2y ago return 'No';
49 912788f Mardin 2y ago };
50 912788f Mardin 2y ago
51 912788f Mardin 2y ago export const UsageSlider: FC<UsageSliderProps> = (props) => {
52 912788f Mardin 2y ago const {
53 912788f Mardin 2y ago used,
54 912788f Mardin 2y ago total,
55 912788f Mardin 2y ago dataLimitResetStrategy,
56 912788f Mardin 2y ago totalUsedTraffic,
57 912788f Mardin 2y ago ...restOfProps
58 912788f Mardin 2y ago } = props;
59 912788f Mardin 2y ago const isUnlimited = total === 0 || total === null;
60 912788f Mardin 2y ago const isReached = !isUnlimited && (used / total) * 100 >= 100;
61 912788f Mardin 2y ago const { t } = useTranslation();
62 912788f Mardin 2y ago return (
63 912788f Mardin 2y ago <>
64 912788f Mardin 2y ago <Slider
65 912788f Mardin 2y ago orientation="horizontal"
66 912788f Mardin 2y ago value={isUnlimited ? 100 : Math.min((used / total) * 100, 100)}
67 912788f Mardin 2y ago colorScheme={isReached ? 'red' : 'primary'}
68 912788f Mardin 2y ago {...restOfProps}
69 912788f Mardin 2y ago >
70 912788f Mardin 2y ago <SliderTrack h="6px" borderRadius="full">
71 912788f Mardin 2y ago <SliderFilledTrack borderRadius="full" />
72 912788f Mardin 2y ago </SliderTrack>
73 912788f Mardin 2y ago </Slider>
74 912788f Mardin 2y ago <HStack
75 912788f Mardin 2y ago justifyContent="space-between"
76 912788f Mardin 2y ago fontSize="xs"
77 912788f Mardin 2y ago fontWeight="medium"
78 912788f Mardin 2y ago color="gray.600"
79 912788f Mardin 2y ago _dark={{
80 912788f Mardin 2y ago color: 'gray.400',
81 912788f Mardin 2y ago }}
82 912788f Mardin 2y ago >
83 912788f Mardin 2y ago <Text>
84 912788f Mardin 2y ago {formatBytes(used)} /{' '}
85 912788f Mardin 2y ago {isUnlimited ? (
86 912788f Mardin 2y ago <Text as="span" fontFamily="system-ui">
87 5bb2712 Mardin 2y ago ∞
88 912788f Mardin 2y ago </Text>
89 912788f Mardin 2y ago ) : (
90 912788f Mardin 2y ago formatBytes(total) +
91 5bb2712 Mardin 2y ago (dataLimitResetStrategy && dataLimitResetStrategy !== 'no_reset'
92 5bb2712 Mardin 2y ago ? ' ' +
93 5bb2712 Mardin 2y ago t(
94 5bb2712 Mardin 2y ago 'userDialog.resetStrategy' +
95 5bb2712 Mardin 2y ago getResetStrategy(dataLimitResetStrategy)
96 5bb2712 Mardin 2y ago )
97 5bb2712 Mardin 2y ago : '')
98 912788f Mardin 2y ago )}
99 912788f Mardin 2y ago </Text>
100 912788f Mardin 2y ago <Text>
101 912788f Mardin 2y ago {t('usersTable.total')}: {formatBytes(totalUsedTraffic)}
102 912788f Mardin 2y ago </Text>
103 912788f Mardin 2y ago </HStack>
104 912788f Mardin 2y ago </>
105 912788f Mardin 2y ago );
106 912788f Mardin 2y ago };