From 7e4e8e9f3261a7cdeabe8b6310ea607eafd1fdc9 Mon Sep 17 00:00:00 2001 From: cipchk Date: Mon, 4 Dec 2017 13:40:29 +0800 Subject: [PATCH] feat: add count-down component. --- docs/getting-started.en-US.md | 77 +++++++++++++++++++ ...ng-started.md => getting-started.zh-CN.md} | 2 +- package.json | 5 +- src/app/abc/component.ts | 25 +++--- .../count-down/count-down.component.ts | 44 +++++++++++ .../abc/components/count-down/count-down.less | 18 +++++ .../count-down/count-down.module.ts | 26 +++++++ .../components/count-down/demo/accuracy.md | 29 +++++++ .../abc/components/count-down/demo/simple.md | 36 +++++++++ src/core/abc/components/count-down/index.md | 36 +++++++++ src/core/abc/components/count-down/index.ts | 2 + src/core/abc/index.ts | 6 +- src/core/abc/package.json | 1 + src/core/theme/pipes/date/moment-date.pipe.ts | 6 +- 14 files changed, 290 insertions(+), 23 deletions(-) create mode 100644 docs/getting-started.en-US.md rename docs/{getting-started.md => getting-started.zh-CN.md} (94%) create mode 100644 src/core/abc/components/count-down/count-down.component.ts create mode 100644 src/core/abc/components/count-down/count-down.less create mode 100644 src/core/abc/components/count-down/count-down.module.ts create mode 100644 src/core/abc/components/count-down/demo/accuracy.md create mode 100644 src/core/abc/components/count-down/demo/simple.md create mode 100644 src/core/abc/components/count-down/index.md create mode 100644 src/core/abc/components/count-down/index.ts diff --git a/docs/getting-started.en-US.md b/docs/getting-started.en-US.md new file mode 100644 index 0000000000..12267bdb4b --- /dev/null +++ b/docs/getting-started.en-US.md @@ -0,0 +1,77 @@ +--- +order: 0 +title: + en-US: Getting Started + zh-CN: 开始使用 +type: Basic +--- + +## Foreword + +ng-alain is a production-ready solution for admin interfaces based on ng-zorro-antd, which should help you buid angular project to be faster and simpler. + +## Installation + +There are two ways to install: + +### Clone the Git Repository + +```bash +$ git clone -b 0.2.0 --depth=1 https://github.com/cipchk/ng-alain.git my-project +$ cd my-project +``` + +### Download the Package + +Download [https://github.com/cipchk/ng-alain/archive/0.2.0.zip](https://github.com/cipchk/ng-alain/archive/0.2.0.zip), and un-archive. + +## Scaffolding + +ng-alain is a standard Angular cli project, and have built the following template. which should help you prototyping production-ready admin interfaces. + +``` +├── src +│   ├── app +│   │   ├── core # Core module +│   │   │   ├── i18n +│   │   │   ├── net +│   │   │   │   └── default.interceptor.ts # HTTP Interceptor +│   │   │   ├── services +│   │   │   │   └── startup.service.ts # Startup Service +│   │   │   └── core.module.ts +│   │   ├── layout # Common Layouts +│   │   ├── routes +│   │   │   ├── ** # Your Business +│   │   │   ├── routes.module.ts # Router module file of business +│   │   │   └── routes.ts # Router Register +│   │   ├── shared +│   │   │   └── core.module.ts # Shared module file +│   │   ├── app.component.ts # Root component +│   │   └── app.module.ts # Root module file +│   ├── assets # Local static files +│   ├── environments # Environments config +│   ├── styles # Theme config +└── └── style.less # Global Stylesheet +``` + +## Development + +Install Dependencies + +```bash +$ npm install +``` + +```bash +$ npm start +``` + +or use HMR mode + +```bash +$ npm run serve:hmr +``` + +open [http://localhost:4200](http://localhost:4200), If you see the following page then you have succeeded. + +![](./assets/screenshot/desktop.png | width=700) diff --git a/docs/getting-started.md b/docs/getting-started.zh-CN.md similarity index 94% rename from docs/getting-started.md rename to docs/getting-started.zh-CN.md index f6f01d4c15..d6fa421dd0 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.zh-CN.md @@ -74,6 +74,6 @@ $ npm start $ npm run serve:hmr ``` -启动完成后会自动打开浏览器访问 [http://localhost:4200](http://localhost:4200)，你看到下面的页面就代表成功了。 +启动完成后会打开浏览器访问 [http://localhost:4200](http://localhost:4200)，你看到下面的页面就代表成功了。 ![](./assets/screenshot/desktop.png | width=700) diff --git a/package.json b/package.json index d429f0d35a..9cd558caaa 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ "site:serve:cli": "ng serve --app site", "site:serve": "npm-run-all -s site:clean site:gen site:serve:cli", "site:ts": "ng build --app site --prod --build-optimizer --bh ./", - "site:build": "npm-run-all -s site:clean site:gen site:ts site:cname", - "site:cname": "cname site/dist", + "site:build": "npm-run-all -s site:clean site:gen site:ts site:cname", + "site:cname": "cname site/dist", "site:deploy": "gh-pages -d site/dist", "site:release": "npm-run-all -s site:build site:deploy", "build:package": "npm-run-all -s clean:tmp:lib build:copy-sources build:ts build:inline-resources build:bundle clean:tmp", @@ -71,6 +71,7 @@ "moment": "^2.19.2", "ng-zorro-antd": "^0.6.1", "ng-zorro-antd-extra": "^1.1.2", + "ngx-countdown": "^1.0.3", "ngx-highlight-js": "^1.0.3", "rxjs": "^5.5.2", "zone.js": "^0.8.14" diff --git a/src/app/abc/component.ts b/src/app/abc/component.ts index 8415d876df..53c8bd7637 100644 --- a/src/app/abc/component.ts +++ b/src/app/abc/component.ts @@ -1,25 +1,20 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import * as moment from 'moment'; +import { NzMessageService } from 'ng-zorro-antd'; @Component({ selector: 'app-demo', template: ` -
- -
- +

