From 45da766ed006ef51312206c17c9d65b9aa4a274b Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Fri, 1 Sep 2023 12:40:34 +0800
Subject: [PATCH] feat: subs info

---
 src/components/SubscriptionInfo.tsx | 43 +++++++++++++++++++++++++++++
 src/pages/Proxies.tsx               |  5 +++-
 src/types.d.ts                      |  7 +++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SubscriptionInfo.tsx

diff --git a/src/components/SubscriptionInfo.tsx b/src/components/SubscriptionInfo.tsx
new file mode 100644
index 0000000..8eb9405
--- /dev/null
+++ b/src/components/SubscriptionInfo.tsx
@@ -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>
+    </>
+  )
+}
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 10a5275..1896ec9 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -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)}
diff --git a/src/types.d.ts b/src/types.d.ts
index 0393ba8..fda796a 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -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