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