diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 736b80c..bc4cb55 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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 {}
diff --git a/src/app/store/breadcrumb.service.ts b/src/app/store/breadcrumb.service.ts
new file mode 100644
index 0000000..7888716
--- /dev/null
+++ b/src/app/store/breadcrumb.service.ts
@@ -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]]);
+ }
+}
diff --git a/src/app/store/categories.component.html b/src/app/store/categories.component.html
index eae5698..87219f4 100644
--- a/src/app/store/categories.component.html
+++ b/src/app/store/categories.component.html
@@ -1,8 +1,14 @@
+
-
+
diff --git a/src/app/store/categories.component.ts b/src/app/store/categories.component.ts
index 0258731..960a435 100644
--- a/src/app/store/categories.component.ts
+++ b/src/app/store/categories.component.ts
@@ -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]);
}
}
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index 9ecefb6..97c12b5 100644
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -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;
-}
\ No newline at end of file
+}