metacubexd/src/pages/Proxies.tsx

184 lines
5.7 KiB
TypeScript
Raw Normal View History

import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
2023-09-01 11:44:11 +08:00
import { For, Show, createSignal, onMount } from 'solid-js'
2023-08-30 23:02:55 +08:00
import Collapse from '~/components/Collpase'
import ProxyNodeCard from '~/components/ProxyNodeCard'
2023-09-01 12:40:34 +08:00
import SubscriptionInfo from '~/components/SubscriptionInfo'
2023-08-29 20:20:01 +08:00
import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types'
2023-08-31 11:50:21 +08:00
import { formatTimeFromNow } from '~/utils/date'
2023-08-24 04:20:53 +08:00
export default () => {
2023-08-29 20:20:01 +08:00
const {
proxies,
proxyProviders,
updateProxy,
setProxyGroupByProxyName,
2023-08-30 11:01:19 +08:00
delayTestByProxyGroupName,
2023-08-31 12:02:23 +08:00
updateProviderByProviderName,
healthCheckByProviderName,
2023-08-29 20:20:01 +08:00
} = 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 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) => {
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) => {
const el = e.target as HTMLElement
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-09-01 11:17:15 +08:00
const onHealthCheckClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-pulse')
2023-08-31 12:02:23 +08:00
e.stopPropagation()
2023-09-01 11:17:15 +08:00
await healthCheckByProviderName(name)
el.classList.remove('animate-pulse')
2023-08-31 12:02:23 +08:00
}
2023-09-01 11:17:15 +08:00
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-spin')
e.stopPropagation()
2023-09-01 11:17:15 +08:00
await updateProviderByProviderName(name)
el.classList.remove('animate-spin')
}
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-31 00:00:50 +08:00
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
2023-08-24 04:20:53 +08:00
<For each={proxies()}>
2023-08-30 23:02:55 +08:00
{(proxy) => {
const title = (
2023-08-31 00:45:51 +08:00
<div class="flex items-center justify-between">
<div class="flex flex-col">
2023-08-30 23:36:25 +08:00
<span>{proxy.name}</span>
2023-08-31 00:45:51 +08:00
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
2023-08-30 23:02:55 +08:00
</div>
2023-08-31 00:45:51 +08:00
<button
class="btn btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</button>
</div>
2023-08-30 23:02:55 +08:00
)
2023-08-31 00:00:50 +08:00
2023-08-30 23:02:55 +08:00
const content = (
<For each={proxy.all}>
{(proxyName) => (
<ProxyNodeCard
proxyName={proxyName}
isSelected={proxy.now === proxyName}
onClick={() => onProxyNodeClick(proxy, proxyName)}
/>
)}
</For>
)
return (
2023-08-31 22:49:34 +08:00
<div>
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
</div>
2023-08-30 23:02:55 +08:00
)
}}
2023-08-24 04:20:53 +08:00
</For>
</div>
</div>
2023-09-01 11:44:11 +08:00
<Show when={proxyProviders().length > 0}>
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-31 00:00:50 +08:00
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
2023-08-24 04:20:53 +08:00
<For each={proxyProviders()}>
2023-08-30 23:02:55 +08:00
{(proxyProvider) => {
const title = (
<div class="flex items-center justify-between">
<div class="flex flex-col gap-1">
<span>{proxyProvider.name}</span>
2023-09-01 12:40:34 +08:00
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500">
2023-08-31 11:50:21 +08:00
{proxyProvider.vehicleType} :: Updated{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
</div>
<div class="flex flex-nowrap">
2023-08-31 12:02:23 +08:00
<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>
)
2023-08-30 23:02:55 +08:00
const content = (
<For each={proxyProvider.proxies}>
{(proxy) => <ProxyNodeCard proxyName={proxy.name} />}
</For>
)
return (
2023-08-31 22:49:34 +08:00
<div>
<Collapse
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`provider-${proxyProvider.name}`]: val,
})
}
/>
</div>
2023-08-30 23:02:55 +08:00
)
}}
2023-08-24 04:20:53 +08:00
</For>
</div>
2023-09-01 11:44:11 +08:00
</Show>
2023-08-24 04:20:53 +08:00
</div>
)
}