feat: subs info

This commit is contained in:
Zephyruso 2023-09-01 12:40:34 +08:00
parent 988233639c
commit 45da766ed0
3 changed files with 54 additions and 1 deletions

View 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>
</>
)
}

View File

@ -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
View File

@ -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