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: collapse proxies and provider

Browse Source
This commit is contained in:
Zephyruso 2023-09-02 16:02:32 +08:00
parent b79f10f528
commit 875792432a
1 changed files with 99 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/pages/Proxies.tsx
View File

@ -63,104 +63,30 @@ export default () => {
return ( return (
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div> <div class="collapse collapse-arrow">
<h1 class="pb-4 text-lg font-semibold">{t('proxies')}</h1> <input type="checkbox" checked />
<h1 class="collapse-title p-2 text-lg font-semibold">{t('proxies')}</h1>
<ForTwoLine <div class="collapse-content p-0">
subChild={proxies().map((proxy) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<button
class="btn btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={proxy.all ?? []}
now={proxy.now}
/>
</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,
})
}
/>
)
})}
/>
</div>
<Show when={proxyProviders().length > 0}>
<div>
<h1 class="pb-4 text-lg font-semibold">{t('proxyProviders')}</h1>
<ForTwoLine <ForTwoLine
subChild={proxyProviders().map((proxyProvider) => { subChild={proxies().map((proxy) => {
const title = ( const title = (
<> <>
<div class="mr-10 flex items-center justify-between"> <div class="mr-10 flex items-center justify-between">
<span>{proxyProvider.name}</span> <span>{proxy.name}</span>
<div> <button
<button class="btn btn-circle btn-sm"
class="btn btn-circle btn-sm mr-2" onClick={(e) => onSpeedTestClick(e, proxy.name)}
onClick={(e) => >
onUpdateProviderClick(e, proxyProvider.name) <IconBrandSpeedtest />
} </button>
>
<IconReload />
</button>
<button
class="btn btn-circle btn-sm"
onClick={(e) =>
onHealthCheckClick(e, proxyProvider.name)
}
>
<IconBrandSpeedtest />
</button>
</div>
</div> </div>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '} {proxy.type} :: {proxy.now}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div> </div>
<Show <Show when={!collapsedMap()[`group-${proxy.name}`]}>
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
>
<ProxyNodePreview <ProxyNodePreview
proxyNameList={ proxyNameList={proxy.all ?? []}
proxyProvider.proxies.map((i) => i.name) ?? [] now={proxy.now}
}
/> />
</Show> </Show>
</> </>
@ -168,19 +94,23 @@ export default () => {
const content = ( const content = (
<ProxyCardGroups <ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)} proxies={proxy.all!}
now={proxy.now}
onClick={(name) => {
onProxyNodeClick(proxy, name)
}}
/> />
) )
return ( return (
<Collapse <Collapse
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]} isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title} title={title}
content={content} content={content}
onCollapse={(val) => onCollapse={(val) =>
setCollapsedMap({ setCollapsedMap({
...collapsedMap(), ...collapsedMap(),
[`provider-${proxyProvider.name}`]: val, [`group-${proxy.name}`]: val,
}) })
} }
/> />
@ -188,6 +118,82 @@ export default () => {
})} })}
/> />
</div> </div>
</div>
<Show when={proxyProviders().length > 0}>
<div class="collapse-arrow collapse">
<input type="checkbox" checked />
<h1 class="collapse-title p-2 text-lg font-semibold">
{t('proxyProviders')}
</h1>
<div class="collapse-content p-0">
<ForTwoLine
subChild={proxyProviders().map((proxyProvider) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxyProvider.name}</span>
<div>
<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>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
<Show
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
>
<ProxyNodePreview
proxyNameList={
proxyProvider.proxies.map((i) => i.name) ?? []
}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)}
/>
)
return (
<Collapse
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`provider-${proxyProvider.name}`]: val,
})
}
/>
)
})}
/>
</div>
</div>
</Show> </Show>
</div> </div>
) )