mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-27 22:54:03 +08:00
feat: speed test dot for proxy
This commit is contained in:
parent
5250cccf1d
commit
e9c6666606
@ -1,5 +1,6 @@
|
||||
import { JSX, ParentComponent } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
// import { Ch} from '@tabler/icons-solidjs'
|
||||
|
||||
type Props = {
|
||||
title: JSX.Element
|
||||
@ -31,7 +32,7 @@ const Collapse: ParentComponent<Props> = (props) => {
|
||||
)}
|
||||
>
|
||||
<div
|
||||
class="collapse-title text-xl font-medium"
|
||||
class="collapse-title pr-1 text-xl font-medium after:!top-8"
|
||||
onClick={() => onCollapse(!props.isOpen)}
|
||||
>
|
||||
{title}
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { createMemo } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
import { getClassNameByDelay } from '~/utils/proxies'
|
||||
|
||||
export default (props: {
|
||||
proxyName: string
|
||||
@ -16,13 +17,8 @@ export default (props: {
|
||||
return ''
|
||||
}
|
||||
|
||||
let textClassName = 'text-green-500'
|
||||
|
||||
if (delay > 500) {
|
||||
textClassName = 'text-red-500'
|
||||
} else if (delay > 200) {
|
||||
textClassName = 'text-yellow-500'
|
||||
}
|
||||
const color = getClassNameByDelay(delay)
|
||||
const textClassName = `text-${color}`
|
||||
|
||||
return <span class={textClassName}>{delay}ms</span>
|
||||
}
|
||||
|
33
src/components/ProxyNodeDots.tsx
Normal file
33
src/components/ProxyNodeDots.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -2,10 +2,11 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
|
||||
import { For, Show, createSignal, onMount } from 'solid-js'
|
||||
import Collapse from '~/components/Collpase'
|
||||
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
||||
import ProxyNodeDots from '~/components/ProxyNodeDots'
|
||||
import SubscriptionInfo from '~/components/SubscriptionInfo'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
import type { Proxy } from '~/types'
|
||||
import { formatTimeFromNow } from '~/utils/date'
|
||||
import { formatTimeFromNow } from '~/utils/proxies'
|
||||
|
||||
export default () => {
|
||||
const {
|
||||
@ -66,22 +67,26 @@ export default () => {
|
||||
<For each={proxies()}>
|
||||
{(proxy) => {
|
||||
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>
|
||||
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxy.type} :: {proxy.now}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxy.type} :: {proxy.now}
|
||||
</div>
|
||||
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
|
||||
<ProxyNodeDots
|
||||
proxyNameList={proxy.all ?? []}
|
||||
now={proxy.now}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
||||
const content = (
|
||||
@ -123,35 +128,45 @@ export default () => {
|
||||
<For each={proxyProviders()}>
|
||||
{(proxyProvider) => {
|
||||
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>
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-circle btn-sm mr-2"
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconReload />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) =>
|
||||
onHealthCheckClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-nowrap">
|
||||
<button
|
||||
class="btn btn-circle btn-sm mr-2"
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconReload />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
<Show
|
||||
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
>
|
||||
<ProxyNodeDots
|
||||
proxyNameList={
|
||||
proxyProvider.proxies.map((i) => i.name) ?? []
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
const content = (
|
||||
<For each={proxyProvider.proxies}>
|
||||
|
@ -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
22
src/utils/proxies.ts
Normal 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
|
||||
}
|
Loading…
Reference in New Issue
Block a user