2 files changed, 85 insertions, 0 deletions
diff --git a/app/components/plan-list/plan-list.html b/app/components/plan-list/plan-list.html
new file mode 100644
index 0000000..a2f1a9d
--- /dev/null
+++ b/app/components/plan-list/plan-list.html
@@ -0,0 +1,38 @@
+<nav>
+   <div class="nav-container">
+   <a class="btn btn-primary btn-lg pull-right" [routerLink]="['/PlanNew']">create</a>
+   <a [routerLink]="['PlanList']">plans</a>
+   </div>
+</nav>
+
+<div class="page">
+   <div class="hero-container" *ngIf="plans.length === 0">
+      Welcome to PEV! Please <a [routerLink]="['/PlanNew']">submit</a> a plan for visualization
+   </div>
+
+  <table class="table">
+    <tr *ngFor="#plan of plans">
+      <td><a [routerLink]="['/PlanView', {id: plan.id}]">{{plan.name}}</a></td>
+      <td>created on {{plan.createdOn | momentDate }}</td>
+      <td class="align-right"><button class="btn btn-danger" (click)="requestDelete()">
+        <i class="fa fa-trash"></i>delete</button>
+        <!-- this is a hack that should be converted to a proper dialog once that is available in angular 2-->
+        <div *ngIf="openDialog">
+           <div class="modal-backdrop"></div>
+
+           <div class="modal">
+              <div class="modal-dialog">
+                 <div class="modal-content">
+                    <div class="modal-body">You're about to delete this plan. Are you sure?</div>
+                    <div class="modal-footer">
+                       <button class="btn btn-primary" (click)="deletePlan(plan)">Yes</button>
+                       <button class="btn btn-default" (click)="cancelDelete()">No</button>
+                    </div>
+                </div>
+              </div>
+           </div>
+        </div>
+     </td>
+    </tr>
+  </table>
+</div>
diff --git a/app/components/plan-list/plan-list.ts b/app/components/plan-list/plan-list.ts
new file mode 100644
index 0000000..888e2e2
--- /dev/null
+++ b/app/components/plan-list/plan-list.ts
@@ -0,0 +1,47 @@
+import {Component, OnInit} from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+import {IPlan} from '../../interfaces/iplan';
+import {PlanService} from '../../services/plan-service';
+import {PlanNew} from '../plan-new/plan-new';
+
+import {MomentDatePipe} from '../../pipes';
+
+@Component({
+    selector: 'plan-list',
+    templateUrl: './components/plan-list/plan-list.html',
+    providers: [PlanService],
+    directives: [ROUTER_DIRECTIVES, PlanNew],
+    pipes: [MomentDatePipe]
+})
+export class PlanList {
+    plans: Array<IPlan>;
+    newPlanName: string;
+    newPlanContent: any;
+    newPlanId: string;
+    openDialog: boolean = false;
+
+    constructor(private _planService: PlanService) { }
+
+    ngOnInit() {
+        this.plans = this._planService.getPlans();
+    }
+
+    requestDelete() {
+        this.openDialog = true;
+    }
+
+    deletePlan(plan) {
+        this.openDialog = false;
+        this._planService.deletePlan(plan);
+        this.plans = this._planService.getPlans();
+    }
+
+    cancelDelete() {
+        this.openDialog = false;
+    }
+
+    deleteAllPlans() {
+        this._planService.deleteAllPlans();
+    }
+}