Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(proxy): keep tab at the top

Browse Source
This commit is contained in:
kunish 2023-09-06 22:47:02 +08:00
parent 08ed61045f
commit 1bb36a1bd6
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 143 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
src/pages/Proxies.tsx
View File

@ -96,9 +96,9 @@ export default () => {
] ]
return ( return (
<div class="flex flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="tabs tabs-boxed gap-2"> <div class="tabs-boxed tabs gap-2">
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
@ -128,163 +128,167 @@ export default () => {
</Button> </Button>
</div> </div>
<Show <div class="flex-1 overflow-y-auto">
when={ <Show
activeTab() === ActiveTab.all || when={
activeTab() === ActiveTab.proxyProviders activeTab() === ActiveTab.all ||
} activeTab() === ActiveTab.proxyProviders
> }
<ForTwoColumns >
subChild={proxyProviders().map((proxyProvider) => { <ForTwoColumns
const sortedProxyNames = sortProxiesByOrderingType( subChild={proxyProviders().map((proxyProvider) => {
proxyProvider.proxies.map((i) => i.name) ?? [], const sortedProxyNames = sortProxiesByOrderingType(
latencyMap(), proxyProvider.proxies.map((i) => i.name) ?? [],
proxiesOrderingType(), latencyMap(),
) proxiesOrderingType(),
)
const title = ( const title = (
<> <>
<div class="mr-8 flex items-center justify-between"> <div class="mr-8 flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span>{proxyProvider.name}</span> <span>{proxyProvider.name}</span>
<div class="badge badge-sm"> <div class="badge badge-sm">
{proxyProvider.proxies.length} {proxyProvider.proxies.length}
</div>
</div>
<div>
<Button
class="btn btn-circle btn-sm mr-2"
disabled={updatingMap()[proxyProvider.name]}
onClick={(e) =>
onUpdateProviderClick(e, proxyProvider.name)
}
>
<IconReload
class={twMerge(
updatingMap()[proxyProvider.name] &&
'animate-spin text-success',
)}
/>
</Button>
<Button
class="btn btn-circle btn-sm"
disabled={healthCheckingMap()[proxyProvider.name]}
onClick={(e) =>
onHealthCheckClick(e, proxyProvider.name)
}
>
<IconBrandSpeedtest
class={twMerge(
healthCheckingMap()[proxyProvider.name] &&
'animate-pulse text-success',
)}
/>
</Button>
</div> </div>
</div> </div>
<div> <SubscriptionInfo
<Button subscriptionInfo={proxyProvider.subscriptionInfo}
class="btn btn-circle btn-sm mr-2" />
disabled={updatingMap()[proxyProvider.name]}
onClick={(e) => <div class="text-sm text-slate-500">
onUpdateProviderClick(e, proxyProvider.name) {proxyProvider.vehicleType} :: {t('updated')}{' '}
} {formatTimeFromNow(proxyProvider.updatedAt)}
> </div>
<IconReload
class={twMerge( <Show when={!collapsedMap()[proxyProvider.name]}>
updatingMap()[proxyProvider.name] && <ProxyNodePreview proxyNameList={sortedProxyNames} />
'animate-spin text-success', </Show>
)} </>
/> )
</Button>
const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
return (
<Collapse
isOpen={collapsedMap()[proxyProvider.name]}
title={title}
content={content}
onCollapse={(val) => setCollapsedMap(proxyProvider.name, val)}
/>
)
})}
/>
</Show>
<Show when={activeTab() === ActiveTab.all}>
<div class="divider" />
</Show>
<Show
when={
activeTab() === ActiveTab.all || activeTab() === ActiveTab.proxies
}
>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)
const title = (
<>
<div class="mr-8 flex items-center justify-between">
<div class="flex items-center gap-2">
<span>{proxy.name}</span>
<div class="badge badge-sm">{proxy.all?.length}</div>
</div>
<Button <Button
class="btn btn-circle btn-sm" class="btn-circle btn-sm"
disabled={healthCheckingMap()[proxyProvider.name]} disabled={latencyTestingMap()[proxy.name]}
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)} onClick={(e) => onLatencyTestClick(e, proxy.name)}
> >
<IconBrandSpeedtest <IconBrandSpeedtest
class={twMerge( class={twMerge(
healthCheckingMap()[proxyProvider.name] && latencyTestingMap()[proxy.name] &&
'animate-pulse text-success', 'animate-pulse text-success',
)} )}
/> />
</Button> </Button>
</div> </div>
</div>
<SubscriptionInfo <div class="text-sm text-slate-500">
subscriptionInfo={proxyProvider.subscriptionInfo} {proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`}
/>
<div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: {t('updated')}{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
<Show when={!collapsedMap()[proxyProvider.name]}>
<ProxyNodePreview proxyNameList={sortedProxyNames} />
</Show>
</>
)
const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
return (
<Collapse
isOpen={collapsedMap()[proxyProvider.name]}
title={title}
content={content}
onCollapse={(val) => setCollapsedMap(proxyProvider.name, val)}
/>
)
})}
/>
</Show>
<Show when={activeTab() === ActiveTab.all}>
<div class="divider" />
</Show>
<Show
when={
activeTab() === ActiveTab.all || activeTab() === ActiveTab.proxies
}
>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)
const title = (
<>
<div class="mr-8 flex items-center justify-between">
<div class="flex items-center gap-2">
<span>{proxy.name}</span>
<div class="badge badge-sm">{proxy.all?.length}</div>
</div> </div>
<Button <Show when={!collapsedMap()[proxy.name]}>
class="btn-circle btn-sm" <ProxyNodePreview
disabled={latencyTestingMap()[proxy.name]} proxyNameList={sortedProxyNames}
onClick={(e) => onLatencyTestClick(e, proxy.name)} now={proxy.now}
>
<IconBrandSpeedtest
class={twMerge(
latencyTestingMap()[proxy.name] &&
'animate-pulse text-success',
)}
/> />
</Button> </Show>
</div> </>
)
<div class="text-sm text-slate-500"> const content = (
{proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`} <ProxyCardGroups
</div> proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
)
<Show when={!collapsedMap()[proxy.name]}> return (
<ProxyNodePreview <Collapse
proxyNameList={sortedProxyNames} isOpen={collapsedMap()[proxy.name]}
now={proxy.now} title={title}
/> content={content}
</Show> onCollapse={(val) => setCollapsedMap(proxy.name, val)}
</> />
) )
})}
const content = ( />
<ProxyCardGroups </Show>
proxyNames={sortedProxyNames} </div>
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
)
return (
<Collapse
isOpen={collapsedMap()[proxy.name]}
title={title}
content={content}
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
/>
)
})}
/>
</Show>
</div> </div>
) )
} }