metacubexd/src/pages/Proxies.tsx

93 lines
2.8 KiB
TypeScript
Raw Normal View History

2023-09-02 00:09:41 +08:00
import { useI18n } from '@solid-primitives/i18n'
2023-09-02 16:58:22 +08:00
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
import { Show, createSignal } from 'solid-js'
import { Button } from '~/components/Button'
2023-08-30 23:02:55 +08:00
import Collapse from '~/components/Collpase'
2023-09-02 21:00:20 +08:00
import ForTwoColumns from '~/components/ForTwoColumns'
2023-09-01 18:31:44 +08:00
import ProxyCardGroups from '~/components/ProxyCardGroups'
2023-09-02 11:52:51 +08:00
import ProxyNodePreview from '~/components/ProxyNodePreview'
2023-08-29 20:20:01 +08:00
import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types'
2023-09-02 22:33:41 +08:00
import { getBtnElFromClickEvent } from '~/utils/proxies'
2023-08-24 04:20:53 +08:00
export default () => {
2023-09-02 00:09:41 +08:00
const [t] = useI18n()
2023-09-02 16:58:22 +08:00
const { proxies, setProxyGroupByProxyName, delayTestByProxyGroupName } =
useProxies()
2023-08-30 23:02:55 +08:00
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
2023-08-29 20:20:01 +08:00
{},
)
2023-08-24 04:20:53 +08:00
2023-08-29 20:20:01 +08:00
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
setProxyGroupByProxyName(proxy, proxyName)
2023-08-29 20:20:01 +08:00
}
2023-08-24 04:20:53 +08:00
2023-09-01 11:17:15 +08:00
const onSpeedTestClick = async (e: MouseEvent, name: string) => {
2023-09-02 22:33:41 +08:00
const el = getBtnElFromClickEvent(e)
2023-09-01 11:17:15 +08:00
el.classList.add('animate-pulse')
2023-08-30 11:01:19 +08:00
e.stopPropagation()
2023-09-01 11:17:15 +08:00
await delayTestByProxyGroupName(name)
el.classList.remove('animate-pulse')
2023-08-30 11:01:19 +08:00
}
2023-08-24 04:20:53 +08:00
return (
2023-09-02 00:15:19 +08:00
<div class="flex flex-col gap-2">
2023-09-02 17:42:13 +08:00
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
{t('proxies')}
</h1>
2023-09-02 21:00:20 +08:00
<ForTwoColumns
2023-09-02 16:58:22 +08:00
subChild={proxies().map((proxy) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<Button
class="btn-circle btn-sm"
2023-09-02 16:58:22 +08:00
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</Button>
2023-09-02 16:58:22 +08:00
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={proxy.all ?? []}
2023-09-02 16:02:32 +08:00
now={proxy.now}
2023-09-02 00:15:19 +08:00
/>
2023-09-02 16:58:22 +08:00
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxy.all!}
now={proxy.now}
onClick={(name) => {
onProxyNodeClick(proxy, name)
}}
/>
)
return (
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
2023-09-02 16:02:32 +08:00
/>
2023-09-02 16:58:22 +08:00
)
})}
/>
2023-08-24 04:20:53 +08:00
</div>
)
}