From 09a8ede9690b0159e5becb294db51379ad21bc90 Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:10:57 +0800
Subject: [PATCH] fix: delay dot class import

---
 src/components/ConnectionsModal.tsx   |  2 +-
 src/components/ProxyNodeCard.tsx      | 13 +++++++++----
 src/components/ProxyNodeDots.tsx      | 26 +++++++++++++++++---------
 src/config/{connection.ts => enum.ts} |  6 ++++++
 src/utils/proxies.ts                  | 14 --------------
 5 files changed, 33 insertions(+), 28 deletions(-)
 rename src/config/{connection.ts => enum.ts} (79%)

diff --git a/src/components/ConnectionsModal.tsx b/src/components/ConnectionsModal.tsx
index 0b74393..b05f231 100644
--- a/src/components/ConnectionsModal.tsx
+++ b/src/components/ConnectionsModal.tsx
@@ -13,7 +13,7 @@ import {
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
 import { For, createSignal } from 'solid-js'
-import { AccessorKey } from '~/config/connection'
+import { AccessorKey } from '~/config/enum'
 
 type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
 type ColumnOrder = AccessorKey[]
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index 00ae483..cfd8deb 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/src/components/ProxyNodeCard.tsx
@@ -1,7 +1,7 @@
 import { createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { DELAY } from '~/config/enum'
 import { useProxies } from '~/signals/proxies'
-import { getClassNameByDelay } from '~/utils/proxies'
 
 export default (props: {
   proxyName: string
@@ -13,12 +13,17 @@ export default (props: {
   const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
 
   const Delay = (delay: number | undefined) => {
-    if (typeof delay !== 'number' || delay === 0) {
+    if (typeof delay !== 'number' || delay === DELAY.NOT_CONNECTED) {
       return ''
     }
 
-    const color = getClassNameByDelay(delay)
-    const textClassName = `text-${color}`
+    let textClassName = 'text-success'
+
+    if (delay > DELAY.HIGH) {
+      textClassName = 'text-error'
+    } else if (delay > DELAY.MEDIUM) {
+      textClassName = 'text-warning'
+    }
 
     return <span class={textClassName}>{delay}ms</span>
   }
diff --git a/src/components/ProxyNodeDots.tsx b/src/components/ProxyNodeDots.tsx
index cb684cb..1d0ea86 100644
--- a/src/components/ProxyNodeDots.tsx
+++ b/src/components/ProxyNodeDots.tsx
@@ -1,18 +1,26 @@
 import { For } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { DELAY } from '~/config/enum'
 import { useProxies } from '~/signals/proxies'
-import { getClassNameByDelay } from '~/utils/proxies'
 
 const Delay = (p: { delay: number | undefined; selected: boolean }) => {
-  const color = getClassNameByDelay(p.delay)
-  const bgClassName = `bg-${color}`
-  const isSelected = p.selected && `border-2 border-primary`
+  let dotClassName = p.selected
+    ? 'bg-white border-4 border-success'
+    : 'bg-success'
 
-  return (
-    <div
-      class={twMerge('m-1 h-4 w-4 rounded-full', bgClassName, isSelected)}
-    ></div>
-  )
+  if (typeof p.delay !== 'number' || p.delay === DELAY.NOT_CONNECTED) {
+    dotClassName = p.selected
+      ? 'bg-white border-4 border-neutral'
+      : 'bg-neutral'
+  } else if (p.delay > DELAY.HIGH) {
+    dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
+  } else if (p.delay > DELAY.MEDIUM) {
+    dotClassName = p.selected
+      ? 'bg-white border-4 border-warning'
+      : 'bg-warning'
+  }
+
+  return <div class={twMerge('m-1 h-4 w-4 rounded-full', dotClassName)}></div>
 }
 
 export default (props: { proxyNameList: string[]; now?: string }) => {
diff --git a/src/config/connection.ts b/src/config/enum.ts
similarity index 79%
rename from src/config/connection.ts
rename to src/config/enum.ts
index ddb3341..47d46cd 100644
--- a/src/config/connection.ts
+++ b/src/config/enum.ts
@@ -13,3 +13,9 @@ export enum AccessorKey {
   Source = 'Source',
   Destination = 'Destination',
 }
+
+export enum DELAY {
+  NOT_CONNECTED = 0,
+  MEDIUM = 200,
+  HIGH = 500,
+}
diff --git a/src/utils/proxies.ts b/src/utils/proxies.ts
index 3b9acfb..519ecd9 100644
--- a/src/utils/proxies.ts
+++ b/src/utils/proxies.ts
@@ -6,17 +6,3 @@ dayjs.extend(relativeTime)
 export function formatTimeFromNow(time: number | string) {
   return dayjs(time).fromNow()
 }
-
-export function getClassNameByDelay(delay: number | undefined) {
-  let name = 'green-500'
-
-  if (typeof delay !== 'number' || delay === 0) {
-    name = 'base-100'
-  } else if (delay > 500) {
-    name = 'red-500'
-  } else if (delay > 200) {
-    name = 'yellow-500'
-  }
-
-  return name
-}