refactor: webui adjustments

- remove unnecessary margin in admins and workers page
- use rounded-md instead of rounded-xl for queue page
- output "No worker/admin/jobs" as item in a list
This commit is contained in:
nameless 2023-11-10 02:01:12 +00:00
parent ac63e39373
commit 84ad11b709
3 changed files with 46 additions and 31 deletions

View File

@ -48,14 +48,18 @@ export function AdminsPage(props: { sessionId: string | null }) {
{getAdmins.data?.length {getAdmins.data?.length
? ( ? (
<ul className="my-4 flex flex-col gap-2"> <ul className="flex flex-col gap-2">
{getAdmins.data.map((admin) => ( {getAdmins.data.map((admin) => (
<AdminListItem key={admin.id} admin={admin} sessionId={sessionId} /> <AdminListItem key={admin.id} admin={admin} sessionId={sessionId} />
))} ))}
</ul> </ul>
) )
: getAdmins.data?.length === 0 : getAdmins.data?.length === 0
? <p>No admins</p> ? (
<li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
<p key="no-admins" className="text-center text-gray-500">No admins.</p>
</li>
)
: getAdmins.error : getAdmins.error
? <p className="alert">Loading admins failed</p> ? <p className="alert">Loading admins failed</p>
: <div className="spinner self-center" />} : <div className="spinner self-center" />}

View File

@ -15,36 +15,43 @@ export function QueuePage() {
return ( return (
<FlipMove <FlipMove
typeName={"ul"} typeName={"ul"}
className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-xl" className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-md"
enterAnimation="fade" enterAnimation="fade"
leaveAnimation="fade" leaveAnimation="fade"
> >
{getJobs.data?.map((job) => ( {getJobs.data && getJobs.data.length === 0
<li ? <li key="no-jobs" className="text-center text-gray-500">Queue is empty.</li>
className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-xl" : (
key={job.id.join("/")} getJobs.data?.map((job) => (
> <li
<span className=""> className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-md"
{job.place}. key={job.id.join("/")}
</span> >
<span>{getFlagEmoji(job.state.from.language_code)}</span> <span className="">{job.place}.</span>
<strong>{job.state.from.first_name} {job.state.from.last_name}</strong> <span>{getFlagEmoji(job.state.from.language_code)}</span>
{job.state.from.username <strong>{job.state.from.first_name} {job.state.from.last_name}</strong>
? ( {job.state.from.username
<a className="link" href={`https://t.me/${job.state.from.username}`} target="_blank"> ? (
@{job.state.from.username} <a
</a> className="link"
) href={`https://t.me/${job.state.from.username}`}
: null} target="_blank"
<span className="flex-grow self-center h-full"> >
{job.state.progress != null && @{job.state.from.username}
<Progress className="w-full h-full" value={job.state.progress} />} </a>
</span> )
<span className="text-sm text-zinc-500 dark:text-zinc-400"> : null}
{job.state.workerInstanceKey} <span className="flex-grow self-center h-full">
</span> {job.state.progress != null && (
</li> <Progress className="w-full h-full" value={job.state.progress} />
))} )}
</span>
<span className="text-sm text-zinc-500 dark:text-zinc-400">
{job.state.workerInstanceKey}
</span>
</li>
))
)}
</FlipMove> </FlipMove>
); );
} }

View File

@ -31,14 +31,18 @@ export function WorkersPage(props: { sessionId: string | null }) {
<> <>
{getWorkers.data?.length {getWorkers.data?.length
? ( ? (
<ul className="my-4 flex flex-col gap-2"> <ul className="flex flex-col gap-2">
{getWorkers.data?.map((worker) => ( {getWorkers.data?.map((worker) => (
<WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} /> <WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
))} ))}
</ul> </ul>
) )
: getWorkers.data?.length === 0 : getWorkers.data?.length === 0
? <p>No workers</p> ? (
<li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
<p key="no-workers" className="text-center text-gray-500">No workers.</p>
</li>
)
: getWorkers.error : getWorkers.error
? <p className="alert">Loading workers failed</p> ? <p className="alert">Loading workers failed</p>
: <div className="spinner self-center" />} : <div className="spinner self-center" />}