pinks
/
eris
1
0
Fork 4
Code Issues 15 Pull Requests 1 Activity

feat: managing admins in webui

This commit is contained in:
pinks 2023-10-23 02:39:01 +02:00
parent f7b29dd150
commit a35f07b036
22 changed files with 946 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -13,17 +13,17 @@ You can put these in `.env` file or pass them as environment variables.
- `TG_BOT_TOKEN` - Telegram bot token. Get yours from [@BotFather](https://t.me/BotFather).
Required.
- `TG_ADMIN_USERNAMES` - Comma separated list of usernames of users that can use admin commands.
- `DENO_KV_PATH` - [Deno KV](https://deno.land/api?s=Deno.openKv&unstable) database file path. A
temporary file is used by default.
- `LOG_LEVEL` - [Log level](https://deno.land/std@0.201.0/log/mod.ts?s=LogLevels). Default: `INFO`.
You can configure more stuff in [Eris WebUI](http://localhost:5999/) when running.
## Running
- Start Stable Diffusion WebUI: `./webui.sh --api` (in SD WebUI directory)
- Start Eris: `deno task start`
1. Start Eris: `deno task start`
2. Visit [Eris WebUI](http://localhost:5999/) and login via Telegram.
3. Promote yourself to admin in the Eris WebUI.
4. Start Stable Diffusion WebUI: `./webui.sh --api` (in SD WebUI directory)
5. Add a new worker in the Eris WebUI.
## Codegen

129
api/adminsRoute.ts Normal file
View File

@ -0,0 +1,129 @@
import { Model } from "indexed_kv";
import { info } from "std/log/mod.ts";
import { createEndpoint, createMethodFilter, createPathFilter } from "t_rest/server";
import { Admin, adminSchema, adminStore } from "../app/adminStore.ts";
import { getUser, withAdmin, withUser } from "./withUser.ts";
export type AdminData = Admin & { id: string };
function getAdminData(adminEntry: Model<Admin>): AdminData {
return { id: adminEntry.id, ...adminEntry.value };
}
export const adminsRoute = createPathFilter({
"": createMethodFilter({
GET: createEndpoint(
{},
async () => {
const adminEntries = await adminStore.getAll();
const admins = adminEntries.map(getAdminData);
return {
status: 200,
body: { type: "application/json", data: admins satisfies AdminData[] },
};
},
),
POST: createEndpoint(
{
query: {
sessionId: { type: "string" },
},
body: {
type: "application/json",
schema: {
type: "object",
properties: {
tgUserId: adminSchema.properties.tgUserId,
},
required: ["tgUserId"],
},
},
},
async ({ query, body }) => {
return withAdmin(query, async (user, adminEntry) => {
const newAdminUser = await getUser(body.data.tgUserId);
const newAdminEntry = await adminStore.create({
tgUserId: body.data.tgUserId,
promotedBy: adminEntry.id,
});
info(`User ${user.first_name} promoted user ${newAdminUser.first_name} to admin`);
return {
status: 200,
body: { type: "application/json", data: getAdminData(newAdminEntry) },
};
});
},
),
}),
"promote_self": createMethodFilter({
POST: createEndpoint(
{
query: {
sessionId: { type: "string" },
},
},
// if there are no admins, allow any user to promote themselves
async ({ query }) => {
return withUser(query, async (user) => {
const adminEntries = await adminStore.getAll();
if (adminEntries.length === 0) {
const newAdminEntry = await adminStore.create({
tgUserId: user.id,
promotedBy: null,
});
info(`User ${user.first_name} promoted themselves to admin`);
return {
status: 200,
body: { type: "application/json", data: getAdminData(newAdminEntry) },
};
}
return {
status: 403,
body: { type: "text/plain", data: `You are not allowed to promote yourself` },
};
});
},
),
}),
"{adminId}": createPathFilter({
"": createMethodFilter({
GET: createEndpoint(
{},
async ({ params }) => {
const adminEntry = await adminStore.getById(params.adminId!);
if (!adminEntry) {
return { status: 404, body: { type: "text/plain", data: `Admin not found` } };
}
return {
status: 200,
body: { type: "application/json", data: getAdminData(adminEntry) },
};
},
),
DELETE: createEndpoint(
{
query: {
sessionId: { type: "string" },
},
},
async ({ params, query }) => {
const deletedAdminEntry = await adminStore.getById(params.adminId!);
if (!deletedAdminEntry) {
return { status: 404, body: { type: "text/plain", data: `Admin not found` } };
}
const deletedAdminUser = await getUser(deletedAdminEntry.value.tgUserId);
return withUser(query, async (chat) => {
await deletedAdminEntry.delete();
info(`User ${chat.first_name} demoted user ${deletedAdminUser.first_name} from admin`);
return {
status: 200,
body: { type: "application/json", data: null },
};
});
},
),
}),
}),
});

8
api/paramsRoute.ts
View File

@ -2,7 +2,7 @@ import { deepMerge } from "std/collections/deep_merge.ts";
import { info } from "std/log/mod.ts";
import { createEndpoint, createMethodFilter } from "t_rest/server";
import { configSchema, getConfig, setConfig } from "../app/config.ts";
import { withUser } from "./withUser.ts";
import { withAdmin } from "./withUser.ts";
export const paramsRoute = createMethodFilter({
GET: createEndpoint(
@ -22,13 +22,13 @@ export const paramsRoute = createMethodFilter({
},
},
async ({ query, body }) => {
return withUser(query, async (chat) => {
return withAdmin(query, async (user) => {
const config = await getConfig();
info(`User ${chat.username} updated default params: ${JSON.stringify(body.data)}`);
info(`User ${user.first_name} updated default params: ${JSON.stringify(body.data)}`);
const defaultParams = deepMerge(config.defaultParams ?? {}, body.data);
await setConfig({ defaultParams });
return { status: 200, body: { type: "application/json", data: config.defaultParams } };
}, { admin: true });
});
},
),
});

6
api/serveApi.ts
View File

@ -1,4 +1,5 @@
import { createLoggerMiddleware, createPathFilter } from "t_rest/server";
import { adminsRoute } from "./adminsRoute.ts";
import { botRoute } from "./botRoute.ts";
import { jobsRoute } from "./jobsRoute.ts";
import { paramsRoute } from "./paramsRoute.ts";
@ -9,13 +10,14 @@ import { workersRoute } from "./workersRoute.ts";
export const serveApi = createLoggerMiddleware(
createPathFilter({
"admins": adminsRoute,
"bot": botRoute,
"jobs": jobsRoute,
"sessions": sessionsRoute,
"users": usersRoute,
"settings/params": paramsRoute,
"stats": statsRoute,
"users": usersRoute,
"workers": workersRoute,
"bot": botRoute,
}),
{ filterStatus: (status) => status >= 400 },
);

23
api/usersRoute.ts
View File

@ -1,20 +1,18 @@
import { createEndpoint, createMethodFilter, createPathFilter } from "t_rest/server";
import { getConfig } from "../app/config.ts";
import { bot } from "../bot/mod.ts";
import { getUser } from "./withUser.ts";
import { adminStore } from "../app/adminStore.ts";
export const usersRoute = createPathFilter({
"{userId}/photo": createMethodFilter({
GET: createEndpoint(
{ query: null, body: null },
async ({ params }) => {
const chat = await bot.api.getChat(params.userId!);
if (chat.type !== "private") {
throw new Error("Chat is not private");
}
const photoData = chat.photo?.small_file_id
const user = await getUser(Number(params.userId!));
const photoData = user.photo?.small_file_id
? await fetch(
`https://api.telegram.org/file/bot${bot.token}/${await bot.api.getFile(
chat.photo.small_file_id,
user.photo.small_file_id,
).then((file) => file.file_path)}`,
).then((resp) => resp.arrayBuffer())
: undefined;
@ -36,17 +34,14 @@ export const usersRoute = createPathFilter({
GET: createEndpoint(
{ query: null, body: null },
async ({ params }) => {
const chat = await bot.api.getChat(params.userId!);
if (chat.type !== "private") {
throw new Error("Chat is not private");
}
const config = await getConfig();
const isAdmin = chat.username && config?.adminUsernames?.includes(chat.username);
const user = await getUser(Number(params.userId!));
const [adminEntry] = await adminStore.getBy("tgUserId", { value: user.id });
const admin = adminEntry?.value;
return {
status: 200,
body: {
type: "application/json",
data: { ...chat, isAdmin },
data: { ...user, admin },
},
};
},

32
api/withUser.ts
View File

@ -1,28 +1,40 @@
import { Chat } from "grammy_types";
import { Model } from "indexed_kv";
import { Output } from "t_rest/client";
import { getConfig } from "../app/config.ts";
import { Admin, adminStore } from "../app/adminStore.ts";
import { bot } from "../bot/mod.ts";
import { sessions } from "./sessionsRoute.ts";
export async function withUser<O extends Output>(
query: { sessionId: string },
cb: (user: Chat.PrivateGetChat) => Promise<O>,
options?: { admin?: boolean },
) {
const session = sessions.get(query.sessionId);
if (!session?.userId) {
return { status: 401, body: { type: "text/plain", data: "Must be logged in" } } as const;
}
const chat = await bot.api.getChat(session.userId);
if (chat.type !== "private") throw new Error("Chat is not private");
if (options?.admin) {
if (!chat.username) {
return { status: 403, body: { type: "text/plain", data: "Must have a username" } } as const;
const user = await getUser(session.userId);
return cb(user);
}
const config = await getConfig();
if (!config?.adminUsernames?.includes(chat.username)) {
export async function withAdmin<O extends Output>(
query: { sessionId: string },
cb: (user: Chat.PrivateGetChat, admin: Model<Admin>) => Promise<O>,
) {
const session = sessions.get(query.sessionId);
if (!session?.userId) {
return { status: 401, body: { type: "text/plain", data: "Must be logged in" } } as const;
}
const user = await getUser(session.userId);
const [admin] = await adminStore.getBy("tgUserId", { value: session.userId });
if (!admin) {
return { status: 403, body: { type: "text/plain", data: "Must be an admin" } } as const;
}
return cb(user, admin);
}
return cb(chat);
export async function getUser(userId: number): Promise<Chat.PrivateGetChat> {
const chat = await bot.api.getChat(userId);
if (chat.type !== "private") throw new Error("Chat is not private");
return chat;
}

20
api/workersRoute.ts
View File

@ -13,7 +13,7 @@ import {
} from "../app/workerInstanceStore.ts";
import { getAuthHeader } from "../utils/getAuthHeader.ts";
import { omitUndef } from "../utils/omitUndef.ts";
import { withUser } from "./withUser.ts";
import { withAdmin } from "./withUser.ts";
export type WorkerData = Omit<WorkerInstance, "sdUrl" | "sdAuth"> & {
id: string;
@ -89,14 +89,14 @@ export const workersRoute = createPathFilter({
},
},
async ({ query, body }) => {
return withUser(query, async (chat) => {
return withAdmin(query, async (user) => {
const workerInstance = await workerInstanceStore.create(body.data);
info(`User ${chat.username} created worker ${workerInstance.id}`);
info(`User ${user.first_name} created worker ${workerInstance.value.name}`);
return {
status: 200,
body: { type: "application/json", data: await getWorkerData(workerInstance) },
};
}, { admin: true });
});
},
),
}),
@ -131,9 +131,9 @@ export const workersRoute = createPathFilter({
if (!workerInstance) {
return { status: 404, body: { type: "text/plain", data: `Worker not found` } };
}
return withUser(query, async (chat) => {
return withAdmin(query, async (user) => {
info(
`User ${chat.username} updated worker ${params.workerId}: ${
`User ${user.first_name} updated worker ${workerInstance.value.name}: ${
JSON.stringify(body.data)
}`,
);
@ -142,7 +142,7 @@ export const workersRoute = createPathFilter({
status: 200,
body: { type: "application/json", data: await getWorkerData(workerInstance) },
};
}, { admin: true });
});
},
),
DELETE: createEndpoint(
@ -157,11 +157,11 @@ export const workersRoute = createPathFilter({
if (!workerInstance) {
return { status: 404, body: { type: "text/plain", data: `Worker not found` } };
}
return withUser(query, async (chat) => {
info(`User ${chat.username} deleted worker ${params.workerId}`);
return withAdmin(query, async (user) => {
info(`User ${user.first_name} deleted worker ${workerInstance.value.name}`);
await workerInstance.delete();
return { status: 200, body: { type: "application/json", data: null } };
}, { admin: true });
});
},
),
}),

24
app/adminStore.ts Normal file
View File

@ -0,0 +1,24 @@
import { Store } from "indexed_kv";
import { JsonSchema, jsonType } from "t_rest/server";
import { db } from "./db.ts";
export const adminSchema = {
type: "object",
properties: {
tgUserId: { type: "number" },
promotedBy: { type: ["string", "null"] },
},
required: ["tgUserId", "promotedBy"],
} as const satisfies JsonSchema;
export type Admin = jsonType<typeof adminSchema>;
type AdminIndices = {
tgUserId: number;
};
export const adminStore = new Store<Admin, AdminIndices>(db, "adminUsers", {
indices: {
tgUserId: { getValue: (adminUser) => adminUser.tgUserId },
},
});

3
app/config.ts
View File

@ -4,7 +4,6 @@ import { JsonSchema, jsonType } from "t_rest/server";
export const configSchema = {
type: "object",
properties: {
adminUsernames: { type: "array", items: { type: "string" } },
pausedReason: { type: ["string", "null"] },
maxUserJobs: { type: "number" },
maxJobs: { type: "number" },
@ -31,7 +30,6 @@ export async function getConfig(): Promise<Config> {
const configEntry = await db.get<Config>(["config"]);
const config = configEntry?.value;
return {
adminUsernames: config?.adminUsernames ?? Deno.env.get("TG_ADMIN_USERNAMES")?.split(",") ?? [],
pausedReason: config?.pausedReason ?? null,
maxUserJobs: config?.maxUserJobs ?? Infinity,
maxJobs: config?.maxJobs ?? Infinity,
@ -42,7 +40,6 @@ export async function getConfig(): Promise<Config> {
export async function setConfig(newConfig: Partial<Config>): Promise<void> {
const oldConfig = await getConfig();
const config: Config = {
adminUsernames: newConfig.adminUsernames ?? oldConfig.adminUsernames,
pausedReason: newConfig.pausedReason ?? oldConfig.pausedReason,
maxUserJobs: newConfig.maxUserJobs ?? oldConfig.maxUserJobs,
maxJobs: newConfig.maxJobs ?? oldConfig.maxJobs,

6
bot/broadcastCommand.ts
View File

@ -2,7 +2,7 @@ import { CommandContext } from "grammy";
import { bold, fmt, FormattedString } from "grammy_parse_mode";
import { distinctBy } from "std/collections/distinct_by.ts";
import { error, info } from "std/log/mod.ts";
import { getConfig } from "../app/config.ts";
import { adminStore } from "../app/adminStore.ts";
import { generationStore } from "../app/generationStore.ts";
import { formatUserChat } from "../utils/formatUserChat.ts";
import { ErisContext } from "./mod.ts";
@ -12,9 +12,9 @@ export async function broadcastCommand(ctx: CommandContext<ErisContext>) {
return ctx.reply("I don't know who you are.");
}
const config = await getConfig();
const [admin] = await adminStore.getBy("tgUserId", { value: ctx.from.id });
if (!config.adminUsernames.includes(ctx.from.username)) {
if (!admin) {
return ctx.reply("Only a bot admin can use this command.");
}

25
bot/mod.ts
View File

@ -4,7 +4,6 @@ import { hydrateReply, ParseModeFlavor } from "grammy_parse_mode";
import { run, sequentialize } from "grammy_runner";
import { error, info, warning } from "std/log/mod.ts";
import { sessions } from "../api/sessionsRoute.ts";
import { getConfig, setConfig } from "../app/config.ts";
import { formatUserChat } from "../utils/formatUserChat.ts";
import { omitUndef } from "../utils/omitUndef.ts";
import { broadcastCommand } from "./broadcastCommand.ts";
@ -170,30 +169,6 @@ bot.command("cancel", cancelCommand);
bot.command("broadcast", broadcastCommand);
bot.command("pause", async (ctx) => {
if (!ctx.from?.username) return;
const config = await getConfig();
if (!config.adminUsernames.includes(ctx.from.username)) return;
if (config.pausedReason != null) {
return ctx.reply(`Already paused: ${config.pausedReason}`);
}
await setConfig({
pausedReason: ctx.match || "No reason given",
});
warning(`Bot paused by ${ctx.from.first_name} because ${config.pausedReason}`);
return ctx.reply("Paused");
});
bot.command("resume", async (ctx) => {
if (!ctx.from?.username) return;
const config = await getConfig();
if (!config.adminUsernames.includes(ctx.from.username)) return;
if (config.pausedReason == null) return ctx.reply("Already running");
await setConfig({ pausedReason: null });
info(`Bot resumed by ${ctx.from.first_name}`);
return ctx.reply("Resumed");
});
bot.command("crash", () => {
throw new Error("Crash command used");
});

3
deno.json
View File

@ -45,8 +45,7 @@
"t_rest/server": "https://esm.sh/ty-rest@0.4.1/server",
"twind/core": "https://esm.sh/@twind/core@1.1.3",
"twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
"ulid": "https://deno.land/x/ulid@v0.3.0/mod.ts",
"use-local-storage": "https://esm.sh/use-local-storage@3.0.0?external=react&dev"
"ulid": "https://deno.land/x/ulid@v0.3.0/mod.ts"
},
"lint": {
"rules": {

250
ui/AdminsPage.tsx Normal file
View File

@ -0,0 +1,250 @@
import React, { useRef } from "react";
import useSWR, { useSWRConfig } from "swr";
import { AdminData } from "../api/adminsRoute.ts";
import { fetchApi, handleResponse } from "./apiClient.ts";
export function AdminsPage(props: { sessionId: string | null }) {
const { sessionId } = props;
const { mutate } = useSWRConfig();
const addDialogRef = useRef<HTMLDialogElement>(null);
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
);
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
const getAdmins = useSWR(
["admins", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
);
return (
<>
{getUser.data && getAdmins.data && getAdmins.data.length === 0 && (
<button
className="button-filled"
onClick={() => {
mutate(
(key) => Array.isArray(key) && key[0] === "admins",
async () =>
fetchApi("admins/promote_self", "POST", {
query: { sessionId: sessionId ?? "" },
}).then(handleResponse),
{ populateCache: false },
);
}}
>
Promote me to admin
</button>
)}
{getAdmins.data?.length
? (
<ul className="my-4 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>
: getAdmins.error
? <p className="alert">Loading admins failed</p>
: <div className="spinner self-center" />}
{getUser.data?.admin && (
<button
className="button-filled"
onClick={() => addDialogRef.current?.showModal()}
>
Add admin
</button>
)}
<AddAdminDialog
dialogRef={addDialogRef}
sessionId={sessionId}
/>
</>
);
}
function AddAdminDialog(props: {
dialogRef: React.RefObject<HTMLDialogElement>;
sessionId: string | null;
}) {
const { dialogRef, sessionId } = props;
const { mutate } = useSWRConfig();
return (
<dialog ref={dialogRef} className="dialog animate-pop-in backdrop-animate-fade-in">
<form
method="dialog"
className="flex flex-col gap-4 p-4"
onSubmit={(e) => {
e.preventDefault();
const data = new FormData(e.target as HTMLFormElement);
mutate(
(key) => Array.isArray(key) && key[0] === "admins",
async () =>
fetchApi("admins", "POST", {
query: { sessionId: sessionId! },
body: {
type: "application/json",
data: {
tgUserId: Number(data.get("tgUserId") as string),
},
},
}).then(handleResponse),
{ populateCache: false },
);
dialogRef.current?.close();
}}
>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
Telegram user ID
</span>
<input
className="input-text"
type="text"
name="tgUserId"
required
pattern="-?\d+"
/>
</label>
<div className="flex gap-2 items-center justify-end">
<button
type="button"
className="button-outlined"
onClick={() => dialogRef.current?.close()}
>
Close
</button>
<button type="submit" className="button-filled">
Save
</button>
</div>
</form>
</dialog>
);
}
function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
const { admin, sessionId } = props;
const deleteDialogRef = useRef<HTMLDialogElement>(null);
const getAdminUser = useSWR(
["users/{userId}", "GET", { params: { userId: String(admin.tgUserId) } }] as const,
(args) => fetchApi(...args).then(handleResponse),
);
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
);
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
return (
<li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
<p className="font-bold">
{getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}{" "}
{getAdminUser.data?.username
? (
<a href={`https://t.me/${getAdminUser.data.username}`} className="link">
@{getAdminUser.data.username}
</a>
)
: null}
</p>
{getAdminUser.data?.bio
? (
<p>
{getAdminUser.data?.bio}
</p>
)
: null}
{getUser.data?.admin && (
<p className="flex gap-2">
<button
className="button-outlined"
onClick={() => deleteDialogRef.current?.showModal()}
>
Delete
</button>
</p>
)}
<DeleteAdminDialog
dialogRef={deleteDialogRef}
adminId={admin.id}
sessionId={sessionId}
/>
</li>
);
}
function DeleteAdminDialog(props: {
dialogRef: React.RefObject<HTMLDialogElement>;
adminId: string;
sessionId: string | null;
}) {
const { dialogRef, adminId, sessionId } = props;
const { mutate } = useSWRConfig();
return (
<dialog
ref={dialogRef}
className="dialog animate-pop-in backdrop-animate-fade-in"
>
<form
method="dialog"
className="flex flex-col gap-4 p-4"
onSubmit={(e) => {
e.preventDefault();
mutate(
(key) => Array.isArray(key) && key[0] === "admins",
async () =>
fetchApi("admins/{adminId}", "DELETE", {
query: { sessionId: sessionId! },
params: { adminId: adminId },
}).then(handleResponse),
{ populateCache: false },
);
dialogRef.current?.close();
}}
>
<p>
Are you sure you want to delete this admin?
</p>
<div className="flex gap-2 items-center justify-end">
<button
type="button"
className="button-outlined"
onClick={() => dialogRef.current?.close()}
>
Close
</button>
<button type="submit" className="button-filled">
Delete
</button>
</div>
</form>
</dialog>
);
}

10
ui/App.tsx
View File

@ -1,16 +1,17 @@
import React, { useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import useLocalStorage from "use-local-storage";
import { AdminsPage } from "./AdminsPage.tsx";
import { AppHeader } from "./AppHeader.tsx";
import { QueuePage } from "./QueuePage.tsx";
import { SettingsPage } from "./SettingsPage.tsx";
import { StatsPage } from "./StatsPage.tsx";
import { WorkersPage } from "./WorkersPage.tsx";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
import { useLocalStorage } from "./useLocalStorage.ts";
export function App() {
// store session ID in the local storage
const [sessionId, setSessionId] = useLocalStorage("sessionId", "");
const [sessionId, setSessionId] = useLocalStorage("sessionId");
// initialize a new session when there is no session ID
useEffect(() => {
@ -27,11 +28,12 @@ export function App() {
<AppHeader
className="self-stretch"
sessionId={sessionId}
onLogOut={() => setSessionId("")}
onLogOut={() => setSessionId(null)}
/>
<div className="self-center w-full max-w-screen-md flex flex-col items-stretch gap-4 p-4">
<Routes>
<Route path="/" element={<StatsPage />} />
<Route path="/admins" element={<AdminsPage sessionId={sessionId} />} />
<Route path="/workers" element={<WorkersPage sessionId={sessionId} />} />
<Route path="/queue" element={<QueuePage />} />
<Route path="/settings" element={<SettingsPage sessionId={sessionId} />} />

45
ui/AppHeader.tsx
View File

@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
import { NavLink } from "react-router-dom";
import useSWR from "swr";
import { cx } from "twind/core";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
function NavTab(props: { to: string; children: ReactNode }) {
return (
@ -15,33 +15,35 @@ function NavTab(props: { to: string; children: ReactNode }) {
);
}
export function AppHeader(
props: { className?: string; sessionId?: string; onLogOut: () => void },
) {
export function AppHeader(props: {
className?: string;
sessionId: string | null;
onLogOut: () => void;
}) {
const { className, sessionId, onLogOut } = props;
const session = useSWR(
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
{ onError: () => onLogOut() },
);
const user = useSWR(
session.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
const bot = useSWR(
const getBot = useSWR(
["bot", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
);
const userPhoto = useSWR(
session.data?.userId
const getUserPhoto = useSWR(
getSession.data?.userId
? ["users/{userId}/photo", "GET", {
params: { userId: String(session.data.userId) },
params: { userId: String(getSession.data.userId) },
}] as const
: null,
(args) => fetchApi(...args).then(handleResponse).then((blob) => URL.createObjectURL(blob)),
@ -62,6 +64,9 @@ export function AppHeader(
<NavTab to="/">
Stats
</NavTab>
<NavTab to="/admins">
Admins
</NavTab>
<NavTab to="/workers">
Workers
</NavTab>
@ -74,29 +79,29 @@ export function AppHeader(
</nav>
{/* loading indicator */}
{session.isLoading || user.isLoading ? <div className="spinner" /> : null}
{getSession.isLoading || getUser.isLoading ? <div className="spinner" /> : null}
{/* user avatar */}
{user.data
? userPhoto.data
{getUser.data
? getUserPhoto.data
? (
<img
src={userPhoto.data}
src={getUserPhoto.data}
alt="avatar"
className="w-9 h-9 rounded-full"
/>
)
: (
<div className="w-9 h-9 rounded-full bg-zinc-400 dark:bg-zinc-500 flex items-center justify-center text-white text-2xl font-bold select-none">
{user.data.first_name.at(0)?.toUpperCase()}
{getUser.data.first_name.at(0)?.toUpperCase()}
</div>
)
: null}
{/* login/logout button */}
{!session.isLoading && !user.isLoading && bot.data && sessionId
{!getSession.isLoading && !getUser.isLoading && getBot.data && sessionId
? (
user.data
getUser.data
? (
<button className="button-outlined" onClick={() => onLogOut()}>
Logout
@ -105,7 +110,7 @@ export function AppHeader(
: (
<a
className="button-filled"
href={`https://t.me/${bot.data.username}?start=${sessionId}`}
href={`https://t.me/${getBot.data.username}?start=${sessionId}`}
target="_blank"
>
Login

6
ui/QueuePage.tsx
View File

@ -3,10 +3,10 @@ import FlipMove from "react-flip-move";
import useSWR from "swr";
import { getFlagEmoji } from "../utils/getFlagEmoji.ts";
import { Progress } from "./Progress.tsx";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
export function QueuePage() {
const jobs = useSWR(
const getJobs = useSWR(
["jobs", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
{ refreshInterval: 2000 },
@ -19,7 +19,7 @@ export function QueuePage() {
enterAnimation="fade"
leaveAnimation="fade"
>
{jobs.data?.map((job) => (
{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("/")}

187
ui/SettingsPage.tsx
View File

@ -1,79 +1,82 @@
import React, { ReactNode, useState } from "react";
import React, { useState } from "react";
import useSWR from "swr";
import { cx } from "twind/core";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
export function SettingsPage(props: { sessionId: string }) {
export function SettingsPage(props: { sessionId: string | null }) {
const { sessionId } = props;
const session = useSWR(
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
);
const user = useSWR(
session.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
const params = useSWR(
const getParams = useSWR(
["settings/params", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
);
const [changedParams, setChangedParams] = useState<Partial<typeof params.data>>({});
const [error, setError] = useState<string>();
const [newParams, setNewParams] = useState<Partial<typeof getParams.data>>({});
const [patchParamsError, setPatchParamsError] = useState<string>();
return (
<form
className="flex flex-col items-stretch gap-4"
onSubmit={(e) => {
e.preventDefault();
params.mutate(() =>
getParams.mutate(() =>
fetchApi("settings/params", "PATCH", {
query: { sessionId },
body: { type: "application/json", data: changedParams ?? {} },
query: { sessionId: sessionId ?? "" },
body: { type: "application/json", data: newParams ?? {} },
}).then(handleResponse)
)
.then(() => setChangedParams({}))
.catch((e) => setError(String(e)));
.then(() => setNewParams({}))
.catch((e) => setPatchParamsError(String(e)));
}}
>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
Negative prompt {changedParams?.negative_prompt != null ? "(Changed)" : ""}
Negative prompt {newParams?.negative_prompt != null ? "(Changed)" : ""}
</span>
<textarea
className="input-text"
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.negative_prompt ??
params.data?.negative_prompt ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.negative_prompt ??
getParams.data?.negative_prompt ??
""}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
negative_prompt: e.target.value,
}))}
/>
</label>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
Sampler {changedParams?.sampler_name != null ? "(Changed)" : ""}
Sampler {newParams?.sampler_name != null ? "(Changed)" : ""}
</span>
<input
className="input-text"
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.sampler_name ??
params.data?.sampler_name ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.sampler_name ??
getParams.data?.sampler_name ??
""}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
sampler_name: e.target.value,
}))}
/>
</label>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
Steps {changedParams?.steps != null ? "(Changed)" : ""}
Steps {newParams?.steps != null ? "(Changed)" : ""}
</span>
<span className="flex items-center gap-1">
<input
@ -82,12 +85,12 @@ export function SettingsPage(props: { sessionId: string }) {
min={5}
max={50}
step={5}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.steps ??
params.data?.steps ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.steps ??
getParams.data?.steps ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
steps: Number(e.target.value),
}))}
@ -98,21 +101,22 @@ export function SettingsPage(props: { sessionId: string }) {
min={5}
max={50}
step={5}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.steps ??
params.data?.steps ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.steps ??
getParams.data?.steps ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
steps: Number(e.target.value),
}))}
/>
</span>
</label>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
Detail {changedParams?.cfg_scale != null ? "(Changed)" : ""}
Detail {newParams?.cfg_scale != null ? "(Changed)" : ""}
</span>
<span className="flex items-center gap-1">
<input
@ -121,12 +125,12 @@ export function SettingsPage(props: { sessionId: string }) {
min={1}
max={20}
step={1}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.cfg_scale ??
params.data?.cfg_scale ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.cfg_scale ??
getParams.data?.cfg_scale ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
cfg_scale: Number(e.target.value),
}))}
@ -137,22 +141,23 @@ export function SettingsPage(props: { sessionId: string }) {
min={1}
max={20}
step={1}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.cfg_scale ??
params.data?.cfg_scale ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.cfg_scale ??
getParams.data?.cfg_scale ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
cfg_scale: Number(e.target.value),
}))}
/>
</span>
</label>
<div className="flex gap-4">
<label className="flex flex-1 flex-col items-stretch gap-1">
<span className="text-sm">
Width {changedParams?.width != null ? "(Changed)" : ""}
Width {newParams?.width != null ? "(Changed)" : ""}
</span>
<input
className="input-text"
@ -160,12 +165,12 @@ export function SettingsPage(props: { sessionId: string }) {
min={64}
max={2048}
step={64}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.width ??
params.data?.width ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.width ??
getParams.data?.width ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
width: Number(e.target.value),
}))}
@ -176,12 +181,12 @@ export function SettingsPage(props: { sessionId: string }) {
min={64}
max={2048}
step={64}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.width ??
params.data?.width ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.width ??
getParams.data?.width ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
width: Number(e.target.value),
}))}
@ -189,7 +194,7 @@ export function SettingsPage(props: { sessionId: string }) {
</label>
<label className="flex flex-1 flex-col items-stretch gap-1">
<span className="text-sm">
Height {changedParams?.height != null ? "(Changed)" : ""}
Height {newParams?.height != null ? "(Changed)" : ""}
</span>
<input
className="input-text"
@ -197,12 +202,12 @@ export function SettingsPage(props: { sessionId: string }) {
min={64}
max={2048}
step={64}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.height ??
params.data?.height ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.height ??
getParams.data?.height ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
height: Number(e.target.value),
}))}
@ -213,35 +218,54 @@ export function SettingsPage(props: { sessionId: string }) {
min={64}
max={2048}
step={64}
disabled={params.isLoading || !user.data?.isAdmin}
value={changedParams?.height ??
params.data?.height ??
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.height ??
getParams.data?.height ??
0}
onChange={(e) =>
setChangedParams((params) => ({
setNewParams((params) => ({
...params,
height: Number(e.target.value),
}))}
/>
</label>
</div>
{error ? <Alert onClose={() => setError(undefined)}>{error}</Alert> : null}
{params.error ? <Alert>{params.error.message}</Alert> : null}
{patchParamsError
? (
<p className="alert">
<span className="flex-grow">Updating params failed: {patchParamsError}</span>
<button className="button-ghost" onClick={() => setPatchParamsError(undefined)}>
Close
</button>
</p>
)
: null}
{getParams.error
? (
<p className="alert">
<span className="flex-grow">
Loading params failed: {String(getParams.error)}
</span>
</p>
)
: null}
<div className="flex gap-2 items-center justify-end">
<button
type="button"
className={cx("button-outlined ripple", params.isLoading && "bg-stripes")}
disabled={params.isLoading || !user.data?.isAdmin ||
Object.keys(changedParams ?? {}).length === 0}
onClick={() => setChangedParams({})}
className={cx("button-outlined ripple", getParams.isLoading && "bg-stripes")}
disabled={getParams.isLoading || !getUser.data?.admin ||
Object.keys(newParams ?? {}).length === 0}
onClick={() => setNewParams({})}
>
Reset
</button>
<button
type="submit"
className={cx("button-filled ripple", params.isLoading && "bg-stripes")}
disabled={params.isLoading || !user.data?.isAdmin ||
Object.keys(changedParams ?? {}).length === 0}
className={cx("button-filled ripple", getParams.isLoading && "bg-stripes")}
disabled={getParams.isLoading || !getUser.data?.admin ||
Object.keys(newParams ?? {}).length === 0}
>
Save
</button>
@ -249,26 +273,3 @@ export function SettingsPage(props: { sessionId: string }) {
</form>
);
}
function Alert(props: { children: ReactNode; onClose?: () => void }) {
const { children, onClose } = props;
return (
<p
role="alert"
className="px-4 py-2 flex gap-2 items-center bg-red-500 text-white rounded-sm shadow-md"
>
<span className="flex-grow">{children}</span>
{onClose
? (
<button
type="button"
className="button-ghost"
onClick={() => onClose()}
>
Close
</button>
)
: null}
</p>
);
}

22
ui/StatsPage.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
import useSWR from "swr";
import { Counter } from "./Counter.tsx";
export function StatsPage() {
const globalStats = useSWR(
const getGlobalStats = useSWR(
["stats", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
{ refreshInterval: 2_000 },
@ -16,13 +16,13 @@ export function StatsPage() {
<span>Pixelsteps diffused</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
value={globalStats.data?.pixelStepCount ?? 0}
value={getGlobalStats.data?.pixelStepCount ?? 0}
digits={15}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
value={(globalStats.data?.pixelStepsPerMinute ?? 0) / 60}
value={(getGlobalStats.data?.pixelStepsPerMinute ?? 0) / 60}
digits={9}
transitionDurationMs={2_000}
postfix="/s"
@ -32,13 +32,13 @@ export function StatsPage() {
<span>Pixels painted</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
value={globalStats.data?.pixelCount ?? 0}
value={getGlobalStats.data?.pixelCount ?? 0}
digits={15}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
value={(globalStats.data?.pixelsPerMinute ?? 0) / 60}
value={(getGlobalStats.data?.pixelsPerMinute ?? 0) / 60}
digits={9}
transitionDurationMs={2_000}
postfix="/s"
@ -49,13 +49,13 @@ export function StatsPage() {
<span>Steps processed</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
value={globalStats.data?.stepCount ?? 0}
value={getGlobalStats.data?.stepCount ?? 0}
digits={9}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
value={(globalStats.data?.stepsPerMinute ?? 0) / 60}
value={(getGlobalStats.data?.stepsPerMinute ?? 0) / 60}
digits={3}
fractionDigits={3}
transitionDurationMs={2_000}
@ -66,13 +66,13 @@ export function StatsPage() {
<span>Images generated</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
value={globalStats.data?.imageCount ?? 0}
value={getGlobalStats.data?.imageCount ?? 0}
digits={9}
transitionDurationMs={3_000}
/>
<Counter
className="text-base"
value={(globalStats.data?.imagesPerMinute ?? 0) / 60}
value={(getGlobalStats.data?.imagesPerMinute ?? 0) / 60}
digits={3}
fractionDigits={3}
transitionDurationMs={2_000}
@ -84,7 +84,7 @@ export function StatsPage() {
<span>Unique users</span>
<Counter
className="font-bold text-zinc-700 dark:text-zinc-300"
value={globalStats.data?.userCount ?? 0}
value={getGlobalStats.data?.userCount ?? 0}
digits={6}
transitionDurationMs={1_500}
/>

170
ui/WorkersPage.tsx
View File

@ -1,27 +1,27 @@
import React, { useRef } from "react";
import React, { RefObject, useRef, useState } from "react";
import { FormattedRelativeTime } from "react-intl";
import useSWR, { useSWRConfig } from "swr";
import { WorkerData } from "../api/workersRoute.ts";
import { Counter } from "./Counter.tsx";
import { fetchApi, handleResponse } from "./apiClient.tsx";
import { fetchApi, handleResponse } from "./apiClient.ts";
export function WorkersPage(props: { sessionId?: string }) {
export function WorkersPage(props: { sessionId: string | null }) {
const { sessionId } = props;
const createWorkerModalRef = useRef<HTMLDialogElement>(null);
const addDialogRef = useRef<HTMLDialogElement>(null);
const session = useSWR(
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
);
const user = useSWR(
session.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
const workers = useSWR(
const getWorkers = useSWR(
["workers", "GET", {}] as const,
(args) => fetchApi(...args).then(handleResponse),
{ refreshInterval: 5000 },
@ -29,23 +29,47 @@ export function WorkersPage(props: { sessionId?: string }) {
return (
<>
{getWorkers.data?.length
? (
<ul className="my-4 flex flex-col gap-2">
{workers.data?.map((worker) => (
{getWorkers.data?.map((worker) => (
<WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
))}
</ul>
{user.data?.isAdmin && (
)
: getWorkers.data?.length === 0
? <p>No workers</p>
: getWorkers.error
? <p className="alert">Loading workers failed</p>
: <div className="spinner self-center" />}
{getUser.data?.admin && (
<button
className="button-filled"
onClick={() => createWorkerModalRef.current?.showModal()}
onClick={() => addDialogRef.current?.showModal()}
>
Add worker
</button>
)}
<dialog
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={createWorkerModalRef}
>
<AddWorkerDialog
dialogRef={addDialogRef}
sessionId={sessionId}
/>
</>
);
}
function AddWorkerDialog(props: {
dialogRef: RefObject<HTMLDialogElement>;
sessionId: string | null;
}) {
const { dialogRef, sessionId } = props;
const { mutate } = useSWRConfig();
return (
<dialog ref={dialogRef} className="dialog animate-pop-in backdrop-animate-fade-in">
<form
method="dialog"
className="flex flex-col gap-4 p-4"
@ -58,8 +82,10 @@ export function WorkersPage(props: { sessionId?: string }) {
const user = data.get("user") as string;
const password = data.get("password") as string;
console.log(key, name, user, password);
workers.mutate(async () => {
const worker = await fetchApi("workers", "POST", {
mutate(
(key) => Array.isArray(key) && key[0] === "workers",
async () =>
fetchApi("workers", "POST", {
query: { sessionId: sessionId! },
body: {
type: "application/json",
@ -70,11 +96,10 @@ export function WorkersPage(props: { sessionId?: string }) {
sdAuth: user && password ? { user, password } : null,
},
},
}).then(handleResponse);
return [...(workers.data ?? []), worker];
});
createWorkerModalRef.current?.close();
}).then(handleResponse),
{ populateCache: false },
);
dialogRef.current?.close();
}}
>
<div className="flex gap-4">
@ -145,7 +170,7 @@ export function WorkersPage(props: { sessionId?: string }) {
<button
type="button"
className="button-outlined"
onClick={() => createWorkerModalRef.current?.close()}
onClick={() => dialogRef.current?.close()}
>
Close
</button>
@ -155,28 +180,28 @@ export function WorkersPage(props: { sessionId?: string }) {
</div>
</form>
</dialog>
</>
);
}
function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefined }) {
function WorkerListItem(props: {
worker: WorkerData;
sessionId: string | null;
}) {
const { worker, sessionId } = props;
const editWorkerModalRef = useRef<HTMLDialogElement>(null);
const deleteWorkerModalRef = useRef<HTMLDialogElement>(null);
const editDialogRef = useRef<HTMLDialogElement>(null);
const deleteDialogRef = useRef<HTMLDialogElement>(null);
const session = useSWR(
const getSession = useSWR(
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
);
const user = useSWR(
session.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
: null,
(args) => fetchApi(...args).then(handleResponse),
);
const { mutate } = useSWRConfig();
return (
<li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
<p className="font-bold">
@ -212,27 +237,49 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
{" "}
<Counter value={worker.stepsPerMinute} digits={3} /> steps per minute
</p>
{getUser.data?.admin && (
<p className="flex gap-2">
{user.data?.isAdmin && (
<>
<button
className="button-outlined"
onClick={() => editWorkerModalRef.current?.showModal()}
onClick={() => editDialogRef.current?.showModal()}
>
Settings
</button>
<button
className="button-outlined"
onClick={() => deleteWorkerModalRef.current?.showModal()}
onClick={() => deleteDialogRef.current?.showModal()}
>
Delete
</button>
</>
)}
</p>
)}
<EditWorkerDialog
dialogRef={editDialogRef}
workerId={worker.id}
sessionId={sessionId}
/>
<DeleteWorkerDialog
dialogRef={deleteDialogRef}
workerId={worker.id}
sessionId={sessionId}
/>
</li>
);
}
function EditWorkerDialog(props: {
dialogRef: RefObject<HTMLDialogElement>;
workerId: string;
sessionId: string | null;
}) {
const { dialogRef, workerId, sessionId } = props;
const { mutate } = useSWRConfig();
return (
<dialog
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={editWorkerModalRef}
ref={dialogRef}
>
<form
method="dialog"
@ -243,8 +290,11 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
const user = data.get("user") as string;
const password = data.get("password") as string;
console.log(user, password);
mutate(
(key) => Array.isArray(key) && key[0] === "workers",
async () =>
fetchApi("workers/{workerId}", "PATCH", {
params: { workerId: worker.id },
params: { workerId: workerId },
query: { sessionId: sessionId! },
body: {
type: "application/json",
@ -252,8 +302,10 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
sdAuth: user && password ? { user, password } : null,
},
},
});
editWorkerModalRef.current?.close();
}).then(handleResponse),
{ populateCache: false },
);
dialogRef.current?.close();
}}
>
<div className="flex gap-4">
@ -282,7 +334,7 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
<button
type="button"
className="button-outlined"
onClick={() => editWorkerModalRef.current?.close()}
onClick={() => dialogRef.current?.close()}
>
Close
</button>
@ -292,20 +344,37 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
</div>
</form>
</dialog>
);
}
function DeleteWorkerDialog(props: {
dialogRef: RefObject<HTMLDialogElement>;
workerId: string;
sessionId: string | null;
}) {
const { dialogRef, workerId, sessionId } = props;
const { mutate } = useSWRConfig();
return (
<dialog
className="dialog animate-pop-in backdrop-animate-fade-in"
ref={deleteWorkerModalRef}
ref={dialogRef}
>
<form
method="dialog"
className="flex flex-col gap-4 p-4"
onSubmit={(e) => {
e.preventDefault();
mutate(
(key) => Array.isArray(key) && key[0] === "workers",
async () =>
fetchApi("workers/{workerId}", "DELETE", {
params: { workerId: worker.id },
params: { workerId: workerId },
query: { sessionId: sessionId! },
}).then(handleResponse).then(() => mutate(["workers", "GET", {}]));
deleteWorkerModalRef.current?.close();
}).then(handleResponse),
{ populateCache: false },
);
dialogRef.current?.close();
}}
>
<p>
@ -315,7 +384,7 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
<button
type="button"
className="button-outlined"
onClick={() => deleteWorkerModalRef.current?.close()}
onClick={() => dialogRef.current?.close()}
>
Close
</button>
@ -325,6 +394,5 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
</div>
</form>
</dialog>
</li>
);
}

0
ui/apiClient.tsx → ui/apiClient.ts
View File

13
ui/twind.ts
View File

@ -3,9 +3,10 @@ import presetTailwind from "twind/preset-tailwind";
const twConfig = defineConfig({
presets: [presetTailwind()],
hash: false,
});
install(twConfig);
install(twConfig, false);
injectGlobal`
@layer base {
@ -89,6 +90,10 @@ injectGlobal`
@apply h-8 w-8 animate-spin rounded-full border-4 border-transparent border-t-current;
}
.alert {
@apply px-4 py-2 flex gap-2 items-center bg-red-500 text-white rounded-sm shadow-md;
}
.button-filled {
@apply rounded-md bg-sky-600 px-3 py-2 min-h-12
text-sm font-semibold uppercase tracking-wider text-white shadow-sm transition-all
@ -111,7 +116,7 @@ injectGlobal`
}
.tab {
@apply inline-flex items-center px-4 text-sm text-center bg-transparent border-b-2 sm:text-base whitespace-nowrap focus:outline-none
@apply inline-flex items-center px-4 text-sm text-center bg-transparent border-b-2 sm:text-base whitespace-nowrap outline-none
border-transparent dark:text-white cursor-base hover:border-zinc-400 focus:border-zinc-400 transition-all;
}
@ -131,8 +136,8 @@ injectGlobal`
}
.dialog {
@apply overflow-hidden overflow-y-auto rounded-md
bg-zinc-100 text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
@apply overflow-hidden overflow-y-auto rounded-md shadow-xl
bg-white text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
}
}
`;

31
ui/useLocalStorage.ts Normal file
View File

@ -0,0 +1,31 @@
import { useEffect, useState } from "react";
export function useLocalStorage(key: string) {
const [value, setValue] = useState(() => window.localStorage.getItem(key));
useEffect(() => {
console.log(key, value);
if (value != null) {
window.localStorage.setItem(key, value);
} else {
window.localStorage.removeItem(key);
}
}, [key, value]);
useEffect(() => {
const handleStorage = (event: StorageEvent) => {
if (event.key === key) {
console.log(key, event.newValue);
setValue(event.newValue);
}
};
window.addEventListener("storage", handleStorage);
return () => {
window.removeEventListener("storage", handleStorage);
};
}, [key]);
return [value, setValue] as const;
}