Added product page (Fixes #4)

src/app/about/about.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AboutComponent } from './about.component';
-
-describe('AboutComponent', () => {
-  let component: AboutComponent;
-  let fixture: ComponentFixture<AboutComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AboutComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AboutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/about/about.component.ts

@@ -1,15 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  templateUrl: './about.component.html'
 })
 export class AboutComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+  ngOnInit() {}
 }

src/app/app.module.ts

@@ -15,13 +15,14 @@ import {ServiceWorkerModule} from '@angular/service-worker';
 import {FormulaManagerComponent} from './formulaManager/formulaManager.component';
 import {NgxElectronModule} from 'ngx-electron';
 import {AboutComponent} from './about/about.component';
-import {CategoriesComponent} from './store/categories.component';
+import {CategoriesComponent} from './store/categories/categories.component';
 import {AngularFireStorageModule} from 'angularfire2/storage';
 import {LoginComponent} from './login/login.component';
 import {AngularFireAuthModule} from 'angularfire2/auth';
 import {NewCategoryComponent} from './store/newCategory/newCategory.component';
 import {NewProductComponent} from './store/newProduct/newProduct.component';
 import {DeleteComponent} from './store/delete/delete.component';
+import {ProductsComponent} from './store/products/products.component';
 
 @NgModule({
   declarations: [
@@ -35,6 +36,7 @@ import {DeleteComponent} from './store/delete/delete.component';
     LoginComponent,
     NewCategoryComponent,
     NewProductComponent,
+    ProductsComponent,
     ScalePipe,
     AboutComponent
   ],
@@ -52,6 +54,7 @@ import {DeleteComponent} from './store/delete/delete.component';
     RouterModule.forRoot([
       {path: 'about', component: AboutComponent},
       {path: 'formulaManager', component: FormulaManagerComponent},
+      {path: 'products/:product', component: ProductsComponent},
       {path: 'store/:category', component: CategoriesComponent},
       {path: 'store', component: CategoriesComponent},
       {path: '**', component: HomeComponent}

src/app/store/categories/categories.component.ts

@@ -1,14 +1,13 @@
 import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
-import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {MatDialog} from '@angular/material';
-import {NewCategoryComponent} from './newCategory/newCategory.component';
-import {AppComponent} from '../app.component';
+import {NewCategoryComponent} from '../newCategory/newCategory.component';
+import {AppComponent} from '../../app.component';
 import {DomSanitizer} from '@angular/platform-browser';
-import {NewProductComponent} from './newProduct/newProduct.component';
-import {DeleteComponent} from './delete/delete.component';
+import {NewProductComponent} from '../newProduct/newProduct.component';
+import {DeleteComponent} from '../delete/delete.component';
 
 @Component({
   selector: 'store',

src/app/store/products/products.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="product">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 py-4">
+                <img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
+                <h2 class="roboto">{{product.name}}</h2>
+                <h5 *ngIf="product.price" class="text-muted">{{product.price | currency}}</h5>
+                <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
+                <hr class="ml-4" /> {{product.description}}
+            </div>
+        </div>
+    </div>
+</div>

src/app/store/products/products.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {AngularFirestore} from '../../../../node_modules/angularfire2/firestore';
+import {ActivatedRoute} from '../../../../node_modules/@angular/router';
+import {DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
+
+@Component({
+  selector: 'products',
+  templateUrl: 'products.component.html'
+})
+export class ProductsComponent {
+  product;
+
+  constructor(private route: ActivatedRoute, private db: AngularFirestore, private domSanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.db
+        .collection('products', ref => ref.where('name', '==', params['product']))
+        .valueChanges()
+        .subscribe(data => {
+          this.product = data[0];
+          this.product.image = this.domSanitizer.bypassSecurityTrustUrl(this.product.image);
+        });
+    });
+  }
+}