feat: proxy selectable (#19)

src/pages/Overview.tsx

@@ -76,7 +76,7 @@ export default () => {
   onCleanup(() => clearInterval(preventLeakTimer))
 
   const trafficWS = createReconnectingWS(
-    `${wsEndpointURL()}/traffic?token=${secret()}}`,
+    `${wsEndpointURL()}/traffic?token=${secret()}`,
   )
 
   const trafficWSMessageEvent = createEventSignal<{
@@ -148,7 +148,7 @@ export default () => {
   ])
 
   const connectionsWS = createReconnectingWS(
-    `${wsEndpointURL()}/connections?token=${secret()}}`,
+    `${wsEndpointURL()}/connections?token=${secret()}`,
   )
 
   const connectionsWSMessageEvent = createEventSignal<{

src/pages/Proxies.tsx

@@ -1,13 +1,19 @@
 import { For, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { useRequest } from '~/signals'
+import { useProxies } from '~/signals/proxies'
-import type { Proxy, ProxyProvider } from '~/types'
+import type { Proxy } from '~/types'
 
 export default () => {
-  const request = useRequest()
+  const {
-  const [proxies, setProxies] = createSignal<Proxy[]>([])
+    proxies,
-  const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
+    proxyProviders,
-  const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
+    delayMap,
+    updateProxy,
+    setProxiesByProxyName,
+  } = useProxies()
+  const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
+    {},
+  )
 
   const renderDelay = (proxyname: string) => {
     const delay = delayMap()[proxyname]
@@ -20,26 +26,23 @@ export default () => {
   }
 
   onMount(async () => {
-    const { providers } = await request
+    await updateProxy()
-      .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)
+  const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
-    setProxyProviders(Object.values(providers))
+    setProxiesByProxyName(proxy, proxyName)
+  }
 
-    const { proxies } = await request
+  const onCollapseTitleClick = (name: string) => {
-      .get('proxies')
+    const cMap = collapseMap()
-      .json<{ proxies: Record<string, Proxy> }>()
 
-    setProxies(Object.values(proxies))
+    cMap[name] = !cMap[name]
-  })
+    setCollapseMap({ ...cMap })
+  }
+
+  const getCollapseClassName = (name: string) => {
+    return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
+  }
 
   return (
     <div class="flex flex-col gap-4">
@@ -49,23 +52,31 @@ export default () => {
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={proxies()}>
             {(proxy) => (
-              <div class="collapse collapse-arrow border-secondary bg-base-200 p-4">
+              <div
-                <input type="checkbox" />
+                class={twMerge(
-                <div class="collapse-title text-xl font-medium">
+                  getCollapseClassName(proxy.name),
+                  'collapse collapse-arrow border-secondary bg-base-200 p-4',
+                )}
+              >
+                <div
+                  class="collapse-title text-xl font-medium"
+                  onClick={() => onCollapseTitleClick(proxy.name)}
+                >
                   {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) => (
+                    {(proxyName) => (
                       <div
                         class={twMerge(
-                          proxy.now === proxyPoint
+                          proxy.now === proxyName
                             ? 'border-primary bg-success-content text-success'
                             : 'border-secondary',
-                          'card card-bordered card-compact m-1 flex-row justify-between p-4',
+                          'card card-bordered card-compact m-1 cursor-pointer flex-row justify-between p-4',
                         )}
+                        onClick={() => onProxyNodeClick(proxy, proxyName)}
                       >
-                        {proxyPoint} {renderDelay(proxyPoint)}
+                        {proxyName} {renderDelay(proxyName)}
                       </div>
                     )}
                   </For>
@@ -82,16 +93,23 @@ export default () => {
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={proxyProviders()}>
             {(proxy) => (
-              <div class="collapse-arrow collapse border-secondary bg-base-200 p-4">
+              <div
-                <input type="checkbox" />
+                class={twMerge(
-                <div class="collapse-title text-xl font-medium">
+                  getCollapseClassName(proxy.name),
+                  'collapse-arrow collapse border-secondary bg-base-200 p-4',
+                )}
+              >
+                <div
+                  class="collapse-title text-xl font-medium"
+                  onClick={() => onCollapseTitleClick(proxy.name)}
+                >
                   {proxy.name}
                 </div>
                 <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
                   <For each={proxy.proxies}>
-                    {(proxyPoint) => (
+                    {(proxyNode) => (
                       <div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
-                        {proxyPoint.name} {renderDelay(proxyPoint.name)}
+                        {proxyNode.name} {renderDelay(proxyNode.name)}
                       </div>
                     )}
                   </For>

src/signals/proxies.ts

@@ -0,0 +1,58 @@
+import { createSignal } from 'solid-js'
+import { useRequest } from '~/signals'
+import type { Proxy, ProxyProvider } from '~/types'
+
+export function useProxies() {
+  const request = useRequest()
+  const [proxies, setProxies] = createSignal<Proxy[]>([])
+  const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
+  const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
+
+  const updateProxy = 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).filter(
+        (provider) =>
+          provider.name !== 'default' && provider.vehicleType !== 'Compatible',
+      ),
+    )
+
+    const { proxies } = await request
+      .get('proxies')
+      .json<{ proxies: Record<string, Proxy> }>()
+
+    setProxies(
+      Object.values(proxies).filter(
+        (proxy) => proxy.all && proxy.all.length > 0,
+      ),
+    )
+  }
+
+  const setProxiesByProxyName = async (proxy: Proxy, proxyName: string) => {
+    await request.put(`proxies/${proxy.name}`, {
+      body: JSON.stringify({
+        name: proxyName,
+      }),
+    })
+    await updateProxy()
+  }
+
+  return {
+    proxies,
+    proxyProviders,
+    delayMap,
+    updateProxy,
+    setProxiesByProxyName,
+  }
+}