10s:

+

10m:

` }) -export class DemoComponent implements OnInit { - visitData: any[] = []; - ngOnInit(): void { - const beginDay = new Date().getTime(); - for (let i = 0; i < 20; i += 1) { - this.visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), - y: Math.floor(Math.random() * 100) + 10, - }); - } +export class DemoComponent { + target = moment().add(10, 'm'); + constructor(private msg: NzMessageService) {} + + onEnd() { + this.msg.success('finised'); } } diff --git a/src/core/abc/components/count-down/count-down.component.ts b/src/core/abc/components/count-down/count-down.component.ts new file mode 100644 index 0000000000..983922c107 --- /dev/null +++ b/src/core/abc/components/count-down/count-down.component.ts @@ -0,0 +1,44 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import * as moment from 'moment'; + +@Component({ + selector: 'count-down', + template: ` + + `, + styleUrls: [ './count-down.less' ] +}) +export class CountDownComponent { + + @Input() config: any; + + /** + * 目标时间 + */ + @Input() + set target(value: number | Date) { + this.config = { + template: `$!h!:$!m!:$!s!`, + stopTime: typeof value === 'number' ? moment().add(value, 's').valueOf() : moment(value).valueOf() + }; + } + + @Output() begin = new EventEmitter(); + @Output() notify = new EventEmitter(); + @Output() end = new EventEmitter(); + + _start() { + this.begin.emit(); + } + + _notify(time: number) { + this.notify.emit(time); + } + + _finished() { + this.end.emit(); + } +} diff --git a/src/core/abc/components/count-down/count-down.less b/src/core/abc/components/count-down/count-down.less new file mode 100644 index 0000000000..b2f0301440 --- /dev/null +++ b/src/core/abc/components/count-down/count-down.less @@ -0,0 +1,18 @@ + +:host { + ::ng-deep { + .count-down { + color: inherit; + font-size: inherit; + font-family: inherit; + .hand { + margin: 0; + } + .digital { + color: inherit; + font-size: inherit; + font-weight: inherit; + } + } + } +} diff --git a/src/core/abc/components/count-down/count-down.module.ts b/src/core/abc/components/count-down/count-down.module.ts new file mode 100644 index 0000000000..b4b19dcf4c --- /dev/null +++ b/src/core/abc/components/count-down/count-down.module.ts @@ -0,0 +1,26 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CountdownModule } from 'ngx-countdown'; + +import { CountDownComponent } from './count-down.component'; + +const COMPONENTS = [CountDownComponent]; + +// region: zorro modules + +// import { NzToolTipModule, NzAvatarModule } from 'ng-zorro-antd'; + +const ZORROMODULES = [ ]; + +// endregion + +@NgModule({ + imports: [CommonModule, CountdownModule, ...ZORROMODULES], + declarations: [...COMPONENTS], + exports: [...COMPONENTS] +}) +export class AdCountDownModule { + static forRoot(): ModuleWithProviders { + return { ngModule: AdCountDownModule, providers: [] }; + } +} diff --git a/src/core/abc/components/count-down/demo/accuracy.md b/src/core/abc/components/count-down/demo/accuracy.md new file mode 100644 index 0000000000..e7afc56bdc --- /dev/null +++ b/src/core/abc/components/count-down/demo/accuracy.md @@ -0,0 +1,29 @@ +--- +order: 0 +title: + zh-CN: 精度 + en-US: Accuracy +--- + +## zh-CN + +0.1s精度使用方式。 + +## en-US + +The `0.1s` accuracy usage. + +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + config: any = { + template: `$!s-ext!秒`, + leftTime: 30 + }; +} +``` diff --git a/src/core/abc/components/count-down/demo/simple.md b/src/core/abc/components/count-down/demo/simple.md new file mode 100644 index 0000000000..597dae3a9e --- /dev/null +++ b/src/core/abc/components/count-down/demo/simple.md @@ -0,0 +1,36 @@ +--- +order: 0 +title: + zh-CN: 基本 + en-US: Basic +--- + +## zh-CN + +简单的倒计时组件使用。 + +## en-US + +The simplest usage. + +```ts +import { Component } from '@angular/core'; +import * as moment from 'moment'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: ` +

