- {images.map((image) => {
- return
;
+
+
+
+
+
+ {requests.map((request) => {
+ return
;
})}
-
{id}
+
+ {/* @ts-expect-error */}
+
{status}
{prompt}
{seed}
{sampler}
+
+
+ {status === QueueStatus.processing && (
+
+ )}
+
+ {status === QueueStatus.complete && (
+
+ )}
+
+ {status === QueueStatus.pending && (
+ <>
+
+
+
+
+ )}
+
+ {status === QueueStatus.paused && (
+
+ )}
+
+ {status === QueueStatus.error && (
+
+ )}
+
+
);
}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
index 6fd48e1c..c51c57f8 100644
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
@@ -1,9 +1,68 @@
-import { style } from "@vanilla-extract/css";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../../../styles/theme/index.css";
+
+import { BrandedButton } from "../../../../styles/shared.css";
+
+import { QueueStatus } from "../../../../stores/requestQueueStore";
+
export const QueueItemMain = style({
display: "flex",
flexDirection: "column",
width: "100%",
padding: "0.5rem",
-});
\ No newline at end of file
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
+ backgroundColor: vars.colors.warning,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.pending}`, {
+ backgroundColor: vars.colors.backgroundDark,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.paused}`, {
+ backgroundColor: vars.colors.backgroundAlt,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
+ backgroundColor: vars.colors.success,
+});
+
+globalStyle(`${QueueItemMain}.${QueueStatus.error}`, {
+ backgroundColor: vars.colors.error,
+});
+
+export const QueueButtons = style({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+});
+
+
+// TODO these should be a button recipe?
+export const CompleteButtton = style([BrandedButton, {
+
+}]);
+
+export const PauseButton = style([BrandedButton, {
+
+}]);
+
+export const ResumeButton = style([BrandedButton, {
+
+}]);
+
+export const CancelButton = style([BrandedButton, {
+
+}]);
+
+export const RetryButton = style([BrandedButton, {
+
+}]);
+
+export const SendToTopButton = style([BrandedButton, {
+
+}]);
diff --git a/ui/frontend/build_src/src/stores/imageFetchingStore.ts b/ui/frontend/build_src/src/stores/imageFetchingStore.ts
index 7fc1c9d6..42391a31 100644
--- a/ui/frontend/build_src/src/stores/imageFetchingStore.ts
+++ b/ui/frontend/build_src/src/stores/imageFetchingStore.ts
@@ -27,7 +27,6 @@ interface ImageFetchingState {
setStartTime: () => void;
setNowTime: () => void;
resetForFetching: () => void;
-
}
export const useImageFetching = create
((set) => ({
diff --git a/ui/frontend/build_src/src/stores/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts
deleted file mode 100644
index a3ef7e21..00000000
--- a/ui/frontend/build_src/src/stores/imageQueueStore.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import create from "zustand";
-import produce from "immer";
-import { useRandomSeed } from "../utils";
-
-import { ImageRequest } from "../api";
-
-interface QueueItem {
- id?: string;
- options?: ImageRequest;
- status?: "pending" | "complete" | "error";
-}
-
-interface ImageQueueState {
- images: QueueItem[];
- completedImageIds: string[];
- addNewImage: (id: string, imgRec: ImageRequest) => void;
- hasQueuedImages: () => boolean;
- firstInQueue: () => QueueItem;
- removeFirstInQueue: () => void;
- clearQueue: () => void;
- clearCachedIds: () => void;
-}
-
-export const useImageQueue = create((set, get) => ({
- images: [],
- completedImageIds: [],
- // use produce to make sure we don't mutate state
- addNewImage: (id: string, imgRec: ImageRequest) => {
- set(
- produce((state) => {
- const item: QueueItem = { id, options: imgRec, status: "pending" };
- state.images.push(item);
- })
- );
- },
-
- hasQueuedImages: () => {
- return get().images.length > 0;
- },
-
- firstInQueue: () => {
- const { images } = get();
- if (images.length > 0) {
- return images[0];
- }
- // // cast an empty object to QueueItem
- const empty: QueueItem = {};
- return empty;
-
- },
-
- removeFirstInQueue: () => {
- set(
- produce((state) => {
- const image = state.images.shift();
- if (void 0 !== image) {
- state.completedImageIds.push(image.id);
- }
- })
- );
- },
-
- clearQueue: () => {
- set(
- produce((state) => {
- state.images = [];
- })
- );
- },
-
- clearCachedIds: () => {
- set(
- produce((state) => {
- state.completedImageIds = [];
- })
- );
- },
-}));
diff --git a/ui/frontend/build_src/src/stores/requestQueueStore.ts b/ui/frontend/build_src/src/stores/requestQueueStore.ts
new file mode 100644
index 00000000..75de334a
--- /dev/null
+++ b/ui/frontend/build_src/src/stores/requestQueueStore.ts
@@ -0,0 +1,143 @@
+import create from "zustand";
+import produce from "immer";
+
+import { ImageRequest } from "../api";
+
+export enum QueueStatus {
+ pending = "pending",
+ processing = "processing",
+ complete = "complete",
+ paused = "paused",
+ error = "error",
+}
+
+export interface QueuedRequest {
+ id: string;
+ options: ImageRequest;
+ status: QueueStatus[keyof QueueStatus];
+ //"pending" | "processing" | "complete" | "error";
+}
+
+interface RequestQueueState {
+ requests: QueuedRequest[];
+ addtoQueue: (id: string, imgRec: ImageRequest) => void;
+ pendingRequests: () => QueuedRequest[];
+ hasPendingQueue: () => boolean;
+ hasAnyQueue: () => boolean;
+ firstInQueue: () => QueuedRequest;
+ updateStatus: (id: string, status: QueueStatus[keyof QueueStatus]) => void;
+ sendPendingToTop: (id: string) => void;
+ removeItem: (id: string) => void;
+ removeCompleted: () => void;
+ removeErrored: () => void;
+ clearQueue: () => void;
+
+}
+
+export const useRequestQueue = create((set, get) => ({
+ requests: [],
+ // use produce to make sure we don't mutate state
+ addtoQueue: (id: string, imgRec: ImageRequest) => {
+ set(
+ produce((state) => {
+ const item: QueuedRequest = { id, options: imgRec, status: QueueStatus.pending };
+ state.requests.push(item);
+ })
+ );
+ },
+
+ pendingRequests: () => {
+ return get().requests.filter((item) => item.status === QueueStatus.pending);
+ },
+
+ hasPendingQueue: () => {
+ return get().pendingRequests().length > 0;
+ },
+
+ hasAnyQueue: () => {
+ return get().requests.length > 0;
+ },
+
+ firstInQueue: () => {
+ const pending = get().pendingRequests()[0];
+
+ if (pending === undefined) {
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+ const temp: QueuedRequest = { id: "", options: ({} as ImageRequest), status: QueueStatus.pending };
+ return temp;
+ }
+ return pending;
+ },
+
+ updateStatus: (id: string, status: QueueStatus[keyof QueueStatus]) => {
+ set(
+ produce((state) => {
+ const item = state.requests.find((item: QueuedRequest) => item.id === id);
+ if (void 0 !== item) {
+ item.status = status;
+ }
+ })
+ );
+ },
+
+ sendPendingToTop: (id: string) => {
+ set(
+ produce((state) => {
+ const item = state.requests.find((item: QueuedRequest) => item.id === id);
+ if (void 0 !== item) {
+ const index = state.requests.indexOf(item);
+ // insert infront of the pending requests
+ const pending = get().pendingRequests();
+ const pendingIndex = state.requests.indexOf(pending[0]);
+ console.log()
+ state.requests.splice(index, 1);
+ state.requests.splice(pendingIndex, 0, item);
+ }
+ })
+ );
+ },
+
+ removeItem: (id: string) => {
+ set(
+ produce((state) => {
+ const index = state.requests.findIndex((item: QueuedRequest) => item.id === id);
+ if (index > -1) {
+ state.requests.splice(index, 1);
+ }
+ })
+ );
+ },
+
+ removeCompleted: () => {
+ set(
+ produce((state) => {
+ const completed = state.requests.filter((item: QueuedRequest) => item.status === QueueStatus.complete);
+ completed.forEach((item: QueuedRequest) => {
+ const index = state.requests.indexOf(item);
+ state.requests.splice(index, 1);
+ });
+ })
+ );
+ },
+
+ removeErrored: () => {
+ set(
+ produce((state) => {
+ const errored = state.requests.filter((item: QueuedRequest) => item.status === QueueStatus.error);
+ errored.forEach((item: QueuedRequest) => {
+ const index = state.requests.indexOf(item);
+ state.requests.splice(index, 1);
+ });
+ })
+ );
+ },
+
+
+ clearQueue: () => {
+ set(
+ produce((state) => {
+ state.requests = [];
+ })
+ );
+ },
+}));