mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
fix(overview): only enable flex-row layout on large screen
This commit is contained in:
parent
bf340e2127
commit
be8b54a0f6
@ -10,6 +10,7 @@ export const ProxyPreviewBar = (props: {
|
||||
const latencyList = createMemo(() =>
|
||||
props.proxyNameList.map((name) => latencyMap()[name]),
|
||||
)
|
||||
|
||||
const all = createMemo(() => latencyList().length)
|
||||
const good = createMemo(
|
||||
() =>
|
||||
@ -35,9 +36,7 @@ export const ProxyPreviewBar = (props: {
|
||||
const notConnected = createMemo(
|
||||
() =>
|
||||
latencyList().filter(
|
||||
(latency) =>
|
||||
latency === latencyQualityMap().NOT_CONNECTED ||
|
||||
typeof latency !== 'number',
|
||||
(latency) => latency === latencyQualityMap().NOT_CONNECTED,
|
||||
).length,
|
||||
)
|
||||
|
||||
@ -47,27 +46,27 @@ export const ProxyPreviewBar = (props: {
|
||||
<div
|
||||
class="h-2 bg-success"
|
||||
style={{
|
||||
width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
|
||||
width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-warning"
|
||||
style={{
|
||||
width: `${(middle() * 100) / all()}%`,
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-error"
|
||||
style={{
|
||||
width: `${(slow() * 100) / all()}%`,
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
<div
|
||||
class="h-2 bg-neutral"
|
||||
style={{
|
||||
width: `${(notConnected() * 100) / all()}%`,
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Latency name={props.now} />
|
||||
|
@ -2,22 +2,27 @@ import { For } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { latencyQualityMap, useProxies } from '~/signals'
|
||||
|
||||
const LatencyDots = (p: { latency: number | undefined; selected: boolean }) => {
|
||||
let dotClassName = p.selected
|
||||
const LatencyDots = (props: {
|
||||
latency: number | undefined
|
||||
selected: boolean
|
||||
}) => {
|
||||
let dotClassName = props.selected
|
||||
? 'bg-white border-4 border-success'
|
||||
: 'bg-success'
|
||||
|
||||
if (
|
||||
typeof p.latency !== 'number' ||
|
||||
p.latency === latencyQualityMap().NOT_CONNECTED
|
||||
typeof props.latency !== 'number' ||
|
||||
props.latency === latencyQualityMap().NOT_CONNECTED
|
||||
) {
|
||||
dotClassName = p.selected
|
||||
dotClassName = props.selected
|
||||
? 'bg-white border-4 border-neutral'
|
||||
: 'bg-neutral'
|
||||
} else if (p.latency > latencyQualityMap().HIGH) {
|
||||
dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
|
||||
} else if (p.latency > latencyQualityMap().MEDIUM) {
|
||||
dotClassName = p.selected
|
||||
} else if (props.latency > latencyQualityMap().HIGH) {
|
||||
dotClassName = props.selected
|
||||
? 'bg-white border-4 border-error'
|
||||
: 'bg-error'
|
||||
} else if (props.latency > latencyQualityMap().MEDIUM) {
|
||||
dotClassName = props.selected
|
||||
? 'bg-white border-4 border-warning'
|
||||
: 'bg-warning'
|
||||
}
|
||||
|
@ -133,7 +133,7 @@ const ConfigForm = () => {
|
||||
})
|
||||
|
||||
const [updatingGEODatabases, setUpdatingGEODatabases] = createSignal(false)
|
||||
const [upgraging, setUpgraging] = createSignal(false)
|
||||
const [upgrading, setUpgrading] = createSignal(false)
|
||||
const [restarting, setRestarting] = createSignal(false)
|
||||
|
||||
const onUpdateGEODatabases = async () => {
|
||||
@ -145,11 +145,11 @@ const ConfigForm = () => {
|
||||
}
|
||||
|
||||
const onUpgrade = async () => {
|
||||
setUpgraging(true)
|
||||
setUpgrading(true)
|
||||
try {
|
||||
await request.post('upgrade')
|
||||
} catch {}
|
||||
setUpgraging(false)
|
||||
setUpgrading(false)
|
||||
}
|
||||
|
||||
const onRestart = async () => {
|
||||
@ -190,7 +190,7 @@ const ConfigForm = () => {
|
||||
{t('restartCore')}
|
||||
</Button>
|
||||
|
||||
<Button loading={upgraging()} onClick={onUpgrade}>
|
||||
<Button loading={upgrading()} onClick={onUpgrade}>
|
||||
{t('upgradeCore')}
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -36,7 +36,7 @@ export default () => {
|
||||
const [memories, setMemories] = createSignal<number[]>([])
|
||||
|
||||
// https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
|
||||
// TODO: need a better way
|
||||
// TODO: needs a better way
|
||||
makeTimer(
|
||||
() => {
|
||||
setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
|
||||
@ -152,7 +152,7 @@ export default () => {
|
||||
</TrafficWidget>
|
||||
</div>
|
||||
|
||||
<div class="rounded-box flex flex-col bg-base-300 sm:flex-row">
|
||||
<div class="rounded-box flex flex-col bg-base-300 lg:flex-row">
|
||||
<div class="m-4 flex-1">
|
||||
<SolidApexCharts
|
||||
type="area"
|
||||
|
@ -18,9 +18,7 @@ export default () => {
|
||||
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
|
||||
const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
|
||||
|
||||
onMount(async () => {
|
||||
updateRules()
|
||||
})
|
||||
onMount(updateRules)
|
||||
|
||||
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
|
||||
const el = getBtnElFromClickEvent(e)
|
||||
|
@ -78,7 +78,7 @@ export default () => {
|
||||
|
||||
const { form } = createForm<z.infer<typeof schema>>({
|
||||
extend: validator({ schema }),
|
||||
onSubmit: onSubmit,
|
||||
onSubmit,
|
||||
})
|
||||
|
||||
const onRemove = (id: string) =>
|
||||
@ -88,14 +88,14 @@ export default () => {
|
||||
const query = new URLSearchParams(window.location.search)
|
||||
|
||||
if (query.has('hostname')) {
|
||||
onSubmit({
|
||||
void onSubmit({
|
||||
url: `http://${query.get('hostname')}${
|
||||
query.get('port') && ':' + query.get('port')
|
||||
}`,
|
||||
secret: query.get('secret') ?? '',
|
||||
})
|
||||
} else {
|
||||
onSubmit({
|
||||
void onSubmit({
|
||||
url: 'http://127.0.0.1:9090',
|
||||
secret: '',
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user