fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Styled cart page

Browse Source
This commit is contained in:
Zakary Timson 2018-07-19 23:03:57 -04:00
parent 985a8eb457
commit 91e40929e0
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/store/cart/cart.component.html
View File

@ -1,36 +1,37 @@
<div class="container"> <div class="container">
<div class="row"> <mat-card class="w-100 my-5" style="overflow: hidden">
<mat-card class="col-8"> <table class="table">
<table mat-table [dataSource]="cart" class="mat-elevation-z8"> <thead>
<ng-container matColumnDef="position"> <tr>
<th mat-header-cell *matHeaderCellDef> No. </th> <th>No.</th>
<td mat-cell *matCellDef="let i = index"> {{i}} </td> <th>Item</th>
</ng-container> <th>Quantity</th>
<th>Cost</th>
<!-- Name Column --> <th></th>
<ng-container matColumnDef="name"> </tr>
<th mat-header-cell *matHeaderCellDef> Name </th> </thead>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <tbody>
</ng-container> <tr *ngFor="let item of cart; let i = index">
<td>{{i + 1}}</td>
<!-- Weight Column --> <td>{{item.item}}</td>
<ng-container matColumnDef="weight"> <td>{{item.quantity}}</td>
<th mat-header-cell *matHeaderCellDef> Weight </th> <td>{{item.price | currency}}</td>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> <td>
</ng-container> <mat-icon class="curs-pointer" (click)="remove(i)">delete</mat-icon>
</td>
<!-- Symbol Column --> </tr>
<ng-container matColumnDef="symbol"> </tbody>
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</mat-card> <div class="float-right">
<mat-card class="col-4"> <table>
Test <tr>
<td>
<strong>Sub Total:</strong>
</td>
<td class="pl-3">{{total() | currency}}</td>
</tr>
</table>
<button mat-raised-button class="float-right mt-3" color="primary">Checkout</button>
</div>
</mat-card> </mat-card>
</div> </div>
</div>

20
src/app/store/cart/cart.component.ts
View File

@ -1,14 +1,30 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {LocalStorage} from 'webstorage-decorators'; import {LocalStorage} from 'webstorage-decorators';
import {access} from 'fs';
@Component({ @Component({
selector: 'cart', selector: 'cart',
templateUrl: 'cart.component.html' templateUrl: 'cart.component.html'
}) })
export class CartComponent { export class CartComponent {
@LocalStorage({defaultValue: []}) cart: {id: string, name: string, cost: number, quantity: number}[]; @LocalStorage({defaultValue: []})
cart: {id: string; item: string; price: number; quantity: number}[];
constructor() { address1: string;
address2: string;
city: string;
province: string;
postal: string;
constructor() {}
remove(i: number) {
let c = this.cart;
c.splice(i, 1);
this.cart = c;
}
total() {
return this.cart.reduce((acc, row) => acc + row.price * row.quantity, 0);
} }
} }