nameless
/
eris
forked from pinks/eris
1
0
Fork 0
Code Pull Requests Activity

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 9d1d80e438
commit 058aab77ee
3 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/AdminsPage.tsx
View File

@ -48,14 +48,18 @@ export function AdminsPage(props: { sessionId: string | null }) {
{getAdmins.data?.length
? (
<ul className="my-4 flex flex-col gap-2">
<ul className="flex flex-col gap-2">
{getAdmins.data.map((admin) => (
<AdminListItem key={admin.id} admin={admin} sessionId={sessionId} />
))}
</ul>
)
: 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
? <p className="alert">Loading admins failed</p>
: <div className="spinner self-center" />}

61
ui/QueuePage.tsx
View File

@ -15,36 +15,43 @@ export function QueuePage() {
return (
<FlipMove
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"
leaveAnimation="fade"
>
{getJobs.data?.map((job) => (
<li
className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-xl"
key={job.id.join("/")}
>
<span className="">
{job.place}.
</span>
<span>{getFlagEmoji(job.state.from.language_code)}</span>
<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>
)
: null}
<span className="flex-grow self-center h-full">
{job.state.progress != null &&
<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>
))}
{getJobs.data && getJobs.data.length === 0
? <li key="no-jobs" className="text-center text-gray-500">Queue is empty.</li>
: (
getJobs.data?.map((job) => (
<li
className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-md"
key={job.id.join("/")}
>
<span className="">{job.place}.</span>
<span>{getFlagEmoji(job.state.from.language_code)}</span>
<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>
)
: null}
<span className="flex-grow self-center h-full">
{job.state.progress != null && (
<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>
);
}

8
ui/WorkersPage.tsx
View File

@ -31,14 +31,18 @@ export function WorkersPage(props: { sessionId: string | null }) {
<>
{getWorkers.data?.length
? (
<ul className="my-4 flex flex-col gap-2">
<ul className="flex flex-col gap-2">
{getWorkers.data?.map((worker) => (
<WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
))}
</ul>
)
: 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
? <p className="alert">Loading workers failed</p>
: <div className="spinner self-center" />}