[add] Downloader component & page

.github/pr-badge.yml

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

.github/workflows/init-template.yml

@@ -0,0 +1,25 @@
+name: Template Repository initialization
+on:
+    push:
+        branches:
+            - main
+env:
+    TEMPLATE_OWNER: EasyWebApp
+    TEMPLATE_NAME: WebCell-dashboard
+
+jobs:
+    replace-repository-name:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - if: github.repository != format('{0}/{1}', env.TEMPLATE_OWNER, env.TEMPLATE_NAME)
+              run: |
+                  sh .github/workflows/replace-repository-name.sh \
+                    ${{ env.TEMPLATE_OWNER }} ${{ env.TEMPLATE_NAME }} \
+                    ${{ github.repository_owner }} ${{ github.event.repository.name }}
+                  rm -f .github/workflows/init-template.yml
+
+            - uses: stefanzweifel/git-auto-commit-action@v5
+              with:
+                  commit_message: '[fix] replace Repository Name'

.github/workflows/replace-repository-name.sh

@@ -0,0 +1,11 @@
+#! /usr/bin/env bash
+
+SourceOwner=$1
+SourceName=$2
+TargetOwner=$3
+TargetName=$4
+
+sed -i "s/$SourceOwner\/$SourceName/$TargetOwner\/$TargetName/ig" \
+    $(grep -i $SourceOwner/$SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)
+sed -i "s/$SourceName/$TargetName/ig" \
+    $(grep -i $SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)

ReadMe.md

@@ -1,25 +1,25 @@
-![](https://git-pager.vercel.app/src/image/WebCell-0.png)
+![](https://github.com/EasyWebApp.png)
 
-# WebCell DashBoard
+# WebCell-dashboard
 
 Admin DashBoard scaffold of **WebCell** v3
 
 https://web-cell-dashboard.vercel.app/
 
-[![CI & CD](https://github.com/EasyWebApp/DashBoard/actions/workflows/main.yml/badge.svg)][2]
+[![CI & CD](https://github.com/EasyWebApp/WebCell-dashboard/actions/workflows/main.yml/badge.svg)][1]
 
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][3]
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][4]
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][2]
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][3]
 
 ## Technology stack
 
--   Language: [TypeScript v5][5]
--   Component engine: [WebCell v3][6]
--   Component suite: [BootCell v2][7]
--   State management: [MobX v6][8]
--   PWA framework: [Workbox v7][9]
--   Package bundler: [Parcel v2][10]
--   CI / CD: GitHub [Actions][11] + [Pages][12]
+-   Language: [TypeScript v5][4]
+-   Component engine: [WebCell v3][5]
+-   Component suite: [BootCell v2][6]
+-   State management: [MobX v6][7]
+-   PWA framework: [Workbox v7][8]
+-   Package bundler: [Parcel v2][9]
+-   CI / CD: GitHub [Actions][10] + [Pages][11]
 
 ## Development
 
@@ -37,29 +37,40 @@ pnpm build
 
 ## Best practice
 
-1.  Install **[Settings][13] GitHub app** in your account or organization
-2.  Click the **[Use this template][14] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
-3.  Click the **[Open in GitHub codespaces][3] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
-4.  Set [Vercel variables][15] as [Repository secrets][16], then every commit will get an independent **Preview URL**
-5.  Recommend to add a [Notification step in GitHub actions][17] for your Team IM app
-6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][18] instead of IM messages or Mobile Phone calls
-7.  Collect all these issues into [Project kanbans][19], then create **Pull requests** & add `closes #issue_number` into its description for automation
-
-[2]: https://github.com/EasyWebApp/DashBoard/actions/workflows/main.yml
-[3]: https://codespaces.new/EasyWebApp/DashBoard
-[4]: https://gitpod.io/?autostart=true#https://github.com/EasyWebApp/DashBoard
-[5]: https://typescriptlang.org/
-[6]: https://web-cell.dev/
-[7]: https://bootstrap.web-cell.dev/
-[8]: https://mobx.js.org/
-[9]: https://developers.google.com/web/tools/workbox
-[10]: https://parceljs.org/
-[11]: https://github.com/features/actions
-[12]: https://pages.github.com/
-[13]: https://github.com/apps/settings
-[14]: https://github.com/new?template_name=DashBoard&template_owner=EasyWebApp
-[15]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12
-[16]: https://github.com/EasyWebApp/DashBoard/settings/secrets/actions
-[17]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
-[18]: https://github.com/EasyWebApp/DashBoard/issues/new/choose
-[19]: https://github.com/EasyWebApp/DashBoard/projects
+1.  Install GitHub apps in your organization or account:
+
+    1.  [Probot settings][12]: set up Issue labels & Pull Request rules
+    2.  [PR badge][13]: set up Online [VS Code][14] editor entries in Pull Request description
+
+2.  Click the **[<kbd>Use this template</kbd>][15] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
+
+3.  Click the **[<kbd>Open in GitHub codespaces</kbd>][2] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
+
+4.  Set [Vercel variables][16] as [Repository secrets][17], then every commit will get an independent **Preview URL**
+
+5.  Recommend to add a [Notification step in GitHub actions][18] for your Team IM app
+
+6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][19] instead of IM messages or Mobile Phone calls
+
+7.  Collect all these issues into [Project kanbans][20], then create **Pull requests** & add `closes #issue_number` into its description for automation
+
+[1]: https://github.com/EasyWebApp/WebCell-dashboard/actions/workflows/main.yml
+[2]: https://codespaces.new/EasyWebApp/WebCell-dashboard
+[3]: https://gitpod.io/?autostart=true#https://github.com/EasyWebApp/WebCell-dashboard
+[4]: https://typescriptlang.org/
+[5]: https://web-cell.dev/
+[6]: https://bootstrap.web-cell.dev/
+[7]: https://mobx.js.org/
+[8]: https://developers.google.com/web/tools/workbox
+[9]: https://parceljs.org/
+[10]: https://github.com/features/actions
+[11]: https://pages.github.com/
+[12]: https://github.com/apps/settings
+[13]: https://pullrequestbadge.com/
+[14]: https://code.visualstudio.com/
+[15]: https://github.com/new?template_name=WebCell-dashboard&template_owner=EasyWebApp
+[16]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12
+[17]: https://github.com/EasyWebApp/WebCell-dashboard/settings/secrets/actions
+[18]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
+[19]: https://github.com/EasyWebApp/WebCell-dashboard/issues/new/choose
+[20]: https://github.com/EasyWebApp/WebCell-dashboard/projects

