Added store breadcrumb

This commit is contained in:
Zakary Timson 2018-07-14 13:03:31 -04:00
parent dbfbe6547a
commit 1d89da6c5f
5 changed files with 70 additions and 20 deletions

View File

@ -17,6 +17,7 @@ import {NgxElectronModule} from 'ngx-electron';
import {AboutComponent} from './about/about.component';
import {CategoriesComponent} from './store/categories.component';
import {AngularFireStorageModule} from 'angularfire2/storage';
import {BreadcrumbService} from './store/breadcrumb.service';
@NgModule({
declarations: [
@ -48,7 +49,7 @@ import {AngularFireStorageModule} from 'angularfire2/storage';
]),
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
],
providers: [],
providers: [BreadcrumbService],
bootstrap: [AppComponent]
})
export class AppModule {}

View File

@ -0,0 +1,22 @@
import {Injectable} from '@angular/core';
import {Router} from '../../../node_modules/@angular/router';
@Injectable()
export class BreadcrumbService {
breadcrumb: string[] = [];
constructor(private router: Router) {}
add(crumb: string) {
this.breadcrumb.push(crumb);
}
clear() {
this.breadcrumb = [];
}
navigate(i: number) {
this.breadcrumb.splice(i + 1, 9e9);
this.router.navigate(['/store', this.breadcrumb[i]]);
}
}

View File

@ -1,8 +1,14 @@
<div class="container-fluid" style="background-color: #53709f;">
<div class="container">
<div class="row py-5">
<nav class="w-100 mx-3" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item curs-pointer" [routerLink]="['/store']" (click)="breadcrumb.clear()">Store</li>
<li *ngFor="let crumb of breadcrumb.breadcrumb; let i = index" class="breadcrumb-item curs-pointer" (click)="breadcrumb.navigate(i)">{{crumb}}</li>
</ol>
</nav>
<ng-container *ngFor="let c of categories | async">
<mat-card class="m-3" [routerLink]="['/store', c.name]">
<mat-card class="m-3" (click)="navigate(c.name)">
<img *ngIf="c.ready" mat-card-image [src]="c.image | async" [alt]="c.name" style="width: 200px; height: 200px;">
<mat-divider class="custom-line"></mat-divider>
<mat-card-content>

View File

@ -2,7 +2,8 @@ import {Component} from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {AngularFireStorage} from 'angularfire2/storage';
import {map} from 'rxjs/operators';
import {ActivatedRoute} from '../../../node_modules/@angular/router';
import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
import {BreadcrumbService} from './breadcrumb.service';
@Component({
selector: 'store',
@ -12,24 +13,39 @@ export class CategoriesComponent {
category: string;
categories;
constructor(private db: AngularFirestore, private storage: AngularFireStorage, private route: ActivatedRoute) {}
constructor(
private db: AngularFirestore,
private storage: AngularFireStorage,
private router: Router,
private route: ActivatedRoute,
private breadcrumb: BreadcrumbService
) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.category = params['category'];
});
this.categories = this.db
.collection('categories')
.valueChanges()
.pipe(
map(rows =>
rows.filter((row: any) => !this.category || row.parent == this.category).map((row: any) => {
row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
row.image.subscribe(() => (row.ready = true));
return row;
})
)
);
if (!this.category) this.breadcrumb.clear();
this.categories = this.db
.collection('categories')
.valueChanges()
.pipe(
map(rows =>
rows
.filter((row: any) => (!this.category && !row.parent) || (this.category && row.parent == this.category))
.map((row: any) => {
row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
row.image.subscribe(() => (row.ready = true));
return row;
})
)
);
});
}
navigate(category: string) {
this.breadcrumb.add(category);
this.router.navigate(['/store', category]);
}
}

View File

@ -21,6 +21,10 @@ u:hover,
text-decoration: none;
}
.curs-pointer {
cursor: pointer;
}
.dark-hover:hover {
background-color: #f0f0f0;
}
@ -52,14 +56,15 @@ u:hover,
.custom-line {
padding-bottom: 1.5rem !important;
position: relative !important;
margin-top: .75rem !important;
margin-top: 0.75rem !important;
}
.btn-primary {
color: #fff;
background-color: #3c3c3c;
border-color: #5a5e63;
}
.btn-primary:hover, .btn-primary:active {
.btn-primary:hover,
.btn-primary:active {
background-color: #53709f !important;
border-color: #3e557a !important;
}
@ -69,4 +74,4 @@ mat-list-item:hover {
}
mat-form-field#totalCost .mat-form-field-label-wrapper {
text-align: right;
}
}