Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-26 07:24:10 +08:00
Code Issues Projects Releases Wiki Activity

fix(proxy): tabs won't be shown in proxies page when proxy provider list is empty

Browse Source
This commit is contained in:
kunish 2023-09-16 00:30:44 +08:00
parent 65be97b937
commit 6c5662a7a9
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 112 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/pages/Proxies.tsx
View File

@ -102,57 +102,123 @@ export default () => {
return (
<div class="flex h-full flex-col gap-2">
<Show when={proxyProviders().length > 0}>
<div class="flex items-center gap-2">
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
{(tab) => (
<button
class={twMerge(
activeTab() === tab.type && 'tab-active',
'tab tab-sm gap-2 px-2 sm:tab-md',
)}
onClick={() => setActiveTab(tab.type)}
>
<span>{tab.name}</span>
<div class="badge badge-sm">{tab.count}</div>
</button>
)}
</For>
</div>
<Show when={activeTab() === ActiveTab.proxyProviders}>
<Button
class="btn btn-circle btn-sm"
disabled={isAllProviderUpdating()}
onClick={(e) => onUpdateAllProviderClick(e)}
>
<IconReload
<div class="flex items-center gap-2">
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
{(tab) => (
<button
class={twMerge(
isAllProviderUpdating() && 'animate-spin text-success',
activeTab() === tab.type && 'tab-active',
'tab tab-sm gap-2 px-2 sm:tab-md',
)}
/>
</Button>
</Show>
<div class="ml-auto">
<Button
class="btn-circle btn-sm sm:btn-md"
onClick={() => {
const modal = document.querySelector(
`#${MODAL.PROXIES_SETTINGS}`,
) as HTMLDialogElement | null
modal?.showModal()
}}
>
<IconSettings />
</Button>
</div>
onClick={() => setActiveTab(tab.type)}
>
<span>{tab.name}</span>
<div class="badge badge-sm">{tab.count}</div>
</button>
)}
</For>
</div>
</Show>
<Show when={activeTab() === ActiveTab.proxyProviders}>
<Button
class="btn btn-circle btn-sm"
disabled={isAllProviderUpdating()}
onClick={(e) => onUpdateAllProviderClick(e)}
>
<IconReload
class={twMerge(
isAllProviderUpdating() && 'animate-spin text-success',
)}
/>
</Button>
</Show>
<div class="ml-auto">
<Button
class="btn-circle btn-sm sm:btn-md"
onClick={() => {
const modal = document.querySelector(
`#${MODAL.PROXIES_SETTINGS}`,
) as HTMLDialogElement | null
modal?.showModal()
}}
>
<IconSettings />
</Button>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<Show when={activeTab() === ActiveTab.proxies}>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = filterProxiesByAvailability(
sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
),
latencyMap(),
hideUnAvailableProxies(),
)
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
class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxy.name]}
onClick={(e) => onLatencyTestClick(e, proxy.name)}
>
<IconBrandSpeedtest
class={twMerge(
latencyTestingMap()[proxy.name] &&
'animate-pulse text-success',
)}
/>
</Button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`}
</div>
<Show when={!collapsedMap()[proxy.name]}>
<ProxyNodePreview
proxyNameList={sortedProxyNames}
now={proxy.now}
/>
</Show>
</>
)
return (
<Collapse
isOpen={collapsedMap()[proxy.name]}
title={title}
content={
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
}
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
/>
)
})}
/>
</Show>
<Show when={activeTab() === ActiveTab.proxyProviders}>
<ForTwoColumns
subChild={proxyProviders().map((proxyProvider) => {
@ -235,74 +301,6 @@ export default () => {
})}
/>
</Show>
<Show when={activeTab() === ActiveTab.proxies}>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = filterProxiesByAvailability(
sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
),
latencyMap(),
hideUnAvailableProxies(),
)
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
class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxy.name]}
onClick={(e) => onLatencyTestClick(e, proxy.name)}
>
<IconBrandSpeedtest
class={twMerge(
latencyTestingMap()[proxy.name] &&
'animate-pulse text-success',
)}
/>
</Button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`}
</div>
<Show when={!collapsedMap()[proxy.name]}>
<ProxyNodePreview
proxyNameList={sortedProxyNames}
now={proxy.now}
/>
</Show>
</>
)
return (
<Collapse
isOpen={collapsedMap()[proxy.name]}
title={title}
content={
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
}
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
/>
)
})}
/>
</Show>
</div>
<ProxiesSettingsModal />