package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcell-dashboard",
     "version": "0.5.0",
-    "description": "Admin DashBoard scaffold of WebCell v2",
+    "description": "Admin DashBoard scaffold of WebCell v3",
     "keywords": [
         "web-component",
         "typescript",
@@ -13,21 +13,22 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/EasyWebApp/DashBoard.git"
+        "url": "git+https://github.com/EasyWebApp/WebCell-dashboard.git"
     },
     "bugs": {
-        "url": "https://github.com/EasyWebApp/DashBoard/issues"
+        "url": "https://github.com/EasyWebApp/WebCell-dashboard/issues"
     },
     "dependencies": {
-        "boot-cell": "^2.0.0-beta.20",
+        "boot-cell": "^2.0.0-beta.27",
         "browser-unhandled-rejection": "^1.0.2",
-        "cell-router": "^3.0.0-rc.6",
+        "cell-router": "^3.0.0-rc.7",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.1.4",
-        "echarts-jsx": "^1.2.0-rc.5",
-        "koajax": "^1.0.0",
-        "mobx": "^6.12.3",
-        "web-cell": "^3.0.0-rc.15",
+        "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"
     },
     "devDependencies": {
@@ -38,16 +39,16 @@
         "@parcel/transformer-typescript-tsc": "~2.12.0",
         "@parcel/transformer-webmanifest": "~2.12.0",
         "@types/chart.js": "^2.9.41",
-        "@types/node": "^18.19.33",
-        "@typescript-eslint/eslint-plugin": "^7.9.0",
-        "@typescript-eslint/parser": "^7.9.0",
+        "@types/node": "^18.19.34",
+        "@typescript-eslint/eslint-plugin": "^7.13.0",
+        "@typescript-eslint/parser": "^7.13.0",
         "buffer": "^6.0.3",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "husky": "^9.0.11",
-        "lint-staged": "^15.2.2",
+        "lint-staged": "^15.2.7",
         "parcel": "~2.12.0",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.2",
         "typescript": "~5.4.5",
         "workbox-cli": "^7.1.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/component/PageFrame.tsx

@@ -22,7 +22,7 @@ export type PageFrameProps = PropsWithChildren<{
 }>;
 
 export const PageFrame: FC<PageFrameProps> = ({ menu = [], children }) => (
-    <div>
+    <>
         <OffcanvasNavbar
             variant="dark"
             fluid
@@ -36,15 +36,15 @@ export const PageFrame: FC<PageFrameProps> = ({ menu = [], children }) => (
             }
         >
             <div className="row w-100 ms-auto g-3">
-                <FormGroup className="col-md-3 offset-md-8">
+                <FormGroup className="col-md-3 offset-md-7">
                     <FormControl
                         as="input"
                         type="search"
                         required
                         placeholder="Search"
                     />
                 </FormGroup>
-                <FormGroup className="col-md-1">
+                <FormGroup className="col-md-2 text-end">
                     <Button
                         variant="outline-light"
                         className="text-nowrap"
@@ -82,5 +82,5 @@ export const PageFrame: FC<PageFrameProps> = ({ menu = [], children }) => (
                 {children}
             </main>
         </div>
-    </div>
+    </>
 );

src/index.html

@@ -6,7 +6,7 @@
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         <link rel="icon" href="image/WebCell-0.png" />
-        <title>WebCell dashboard</title>
+        <title>WebCell-dashboard</title>
         <meta
             name="description"
             content="Admin DashBoard scaffold of WebCell v3"

src/index.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "WebCell dashboard",
+  "name": "WebCell-dashboard",
   "short_name": "WC Demo",
   "start_url": ".",
   "description": "Admin DashBoard scaffold of WebCell v3",

src/model/index.ts

@@ -1,8 +1,12 @@
+import { Downloader } from 'mobx-restful';
+
 import { ContentModel } from './Content';
 
 export * from './Content';
 
 export const content = new ContentModel({
     owner: 'EasyWebApp',
-    repo: 'DashBoard'
+    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();
     }
@@ -37,7 +37,7 @@ export class DashBoard extends HTMLElement {
         return (
             <PageFrame menu={menu}>
                 <header className="d-flex flex-wrap align-items-center gap-3 border-bottom mb-3">
-                    <h1>DashBoard</h1>
+                    <h1>WebCell-dashboard</h1>
 
                     <div className="btn-group">
                         <Button variant="outline-secondary" size="sm">

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,