mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: subs info
This commit is contained in:
parent
988233639c
commit
45da766ed0
43
src/components/SubscriptionInfo.tsx
Normal file
43
src/components/SubscriptionInfo.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import byteSize from 'byte-size'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import type { SubscriptionInfo } from '~/types'
|
||||||
|
|
||||||
|
const getSubscriptionsInfo = (subscriptionInfo: SubscriptionInfo) => {
|
||||||
|
const total = byteSize(subscriptionInfo.Total)
|
||||||
|
const used = byteSize(subscriptionInfo.Download + subscriptionInfo.Upload)
|
||||||
|
const percentage = (
|
||||||
|
((subscriptionInfo.Download + subscriptionInfo.Upload) /
|
||||||
|
subscriptionInfo.Total) *
|
||||||
|
100
|
||||||
|
).toFixed(2)
|
||||||
|
const expireStr = () => {
|
||||||
|
if (subscriptionInfo.Expire === 0) {
|
||||||
|
return 'Null'
|
||||||
|
}
|
||||||
|
|
||||||
|
return dayjs(subscriptionInfo.Expire * 1000).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
total,
|
||||||
|
used,
|
||||||
|
percentage,
|
||||||
|
expireStr,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: { subscriptionInfo: SubscriptionInfo }) => {
|
||||||
|
if (!props.subscriptionInfo) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const info = getSubscriptionsInfo(props.subscriptionInfo)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div class="text-sm text-slate-500">
|
||||||
|
{`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -2,6 +2,7 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
|||||||
import { For, Show, createSignal, onMount } from 'solid-js'
|
import { For, Show, createSignal, onMount } from 'solid-js'
|
||||||
import Collapse from '~/components/Collpase'
|
import Collapse from '~/components/Collpase'
|
||||||
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
||||||
|
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
||||||
import { useProxies } from '~/signals/proxies'
|
import { useProxies } from '~/signals/proxies'
|
||||||
import type { Proxy } from '~/types'
|
import type { Proxy } from '~/types'
|
||||||
import { formatTimeFromNow } from '~/utils/date'
|
import { formatTimeFromNow } from '~/utils/date'
|
||||||
@ -125,7 +126,9 @@ export default () => {
|
|||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<span>{proxyProvider.name}</span>
|
<span>{proxyProvider.name}</span>
|
||||||
|
<SubscriptionInfo
|
||||||
|
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||||
|
/>
|
||||||
<div class="text-sm text-slate-500">
|
<div class="text-sm text-slate-500">
|
||||||
{proxyProvider.vehicleType} :: Updated{' '}
|
{proxyProvider.vehicleType} :: Updated{' '}
|
||||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||||
|
7
src/types.d.ts
vendored
7
src/types.d.ts
vendored
@ -35,8 +35,15 @@ export type ProxyNode = {
|
|||||||
delay: number
|
delay: number
|
||||||
}[]
|
}[]
|
||||||
}
|
}
|
||||||
|
export type SubscriptionInfo = {
|
||||||
|
Download: number
|
||||||
|
Upload: number
|
||||||
|
Total: number
|
||||||
|
Expire: number
|
||||||
|
}
|
||||||
|
|
||||||
export type ProxyProvider = {
|
export type ProxyProvider = {
|
||||||
|
subscriptionInfo: SubscriptionInfo
|
||||||
name: string
|
name: string
|
||||||
proxies: ProxyNode[]
|
proxies: ProxyNode[]
|
||||||
testUrl: string
|
testUrl: string
|
||||||
|
Loading…
Reference in New Issue
Block a user