JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: only show when images are processing

Browse Source
This commit is contained in:
John Costa
2025-07-18 11:17:33 +01:00
parent a94c7255c6
commit e74975a52a
1 changed files with 46 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/notifications/ProcessingImages.tsx
View File

@ -56,50 +56,52 @@ export const ProcessingImages: Component = () => {
Object.keys(notifications.state.ProcessingImages).length;
return (
<Popover sameWidth gutter={4}>
<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
<Show
when={processingNumber() > 0}
fallback={<p class="text-md">No images to process</p>}
>
<p class="text-md">
Processing {processingNumber()}{" "}
{processingNumber() === 1 ? "image" : "images"}
</p>
</Show>
<Show
when={processingNumber() === 0}
fallback={<LoadingCircle status="loading" />}
>
<LoadingCircle status="complete" />
</Show>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
<For each={Object.entries(notifications.state.ProcessingImages)}>
{([id, _image]) => (
<Show when={_image}>
{(image) => (
<div class="flex gap-2 w-full justify-center">
<img
class="w-16 h-16 aspect-square rounded"
alt="processing"
src={`${base}/image/${id}`}
/>
<div class="flex flex-col gap-1">
<p class="text-slate-100">{image().ImageName}</p>
<Show when={processingNumber() > 0}>
<Popover sameWidth gutter={4}>
<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
<Show
when={processingNumber() > 0}
fallback={<p class="text-md">No images to process</p>}
>
<p class="text-md">
Processing {processingNumber()}{" "}
{processingNumber() === 1 ? "image" : "images"}
</p>
</Show>
<Show
when={processingNumber() === 0}
fallback={<LoadingCircle status="loading" />}
>
<LoadingCircle status="complete" />
</Show>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
<For each={Object.entries(notifications.state.ProcessingImages)}>
{([id, _image]) => (
<Show when={_image}>
{(image) => (
<div class="flex gap-2 w-full justify-center">
<img
class="w-16 h-16 aspect-square rounded"
alt="processing"
src={`${base}/image/${id}`}
/>
<div class="flex flex-col gap-1">
<p class="text-slate-100">{image().ImageName}</p>
</div>
<LoadingCircle
status="loading"
class="ml-auto self-center"
/>
</div>
<LoadingCircle
status="loading"
class="ml-auto self-center"
/>
</div>
)}
</Show>
)}
</For>
</Popover.Content>
</Popover.Portal>
</Popover>
)}
</Show>
)}
</For>
</Popover.Content>
</Popover.Portal>
</Popover>
</Show>
);
};