From 13fd77122da9e3f8a215bc4022906e23e220ac4a Mon Sep 17 00:00:00 2001 From: ElonH Date: Wed, 20 May 2020 14:13:58 +0800 Subject: [PATCH] feat(homeview): show remores on manager --- package-lock.json | 29 +++++++++- package.json | 5 +- src/app/@dataflow/rclone/list-remotes-flow.ts | 24 ++++++++ .../manager/HomeView/HomeView.component.scss | 3 + .../manager/HomeView/HomeView.component.ts | 48 ++++++++++++++++ .../manager/HomeView/remote.component.ts | 57 +++++++++++++++++++ src/app/pages/manager/manager.component.ts | 8 +-- src/app/pages/manager/manager.module.ts | 15 ++++- src/styles.scss | 1 + 9 files changed, 177 insertions(+), 13 deletions(-) create mode 100644 src/app/@dataflow/rclone/list-remotes-flow.ts create mode 100644 src/app/pages/manager/HomeView/HomeView.component.scss create mode 100644 src/app/pages/manager/HomeView/HomeView.component.ts create mode 100644 src/app/pages/manager/HomeView/remote.component.ts diff --git a/package-lock.json b/package-lock.json index 2764d23..0220dce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -259,9 +259,9 @@ "integrity": "sha512-1wW8ndGMLDuE2LpTN2RNRz1Dt7JgVBeVmOPMgzoA7g1uuvm+jESTrGG7W3BzLzG0BE2TeXt0fY90o4iU+S2Rmg==" }, "@angular/cdk": { - "version": "9.2.3", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.3.tgz", - "integrity": "sha512-tQr/yt8GNGsZ/DTT+PMq7XdRmL56hwVCyf8F12JQAawutSLfTfMb+S1lpN7L/0Pb/L5JBuCfG2HmXK7vHo02gw==", + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz", + "integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==", "requires": { "parse5": "^5.0.0" }, @@ -8607,6 +8607,11 @@ } } }, + "jquery": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz", + "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -9997,6 +10002,19 @@ "tslib": "^1.9.0" } }, + "ngx-easy-table": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/ngx-easy-table/-/ngx-easy-table-12.0.0.tgz", + "integrity": "sha512-cq9zVQiQ1T2t9k8ZkT+2gHioWXtxQBDLvpUdf/4d1EN9fSUiHzYuSP1Sxu6j0O1kG++GbhsTjcnS4byB8ax8NQ==", + "requires": { + "ngx-pagination": "^5.0.0" + } + }, + "ngx-pagination": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-5.0.0.tgz", + "integrity": "sha512-Ur0pTWRe2ZXoJ8impEzo0IZKxY5aEcQfSmL5uBqW1rHI2J6nfzgZAHsSLagKHFGchXq0PkRlDVVMcIaNxYJwvQ==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -11125,6 +11143,11 @@ "semver-compare": "^1.0.0" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.26", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz", diff --git a/package.json b/package.json index e4f64fb..8c21ecc 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "private": true, "dependencies": { "@angular/animations": "^9.1.7", - "@angular/cdk": "^9.2.3", + "@angular/cdk": "^9.2.4", "@angular/common": "~9.1.7", "@angular/compiler": "~9.1.7", "@angular/core": "~9.1.7", @@ -45,8 +45,11 @@ "bootstrap": "^4.5.0", "chart.js": "^2.9.3", "eva-icons": "^1.1.3", + "jquery": "^3.5.1", "nebular-icons": "^1.1.0", "ng2-charts": "^2.3.2", + "ngx-easy-table": "^12.0.0", + "popper.js": "^1.16.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/@dataflow/rclone/list-remotes-flow.ts b/src/app/@dataflow/rclone/list-remotes-flow.ts new file mode 100644 index 0000000..c212a36 --- /dev/null +++ b/src/app/@dataflow/rclone/list-remotes-flow.ts @@ -0,0 +1,24 @@ +import { PostFlow } from './post-flow'; +import { NoopAuthFlowSupNode } from './noop-auth-flow'; +import { IRcloneServer } from '../extra'; +import { AjaxFlowInteralNode } from '../core/ajax-flow'; +import { CombErr } from '../core'; +import { Observable } from 'rxjs'; + +export interface ListRemotesOutNode { + remotes: string[]; +} + +export interface ListRemotesSupNode extends ListRemotesOutNode, NoopAuthFlowSupNode {} + +export abstract class ListRemotesFlow extends PostFlow { + // public prerequest$: Observable>; + protected cmd: string = 'config/listremotes'; + protected params: object = {}; + protected cacheSupport: boolean = true; + protected reconstructAjaxResult(x: AjaxFlowInteralNode): CombErr { + if (x[1].length !== 0) return [{}, x[1]] as any; + const rsp = x[0].ajaxRsp.response; + return [{ remotes: rsp['remotes'] }, []]; + } +} diff --git a/src/app/pages/manager/HomeView/HomeView.component.scss b/src/app/pages/manager/HomeView/HomeView.component.scss new file mode 100644 index 0000000..7ec28a5 --- /dev/null +++ b/src/app/pages/manager/HomeView/HomeView.component.scss @@ -0,0 +1,3 @@ +.cloud:hover { + background-color: rgba(0, 0, 255, 0.1); +} diff --git a/src/app/pages/manager/HomeView/HomeView.component.ts b/src/app/pages/manager/HomeView/HomeView.component.ts new file mode 100644 index 0000000..3c895f6 --- /dev/null +++ b/src/app/pages/manager/HomeView/HomeView.component.ts @@ -0,0 +1,48 @@ +import { Component, OnInit } from '@angular/core'; +import { UsersService } from '../../users.service'; +import { ListRemotesFlow } from 'src/app/@dataflow/rclone/list-remotes-flow'; +import { map, combineLatest, tap } from 'rxjs/operators'; +import { CombErr } from 'src/app/@dataflow/core'; +import { IRcloneServer } from 'src/app/@dataflow/extra'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'dashboard-HomeView', + template: ` +
+
+ +
+
+ `, + styleUrls: ['./HomeView.component.scss'], +}) +export class HomeViewComponent implements OnInit { + constructor(private usersService: UsersService) {} + + remotesFlow$: ListRemotesFlow; + remotesTrigger = new Subject(); + remotes: string[] = []; + + ngOnInit() { + const outer = this; + this.remotesFlow$ = new (class extends ListRemotesFlow { + public prerequest$ = outer.remotesTrigger.pipe( + combineLatest(outer.usersService.usersFlow$.getOutput()), + map( + ([_, x]): CombErr => { + if (x[1].length !== 0) return [{}, x[1]] as any; + return [x[0].loginUser, []]; + } + ) + ); + })(); + this.remotesFlow$.deploy(); + + this.remotesFlow$.getOutput().subscribe((x) => { + if (x[1].length !== 0) return; + this.remotes = x[0].remotes; + }); + this.remotesTrigger.next(1); + } +} diff --git a/src/app/pages/manager/HomeView/remote.component.ts b/src/app/pages/manager/HomeView/remote.component.ts new file mode 100644 index 0000000..6685393 --- /dev/null +++ b/src/app/pages/manager/HomeView/remote.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'home-view-remote', + template: ` + + + + + + + + + + + + + +
+

{{ title }}

+
+

{{ 123 }}

+
+ +
+ `, + styles: [ + ` + .grid-container { + width: 100%; + height: 4rem; + cursor: pointer; + /* background-color: #2196f3; */ + } + td > p { + margin-bottom: 0; + } + `, + ], +}) +export class RemoteComponent implements OnInit { + @Input() + title: string = 'unknow'; + + @Input() + subtitle: string = ''; + + @Input() + value: number = 0; + + @Input() + easyMode: boolean = false; + + constructor() {} + + ngOnInit() {} +} diff --git a/src/app/pages/manager/manager.component.ts b/src/app/pages/manager/manager.component.ts index 12eb9a2..297d429 100644 --- a/src/app/pages/manager/manager.component.ts +++ b/src/app/pages/manager/manager.component.ts @@ -5,12 +5,8 @@ import { Component, OnInit } from '@angular/core'; template: ` -
-
- -
-
-

123

+ + `, diff --git a/src/app/pages/manager/manager.module.ts b/src/app/pages/manager/manager.module.ts index 06c92d2..653bad8 100644 --- a/src/app/pages/manager/manager.module.ts +++ b/src/app/pages/manager/manager.module.ts @@ -3,11 +3,20 @@ import { CommonModule } from '@angular/common'; import { ManagerRoutingModule } from './manager-routing.module'; import { ManagerComponent } from './manager.component'; -import { NbActionsModule, NbCardModule, NbIconModule } from '@nebular/theme'; +import { NbActionsModule, NbCardModule, NbIconModule, NbProgressBarModule } from '@nebular/theme'; import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; +import { HomeViewComponent } from './HomeView/HomeView.component'; +import { RemoteComponent } from './HomeView/remote.component'; @NgModule({ - declarations: [ManagerComponent, BreadcrumbComponent], - imports: [CommonModule, ManagerRoutingModule, NbActionsModule, NbCardModule, NbIconModule], + declarations: [ManagerComponent, BreadcrumbComponent, HomeViewComponent, RemoteComponent], + imports: [ + CommonModule, + ManagerRoutingModule, + NbActionsModule, + NbCardModule, + NbIconModule, + NbProgressBarModule, + ], }) export class ManagerModule {} diff --git a/src/styles.scss b/src/styles.scss index 0f9b341..ee82644 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,6 +2,7 @@ @import '~@nebular/theme/styles/globals'; @import '~nebular-icons/css/nebular-icons.css'; @import '~bootstrap/dist/css/bootstrap.min.css'; +@import "~ngx-easy-table/style.scss"; @include nb-install() { @include nb-theme-global();