metacubexd/src/pages/Proxies.tsx

136 lines
4.2 KiB
TypeScript
Raw Normal View History

2023-08-30 11:01:19 +08:00
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
2023-08-24 04:20:53 +08:00
import { For, createSignal, onMount } from 'solid-js'
2023-08-29 12:28:52 +08:00
import { twMerge } from 'tailwind-merge'
2023-08-29 20:20:01 +08:00
import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types'
2023-08-24 04:20:53 +08:00
export default () => {
2023-08-29 20:20:01 +08:00
const {
proxies,
proxyProviders,
delayMap,
updateProxy,
setProxiesByProxyName,
2023-08-30 11:01:19 +08:00
delayTestByProxyGroupName,
2023-08-29 20:20:01 +08:00
} = useProxies()
const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
{},
)
2023-08-24 04:20:53 +08:00
2023-08-29 12:28:52 +08:00
const renderDelay = (proxyname: string) => {
const delay = delayMap()[proxyname]
2023-08-24 04:20:53 +08:00
2023-08-29 12:28:52 +08:00
if (typeof delay !== 'number' || delay === 0) {
return ''
}
2023-08-29 12:28:52 +08:00
return <span>{delay}ms</span>
}
2023-08-24 04:20:53 +08:00
2023-08-29 12:28:52 +08:00
onMount(async () => {
2023-08-29 20:20:01 +08:00
await updateProxy()
})
2023-08-29 12:28:52 +08:00
2023-08-29 20:20:01 +08:00
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
setProxiesByProxyName(proxy, proxyName)
}
2023-08-24 04:20:53 +08:00
2023-08-29 20:20:01 +08:00
const onCollapseTitleClick = (name: string) => {
const cMap = collapseMap()
2023-08-29 12:28:52 +08:00
2023-08-29 20:20:01 +08:00
cMap[name] = !cMap[name]
setCollapseMap({ ...cMap })
}
2023-08-29 12:28:52 +08:00
2023-08-30 11:01:19 +08:00
const onSpeedTestClick = (e: MouseEvent, name: string) => {
e.stopPropagation()
delayTestByProxyGroupName(name)
}
2023-08-29 20:20:01 +08:00
const getCollapseClassName = (name: string) => {
return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
}
2023-08-24 04:20:53 +08:00
return (
2023-08-28 00:51:10 +08:00
<div class="flex flex-col gap-4">
2023-08-24 04:20:53 +08:00
<div>
2023-08-28 00:51:10 +08:00
<h1 class="pb-4 text-lg font-semibold">Proxies</h1>
2023-08-24 04:20:53 +08:00
2023-08-29 12:28:52 +08:00
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
2023-08-24 04:20:53 +08:00
<For each={proxies()}>
{(proxy) => (
2023-08-29 20:20:01 +08:00
<div
class={twMerge(
getCollapseClassName(proxy.name),
'collapse collapse-arrow border-secondary bg-base-200 p-4',
)}
>
<div
2023-08-30 15:27:07 +08:00
class="collapse-title flex h-10 items-center text-xl font-medium"
2023-08-29 20:20:01 +08:00
onClick={() => onCollapseTitleClick(proxy.name)}
>
2023-08-29 12:28:52 +08:00
{proxy.name} {proxy.type}
2023-08-30 11:01:19 +08:00
<IconBrandSpeedtest
class="m-4 cursor-pointer"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
/>
2023-08-29 12:28:52 +08:00
</div>
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
2023-08-29 12:28:52 +08:00
<For each={proxy.all}>
2023-08-29 20:20:01 +08:00
{(proxyName) => (
2023-08-29 12:28:52 +08:00
<div
class={twMerge(
2023-08-29 20:20:01 +08:00
proxy.now === proxyName
2023-08-29 12:28:52 +08:00
? 'border-primary bg-success-content text-success'
: 'border-secondary',
2023-08-29 20:20:01 +08:00
'card card-bordered card-compact m-1 cursor-pointer flex-row justify-between p-4',
2023-08-29 12:28:52 +08:00
)}
2023-08-29 20:20:01 +08:00
onClick={() => onProxyNodeClick(proxy, proxyName)}
2023-08-29 12:28:52 +08:00
>
2023-08-29 20:20:01 +08:00
{proxyName} {renderDelay(proxyName)}
2023-08-29 12:28:52 +08:00
</div>
)}
</For>
</div>
2023-08-24 04:20:53 +08:00
</div>
)}
</For>
</div>
</div>
<div>
2023-08-28 00:51:10 +08:00
<h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
2023-08-24 04:20:53 +08:00
2023-08-29 12:28:52 +08:00
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
2023-08-24 04:20:53 +08:00
<For each={proxyProviders()}>
{(proxy) => (
2023-08-29 20:20:01 +08:00
<div
class={twMerge(
getCollapseClassName(proxy.name),
'collapse-arrow collapse border-secondary bg-base-200 p-4',
)}
>
<div
class="collapse-title text-xl font-medium"
onClick={() => onCollapseTitleClick(proxy.name)}
>
2023-08-29 12:28:52 +08:00
{proxy.name}
</div>
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
2023-08-29 12:28:52 +08:00
<For each={proxy.proxies}>
2023-08-29 20:20:01 +08:00
{(proxyNode) => (
<div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
2023-08-29 20:20:01 +08:00
{proxyNode.name} {renderDelay(proxyNode.name)}
2023-08-29 12:28:52 +08:00
</div>
)}
</For>
</div>
2023-08-24 04:20:53 +08:00
</div>
)}
</For>
</div>
</div>
</div>
)
}