kopia lustrzana https://github.com/cloudflare/wildebeest
123 wiersze
3.3 KiB
TypeScript
123 wiersze
3.3 KiB
TypeScript
import { component$ } from '@builder.io/qwik'
|
|
import { action$, Form, Link, loader$, z, zod$ } from '@builder.io/qwik-city'
|
|
import { getDatabase } from 'wildebeest/backend/src/database'
|
|
import { handleRequestGet } from 'wildebeest/functions/api/v1/instance/rules'
|
|
import { deleteRule, upsertRule } from 'wildebeest/functions/api/wb/settings/server/rules'
|
|
import { TextArea } from '~/components/Settings/TextArea'
|
|
|
|
export type ServerSettingsData = { rules: string[] }
|
|
|
|
export const addAction = action$(
|
|
async (data, { platform }) => {
|
|
let success = false
|
|
try {
|
|
const result = await upsertRule(await getDatabase(platform), data.text)
|
|
success = result.success
|
|
} catch (e: unknown) {
|
|
success = false
|
|
}
|
|
|
|
return {
|
|
success,
|
|
}
|
|
},
|
|
zod$({
|
|
text: z.string().min(1),
|
|
})
|
|
)
|
|
|
|
export const deleteAction = action$(
|
|
async (data, { platform }) => {
|
|
let success = false
|
|
|
|
try {
|
|
const result = await deleteRule(await getDatabase(platform), data.id)
|
|
success = result.success
|
|
} catch (e: unknown) {
|
|
success = false
|
|
}
|
|
|
|
return {
|
|
success,
|
|
}
|
|
},
|
|
zod$({
|
|
id: z.number(),
|
|
})
|
|
)
|
|
|
|
export const rulesLoader = loader$<Promise<{ id: number; text: string }[]>>(async ({ platform }) => {
|
|
const database = await getDatabase(platform)
|
|
|
|
const settingsResp = await handleRequestGet(database)
|
|
let rules: { id: number; text: string }[] = []
|
|
try {
|
|
rules = await settingsResp.json()
|
|
} catch {
|
|
rules = []
|
|
}
|
|
|
|
return JSON.parse(JSON.stringify(rules))
|
|
})
|
|
|
|
export default component$(() => {
|
|
const rules = rulesLoader()
|
|
const addActionObj = addAction()
|
|
const deleteActionObj = deleteAction()
|
|
|
|
return (
|
|
<>
|
|
<Form action={addActionObj} spaReset>
|
|
<p class="mt-12 mb-9">
|
|
While most claim to have read and agree to the terms of service, usually people do not read through until
|
|
after a problem arises. Make it easier to see your server's rules at a glance by providing them in a flat
|
|
bullet point list. Try to keep individual rules short and simple, but try not to split them up into many
|
|
separate items either.
|
|
</p>
|
|
|
|
<div class="mb-12">
|
|
<TextArea
|
|
class="mb-1"
|
|
label="Rule"
|
|
name="text"
|
|
required
|
|
description="Describe a rule or requirement for users on this server. Try to keep it short and simple."
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full my-5 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
|
|
>
|
|
Add Rule
|
|
</button>
|
|
</Form>
|
|
<div>
|
|
{rules.value.map(({ id, text }, idx) => {
|
|
const ruleId = idx + 1
|
|
const ruleBtnText = `${ruleId}. ${text.slice(0, 27)}${text.length > 27 ? '...' : ''}`
|
|
return (
|
|
<div key={id} class="p-4 my-4 bg-wildebeest-600 rounded">
|
|
<Link href={`./edit/${ruleId}`} class="max-w-max inline-block mb-4 no-underline text-lg font-semibold">
|
|
{ruleBtnText}
|
|
</Link>
|
|
<div class="flex justify-between text-wildebeest-400">
|
|
<span>{text}</span>
|
|
<button
|
|
onClick$={() => {
|
|
if (confirm('Are you sure?')) {
|
|
deleteActionObj.run({ id })
|
|
}
|
|
}}
|
|
>
|
|
<i class="fa-solid fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
})
|