mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-30 23:35:37 +08:00
feat(connections): pausing support
This commit is contained in:
parent
26b9658ea7
commit
6076619485
@ -5,6 +5,8 @@ import { makePersisted } from '@solid-primitives/storage'
|
|||||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||||
import {
|
import {
|
||||||
IconCircleX,
|
IconCircleX,
|
||||||
|
IconPlayerPause,
|
||||||
|
IconPlayerPlay,
|
||||||
IconSettings,
|
IconSettings,
|
||||||
IconSortAscending,
|
IconSortAscending,
|
||||||
IconSortDescending,
|
IconSortDescending,
|
||||||
@ -27,7 +29,7 @@ import byteSize from 'byte-size'
|
|||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { isIPv6 } from 'is-ip'
|
import { isIPv6 } from 'is-ip'
|
||||||
import { differenceWith, isEqualWith } from 'lodash'
|
import { differenceWith, isEqualWith } from 'lodash'
|
||||||
import { For, createEffect, createSignal } from 'solid-js'
|
import { For, createEffect, createMemo, createSignal, untrack } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { Button, ConnectionsTableOrderingModal } from '~/components'
|
import { Button, ConnectionsTableOrderingModal } from '~/components'
|
||||||
import {
|
import {
|
||||||
@ -74,6 +76,12 @@ export default () => {
|
|||||||
const [activeConnectionsWithSpeed, setActiveConnectionsWithSpeed] =
|
const [activeConnectionsWithSpeed, setActiveConnectionsWithSpeed] =
|
||||||
createSignal<ConnectionWithSpeed[]>([])
|
createSignal<ConnectionWithSpeed[]>([])
|
||||||
|
|
||||||
|
const [paused, setPaused] = createSignal(false)
|
||||||
|
const [pausedActiveConnectionsSnapshot, setPausedActiveConnectionsSnapshot] =
|
||||||
|
createSignal<ConnectionWithSpeed[]>([])
|
||||||
|
const [pausedClosedConnectionsSnapshot, setPausedClosedConnectionsSnapshot] =
|
||||||
|
createSignal<ConnectionWithSpeed[]>([])
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = messageEvent()?.data
|
const data = messageEvent()?.data
|
||||||
|
|
||||||
@ -119,6 +127,26 @@ export default () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
if (paused()) {
|
||||||
|
setPausedActiveConnectionsSnapshot(
|
||||||
|
untrack(() => activeConnectionsWithSpeed()),
|
||||||
|
)
|
||||||
|
|
||||||
|
setPausedClosedConnectionsSnapshot(
|
||||||
|
untrack(() => closedConnectionsWithSpeed()),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const activeConnectionsWithSpeedAndPausing = createMemo(() =>
|
||||||
|
paused() ? pausedActiveConnectionsSnapshot() : activeConnectionsWithSpeed(),
|
||||||
|
)
|
||||||
|
|
||||||
|
const closedConnectionsWithSpeedAndPausing = createMemo(() =>
|
||||||
|
paused() ? pausedClosedConnectionsSnapshot() : closedConnectionsWithSpeed(),
|
||||||
|
)
|
||||||
|
|
||||||
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
|
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
|
||||||
|
|
||||||
const [columnVisibility, setColumnVisibility] = makePersisted(
|
const [columnVisibility, setColumnVisibility] = makePersisted(
|
||||||
@ -269,8 +297,8 @@ export default () => {
|
|||||||
},
|
},
|
||||||
get data() {
|
get data() {
|
||||||
return activeTab() === ActiveTab.activeConnections
|
return activeTab() === ActiveTab.activeConnections
|
||||||
? activeConnectionsWithSpeed()
|
? activeConnectionsWithSpeedAndPausing()
|
||||||
: closedConnectionsWithSpeed()
|
: closedConnectionsWithSpeedAndPausing()
|
||||||
},
|
},
|
||||||
sortDescFirst: true,
|
sortDescFirst: true,
|
||||||
enableHiding: true,
|
enableHiding: true,
|
||||||
@ -311,12 +339,12 @@ export default () => {
|
|||||||
{
|
{
|
||||||
type: ActiveTab.activeConnections,
|
type: ActiveTab.activeConnections,
|
||||||
name: t('activeConnections'),
|
name: t('activeConnections'),
|
||||||
count: activeConnectionsWithSpeed().length,
|
count: activeConnectionsWithSpeedAndPausing().length,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: ActiveTab.closedConnections,
|
type: ActiveTab.closedConnections,
|
||||||
name: t('closedConnections'),
|
name: t('closedConnections'),
|
||||||
count: closedConnectionsWithSpeed().length,
|
count: closedConnectionsWithSpeedAndPausing().length,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -342,6 +370,13 @@ export default () => {
|
|||||||
onInput={(e) => setSearch(e.target.value)}
|
onInput={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
class="btn-circle"
|
||||||
|
onClick={() => setPaused((paused) => !paused)}
|
||||||
|
>
|
||||||
|
{paused() ? <IconPlayerPause /> : <IconPlayerPlay />}
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
class="btn-circle"
|
class="btn-circle"
|
||||||
onClick={() => request.delete('connections')}
|
onClick={() => request.delete('connections')}
|
||||||
|
Loading…
Reference in New Issue
Block a user