feat: update provider && rule pages style

MetaCubeX · Aug 31, 2023 · c0fee9d · c0fee9d
1 parent 4c271d9
commit c0fee9d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 14 deletions.
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
@@ -55,7 +55,7 @@ export default (props: {
       <div class="flex items-center justify-between gap-1">
         <div class="truncate text-xs text-slate-500">
           {formatProxyType(proxyNode().type)}
-          {proxyNode().udp ? ' :: udp' : ''}
+          {proxyNode().udp && ' :: udp'}
         </div>
         <div class="text-xs">{Delay(proxyName)}</div>
       </div>

diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
@@ -1,4 +1,4 @@
-import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
+import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
 import { For, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
 import ProxyNodeCard from '~/components/ProxyNodeCard'
@@ -10,8 +10,9 @@ export default () => {
     proxies,
     proxyProviders,
     updateProxy,
-    setProxiesByProxyName,
+    setProxyGroupByProxyName,
     delayTestByProxyGroupName,
+    updateProxyProviderByProviderName,
   } = useProxies()
 
   const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
@@ -23,14 +24,19 @@ export default () => {
   })
 
   const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
-    setProxiesByProxyName(proxy, proxyName)
+    setProxyGroupByProxyName(proxy, proxyName)
   }
 
   const onSpeedTestClick = (e: MouseEvent, name: string) => {
     e.stopPropagation()
     delayTestByProxyGroupName(name)
   }
 
+  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
+    e.stopPropagation()
+    updateProxyProviderByProviderName(name)
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <div>
@@ -94,7 +100,27 @@ export default () => {
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
           <For each={proxyProviders()}>
             {(proxyProvider) => {
-              const title = <>{proxyProvider.name}</>
+              const title = (
+                <div class="flex items-center justify-between">
+                  <div class="flex flex-col">
+                    <span>{proxyProvider.name}</span>
+
+                    <div class="text-sm text-slate-500">
+                      {proxyProvider.vehicleType} :: Updated at{' '}
+                      {new Date(proxyProvider.updatedAt).toLocaleString()}
+                    </div>
+                  </div>
+
+                  <button
+                    class="btn btn-circle btn-sm"
+                    onClick={(e) =>
+                      onUpdateProviderClick(e, proxyProvider.name)
+                    }
+                  >
+                    <IconReload />
+                  </button>
+                </div>
+              )
               const content = (
                 <For each={proxyProvider.proxies}>
                   {(proxy) => <ProxyNodeCard proxyName={proxy.name} />}

diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
@@ -26,13 +26,13 @@ export default () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Rules</h1>
 
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={rules()}>
             {(rule) => (
               <div class="card card-bordered card-compact border-secondary p-4">
-                <div>{rule.payload}</div>
-                <div>
-                  {rule.type}: {rule.proxy}
+                <div class="break-all">{rule.payload}</div>
+                <div class="text-xs text-slate-500">
+                  {rule.type} :: {rule.proxy}
                 </div>
               </div>
             )}
@@ -43,13 +43,13 @@ export default () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Rules Providers</h1>
 
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={rulesProviders()}>
             {(rulesProvider) => (
               <div class="card card-bordered card-compact border-secondary p-4">
                 <div>{rulesProvider.name}</div>
-                <div>
-                  {rulesProvider.vehicleType}: {rulesProvider.behavior} (
+                <div class="text-xs text-slate-500">
+                  {rulesProvider.vehicleType} :: {rulesProvider.behavior} (
                   {rulesProvider.ruleCount})
                 </div>
               </div>

diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts
@@ -50,7 +50,7 @@ export function useProxies() {
     )
   }
 
-  const setProxiesByProxyName = async (proxy: Proxy, proxyName: string) => {
+  const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {
     await request.put(`proxies/${proxy.name}`, {
       body: JSON.stringify({
         name: proxyName,
@@ -74,13 +74,21 @@ export function useProxies() {
     setDelayMap({ ...dMap })
   }
 
+  const updateProxyProviderByProviderName = async (
+    proxyProviderName: string,
+  ) => {
+    await request.put(`/providers/proxies/${proxyProviderName}`)
+    await updateProxy()
+  }
+
   return {
     proxies,
     proxyProviders,
     delayTestByProxyGroupName,
     proxyNodeMap,
     delayMap,
     updateProxy,
-    setProxiesByProxyName,
+    setProxyGroupByProxyName,
+    updateProxyProviderByProviderName,
   }
 }