Update

components/BSelect.tsx

@@ -0,0 +1,107 @@
+import { Component } from "preact";
+import Select from "preact-material-components/Select";
+import { Ref, StateUpdater, useRef } from "preact/hooks";
+
+interface obj {
+    toString(): string;
+}
+
+type Props<T extends obj> = {
+    id?: string;
+    list: { value: T; text?: string; disabled?: boolean }[];
+    /**@default {0}*/
+    selectedIndex?: number;
+    selectedValue?: T;
+    /**@default {false}*/
+    disabled?: boolean;
+    /**@default {false}*/
+    box?: boolean;
+    /**@default {false}*/
+    outlined?: boolean;
+    hintText?: string;
+    set_value: StateUpdater<T>;
+};
+
+type State = {
+    selectedIndex: number;
+};
+
+export default class SettingsSelect<T extends obj>
+    extends Component<Props<T>, State> {
+    ref: Ref<Select | undefined> | undefined;
+    constructor(props: Props<T>) {
+        super(props);
+        if (!props.list.length) throw Error("No list.");
+        let index = props.selectedValue
+            ? props.list.findIndex((v) => v.value === props.selectedValue)
+            : props.selectedIndex;
+        if (index === -1) index = 0;
+        this.state = { selectedIndex: index || 0 };
+    }
+    componentWillReceiveProps(
+        nextProps: Readonly<Props<T>>,
+        _nextContext: unknown,
+    ): void {
+        const index = nextProps.selectedValue
+            ? nextProps.list.findIndex((v) =>
+                v.value === nextProps.selectedValue
+            )
+            : nextProps.selectedIndex;
+        if (index === -1) return;
+        const selectedIndex = index || 0;
+        this.setState({ selectedIndex });
+        this.update(selectedIndex);
+    }
+    componentDidMount(): void {
+        this.update(this.state.selectedIndex);
+    }
+    render() {
+        this.ref = useRef<Select>();
+        return (
+            <Select
+                id={this.props.id}
+                ref={this.ref}
+                hintText={this.props.hintText}
+                disabled={this.props.disabled}
+                box={this.props.box}
+                outlined={this.props.outlined}
+                onChange={(e: Event) => {
+                    if (!e.target) return;
+                    /**@ts-ignore */
+                    const selectedIndex: number = e.target.selectedIndex;
+                    this.setState({ selectedIndex });
+                    this.set_value(selectedIndex);
+                }}
+            >
+                {this.props.list.map((v) => {
+                    const t = v.text ? v.text : v.value.toString();
+                    return <Select.Item disabled={v.disabled}>{t}</Select.Item>;
+                })}
+            </Select>
+        );
+    }
+    get selectedIndex() {
+        return this.state.selectedIndex;
+    }
+    set_value(index: number) {
+        const value = this.props.list[index].value;
+        this.props.set_value(value);
+    }
+    update(index: number) {
+        const e = this.ref?.current;
+        if (e) {
+            const b = e.base;
+            if (b) {
+                const t = b as HTMLElement;
+                const s = t.querySelector("select");
+                if (s) {
+                    s.selectedIndex = index;
+                }
+            }
+        }
+    }
+    update_value(value: T) {
+        const index = this.props.list.findIndex((v) => v.value === value);
+        if (index !== -1) this.update(index);
+    }
+}

components/NewTask.tsx

@@ -4,6 +4,9 @@ import Fab from "preact-material-components/Fab";
 import Icon from "preact-material-components/Icon";
 import { set_state } from "../server/state.ts";
 import t from "../server/i18n.ts";
+import BSelect from "./BSelect.tsx";
+import { useState } from "preact/hooks";
+import { TaskType } from "../task.ts";
 
 export type NewTaskProps = {
     show: boolean;
@@ -14,6 +17,15 @@ export default class NewTask extends Component<NewTaskProps> {
     declare context: ContextType<typeof GlobalCtx>;
     render() {
         if (!this.props.show) return null;
+        const [task_type, set_task_type] = useState(TaskType.Download);
+        let config_div = null;
+        if (task_type === TaskType.Download) {
+            config_div = (
+                <div class="download">
+                    {t("task.gallery_url")}
+                </div>
+            );
+        }
         return (
             <div class="new_task">
                 <div class="container">
@@ -29,7 +41,24 @@ export default class NewTask extends Component<NewTaskProps> {
                             </Icon>
                         </Fab>
                     </div>
-                    <div class="content"></div>
+                    <div class="content">
+                        <div class="type">
+                            {t("task.type")}
+                            <BSelect
+                                outlined={true}
+                                list={[{
+                                    value: TaskType.Download,
+                                    text: t("task.download"),
+                                }, {
+                                    value: TaskType.ExportZip,
+                                    text: t("task.export_zip"),
+                                }]}
+                                selectedValue={task_type}
+                                set_value={set_task_type}
+                            />
+                        </div>
+                        {config_div}
+                    </div>
                     <div class="bottom"></div>
                 </div>
             </div>

translation/en/task.jsonc

@@ -5,5 +5,9 @@
     "waiting": "Waiting",
     "failed": "Failed",
     "finished": "Finished",
-    "add": "Add task"
+    "add": "Add task",
+    "type": "Task type: ",
+    "download": "Download",
+    "export_zip": "Export as ZIP file",
+    "gallery_url": "Gallery URL: "
 }

translation/zh-cn/task.jsonc

@@ -5,5 +5,9 @@
     "waiting": "等待中",
     "failed": "已失败",
     "finished": "已完成",
-    "add": "新建任务"
+    "add": "新建任务",
+    "type": "任务类型：",
+    "download": "下载",
+    "export_zip": "导出为ZIP文件",
+    "gallery_url": "画廊地址："
 }