[add] Downloader component & page

[optimize] async load pages

package.json

@@ -19,14 +19,15 @@
         "url": "https://github.com/EasyWebApp/WebCell-dashboard/issues"
     },
     "dependencies": {
-        "boot-cell": "^2.0.0-beta.26",
+        "boot-cell": "^2.0.0-beta.27",
         "browser-unhandled-rejection": "^1.0.2",
         "cell-router": "^3.0.0-rc.7",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.1.7",
+        "dom-renderer": "^2.1.8",
         "echarts-jsx": "^1.2.0",
         "koajax": "^1.1.2",
         "mobx": "^6.12.4",
+        "mobx-restful": "1.0.0-rc.5",
         "web-cell": "^3.0.0-rc.16",
         "web-utility": "^4.4.0"
     },
@@ -65,7 +66,7 @@
         "prepare": "husky",
         "test": "lint-staged",
         "clean": "rm -rf .parcel-cache/ dist/",
-        "start": "npm run clean  &&  parcel src/index.html --open",
+        "start": "npm run clean  &&  parcel src/index.html",
         "pack": "npm run clean  &&  parcel build src/index.html --public-url .",
         "build": "npm run pack  &&  workbox generateSW"
     }

src/component/Downloader.tsx

@@ -0,0 +1,71 @@
+import { FC, observer } from 'web-cell';
+import {
+    Button,
+    Card,
+    CardBody,
+    CardFooter,
+    CardTitle,
+    Icon,
+    ProgressBar
+} from 'boot-cell';
+import { DownloadTask } from 'mobx-restful';
+
+import { downloader } from '../model';
+
+export const DTCard: FC<{ task: DownloadTask }> = observer(({ task }) => (
+    <Card>
+        <CardBody>
+            <CardTitle>{task.name}</CardTitle>
+            <ProgressBar
+                striped={task.percent < 100}
+                animated={task.executing}
+                now={task.percent}
+                label
+            />
+        </CardBody>
+        <CardFooter className="d-flex justify-content-between align-items-center">
+            <small>
+                {task.loadedSize.toShortString()} /{' '}
+                {task.totalSize.toShortString()}
+            </small>
+            <div className="d-flex gap-3">
+                {task.percent < 100 &&
+                    (task.executing ? (
+                        <Button
+                            size="sm"
+                            variant="warning"
+                            onClick={() => task.pause()}
+                        >
+                            <Icon name="pause" />
+                        </Button>
+                    ) : (
+                        <Button
+                            size="sm"
+                            variant="success"
+                            onClick={() => task.start()}
+                        >
+                            <Icon name="play" />
+                        </Button>
+                    ))}
+                <Button
+                    size="sm"
+                    variant="danger"
+                    disabled={task.executing}
+                    onClick={() => downloader.destroyTask(task.name)}
+                >
+                    <Icon name="trash" />
+                </Button>
+            </div>
+        </CardFooter>
+    </Card>
+));
+
+export const Downloader: FC = observer(() => (
+    <ol className="list-unstyled d-flex flex-column gap-3">
+        {downloader.tasks.map(task => (
+            <li key={task.id}>
+                <DTCard task={task} />
+            </li>
+        ))}
+    </ol>
+));

src/model/index.ts

@@ -1,3 +1,5 @@
+import { Downloader } from 'mobx-restful';
+
 import { ContentModel } from './Content';
 
 export * from './Content';
@@ -6,3 +8,5 @@ export const content = new ContentModel({
     owner: 'EasyWebApp',
     repo: 'WebCell-dashboard'
 });
+
+export const downloader = new Downloader();

src/page/DashBoard.tsx

@@ -11,7 +11,7 @@ import menu from './menu.json';
 
 @component({ tagName: 'dash-board' })
 @observer
-export class DashBoard extends HTMLElement {
+export default class DashBoard extends HTMLElement {
     connectedCallback() {
         content.getPaths();
     }

src/page/Downloader.tsx

@@ -0,0 +1,46 @@
+import { Button, FloatingLabel, FormControl } from 'boot-cell';
+import { formToJSON } from 'web-utility';
+
+import { Downloader } from '../component/Downloader';
+import { PageFrame } from '../component/PageFrame';
+import { downloader } from '../model';
+import menu from './menu.json';
+
+const addTask = async (event: SubmitEvent) => {
+    event.preventDefault();
+
+    const form = event.currentTarget as HTMLFormElement;
+    const { path } = formToJSON(form);
+
+    await downloader
+        .createTask(path as string)
+        .start({ chunkSize: 1024 ** 2 / 2 });
+
+    form.reset();
+};
+
+export default () => (
+    <PageFrame menu={menu}>
+        <h1 className="my-4">Downloader</h1>
+
+        <form
+            className="d-flex align-items-center gap-3 mb-3"
+            onSubmit={addTask}
+        >
+            <FloatingLabel className="flex-fill" label="URL">
+                <FormControl
+                    placeholder="URL"
+                    type="url"
+                    name="path"
+                    required
+                />
+            </FloatingLabel>
+
+            <Button type="submit" variant="primary">
+                +
+            </Button>
+        </form>
+
+        <Downloader />
+    </PageFrame>
+);

src/page/index.tsx

@@ -1,14 +1,18 @@
 import { createRouter } from 'cell-router';
-import { FC } from 'web-cell';
+import { FC, lazy } from 'web-cell';
 
-import { DashBoard } from './DashBoard';
 import { SignInPage } from './SignIn';
 
+const DashBoard = lazy(() => import('./DashBoard')),
+    DownloaderPage = lazy(() => import('./Downloader'));
+
 const { Route } = createRouter();
 
 export const PageFrame: FC = () => (
     <div>
         <Route path="" component={SignInPage} />
         <Route path="admin" component={DashBoard} />
+        <Route path="admin/dashboard" component={DashBoard} />
+        <Route path="admin/downloader" component={DownloaderPage} />
     </div>
 );

src/page/menu.json

@@ -7,8 +7,8 @@
                 "icon": "house"
             },
             {
-                "title": "Orders",
-                "href": "admin/order",
+                "title": "Downloader",
+                "href": "admin/downloader",
                 "icon": "file-earmark"
             },
             {

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "ES6",
-        "module": "ES6",
+        "module": "CommonJS",
         "moduleResolution": "Node",
         "esModuleInterop": true,
         "resolveJsonModule": true,