metacubexd/src/pages/Rules.tsx

70 lines
2.2 KiB
TypeScript
Raw Normal View History

2023-09-01 11:44:11 +08:00
import InfiniteScroll from 'solid-infinite-scroll'
import { For, createMemo, createSignal, onMount } from 'solid-js'
2023-08-28 22:13:48 +08:00
import { useRequest } from '~/signals'
import type { Rule, RuleProvider } from '~/types'
export default () => {
2023-08-28 22:13:48 +08:00
const request = useRequest()
2023-09-01 11:44:11 +08:00
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
2023-08-28 22:13:48 +08:00
const [rules, setRules] = createSignal<Rule[]>([])
const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
2023-09-01 11:44:11 +08:00
const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
2023-08-28 22:13:48 +08:00
onMount(async () => {
const { rules } = await request
.get('rules')
.json<{ rules: Record<string, Rule> }>()
setRules(Object.values(rules))
const { providers } = await request
.get('providers/rules')
.json<{ providers: Record<string, RuleProvider> }>()
setRulesProviders(Object.values(providers))
})
return (
<div class="flex flex-col gap-4">
<div>
<h1 class="pb-4 text-lg font-semibold">Rules</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
2023-09-01 11:44:11 +08:00
<InfiniteScroll
each={renderRules()}
hasMore={renderRules().length < rules().length}
next={() => setMaxRuleRender(maxRuleRender() + 100)}
>
2023-08-28 22:13:48 +08:00
{(rule) => (
2023-09-01 10:29:12 +08:00
<div class="card card-bordered card-compact bg-base-200 p-4">
<div class="break-all">{rule.payload}</div>
<div class="text-xs text-slate-500">
{rule.type} :: {rule.proxy}
2023-08-28 22:13:48 +08:00
</div>
</div>
)}
2023-09-01 11:44:11 +08:00
</InfiniteScroll>
2023-08-28 22:13:48 +08:00
</div>
</div>
<div>
<h1 class="pb-4 text-lg font-semibold">Rules Providers</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
2023-08-28 22:13:48 +08:00
<For each={rulesProviders()}>
{(rulesProvider) => (
2023-09-01 10:29:12 +08:00
<div class="card card-bordered card-compact bg-base-200 p-4">
2023-08-28 22:13:48 +08:00
<div>{rulesProvider.name}</div>
<div class="text-xs text-slate-500">
{rulesProvider.vehicleType} :: {rulesProvider.behavior} (
2023-08-28 22:13:48 +08:00
{rulesProvider.ruleCount})
</div>
</div>
)}
</For>
</div>
</div>
</div>
)
2023-08-24 04:20:53 +08:00
}