Implement dashboard view

src/app/add-edit-transaction/add-edit-transaction.component.css

@@ -10,3 +10,7 @@
 mat-radio-button {
   padding-bottom: 15px;
 }
+
+.button-delete {
+  float: right;
+}

src/app/add-edit-transaction/add-edit-transaction.component.html

@@ -35,5 +35,5 @@
     <mat-radio-button [value]="transactionType.EXPENSE">Expense</mat-radio-button>
     <mat-radio-button [value]="transactionType.INCOME">Income</mat-radio-button>
   </mat-radio-group>
-  <button mat-button *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
+  <button class="button-delete" mat-button color="warn" *ngIf="currentTransaction.id" (click)="delete()">Delete</button>
 </div>

src/app/app-routing.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { TransactionsComponent } from './transactions/transactions.component';
 import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
 import { NewTransactionComponent } from './new-transaction/new-transaction.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/transactions', pathMatch: 'full' },
+  { path: '', component: DashboardComponent },
   { path: 'transactions', component: TransactionsComponent },
   { path: 'transactions/new', component: NewTransactionComponent },
   { path: 'transactions/:id', component: TransactionDetailsComponent },

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
 import { NewTransactionComponent } from './new-transaction/new-transaction.component';
 import { AddEditTransactionComponent } from './add-edit-transaction/add-edit-transaction.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { AddEditTransactionComponent } from './add-edit-transaction/add-edit-tra
     TransactionsComponent,
     TransactionDetailsComponent,
     NewTransactionComponent,
-    AddEditTransactionComponent
+    AddEditTransactionComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,32 @@
+.dashboard {
+  display: flex;
+  justify-content: center;
+  padding: 1em;
+}
+
+.dashboard-primary {
+  background: #212121;
+  color: #F1F1F1;
+  display: inline-block;
+  max-width: 500px;
+  padding: 5em 1em;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.dashboard-primary > * {
+  display: block;
+}
+
+.dashboard-primary h2 {
+  margin: 0;
+}
+
+.dashboard-primary a {
+  bottom: 1em;
+  color: #F1F1F1;
+  right: 1em;
+  position: absolute;
+  text-align: right;
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,15 @@
+<mat-toolbar>
+  <!-- empty span object for spacing -->
+  <span></span>
+  <span>My Finances</span>
+  <!-- empty span object for spacing -->
+  <span></span>
+</mat-toolbar>
+<div class="dashboard">
+  <div class="dashboard-primary">
+    <h2 class="balance">
+      Current Balance: <span [ngClass]="{'income': balance > 0, 'expense': balance < 0}" >{{ balance | currency }}</span>
+    </h2>
+    <a routerLink="/transactions">View Transactions >></a>
+  </div>
+</div>

src/app/dashboard/dashboard.component.spec.ts

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

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { TransactionService } from '../transaction.service'
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+  public balance: number;
+  public transactions: Transaction[];
+
+  constructor(
+    private transactionService: TransactionService
+  ) { }
+
+  ngOnInit() {
+    this.getBalance();
+    this.getTransactions();
+  }
+
+  getBalance(): void {
+    this.transactionService.getBalance().subscribe(balance => this.balance = balance)
+  }
+
+  getTransactions(): void {
+    this.transactionService.getTransactions().subscribe(transactions => this.balance = balance)
+  }
+}

src/app/transaction.service.ts

@@ -15,8 +15,12 @@ export class TransactionService {
     this.db = new BudgetDatabase();
   }
 
-  getTransactions(): Observable<Transaction[]> {
+  getTransactions(count: number?): Observable<Transaction[]> {
-    return from(this.db.transactions.toCollection().toArray())
+    if (count) {
+      return from(this.db.transactions.toCollection().limit(count).toArray())
+    } else {
+      return from(this.db.transactions.toCollection().toArray())
+    }
   }
 
   getTransaction(id: number): Observable<Transaction> {
@@ -36,4 +40,20 @@ export class TransactionService {
   deleteTransaction(transaction: Transaction): Observable<any> {
     return from(this.db.transactions.delete(transaction.id))
   }
+
+  getBalance(): Observable<number {
+    console.log("Getting balance")
+    let sum = 0;
+    return from(
+      this.db.transactions.each(function(transaction) {
+        if (transaction.type === TransactionType.INCOME) {
+          sum += transaction.amount
+        } else {
+          sum -= transaction.amount
+        }
+      }).then(function() {
+        return sum;
+      })
+    )
+  }
 }

src/app/transactions/transactions.component.css

@@ -1,17 +1,6 @@
-mat-toolbar {
-  justify-content: center;
-}
-
-.amount.income {
-    color: #81C784;
-}
-
-.amount.expense {
-    color: #E57373;
-}
-
 .transactions .list-row-one {
     display: flex;
     justify-content: space-between;
+    padding-bottom: 0.2em;
 }
 

src/app/transactions/transactions.component.html

@@ -1,4 +1,13 @@
-<mat-toolbar>Transactions</mat-toolbar>
+<mat-toolbar>
+  <span>
+    <a (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </a>
+  </span>
+  <span>Transactions</span>
+  <!-- empty span object for spacing -->
+  <span></span>
+</mat-toolbar>
 <mat-nav-list *ngIf="transactions" class="transactions">
   <a mat-list-item *ngFor="let transaction of transactions" routerLink="/transactions/{{ transaction.id }}">
     <div matLine class="list-row-one">

src/app/transactions/transactions.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Transaction } from '../transaction';
 import { TransactionType } from '../transaction.type';
 import { TransactionService } from '../transaction.service';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-transactions',
@@ -14,14 +15,21 @@ export class TransactionsComponent implements OnInit {
 
   public transactions: Transaction[]
 
-  constructor(private transactionService: TransactionService) { }
+  constructor(
+    private transactionService: TransactionService,
+    private location: Location
+  ) { }
 
   ngOnInit() {
     this.getTransactions()
   }
 
+  goBack(): void {
+    this.location.back()
+  }
+
   getTransactions(): void {
-    this.transactionService.getTransactions().subscribe(transactions => {
+    this.transactionService.getTransactions(5).subscribe(transactions => {
       this.transactions = transactions;
     })
   }

src/styles.css

@@ -7,6 +7,7 @@ html, body {
 }
 
 p {
+  color: #F1F1F1;
   margin: 0;
 }
 
@@ -21,12 +22,24 @@ a.mat-fab {
   color: #BDBDBD
 }
 
-.mat-toolbar {
+mat-toolbar {
   box-shadow: 0px 3px 3px 1px #212121;
   display: flex;
   justify-content: space-between;
 }
 
+mat-toolbar a {
+  padding: 1em;
+}
+
+mat-toolbar span:nth-child(1) > a {
+  padding-left: 0;
+}
+
+mat-toolbar span:nth-child(3) > a {
+  padding-right: 0;
+}
+
 mat-toolbar mat-icon {
   vertical-align: middle;
   cursor: pointer;
@@ -41,3 +54,12 @@ mat-toolbar .action-item {
 mat-toolbar .action-item a {
   vertical-align: middle;
 }
+
+.income {
+    color: #81C784;
+}
+
+.expense {
+    color: #E57373;
+}
+