mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: collapse proxies and provider
This commit is contained in:
parent
b79f10f528
commit
875792432a
@ -63,104 +63,30 @@ export default () => {
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-2">
|
||||
<div>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('proxies')}</h1>
|
||||
|
||||
<ForTwoLine
|
||||
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>
|
||||
|
||||
<div class="collapse collapse-arrow">
|
||||
<input type="checkbox" checked />
|
||||
<h1 class="collapse-title p-2 text-lg font-semibold">{t('proxies')}</h1>
|
||||
<div class="collapse-content p-0">
|
||||
<ForTwoLine
|
||||
subChild={proxyProviders().map((proxyProvider) => {
|
||||
subChild={proxies().map((proxy) => {
|
||||
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>
|
||||
<span>{proxy.name}</span>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
</div>
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
{proxy.type} :: {proxy.now}
|
||||
</div>
|
||||
<Show
|
||||
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
>
|
||||
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
|
||||
<ProxyNodePreview
|
||||
proxyNameList={
|
||||
proxyProvider.proxies.map((i) => i.name) ?? []
|
||||
}
|
||||
proxyNameList={proxy.all ?? []}
|
||||
now={proxy.now}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
@ -168,19 +94,23 @@ export default () => {
|
||||
|
||||
const content = (
|
||||
<ProxyCardGroups
|
||||
proxies={proxyProvider.proxies.map((i) => i.name)}
|
||||
proxies={proxy.all!}
|
||||
now={proxy.now}
|
||||
onClick={(name) => {
|
||||
onProxyNodeClick(proxy, name)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
isOpen={collapsedMap()[`group-${proxy.name}`]}
|
||||
title={title}
|
||||
content={content}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMap({
|
||||
...collapsedMap(),
|
||||
[`provider-${proxyProvider.name}`]: val,
|
||||
[`group-${proxy.name}`]: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
@ -188,6 +118,82 @@ export default () => {
|
||||
})}
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user