mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15: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 Collapse from '~/components/Collpase'
|
||||
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
||||
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
import type { Proxy } from '~/types'
|
||||
import { formatTimeFromNow } from '~/utils/date'
|
||||
@ -125,7 +126,9 @@ export default () => {
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span>{proxyProvider.name}</span>
|
||||
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
|
7
src/types.d.ts
vendored
7
src/types.d.ts
vendored
@ -35,8 +35,15 @@ export type ProxyNode = {
|
||||
delay: number
|
||||
}[]
|
||||
}
|
||||
export type SubscriptionInfo = {
|
||||
Download: number
|
||||
Upload: number
|
||||
Total: number
|
||||
Expire: number
|
||||
}
|
||||
|
||||
export type ProxyProvider = {
|
||||
subscriptionInfo: SubscriptionInfo
|
||||
name: string
|
||||
proxies: ProxyNode[]
|
||||
testUrl: string
|
||||
|
Loading…
Reference in New Issue
Block a user