108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import { Popover } from "@kobalte/core/popover";
|
|
import { type Component, For, Show } from "solid-js";
|
|
import { base } from "../network";
|
|
import { useNotifications } from "../ProtectedRoute";
|
|
|
|
const LoadingCircle: Component<{
|
|
status: "loading" | "complete";
|
|
class?: string;
|
|
}> = (props) => {
|
|
switch (props.status) {
|
|
case "loading":
|
|
return (
|
|
<svg
|
|
class={props.class}
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
fill="none"
|
|
stroke-width="3"
|
|
class="stroke-amber-400"
|
|
/>
|
|
</svg>
|
|
);
|
|
case "complete":
|
|
return (
|
|
<svg
|
|
class={props.class}
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
fill="none"
|
|
stroke-width="3"
|
|
class="stroke-emerald-400"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
export const ProcessingImages: Component = () => {
|
|
const notifications = useNotifications();
|
|
|
|
const processingNumber = () =>
|
|
Object.keys(notifications.state.ProcessingImages).length;
|
|
|
|
return (
|
|
<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>
|
|
)}
|
|
</Show>
|
|
)}
|
|
</For>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover>
|
|
</Show>
|
|
);
|
|
};
|