Due date

examples/angular2_es2015/app/components/todo-header/todo-header.component.js

@@ -10,14 +10,18 @@ import template from './todo-header.template.html';
 export class TodoHeaderComponent {
 	newTodo = '';
 
+	pickedDate = ""
+
 	constructor(todoStore:TodoStoreService) {
 		this._todoStore = todoStore;
 	}
 
 	addTodo() {
-		if (this.newTodo.trim().length) {
-			this._todoStore.add(this.newTodo);
+		if (this.newTodo.trim().length && this.pickedDate) {
+			this._todoStore.add(this.newTodo,this.pickedDate);
 			this.newTodo = '';
+		}else {
+			alert('please fill all the fields.')
 		}
 	}
 }

examples/angular2_es2015/app/components/todo-header/todo-header.template.html

@@ -1,4 +1,5 @@
 <header class="header">
     <h1>Todos</h1>
-    <input class="new-todo" placeholder="What needs to be done?" [(ngModel)]="newTodo" autofocus="" (keyup.enter)="addTodo()">
+    <input class="new-todo" placeholder="What needs to be done?" [(ngModel)]="newTodo" autofocus="" >
+    <input class="" type="date" [(ngModel)]="pickedDate" (keyup.enter)="addTodo()"/>
 </header>

examples/angular2_es2015/app/components/todo-item/todo-item.component.js

@@ -1,12 +1,12 @@
-import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core';
 
 import template from './todo-item.template.html';
 
 @Component({
 	selector: 'todo-item',
 	template: template
 })
-export class TodoItemComponent {
+export class TodoItemComponent extends OnInit {
 	@Input() todo;
 
 	@Output() itemModified = new EventEmitter();
@@ -15,6 +15,10 @@ export class TodoItemComponent {
 
 	editing = false;
 
+	daysLeft = ""
+
+	dueCompleted = false
+
 	cancelEditing() {
 		this.editing = false;
 	}
@@ -46,4 +50,35 @@ export class TodoItemComponent {
 	update() {
 		this.itemModified.next(this.todo.uid);
 	}
+	checkDaysLeft(){
+		let daysLeft = new Date(this.todo.due.toString()).getDate() - new Date().getDate();
+
+		if(Number(daysLeft) > 1){
+			this.daysLeft = daysLeft + " days left"
+		}
+		else if(Number(daysLeft) === 0){
+
+			let hourLeft = 24 - new Date().getHours() ;
+			hourLeft < 10 ? this.daysLeft = hourLeft + " hour left" : this.daysLeft = hourLeft + " hours left"	
+		}
+		else {
+			this.daysLeft = daysLeft + " day left"
+		}
+
+
+	}
+	checkTimeLeft(){
+		let timeLeft = new Date(this.todo.toString()).getTime() - new Date().getTime();
+
+		if(timeLeft<= 0 ){
+			this.dueCompleted = true
+		}else {
+			this.dueCompleted = false 
+		}
+	}
+	ngOnInit(){
+		this.checkDaysLeft();
+		this.checkTimeLeft()
+
+	}
 }

examples/angular2_es2015/app/components/todo-item/todo-item.template.html

@@ -2,6 +2,7 @@
     <div class="view">
         <input class="toggle" type="checkbox" (click)="toggleCompletion()" [checked]="todo.completed">
         <label (dblclick)="edit(todo)">{{ todo.title | trim }}</label>
+        <p [ngStyle]="timeLeft ? {'color':red} : {'color': green}" >{{daysLeft}}</p>
         <button class="destroy" (click)="remove()"></button>
     </div>
     <input class="edit" *ngIf="editing" [value]="todo.title" #editedtodo (blur)="stopEditing(editedtodo)" (keyup.enter)="stopEditing(editedtodo)" (keyup.escape)="cancelEditing()">

examples/angular2_es2015/app/models/todo.model.js

@@ -4,14 +4,16 @@ export class TodoModel {
 	completed;
 	title;
 	uid;
+	due;
 
 	setTitle(title) {
 		this.title = title.trim();
 	}
 
-	constructor(title) {
+	constructor(title,due) {
 		this.uid = uuid.v4();
 		this.completed = false;
 		this.title = title.trim();
+		this.due = due
 	}
 }

examples/angular2_es2015/app/services/todo-store.service.js

@@ -10,7 +10,7 @@ export class TodoStoreService {
 		let persistedTodos = JSON.parse(localStorage.getItem('angular2-todos')) || [];
 
 		this.todos = persistedTodos.map((todo) => {
-			let ret = new TodoModel(todo.title);
+			let ret = new TodoModel(todo.title,todo.due);
 			ret.completed = todo.completed;
 			ret.uid = todo.uid;
 			return ret;
@@ -69,8 +69,8 @@ export class TodoStoreService {
 		}
 	}
 
-	add(title) {
-		this.todos.push(new TodoModel(title));
+	add(title,due) {
+		this.todos.push(new TodoModel(title,due));
 		this.persist();
 	}