feat: proxy point && delay (#15)

src/pages/Proxies.tsx

@@ -1,24 +1,43 @@
 import { For, createSignal, onMount } from 'solid-js'
+import { twMerge } from 'tailwind-merge'
 import { useRequest } from '~/signals'
 import type { Proxy, ProxyProvider } from '~/types'
 
 export const Proxies = () => {
   const request = useRequest()
   const [proxies, setProxies] = createSignal<Proxy[]>([])
+  const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
   const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
 
+  const renderDelay = (proxyname: string) => {
+    const delay = delayMap()[proxyname]
+
+    if (typeof delay !== 'number' || delay === 0) {
+      return ''
+    }
+    return <span>{delay}ms</span>
+  }
+
   onMount(async () => {
+    const { providers } = await request
+      .get('providers/proxies')
+      .json<{ providers: Record<string, ProxyProvider> }>()
+    const delay = delayMap()
+
+    Object.values(providers).forEach((provider) => {
+      provider.proxies.forEach((proxy) => {
+        delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
+      })
+    })
+
+    setDelayMap(delay)
+    setProxyProviders(Object.values(providers))
+
     const { proxies } = await request
       .get('proxies')
       .json<{ proxies: Record<string, Proxy> }>()
 
     setProxies(Object.values(proxies))
-
-    const { providers } = await request
-      .get('providers/proxies')
-      .json<{ providers: Record<string, ProxyProvider> }>()
-
-    setProxyProviders(Object.values(providers))
   })
 
   return (
@@ -26,11 +45,30 @@ export const Proxies = () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Proxies</h1>
 
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={proxies()}>
             {(proxy) => (
-              <div class="card card-bordered card-compact border-secondary p-4">
+              <div class="collapse collapse-arrow border-secondary bg-base-200 p-4">
-                {proxy.name}
+                <input type="checkbox" />
+                <div class="collapse-title text-xl font-medium">
+                  {proxy.name} {proxy.type}
+                </div>
+                <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3  lg:grid-cols-5">
+                  <For each={proxy.all}>
+                    {(proxyPoint) => (
+                      <div
+                        class={twMerge(
+                          proxy.now === proxyPoint
+                            ? 'border-primary bg-success-content text-success'
+                            : 'border-secondary',
+                          'card card-bordered card-compact m-1 flex-row justify-between p-4',
+                        )}
+                      >
+                        {proxyPoint} {renderDelay(proxyPoint)}
+                      </div>
+                    )}
+                  </For>
+                </div>
               </div>
             )}
           </For>
@@ -40,11 +78,25 @@ export const Proxies = () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
 
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={proxyProviders()}>
             {(proxy) => (
-              <div class="card card-bordered card-compact border-secondary p-4">
+              <div class="collapse-arrow collapse border-secondary bg-base-200 p-4">
-                {proxy.name}
+                <input type="checkbox" />
+                <div class="collapse-title text-xl font-medium">
+                  {proxy.name}
+                </div>
+                <div class="collapse-content grid grid  grid-cols-1 gap-2 sm:grid-cols-3  lg:grid-cols-5">
+                  <For each={proxy.proxies}>
+                    {(proxyPoint) => (
+                      <div
+                        class={`card card-bordered card-compact m-1  flex-row justify-between  border-secondary p-4`}
+                      >
+                        {proxyPoint.name} {renderDelay(proxyPoint.name)}
+                      </div>
+                    )}
+                  </For>
+                </div>
               </div>
             )}
           </For>