feat(nav service): parse remote and path from url

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

@@ -1,26 +1,36 @@
 import { Component, OnInit } from '@angular/core';
+import { NavServiceService } from '../nav-service.service';
 
 @Component({
 	selector: 'manager-breadcrumb',
 	template: `
 		<nav>
 			<ol class="breadcrumb">
 				<li class="breadcrumb-item">
-					<a><nb-icon icon="home-outline"></nb-icon></a>
+					<a [routerLink]="['.']" routerLinkActive="router-link-active">
+						<nb-icon icon="home-outline"></nb-icon>
+					</a>
 				</li>
-				<li class="breadcrumb-item">
-					<a>
+				<li *ngIf="remote" class="breadcrumb-item">
+					<a
+						[routerLink]="['.']"
+						routerLinkActive="router-link-active"
+						[queryParams]="geneQueryParams(-1)"
+					>
 						<nb-icon icon="google-outline"></nb-icon>
 						<span class="breadcrumb-cloud">Cloud</span>
 					</a>
 				</li>
-				<li class="breadcrumb-item">
-					<a><span>path</span></a>
-				</li>
-				<li class="breadcrumb-item">
-					<a><span>to</span></a>
+				<li *ngFor="let dir of pathPrefix; index as i" class="breadcrumb-item">
+					<a
+						[routerLink]="['.']"
+						[queryParams]="geneQueryParams(i)"
+						routerLinkActive="router-link-active"
+					>
+						<span>{{ dir }}</span>
+					</a>
 				</li>
-				<li class="breadcrumb-item active">Data</li>
+				<li *ngIf="pathSurfix" class="breadcrumb-item active">{{ pathSurfix }}</li>
 				<a class="right option"><nb-icon icon="refresh"></nb-icon></a>
 				<a class="option"><nb-icon [icon]="listView ? 'list' : 'grid'"></nb-icon></a>
 				<a class="option"><nb-icon icon="info"></nb-icon></a>
@@ -51,7 +61,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BreadcrumbComponent implements OnInit {
 	listView = true;
-	constructor() {}
+	remote: string;
+	pathPrefix: string[];
+	pathSurfix: string;
+
+	constructor(private navService: NavServiceService) {}
+
+	geneQueryParams(i: number): object {
+		const path = this.pathPrefix.slice(0, i + 1).join('/');
+		if (path === '') return { remote: this.remote };
+		return {
+			remote: this.remote,
+			path: this.pathPrefix.slice(0, i + 1).join('/'),
+		};
+	}
+
+	splitPath(path: string): [string[], string] {
+		if (!path) return [[], undefined];
+		const data = path.split('/');
+		return [data.slice(0, -1), data[data.length - 1]];
+	}
 
-	ngOnInit() {}
+	ngOnInit() {
+		this.remote = this.navService.remote;
+		[this.pathPrefix, this.pathSurfix] = this.splitPath(this.navService.path);
+		this.navService.remoteAndPath$.subscribe((x) => {
+			this.remote = x[0];
+			[this.pathPrefix, this.pathSurfix] = this.splitPath(x[1]);
+		});
+	}
 }

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NavServiceService } from './nav-service.service';
 
 @Component({
 	selector: 'app-manager',
@@ -8,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
 				<manager-breadcrumb> </manager-breadcrumb>
 				<div class="row">
 					<div class="view col-md-9 col-sm-8">
-						<dashboard-HomeView> </dashboard-HomeView>
+						<dashboard-HomeView *ngIf="homeMode"> </dashboard-HomeView>
 					</div>
 					<div class="sidebar col-md-3 col-sm-4">123</div>
 				</div>
@@ -36,7 +37,24 @@ import { Component, OnInit } from '@angular/core';
 	],
 })
 export class ManagerComponent implements OnInit {
-	constructor() {}
+	constructor(private navService: NavServiceService) {}
+	homeMode = false;
+	fileMode = false;
 
-	ngOnInit(): void {}
+	showPage(remote: string, path: string) {
+		if (!remote) {
+			this.homeMode = true;
+			this.fileMode = false;
+		} else {
+			this.homeMode = false;
+			this.fileMode = true;
+		}
+	}
+
+	ngOnInit(): void {
+		this.showPage(this.navService.remote, this.navService.path);
+		this.navService.remoteAndPath$.subscribe((x) => {
+			this.showPage(...x);
+		});
+	}
 }

src/app/pages/manager/nav-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NavServiceService } from './nav-service.service';
+
+describe('NavServiceService', () => {
+	let service: NavServiceService;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({});
+		service = TestBed.inject(NavServiceService);
+	});
+
+	it('should be created', () => {
+		expect(service).toBeTruthy();
+	});
+});

src/app/pages/manager/nav-service.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+	providedIn: 'root',
+})
+export class NavServiceService {
+	remote: string;
+	remoteAndPath$: Observable<[string, string]>;
+	path: string;
+
+	constructor(private route: ActivatedRoute, private router: Router) {
+		this.remote = this.route.snapshot.queryParams['remote'];
+		this.path = this.route.snapshot.queryParams['path'];
+		this.remoteAndPath$ = this.route.queryParams.pipe(map((x) => [x['remote'], x['path']]));
+	}
+}