Adding functionality for Tasks.

client/MyTasks/myTasks.html

@@ -0,0 +1,5 @@
+<template name="myTasks">
+    {{> myTasksForm}}
+    <hr>
+    {{> myTasksTbl}}
+</template>

client/MyTasks/myTasksForm.html

@@ -0,0 +1,35 @@
+<template name="myTasksForm">
+    <h4>MyTasks</h4>
+    <div class="row">
+        <div class="col s12 m6 l6 input-field">
+            <input type="text" class="myTaskName" id="myTaskName" />
+            <label for="myTaskName">Task Name</label>
+        </div>
+        <div class="col s12 m6 l6 input-field">
+            <input type="text" class="datepicker" id="myTaskDate" />
+            <label for="myTaskDate">Due Date</label>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col s6 m4 l4">
+            <p>
+                <label>
+                  <input type="checkbox" id="hideMyCompletedTasks" />
+                  <span>Hide Completed</span>
+                </label>
+              </p>
+        </div>
+        <div class="col s6 m4 l4">
+            <p>
+                <label>
+                  <input type="checkbox" id="onlyTodaysTasks" />
+                  <span>Today's Tasks</span>
+                </label>
+              </p>
+        </div>
+        <div class="col s12 m4 l4">
+                <a class="waves-effect waves-light btn addNewTask green right">Add</a>
+        </div>
+    </div>
+    {{> snackbar}}
+</template>

client/MyTasks/myTasksFrom.js

@@ -0,0 +1,58 @@
+import { TaskItems } from '../../imports/api/tasks.js';
+
+Template.myTasksForm.onCreated(function() {
+    
+});
+
+Template.myTasksForm.onRendered(function() {  
+    $('.datepicker').datepicker();
+    Session.set("hideComplete", false);
+    Session.set("onlyToday", false);
+});
+
+Template.myTasksForm.helpers({
+
+});
+
+Template.myTasksForm.events({
+    'click .addNewTask' (event) {
+        event.preventDefault();
+        let taskName = $("#myTaskName").val();
+        let taskDate = $("#myTaskDate").val();
+        let actDate = new Date(taskDate);
+
+        if (taskName == null || taskName == "" || taskDate == "" || taskDate == null) {
+            taskEntryErr = true;
+            showSnackbar("Task Name and Date are Required!", "red");
+            return;
+        } else {
+            Meteor.call("add.task", taskName, "self", "selfId", taskDate, actDate, function(err, result) {
+                if (err) {
+                    console.log("    ERROR adding task for self: " + err);
+                    showSnackbar("ERROR adding task for self!", "red");
+                } else {
+                    console.log("    SUCCESS adding task for self.");
+                    $("#myTaskName").val("");
+                    $("#myTaskDate").val("");
+                }
+            });
+        }
+    },
+    'click #hideMyCompletedTasks' (event) {
+        let hide = $("#hideMyCompletedTasks").prop('checked');
+        if (hide == true) {
+            Session.set("hideComplete", true);
+        } else {
+            Session.set("hideComplete", false);
+        }
+    },
+    'click #onlyTodaysTasks' (event) {
+        let onlyToday = $("#onlyTodaysTasks").prop('checked');
+        if (onlyToday == true) {
+            Session.set("onlyToday", true);
+        } else {
+            Session.set("onlyToday", false);
+        }
+
+    }
+});

client/MyTasks/myTasksTbl.html

@@ -0,0 +1,19 @@
+<template name="myTasksTbl">
+    <ul class="collapsible">
+        {{#each tasks}}
+        <li>
+            <div class="collapsible-header {{#if $eq passedDate false}}yellow{{/if}}{{#if $eq isComplete true}}green lighten-2{{/if}}"><h5>{{taskName}}</h5></div>
+            <div class="collapsible-body">
+                <span>
+                    <ul class="collection">
+                        <li class="collection-item">{{taskDate}}<i class="material-icons clickable right markMyTaskComplete">check</i><i class="material-icons clickable right deleteMyTask">delete</i></li>
+                        <li class="collection-item">Complete? {{#if $eq isComplete true}}<i class="material-icons green">check</i>{{else}}<i class="material-icons red">close</i>{{/if}}</li>
+                        <li class="collection-item">Completed On? {{#if $eq isComplete true}}{{compOn}}{{else}}Not Complete{{/if}}</li>
+                    </ul>
+                </span>
+            </div>
+        </li>
+        {{/each}}
+    </ul>
+    {{> deleteConfirmationModal}}
+</template>

client/MyTasks/myTasksTbl.js

@@ -0,0 +1,69 @@
+import { TaskItems } from '../../imports/api/tasks.js';
+import moment from 'moment';
+
+Template.myTasksTbl.onCreated(function() {
+    this.subscribe("myTasks");
+});
+
+Template.myTasksTbl.onRendered(function() {
+    $('.collapsible').collapsible();
+    Session.set("hideComplete", false);
+    Session.set("onlyToday", false);
+});
+
+Template.myTasksTbl.helpers({
+    tasks: function() {
+        let onlyToday = Session.get("onlyToday");
+        let hide = Session.get("hideComplete");
+        let todayIs = moment(new Date()).format("MMM DD, YYYY");
+        if (hide == true && onlyToday == false) {
+            return TaskItems.find({ isComplete: false }, { sort: { actualDate: 1 }});
+        } else if (hide == true && onlyToday == true) {
+            return TaskItems.find({ isComplete: false, taskDate: todayIs }, { sort: { actualDate: 1 }});
+        } else if (hide == false && onlyToday == true) {
+            return TaskItems.find({ taskDate: todayIs }, { sort: { actualDate: 1 }});
+        } else {
+            return TaskItems.find({}, { sort: { actualDate: 1 }});
+        }
+    },
+    passedDate: function() {
+        let taskDate = new Date(this.taskDate);
+        let now = new Date()
+        let diff = now < taskDate;
+        let comp = this.isComplete;
+        if (diff == false && comp == false) {
+            return false;
+        } else {
+            return true;
+        }
+    },
+    compOn: function() {
+        if (this.isComplete == true) {
+            return moment(this.completedOn).format("MMM DD, YYYY");
+        }
+    }
+});
+
+Template.myTasksTbl.events({
+    'click .markMyTaskComplete' (event) {
+        event.preventDefault();
+        let taskId = this._id;
+        Meteor.call("markTask.complete", taskId, function(err, result) {
+            if (err) {
+                console.log("    ERROR marking task completeL " + err);
+                showSnackbar("ERROR Marking Task Complete!", "red");
+            } else {
+                showSnackbar("Successfully Marked Task Complete!", "green");
+
+            }
+        });
+    },
+    'click .deleteMyTask' (event) {
+        event.preventDefault();
+        Session.set("deleteId", this._id);
+        Session.set("method", "delete.task");
+        Session.set("item", this.taskName);
+        Session.set("view", "My Tasks");
+        $('#modalDelete').modal('open');
+    }
+});