Update

components/Task.tsx

@@ -1,5 +1,7 @@
 import { Component } from "preact";
-import { TaskDetail, TaskStatus } from "../task.ts";
+import Icon from "preact-material-components/Icon";
+import { TaskDetail, TaskStatus, TaskType } from "../task.ts";
+import t from "../server/i18n.ts";
 
 type Props = {
     task: TaskDetail;
@@ -28,16 +30,16 @@ export default class Task extends Component<Props, State> {
         console.log(task);
         return (
             <div data-id={task.base.id}>
-                Task Id: {task.base.id}
+                <Icon class="task_handle">unfold_more</Icon>
+                {t("task.id")}
+                {task.base.id}
             </div>
         );
     }
     componentDidMount(): void {
-        self.addEventListener("task_started", this.state.task_changed);
-        self.addEventListener("task_finished", this.state.task_changed);
+        self.addEventListener("task_changed", this.state.task_changed);
     }
     componentWillUnmount(): void {
-        self.removeEventListener("task_started", this.state.task_changed);
-        self.removeEventListener("task_finished", this.state.task_changed);
+        self.removeEventListener("task_changed", this.state.task_changed);
     }
 }

islands/TaskManager.tsx

@@ -33,6 +33,7 @@ export default class TaskManager extends Component<TaskManagerProps> {
                 return;
             }
             this.sortable = new Sortable(ul.current, {
+                handle: ".task_handle",
                 onSort: (evt: SortableEvent) => {
                     if (
                         evt.newIndex === undefined || evt.oldIndex === undefined
@@ -53,6 +54,11 @@ export default class TaskManager extends Component<TaskManagerProps> {
             };
             ws.onmessage = (e) => {
                 const t: TaskServerSocketData = JSON.parse(e.data);
+                function sendTaskChangedEvent(id: number) {
+                    self.dispatchEvent(
+                        new CustomEvent("task_changed", { detail: id }),
+                    );
+                }
                 if (t.type == "close") {
                     ws.close();
                 } else if (t.type == "tasks") {
@@ -107,11 +113,7 @@ export default class TaskManager extends Component<TaskManagerProps> {
                         this.forceUpdate();
                     } else {
                         task.status = TaskStatus.Running;
-                        self.dispatchEvent(
-                            new CustomEvent("task_started", {
-                                detail: t.detail.id,
-                            }),
-                        );
+                        sendTaskChangedEvent(t.detail.id);
                         const tl = task_list.value;
                         const ind = tl.indexOf(task.base.id);
                         if (ind > 0) {
@@ -123,11 +125,7 @@ export default class TaskManager extends Component<TaskManagerProps> {
                     const task = tasks.value.get(t.detail.id);
                     if (task !== undefined) {
                         task.status = TaskStatus.Finished;
-                        self.dispatchEvent(
-                            new CustomEvent("task_finished", {
-                                detail: t.detail.id,
-                            }),
-                        );
+                        sendTaskChangedEvent(t.detail.id);
                         const tl = task_list.value;
                         const ind = tl.indexOf(task.base.id);
                         if (ind < tl.length - 1 && ind > -1) {
@@ -135,6 +133,12 @@ export default class TaskManager extends Component<TaskManagerProps> {
                             this.sortable?.sort(tl.map((t) => t.toString()));
                         }
                     }
+                } else if (t.type == "task_progress") {
+                    const task = tasks.value.get(t.detail.task_id);
+                    if (task !== undefined) {
+                        task.progress = t.detail.detail;
+                        sendTaskChangedEvent(t.detail.task_id);
+                    }
                 }
             };
             self.addEventListener("beforeunload", () => {

server/i18ns.ts

@@ -6,8 +6,8 @@ import { pick } from "accept-language-parser/";
 
 const whole_maps = new Map<string, I18NMap>();
 const LANGUAGES = ["zh-cn"];
-type MODULE = "common" | "settings";
-const MODULES: MODULE[] = ["common", "settings"];
+type MODULE = "common" | "settings" | "task";
+const MODULES: MODULE[] = ["common", "settings", "task"];
 
 export async function load_translation(signal?: AbortSignal) {
     const base = import.meta.resolve("../translation").slice(8);

task.ts

@@ -1,5 +1,3 @@
-import { DiscriminatedUnion } from "./utils.ts";
-
 export enum TaskType {
     Download,
     ExportZip,
@@ -24,20 +22,16 @@ export type TaskExportZipProgress = {
     total_page: number;
 };
 
-type TaskId<T extends Record<PropertyKey, unknown>> = {
-    [P in keyof T]: ({
-        task_id: number;
-    } & T[P]) extends infer U ? { [Q in keyof U]: U[Q] } : never;
-};
-
 export type TaskProgressBasicType = {
     [TaskType.Download]: TaskDownloadProgess;
     [TaskType.ExportZip]: TaskExportZipProgress;
 };
 
-export type TaskProgressType = TaskId<TaskProgressBasicType>;
-
-export type TaskProgress = DiscriminatedUnion<"type", TaskProgressType>;
+export type TaskProgress<T extends TaskType = TaskType> = {
+    type: T;
+    task_id: number;
+    detail: TaskProgressBasicType[T];
+};
 
 export enum TaskStatus {
     Wait,

task_manager.ts

@@ -3,7 +3,7 @@ import { Config } from "./config.ts";
 import { EhDb } from "./db.ts";
 import { check_running } from "./pid_check.ts";
 import { add_exit_handler } from "./signal_handler.ts";
-import { Task, TaskProgress, TaskProgressType, TaskType } from "./task.ts";
+import { Task, TaskProgress, TaskProgressBasicType, TaskType } from "./task.ts";
 import { download_task } from "./tasks/download.ts";
 import {
     DEFAULT_EXPORT_ZIP_CONFIG,
@@ -162,14 +162,12 @@ export class TaskManager extends EventTarget {
     dispatchEvent<T extends keyof EventMap>(type: T, detail: EventMap[T]) {
         return super.dispatchEvent(new CustomEvent(type, { detail }));
     }
-    dispatchTaskProgressEvent<T extends keyof TaskProgressType>(
+    dispatchTaskProgressEvent<T extends TaskType>(
         type: T,
-        detail: TaskProgressType[T],
+        task_id: number,
+        detail: TaskProgressBasicType[T],
     ) {
-        return this.dispatchEvent(
-            "task_progress",
-            <TaskProgress> <unknown> { type, ...detail },
-        );
+        return this.dispatchEvent("task_progress", { type, task_id, detail });
     }
     force_abort(reason?: unknown) {
         this.#force_abort.abort(reason);

tasks/download.ts

@@ -55,11 +55,14 @@ class DownloadManager {
         );
     }
     #sendEvent() {
-        return this.#manager.dispatchTaskProgressEvent(TaskType.Download, {
-            task_id: this.#task.id,
-            downloaded_page: this.#progress.downloaded_page,
-            total_page: this.#progress.total_page,
-        });
+        return this.#manager.dispatchTaskProgressEvent(
+            TaskType.Download,
+            this.#task.id,
+            {
+                downloaded_page: this.#progress.downloaded_page,
+                total_page: this.#progress.total_page,
+            },
+        );
     }
     async add_new_task(f: () => Promise<unknown>) {
         while (1) {

tasks/export_zip.ts

@@ -33,8 +33,7 @@ export async function export_zip(
         added_page: 0,
     };
     const sendEvent = () => {
-        manager.dispatchTaskProgressEvent(TaskType.ExportZip, {
-            task_id: task.id,
+        manager.dispatchTaskProgressEvent(TaskType.ExportZip, task.id, {
             added_page: progress.added_page,
             total_page: progress.total_page,
         });

translation/en/task.jsonc

@@ -0,0 +1,3 @@
+{
+    "id": "Task ID: "
+}

translation/zh-cn/task.jsonc

@@ -0,0 +1,3 @@
+{
+    "id": "任务ID："
+}