feat: speed test dot for proxy

This commit is contained in:
Zephyruso 2023-09-01 14:47:08 +08:00
parent 5250cccf1d
commit e9c6666606
6 changed files with 115 additions and 56 deletions

View File

@ -1,5 +1,6 @@
import { JSX, ParentComponent } from 'solid-js' import { JSX, ParentComponent } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
// import { Ch} from '@tabler/icons-solidjs'
type Props = { type Props = {
title: JSX.Element title: JSX.Element
@ -31,7 +32,7 @@ const Collapse: ParentComponent<Props> = (props) => {
)} )}
> >
<div <div
class="collapse-title text-xl font-medium" class="collapse-title pr-1 text-xl font-medium after:!top-8"
onClick={() => onCollapse(!props.isOpen)} onClick={() => onCollapse(!props.isOpen)}
> >
{title} {title}

View File

@ -1,6 +1,7 @@
import { createMemo } from 'solid-js' import { createMemo } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { useProxies } from '~/signals/proxies' import { useProxies } from '~/signals/proxies'
import { getClassNameByDelay } from '~/utils/proxies'
export default (props: { export default (props: {
proxyName: string proxyName: string
@ -16,13 +17,8 @@ export default (props: {
return '' return ''
} }
let textClassName = 'text-green-500' const color = getClassNameByDelay(delay)
const textClassName = `text-${color}`
if (delay > 500) {
textClassName = 'text-red-500'
} else if (delay > 200) {
textClassName = 'text-yellow-500'
}
return <span class={textClassName}>{delay}ms</span> return <span class={textClassName}>{delay}ms</span>
} }

View File

@ -0,0 +1,33 @@
import { For } from 'solid-js'
import { twMerge } from 'tailwind-merge'
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`
return (
<div
class={twMerge('m-1 h-4 w-4 rounded-full', bgClassName, isSelected)}
></div>
)
}
export default (props: { proxyNameList: string[]; now?: string }) => {
const { proxyNodeMap } = useProxies()
return (
<div class="flex w-full flex-wrap">
<For each={props.proxyNameList.map((name) => proxyNodeMap()[name]!)}>
{(proxy) => {
const delay = proxy?.delay
const isSelected = props.now === proxy.name
return <Delay delay={delay} selected={isSelected} />
}}
</For>
</div>
)
}

View File

@ -2,10 +2,11 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
import { For, Show, createSignal, onMount } from 'solid-js' import { For, Show, createSignal, onMount } from 'solid-js'
import Collapse from '~/components/Collpase' import Collapse from '~/components/Collpase'
import ProxyNodeCard from '~/components/ProxyNodeCard' import ProxyNodeCard from '~/components/ProxyNodeCard'
import ProxyNodeDots from '~/components/ProxyNodeDots'
import SubscriptionInfo from '~/components/SubscriptionInfo' import SubscriptionInfo from '~/components/SubscriptionInfo'
import { useProxies } from '~/signals/proxies' import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types' import type { Proxy } from '~/types'
import { formatTimeFromNow } from '~/utils/date' import { formatTimeFromNow } from '~/utils/proxies'
export default () => { export default () => {
const { const {
@ -66,22 +67,26 @@ export default () => {
<For each={proxies()}> <For each={proxies()}>
{(proxy) => { {(proxy) => {
const title = ( const title = (
<div class="flex items-center justify-between"> <>
<div class="flex flex-col"> <div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span> <span>{proxy.name}</span>
<button
<div class="text-sm text-slate-500"> class="btn btn-circle btn-sm"
{proxy.type} :: {proxy.now} onClick={(e) => onSpeedTestClick(e, proxy.name)}
</div> >
<IconBrandSpeedtest />
</button>
</div> </div>
<div class="text-sm text-slate-500">
<button {proxy.type} :: {proxy.now}
class="btn btn-circle btn-sm" </div>
onClick={(e) => onSpeedTestClick(e, proxy.name)} <Show when={!collapsedMap()[`group-${proxy.name}`]}>
> <ProxyNodeDots
<IconBrandSpeedtest /> proxyNameList={proxy.all ?? []}
</button> now={proxy.now}
</div> />
</Show>
</>
) )
const content = ( const content = (
@ -123,35 +128,45 @@ export default () => {
<For each={proxyProviders()}> <For each={proxyProviders()}>
{(proxyProvider) => { {(proxyProvider) => {
const title = ( const title = (
<div class="flex items-center justify-between"> <>
<div class="flex flex-col gap-1"> <div class="mr-10 flex items-center justify-between">
<span>{proxyProvider.name}</span> <span>{proxyProvider.name}</span>
<SubscriptionInfo <div>
subscriptionInfo={proxyProvider.subscriptionInfo} <button
/> class="btn btn-circle btn-sm mr-2"
<div class="text-sm text-slate-500"> onClick={(e) =>
{proxyProvider.vehicleType} :: Updated{' '} onUpdateProviderClick(e, proxyProvider.name)
{formatTimeFromNow(proxyProvider.updatedAt)} }
>
<IconReload />
</button>
<button
class="btn btn-circle btn-sm"
onClick={(e) =>
onHealthCheckClick(e, proxyProvider.name)
}
>
<IconBrandSpeedtest />
</button>
</div> </div>
</div> </div>
<SubscriptionInfo
<div class="flex flex-nowrap"> subscriptionInfo={proxyProvider.subscriptionInfo}
<button />
class="btn btn-circle btn-sm mr-2" <div class="text-sm text-slate-500">
onClick={(e) => {proxyProvider.vehicleType} :: Updated{' '}
onUpdateProviderClick(e, proxyProvider.name) {formatTimeFromNow(proxyProvider.updatedAt)}
}
>
<IconReload />
</button>
<button
class="btn btn-circle btn-sm"
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
>
<IconBrandSpeedtest />
</button>
</div> </div>
</div> <Show
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
>
<ProxyNodeDots
proxyNameList={
proxyProvider.proxies.map((i) => i.name) ?? []
}
/>
</Show>
</>
) )
const content = ( const content = (
<For each={proxyProvider.proxies}> <For each={proxyProvider.proxies}>

View File

@ -1,8 +0,0 @@
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
export function formatTimeFromNow(time: number | string) {
return dayjs(time).fromNow()
}

22
src/utils/proxies.ts Normal file
View File

@ -0,0 +1,22 @@
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
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
}