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

feat: render in two line

Browse Source
This commit is contained in:
Zephyruso 2023-09-01 21:08:55 +08:00
parent 94c643c7b0
commit 18073407a6
4 changed files with 1666 additions and 1018 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2427
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
src/components/Collpase.tsx
View File

@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
<div <div
class={twMerge( class={twMerge(
getCollapseClassName(), getCollapseClassName(),
'collapse collapse-arrow overflow-visible border-secondary bg-base-200', 'collapse collapse-arrow mb-2 overflow-visible border-secondary bg-base-200',
)} )}
> >
<div <div

30
src/components/ForTwoLine.tsx Normal file
View File

@ -0,0 +1,30 @@
import { JSX, Show, createMemo, createSignal } from 'solid-js'
const [windowWidth, setWindowWidth] = createSignal(0)
setWindowWidth(document?.body?.clientWidth)
window.addEventListener('resize', () => {
setWindowWidth(document.body.clientWidth)
})
const ForTwoLine = (props: { subChild: JSX.Element[] }) => {
const isWidder = createMemo(() => windowWidth() >= 640) // 640 is sm size in daisyui
const leftLine = createMemo(() =>
props.subChild.filter((i, index) => index % 2 === 0 || !isWidder()),
)
const rightLine = createMemo(() =>
props.subChild.filter((i, index) => index % 2 === 1),
)
return (
<div class="flex">
<div class="flex flex-1 flex-col">{leftLine()}</div>
<Show when={isWidder()}>
<div class="ml-2 flex flex-1 flex-col">{rightLine()}</div>
</Show>
</div>
)
}
export default ForTwoLine

225
src/pages/Proxies.tsx
View File

@ -1,6 +1,7 @@
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs' import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
import { For, Show, createSignal, onMount } from 'solid-js' import { Show, createSignal, onMount } from 'solid-js'
import Collapse from '~/components/Collpase' import Collapse from '~/components/Collpase'
import ForTwoLine from '~/components/ForTwoLine'
import ProxyCardGroups from '~/components/ProxyCardGroups' import ProxyCardGroups from '~/components/ProxyCardGroups'
import ProxyNodeDots from '~/components/ProxyNodeDots' import ProxyNodeDots from '~/components/ProxyNodeDots'
import SubscriptionInfo from '~/components/SubscriptionInfo' import SubscriptionInfo from '~/components/SubscriptionInfo'
@ -63,133 +64,121 @@ export default () => {
<div> <div>
<h1 class="pb-4 text-lg font-semibold">Proxies</h1> <h1 class="pb-4 text-lg font-semibold">Proxies</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2"> <ForTwoLine
<For each={proxies()}> subChild={proxies().map((proxy) => {
{(proxy) => { const title = (
const title = ( <>
<> <div class="mr-10 flex items-center justify-between">
<div class="mr-10 flex items-center justify-between"> <span>{proxy.name}</span>
<span>{proxy.name}</span> <button
<button class="btn btn-circle btn-sm"
class="btn btn-circle btn-sm" onClick={(e) => onSpeedTestClick(e, proxy.name)}
onClick={(e) => onSpeedTestClick(e, proxy.name)} >
> <IconBrandSpeedtest />
<IconBrandSpeedtest /> </button>
</button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodeDots
proxyNameList={proxy.all ?? []}
now={proxy.now}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxy.all!}
now={proxy.now}
onClick={(name) => {
setProxyGroupByProxyName(proxy, name)
}}
/>
)
return (
<div>
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
</div> </div>
) <div class="text-sm text-slate-500">
}} {proxy.type} :: {proxy.now}
</For> </div>
</div> <Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodeDots
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> </div>
<Show when={proxyProviders().length > 0}> <Show when={proxyProviders().length > 0}>
<h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1> <h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2"> <ForTwoLine
<For each={proxyProviders()}> subChild={proxyProviders().map((proxyProvider) => {
{(proxyProvider) => { 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>{proxyProvider.name}</span> <div>
<div> <button
<button class="btn btn-circle btn-sm mr-2"
class="btn btn-circle btn-sm mr-2" onClick={(e) =>
onClick={(e) => onUpdateProviderClick(e, proxyProvider.name)
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}`]}
>
<ProxyNodeDots
proxyNameList={
proxyProvider.proxies.map((i) => i.name) ?? []
} }
/> >
</Show> <IconReload />
</> </button>
) <button
const content = ( class="btn btn-circle btn-sm"
<ProxyCardGroups onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
proxies={proxyProvider.proxies.map((i) => i.name)} >
<IconBrandSpeedtest />
</button>
</div>
</div>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/> />
) <div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '}
return ( {formatTimeFromNow(proxyProvider.updatedAt)}
<div> </div>
<Collapse <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]} <ProxyNodeDots
title={title} proxyNameList={
content={content} proxyProvider.proxies.map((i) => i.name) ?? []
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`provider-${proxyProvider.name}`]: val,
})
} }
/> />
</div> </Show>
) </>
}} )
</For> const content = (
</div> <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,
})
}
/>
)
})}
/>
</Show> </Show>
</div> </div>
) )