10s:

+

10m:

+ ` +}) +export class DemoComponent { + target = moment().add(10, 'm'); + constructor(private msg: NzMessageService) {} + + onEnd() { + this.msg.success('finised'); + } +} +``` diff --git a/src/core/abc/components/count-down/index.md b/src/core/abc/components/count-down/index.md new file mode 100644 index 0000000000..42efbe9768 --- /dev/null +++ b/src/core/abc/components/count-down/index.md @@ -0,0 +1,36 @@ +--- +title: count-down +subtitle: 倒计时 +cols: 1 +order: 3 +--- + +倒计时组件，依赖 [ngx-countdown](https://github.com/cipchk/ngx-countdown)。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|---------------|-------------|-------| +| target | 目标时间，`number` 表示秒 | `number | Date` | - | +| config | 完整参数 | `Object` | | +| (begin) | 开始时触发 | `EventEmitter` | -| +| (notify) | 通知时触发，需要在 `config` 中配置 notify | `EventEmitter` | -| +| (end) | 结束时触发 | `EventEmitter` | -| + +### config + +| Name | Type | Default | Summary | +| ------- | ------------- | ----- | ----- | +| template | string | $!h!时$!m!分$!s!秒 | 自定义模板，如果为空以组件 innerHTML 为准，再不然使用默认值。`$!s!` 有另一种表示法 `$!s-ext!` 表示0.1s精度。 | +| size | string | lite | lite、medium、large 三种不同风格，见DEMO | +| leftTime | number | 0 | 剩余时间：指的是根据服务端计算剩余时间值进行倒计时，支持0.1s精度，但有可能会出现丢帧的情况。（单位：秒） | +| stopTime | number | 0 | 结束时间：指的是根据本地时间至结束时间进行倒计时。（单位：UNIX时间戳 ms） | +| varRegular | RegExp | `/\$\{([\-\w]+)\}/g` | 模板解析正则表达式，有时候由于模板结构比较特殊，无法根据默认的表达式进行解析，那就需要修改它。 | +| clock | Array | | 时钟控制数组，特殊需求时可以修改，里面是三元组：指针名、进制、位数，可参考大于99小时demo | +| notify | number[] | | 第xx秒时调用 notify 函数，值必须是**正整数** | +| className | string | | 自定义类名 | +| repaint | Function | | 自定义重绘 | + +## 关于重绘 + +重绘是指当Timer一次跳动时会执行一次（如果是0.1s精度的，会更频繁）；因此，可以制定一些不一样的效果。有关细节可以参考 [Flip](https://cipchk.github.io/ngx-countdown/#/tpl/flip)。 diff --git a/src/core/abc/components/count-down/index.ts b/src/core/abc/components/count-down/index.ts new file mode 100644 index 0000000000..b1eb4ce7f1 --- /dev/null +++ b/src/core/abc/components/count-down/index.ts @@ -0,0 +1,2 @@ +export { CountDownComponent } from './count-down.component'; +export { AdCountDownModule } from './count-down.module'; diff --git a/src/core/abc/index.ts b/src/core/abc/index.ts index 3731f44340..73363799c3 100644 --- a/src/core/abc/index.ts +++ b/src/core/abc/index.ts @@ -20,12 +20,13 @@ import { AdTagSelectModule } from './components/tag-select/tag-select.module'; import { AdTrendModule } from './components/trend/trend.module'; import { AdUtilsModule } from './components/utils/utils.module'; import { AdChartsModule } from './components/charts/charts.module'; +import { AdCountDownModule } from './components/count-down/count-down.module'; const MODULES = [ AdErrorCollectModule, AdFooterToolbarModule, AdSidebarNavModule, AdDownFileModule, AdImageModule, AdAvatarListModule, AdDescListModule, AdEllipsisModule, AdGlobalFooterModule, AdExceptionModule, AdNoticeIconModule, AdNumberInfoModule, AdProHeaderModule, AdResultModule, AdStandardFormRowModule, - AdTagSelectModule, AdTrendModule, AdUtilsModule, AdChartsModule + AdTagSelectModule, AdTrendModule, AdUtilsModule, AdChartsModule, AdCountDownModule ]; // endregion @@ -51,6 +52,7 @@ export * from './components/tag-select'; export * from './components/trend'; export * from './components/utils'; export * from './components/charts'; +export * from './components/count-down'; // endregion @@ -59,7 +61,7 @@ export * from './components/charts'; AdErrorCollectModule.forRoot(), AdFooterToolbarModule.forRoot(), AdSidebarNavModule.forRoot(), AdDownFileModule.forRoot(), AdImageModule.forRoot(), AdAvatarListModule.forRoot(), AdDescListModule.forRoot(), AdEllipsisModule.forRoot(), AdExceptionModule.forRoot(), AdExceptionModule.forRoot(), AdNoticeIconModule.forRoot(), AdNumberInfoModule.forRoot(), AdProHeaderModule.forRoot(), AdResultModule.forRoot(), AdStandardFormRowModule.forRoot(), - AdTagSelectModule.forRoot(), AdTrendModule.forRoot(), AdUtilsModule.forRoot(), AdChartsModule.forRoot() + AdTagSelectModule.forRoot(), AdTrendModule.forRoot(), AdUtilsModule.forRoot(), AdChartsModule.forRoot(), AdCountDownModule.forRoot() ], exports: MODULES }) diff --git a/src/core/abc/package.json b/src/core/abc/package.json index b3c71a88e9..a084593451 100644 --- a/src/core/abc/package.json +++ b/src/core/abc/package.json @@ -17,5 +17,6 @@ "homepage": "https://github.com/cipchk/delon#readme", "keywords": ["delon", "ng-alain", "alain", "antd", "ng-zorro-antd"], "peerDependencies": { + "ngx-countdown": "^1.0.3" } } diff --git a/src/core/theme/pipes/date/moment-date.pipe.ts b/src/core/theme/pipes/date/moment-date.pipe.ts index 90c84e9688..7764ed0068 100644 --- a/src/core/theme/pipes/date/moment-date.pipe.ts +++ b/src/core/theme/pipes/date/moment-date.pipe.ts @@ -8,13 +8,13 @@ import * as moment from 'moment'; * * @example * ```html - * {{ data | _data }} + * {{ data | _date }} * 2017-09-17 15:35 * - * {{ data | _data: 'YYYY年MM月DD日' }} + * {{ data | _date: 'YYYY年MM月DD日' }} * 2017年09月17 * - * {{ data | _data: 'fn' }} + * {{ data | _date: 'fn' }} * 10 秒前 * ``` */