services created

Author: salfuve

src/app/app-routing.module.ts

@@ -1,3 +1,4 @@
+import { CartService } from './cart.service';
 import { componentFactoryName } from '@angular/compiler';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -13,7 +14,7 @@ const routes: Routes = [
     },
 
     {
-        path: '',
+        path: 'image-view',
         component: ImageViewComponent,
     },
 ];

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { CartService } from './cart.service';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { NgModule, Type } from '@angular/core';
 import { BrowserModule, Title }  from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -13,6 +15,7 @@ import { routedComponents, AppRoutingModule } from './app-routing.module';
 
 import { SharedModule } from './shared/shared.module';
 import { ImageViewComponent } from './image-view/image-view.component';
+import { CartComponent } from './cart/cart.component';
 
 const httpInterceptorProviders: Type<any>[] = [
   RequestInterceptor,
@@ -23,6 +26,8 @@ const httpInterceptorProviders: Type<any>[] = [
     AppComponent,
     routedComponents,
     ImageViewComponent,
+    CartComponent,
+    DashboardComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     AppRoutingModule,
@@ -39,6 +44,7 @@ const httpInterceptorProviders: Type<any>[] = [
   ], // modules needed to run this module
   providers: [
     httpInterceptorProviders,
+    CartService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ AppComponent ],

src/app/cart.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { CartService } from './cart.service';
+
+describe('CartService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CartService]
+    });
+  });
+
+  it('should be created', inject([CartService], (service: CartService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/cart.service.ts

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+import { MdSnackBar } from '@angular/material';
+
+@Injectable()
+export class CartService {
+
+  itemArray: string[] = [];
+
+  imageArray: any[] = [{
+
+    columnSize: '40',
+    column: [{
+      url: '../../assets/images/alex-lambley-205711-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/norman-toth-177290-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/kaci-baum-108756-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/ariel-lustre-232891-min.jpg',
+      isclicked: false,
+    }],
+  }, {
+    columnSize: '25',
+    column: [{
+      url: '../../assets/images/pete-bellis-189599-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/remy_loz-188297-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/brooke-cagle-195860-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/freestocks-org-195640-min.jpg',
+      isclicked: false,
+    }],
+  }, {
+    columnSize: '25',
+    column: [{
+      url: '../../assets/images/pete-bellis-189613-min.jpg',
+      isclicked: false,
+    }, {
+      url: '../../assets/images/pete-bellis-191833-min.jpg',
+      isclicked: false,
+    },
+    ],
+  }, {
+    columnSize: '25',
+    column: [{
+      url: '../../assets/images/valerie-elash-275588-min.jpg',
+      isclicked: false,
+    },
+    {
+      url: '../../assets/images/jason-blackeye-221058-min.jpg',
+      isclicked: false,
+    }],
+  }];
+
+  constructor(public snackBar: MdSnackBar) { }
+
+  public clickedAddToCart(imageUrl: any): void {
+    const items: string[] = this.itemArray;
+    const msg: string = 'Added to cart';
+    const action: string = 'Ok';
+    const color: string = 'green';
+    const duration: number = 2000;
+    this.snackBar.open(msg, action, {
+      duration: duration,
+      extraClasses: ['bgc-' + color + '-600'],
+    });
+    items.push(imageUrl);
+  }
+  public getNitems(): number {
+    return this.itemArray.length;
+  }
+}

src/app/cart/cart.component.html

@@ -0,0 +1,3 @@
+<p>
+  cart works!
+</p>

src/app/cart/cart.component.scss

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

src/app/cart/cart.component.spec.ts

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

src/app/cart/cart.component.ts

@@ -1,15 +1,37 @@
 <td-layout-nav logo="assets:covalent">
+
   <div td-toolbar-content layout="row" layout-align="center center" flex>
     <span>Quickstart</span>
     <span flex></span>
-    <button md-icon-button mdTooltip="Cart"><md-icon>shopping_cart</md-icon></button>
+    <button md-icon-button [mdMenuTriggerFor]="cart" mdTooltip="Cart" (click)="clickedCart()"> 
+      <td-notification-count positionX="after" positionY="bottom"color="accent" [notifications]="notifications()">
+        <md-icon>shopping_cart</md-icon>
+      </td-notification-count>
+    </button>
+    <md-menu #cart="mdMenu">
+      <td-menu>
+        <div td-menu-header class="md-subhead">Products in your cart</div>
+        <md-nav-list dense>
+          <a md-list-item *ngFor="let item of itemArray">
+            <md-icon md-list-avatar>today</md-icon>
+            <h4 md-line><span class="text-wrap">item</span></h4>
+          </a>
+          <md-divider *ngIf="!last"></md-divider>
+        </md-nav-list>
+        <button md-button color="accent" td-menu-footer>
+        See All products
+      </button>
+      </td-menu>
+    </md-menu>
     <a md-icon-button mdTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank">
       <md-icon>chrome_reader_mode</md-icon>
     </a>
     <a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank">
       <md-icon svgIcon="assets:github"></md-icon>
     </a>
   </div>
+
+
   <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
     <div flex-gt-sm="column.columnSize" *ngFor="let column of imageArray">
       <md-card *ngFor="let image of column.column">
@@ -18,7 +40,8 @@
           <div layout="row" class="tc-grey-600">
             <button md-icon-button mdTooltip="Like"><md-icon>favorite</md-icon></button>
             <button md-icon-button mdTooltip="Comment"><md-icon>comment</md-icon></button>
-            <button md-icon-button mdTooltip="Add to cart"><md-icon>add_shopping_cart</md-icon></button>
+            <button md-icon-button mdTooltip="Add to cart" (click)="clickedAddToCart(image.url)">
+              <md-icon>add_shopping_cart</md-icon></button>
             <span flex></span>
             <button md-icon-button mdTooltip="Share"><md-icon>share</md-icon></button>
           </div>

src/app/dashboard/dashboard.component.html

@@ -1,73 +1,93 @@
+import { TdDialogService } from '@covalent/core/dialogs/services/dialog.service';
 import { Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { TdLoadingService, TdDigitsPipe } from '@covalent/core';
+import { TdLoadingService, TdDigitsPipe, CovalentNotificationsModule } from '@covalent/core';
+import { MdSnackBar } from '@angular/material';
+
+import { CartService } from '../cart.service';
 
 @Component({
   selector: 'qs-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss'],
+  styleUrls: ['./dashboard.component.scss']
+  // providers: [CartService],
 })
 export class DashboardComponent implements OnInit {
   imageArray: any[] = [{
+
     columnSize: '40',
     column: [{
-      url: '../../assets/images/alex-lambley-205711.jpg',
+      url: '../../assets/images/alex-lambley-205711-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/norman-toth-177290.jpg',
+      url: '../../assets/images/norman-toth-177290-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/kaci-baum-108756.jpg',
+      url: '../../assets/images/kaci-baum-108756-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/ariel-lustre-232891.jpg',
+      url: '../../assets/images/ariel-lustre-232891-min.jpg',
       isclicked: false,
     }],
   }, {
     columnSize: '25',
     column: [{
-      url: '../../assets/images/pete-bellis-189599.jpg',
+      url: '../../assets/images/pete-bellis-189599-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/remy_loz-188297.jpg',
+      url: '../../assets/images/remy_loz-188297-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/brooke-cagle-195860.jpg',
+      url: '../../assets/images/brooke-cagle-195860-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/freestocks-org-195640.jpg',
+      url: '../../assets/images/freestocks-org-195640-min.jpg',
       isclicked: false,
     }],
   }, {
     columnSize: '25',
     column: [{
-      url: '../../assets/images/pete-bellis-189613.jpg',
+      url: '../../assets/images/pete-bellis-189613-min.jpg',
       isclicked: false,
     }, {
-      url: '../../assets/images/pete-bellis-191833.jpg',
+      url: '../../assets/images/pete-bellis-191833-min.jpg',
       isclicked: false,
     },
     ],
   }, {
     columnSize: '25',
     column: [{
-      url: '../../assets/images/valerie-elash-275588.jpg',
+      url: '../../assets/images/valerie-elash-275588-min.jpg',
       isclicked: false,
     },
     {
-      url: '../../assets/images/jason-blackeye-221058.jpg',
+      url: '../../assets/images/jason-blackeye-221058-min.jpg',
       isclicked: false,
     }],
   }];
 
-  constructor(private _titleService: Title, private router: Router) { }
+  constructor(
+    private _titleService: Title,
+    private router: Router,
+    private dialogService: TdDialogService,
+    public snackBar: MdSnackBar,
+    private cartService: CartService) { }
 
   ngOnInit(): void {
     this._titleService.setTitle('Covalent Quickstart');
   }
 
   clickedImage(imageUrl: any): void {
-    this.router.navigate(['/image-view']);
+    this.router.navigate(['/image-view', { url: imageUrl }]);
+
+  }
+  clickedAddToCart(imageUrl: any): void {
+    const img: string = imageUrl;
+    this.cartService.clickedAddToCart(img);
+  }
+  notifications(): number {
+    const nItems: number = this.cartService.getNitems();
+    return nItems;
   }
 }

src/app/dashboard/dashboard.component.ts

@@ -1,3 +1,9 @@
-<div class="big-img">
-  <img src="../../assets/images/alex-lambley-205711.jpg" (click)="clickedImage()">
+<div>
+  <div class="header-icons">
+    <button class="buttons" md-icon-button mdTooltip="Close">
+      <md-icon class="close-icon" (click)="clickedImage()">close
+      </md-icon>
+    </button>
+ </div>
+  <img class="big-img" src={{imageUrl}}>
 </div>