Update task render

components/Task.tsx

@@ -1,7 +1,10 @@
 import { Component } from "preact";
 import Icon from "preact-material-components/Icon";
-import type { TaskDetail } from "../task.ts";
+import type { TaskDetail, TaskProgressBasicType } from "../task.ts";
+import { TaskStatus, TaskType } from "../task.ts";
 import t from "../server/i18n.ts";
+import { tw } from "twind";
+import Progress from "./Progress.tsx";
 
 type Props = {
     task: TaskDetail;
@@ -11,6 +14,20 @@ type State = {
     task_changed: (d: Event) => void;
 };
 
+const Types: Record<TaskType, string> = {
+    [TaskType.Download]: "download",
+    [TaskType.ExportZip]: "export_zip",
+    [TaskType.UpdateMeiliSearchData]: "update_meilisearch_data",
+    [TaskType.FixGalleryPage]: "fix_gallery_page",
+};
+
+const Status: Record<TaskStatus, string> = {
+    [TaskStatus.Wait]: "waiting",
+    [TaskStatus.Running]: "running",
+    [TaskStatus.Finished]: "finished",
+    [TaskStatus.Failed]: "failed",
+};
+
 export default class Task extends Component<Props, State> {
     constructor(props: Props) {
         super(props);
@@ -28,11 +45,39 @@ export default class Task extends Component<Props, State> {
     render() {
         const task = this.props.task;
         console.log(task);
+        let error_div = null;
+        if (task.status === TaskStatus.Failed) {
+            error_div = (
+                <div class="error">
+                    {t("task.error_msg")}
+                    <div class={tw`text-red-500`}>{task.error}</div>
+                </div>
+            );
+        }
+        let progress_div = null;
+        if (task.status === TaskStatus.Running && task.progress) {
+            if (task.base.type === TaskType.Download) {
+                const d = task
+                    .progress as TaskProgressBasicType[TaskType.Download];
+                progress_div = (
+                    <Progress max={d.total_page} animated={true}>
+                        <Progress.Bar
+                            class="bg-success"
+                            value={d.downloaded_page}
+                        />
+                        <Progress.Bar class="bg-danger" value={d.failed_page} />
+                    </Progress>
+                );
+            }
+        }
         return (
             <div data-id={task.base.id}>
                 <Icon class="task_handle">unfold_more</Icon>
-                {t("task.id")}
-                {task.base.id}
+                <div>{t("task.id")}{task.base.id}</div>
+                <div>{t("task.type")}{t(`task.${Types[task.base.type]}`)}</div>
+                <div>{t("task.status")}{t(`task.${Status[task.status]}`)}</div>
+                {error_div}
+                {progress_div}
             </div>
         );
     }