Update

islands/Container.tsx

@@ -8,6 +8,7 @@ import StyleSheet from "../components/StyleSheet.tsx";
 import { GlobalCtx } from "../components/GlobalContext.tsx";
 import Settings from "./Settings.tsx";
 import t, { i18n_map, I18NMap } from "../server/i18n.ts";
+import TaskManager from "./TaskManager.tsx";
 
 export type ContainerProps = {
     i18n: I18NMap;
@@ -76,6 +77,14 @@ export default class Container extends Component<ContainerProps> {
                     >
                         <Icon>home</Icon>
                     </List.Item>
+                    <List.Item
+                        onClick={() => {
+                            set_display(false);
+                            set_state("#/task_manager");
+                        }}
+                    >
+                        <Icon>task</Icon>
+                    </List.Item>
                     <List.Item
                         onClick={() => {
                             set_display(false);
@@ -87,6 +96,7 @@ export default class Container extends Component<ContainerProps> {
                 </List>
                 <div class="main">
                     <Settings show={state === "#/settings"} />
+                    <TaskManager show={state === "#/task_manager"} />
                 </div>
             </div>
         );

islands/TaskManager.tsx

@@ -0,0 +1,79 @@
+import { Component, ContextType } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { GlobalCtx } from "../components/GlobalContext.tsx";
+import { TaskDetail, TaskStatus } from "../task.ts";
+import { Sortable } from "sortable";
+import { TaskClientSocketData, TaskServerSocketData } from "../server/task.ts";
+import { get_ws_host } from "../server/utils.ts";
+
+export type TaskManagerProps = {
+    show: boolean;
+};
+
+export default class TaskManager extends Component<TaskManagerProps> {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        if (!this.props.show) return null;
+        const [tasks, set_tasks] = useState<Map<number, TaskDetail>>(new Map());
+        const ul = useRef<HTMLDivElement>();
+        useEffect(() => {
+            new Sortable(ul.current, {
+                onSort: (evt: CustomEvent) => {
+                    console.log(evt);
+                },
+            });
+            const ws = new WebSocket(`${get_ws_host()}/api/task`);
+            console.log(ws);
+            function sendMessage(mes: TaskClientSocketData) {
+                ws.send(JSON.stringify(mes));
+            }
+            ws.onopen = () => {
+                sendMessage({ type: "task_list" });
+            };
+            ws.onmessage = (e) => {
+                const t: TaskServerSocketData = JSON.parse(e.data);
+                if (t.type == "close") {
+                    ws.close();
+                } else if (t.type == "tasks") {
+                    set_tasks((tasks) => {
+                        t.tasks.forEach((ta) => {
+                            tasks.set(ta.id, {
+                                base: ta,
+                                status: t.running.includes(ta.id)
+                                    ? TaskStatus.Running
+                                    : TaskStatus.Wait,
+                            });
+                        });
+                        this.forceUpdate();
+                        return tasks;
+                    });
+                } else if (t.type == "new_task") {
+                    set_tasks((tasks) => {
+                        tasks.set(t.detail.id, {
+                            base: t.detail,
+                            status: TaskStatus.Wait,
+                        });
+                        this.forceUpdate();
+                        return tasks;
+                    });
+                }
+            };
+            self.addEventListener("beforeunload", () => {
+                sendMessage({ type: "close" });
+            });
+        }, []);
+        console.log(tasks.size);
+        return (
+            <div class="task_manager">
+                <div
+                    id="task-list"
+                    // @ts-ignore checked
+                    ref={ul}
+                >
+                    {Array.from(tasks.keys()).map((k) => <div>{k}</div>)}
+                </div>
+            </div>
+        );
+    }
+}