feat(jobs): basic framework

src/app/@dataflow/rclone/index.ts

@@ -5,3 +5,4 @@ export * from './list-remotes-flow';
 export * from './operations-list-flow';
 export * from './connection-flow';
 export * from './list-cmd-flow';
+export * from './list-group-flow';

src/app/@dataflow/rclone/list-group-flow.ts

@@ -0,0 +1,18 @@
+import { PostFlow } from './post-flow';
+import { IRcloneServer } from '../extra';
+import { CombErr, AjaxFlowInteralNode } from '../core';
+
+export interface ListGroupFlowOutNode {
+	groups: string[];
+}
+
+export abstract class ListGroupFlow extends PostFlow<IRcloneServer, ListGroupFlowOutNode> {
+	// public prerequest$: Observable<CombErr<IRcloneServer>>;
+	protected cmd: string = 'core/group-list';
+	protected params = {};
+	protected cacheSupport: boolean = false;
+	protected reconstructAjaxResult(x: AjaxFlowInteralNode): CombErr<ListGroupFlowOutNode> {
+		if (x[1].length !== 0) return [{}, x[1]] as any;
+		return [{ groups: x[0].ajaxRsp.response['groups'] }, []];
+	}
+}

src/app/pages/jobs/jobs.component.ts

@@ -1,20 +1,86 @@
 import { Component, OnInit } from '@angular/core';
+import { Columns } from 'ngx-easy-table';
 
 @Component({
-  selector: 'app-jobs',
-  template: `
-    <p>
-      jobs works!
-    </p>
-  `,
-  styles: [
-  ]
+	selector: 'app-jobs',
+	template: `
+		<nb-layout>
+			<nb-sidebar>
+				<nb-card-header> Groups </nb-card-header>
+				<nb-card-body>
+					123
+				</nb-card-body>
+			</nb-sidebar>
+
+			<nb-layout-column style="padding: 0;">
+				<div class="container">
+					<div class="row">
+						<div class="col-6">
+							<nb-card>
+								<nb-card-header> Speed </nb-card-header>
+								<nb-card-body>
+									<canvas baseChart width="200" height="100"></canvas>
+								</nb-card-body>
+							</nb-card>
+						</div>
+						<div class="col-6">
+							<nb-card>
+								<nb-card-header> Core Status </nb-card-header>
+								<nb-card-body class="row">
+									<div class="col-4">123</div>
+									<div class="col-8">234</div>
+								</nb-card-body>
+							</nb-card>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col">
+							<nb-card>
+								<nb-card-header> Transfers Status </nb-card-header>
+								<nb-card-body>
+									<ngx-table [columns]="columns"> </ngx-table>
+								</nb-card-body>
+							</nb-card>
+						</div>
+					</div>
+				</div>
+			</nb-layout-column>
+		</nb-layout>
+	`,
+	styles: [
+		`
+			nb-sidebar {
+				border-left: solid;
+				border-color: #edf1f7;
+				border-left-width: 0.0668rem;
+			}
+			:host ::ng-deep .scrollable {
+				display: contents;
+			}
+			ul {
+				list-style-type: none;
+			}
+			li {
+				border-bottom: 1px solid #edf1f7;
+			}
+			div.row {
+				padding-top: 1rem;
+			}
+			nb-card {
+				height: 100%;
+			}
+		`,
+	],
 })
 export class JobsComponent implements OnInit {
+	public columns: Columns[] = [
+		{ key: 'Name', title: 'Name' },
+		{ key: 'Size', title: 'Size' },
+		{ key: 'percentage', title: 'Percentage' },
+		{ key: 'speed', title: 'Speed' },
+		{ key: 'eta', title: 'eta' },
+	];
+	constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+	ngOnInit(): void {}
 }

src/app/pages/jobs/jobs.module.ts

@@ -3,13 +3,18 @@ import { CommonModule } from '@angular/common';
 
 import { JobsRoutingModule } from './jobs-routing.module';
 import { JobsComponent } from './jobs.component';
-
+import { NbSidebarModule, NbLayoutModule, NbCardModule } from '@nebular/theme';
+import { TableModule } from 'ngx-easy-table';
 
 @NgModule({
-  declarations: [JobsComponent],
-  imports: [
-    CommonModule,
-    JobsRoutingModule
-  ]
+	declarations: [JobsComponent],
+	imports: [
+		CommonModule,
+		JobsRoutingModule,
+		NbLayoutModule,
+		NbSidebarModule,
+		NbCardModule,
+		TableModule,
+	],
 })
-export class JobsModule { }
+export class JobsModule {}