feat(homeview): show remores on manager

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"

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<IRcloneServer, ListRemotesOutNode> {
+	// public prerequest$: Observable<CombErr<IRcloneServer>>;
+	protected cmd: string = 'config/listremotes';
+	protected params: object = {};
+	protected cacheSupport: boolean = true;
+	protected reconstructAjaxResult(x: AjaxFlowInteralNode): CombErr<ListRemotesOutNode> {
+		if (x[1].length !== 0) return [{}, x[1]] as any;
+		const rsp = x[0].ajaxRsp.response;
+		return [{ remotes: rsp['remotes'] }, []];
+	}
+}

src/app/pages/manager/HomeView/HomeView.component.scss

@@ -0,0 +1,3 @@
+.cloud:hover {
+	background-color: rgba(0, 0, 255, 0.1);
+}

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: `
+		<div class="row justify-content-start">
+			<div class="cloud col-xl-4 col-lg-6 col-md-12" *ngFor="let remote of remotes">
+				<home-view-remote [easyMode]="true" [title]="remote"> </home-view-remote>
+			</div>
+		</div>
+	`,
+	styleUrls: ['./HomeView.component.scss'],
+})
+export class HomeViewComponent implements OnInit {
+	constructor(private usersService: UsersService) {}
+
+	remotesFlow$: ListRemotesFlow;
+	remotesTrigger = new Subject<number>();
+	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<IRcloneServer> => {
+						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);
+	}
+}

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: `
+		<table class="grid-container">
+			<tr>
+				<td rowspan="2" style="padding-right: 1rem;"><nb-icon icon="hard-drive"></nb-icon></td>
+				<td [attr.rowspan]="easyMode ? 2 : 1" style="width: 100%;">
+					<p>{{ title }}</p>
+				</td>
+			</tr>
+			<ng-container *ngIf="!easyMode">
+				<tr>
+					<td>
+						<p>{{ 123 }}</p>
+					</td>
+				</tr>
+				<tr>
+					<td colspan="2">
+						<nb-progress-bar [value]="value" [displayValue]="true" size="tiny"></nb-progress-bar>
+					</td>
+				</tr>
+			</ng-container>
+		</table>
+	`,
+	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() {}
+}

src/app/pages/manager/manager.component.ts

@@ -5,12 +5,8 @@ import { Component, OnInit } from '@angular/core';
 	template: `
 		<nb-card>
 			<nb-card-body>
-				<div class="row">
-					<div class="col">
-						<manager-breadcrumb> </manager-breadcrumb>
-					</div>
-				</div>
-				<p>123</p>
+				<manager-breadcrumb> </manager-breadcrumb>
+				<dashboard-HomeView> </dashboard-HomeView>
 			</nb-card-body>
 		</nb-card>
 	`,

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 {}

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();