From b5edb2bb251e883172547faa0a54c9e7228a9533 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Tue, 25 Apr 2017 02:46:06 -0400
Subject: [PATCH] New adding work on desktop

---
 hourglass/client/main/main.css  |   4 +
 hourglass/client/main/main.html |   6 +-
 hourglass/client/main/main.js   | 361 +++++++++++++++-----------------
 hourglass/server/main.js        |   4 +-
 4 files changed, 179 insertions(+), 196 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 2756487..34c0df6 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -336,6 +336,10 @@ input {
 	padding: 5%;
 }
 
+.creWork .fa-plus, .creWork h4 {
+	pointer-events: none;
+}
+
 #exportDiv {
 	background-color: rgba(255,255,255,0.1);
 	position: absolute;
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index fca7e1c..2b96040 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -290,7 +290,7 @@
 
 <template name="workDisplayEdit">
     <div id="workNameDiv">
-        <input id="wName" class="clickModify restrict" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}" tabindex="10" maxLength="50">
+        <input id="wName" class="clickModify restrict" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}" placeholder="Name | Click here to edit..." tabindex="10" maxLength="50">
         <span class="resText">{{restrict 'wName'}}</span>
     </div>
     <div id="workInfo1">
@@ -299,11 +299,11 @@
         </div>
         <div>
             <span class="workTitle">Due Date:</span><br>
-            <input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}" tabindex="11" readonly="readonly">
+            <input id="wDueDate" class="clickModify form-control" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}" tabindex="11" readonly="readonly">
         </div>
         <div>
             <span class="workTitle">Description:</span><br>
-            <textarea id="wDescription" class="clickModify restrict" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5" tabindex="12" maxLength="300"></textarea>
+            <textarea id="wDescription" class="clickModify restrict" style="color:{{divColor 'textColor'}}" placeholder="Click here to edit..." value="{{work 'description'}}" rows="5" tabindex="12" maxLength="300"></textarea>
             <span style="opacity:0">.</span>
             <span class="resText">{{restrict 'wDescription'}}</span>
         </div>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 20e9c23..510c579 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -12,14 +12,6 @@ var dragging = false;
 var clicked = false;
 var workChanger = false;
 
-
-var defaultWork = {
-    name: "Name | Click here to edit...",
-    dueDate: "Click here to edit...",
-    description: "Click here to edit...",
-    type: "Click here to edit..."
-};
-
 // Reactive variables.
 Session.set("user", {}); // Stores user preferences.
 Session.set("calendarEvents", []); // Stores calendar classes.
@@ -198,12 +190,111 @@ Template.registerHelper('selectOptions', (val) => {
 
 Template.registerHelper('work', (value) => {// Returns the specified work value.
     var thisWork = Session.get("currentWork");
-    if (Session.equals("currentWork", null)) return;
-    if (Session.get("newWork") && (thisWork[value] === true || thisWork[value] === undefined)) {
-        return defaultWork[value];
-    } else {
-        return formReadable(thisWork,value);
+    if(Session.equals("currentWork", null)) return;
+    if(Session.get("newWork")) {
+        switch(value) {
+            case "class":
+                var id = thisWork["class"];
+                return (id === Meteor.userId()) ? "Personal" : classes.findOne({_id: id}).name;
+            case "dueDate":
+                return getReadableDate(thisWork.dueDate);
+            case "type":
+                return options.type.filter(function(names) {
+                    return names.val === thisWork.type;
+                })[0].alias;
+            default:
+                return;
+        }
     }
+
+    var input = thisWork;
+    try {
+        switch (value) {
+            case "typeColor":
+                return input.typeColor = workColors[input.type];
+            case "name":
+                return input.name;
+            case "class":
+                var id = input["class"]; 
+                return (id === Meteor.userId()) ? "Personal" : classes.findOne({_id: id}).name;
+            case "dueDate":
+                return getReadableDate(input.dueDate);
+            case "description":
+                return input.description;
+            case "type":
+                return input.type[0].toUpperCase() + input.type.slice(1);
+            case "comments":
+                var comments = input.comments;
+                var resort = [];
+                if (Session.get("newWork")) return []; // Don't display comments if user is creating work.
+                for (var k = 0; k < comments.length; k++) {
+                    var re = comments.length - k - 1;
+                    resort[re] = {
+                        "comment": comments[k].comment,
+                        "date": null,
+                        "user": null,
+                        "avatar": null,
+                        "email": null
+                    };
+                    var user = Meteor.users.findOne({
+                        _id: comments[k].user
+                    });
+                    resort[re].user = user.profile.name;
+                    resort[re].date = moment(comments[k].date).fromNow();
+                    resort[re].avatar = user.services.google.picture;
+                    resort[re].email = user.services.google.email;
+                }
+                return resort;
+            case "done":
+                if (Session.get("newWork")) return [];
+                for (var i = 0; i < input.done.length; i++) { // Display users who marked as done.
+                    var user = Meteor.users.findOne({
+                        _id: input.done[i]
+                    });
+
+                    input.done[i] = {
+                        "user": user.profile.name,
+                        "avatar": user.services.google.picture,
+                        "email": user.services.google.email
+                    };
+                }
+                return input.done;
+            case "doneCol":
+                if (Session.get("newWork")) return "";
+                if (!_.contains(input.done, Meteor.userId())) return "";
+                return "#27A127";
+            case "doneText":
+                if (Session.get("newWork")) return "";
+                if (!_.contains(input.done, Meteor.userId())) return "Mark done";
+                return "Done!";
+            case "doneIcon":
+                if (Session.get("newWork")) return "";
+                if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
+                return "fa-check-square-o";
+            case "userConfirm":
+                if (!_.contains(input.confirmations, Meteor.userId())) return (Meteor.Device.isPhone() || Meteor.Device.isTablet()) ? "rgb(101,101,101)" : "";
+                return "#27A127";
+            case "confirmations":
+                return input.confirmations.length;
+            case "userReport":
+                if (!_.contains(input.reports, Meteor.userId()))  return (Meteor.Device.isPhone() || Meteor.Device.isTablet()) ? "rgb(101,101,101)" : "";
+                return "#FF1A1A";
+            case "reports":
+                return input.reports.length;
+            case "email":
+                return Meteor.users.findOne({
+                    _id: input.creator
+                }).services.google.email;
+            case "avatar":
+                return Meteor.users.findOne({
+                    _id: input.creator
+                }).services.google.picture;
+            case "creator":
+                return Meteor.users.findOne({
+                    _id: input.creator
+                }).profile.name;
+        }
+    } catch(err){}
 });
 
 Template.registerHelper('confirmText', () => {
@@ -300,9 +391,7 @@ Template.main.helpers({
             dayClick: function(date, jsEvent, view) { // On-click for each day.
                 if (jsEvent.target.className.includes("fc-past")) return;
                 var realDate = date;
-                date.seconds(59);
-                date.minutes(59);
-                date.hour(15);
+                date.startOf("day");
                 realDate = realDate._d;
                 Session.set("newWork", true);
                 Session.set("currentWork", {dueDate: realDate});
@@ -411,13 +500,9 @@ Template.main.events({
     },
     'click .creWork' (event) { // Cick add work button.
         var attr;
-        if (event.target.className !== "creWork") {
-            attr = event.target.parentNode.getAttribute("classid");
-        } else {
-            attr = event.target.getAttribute("classid");
-        }
+        attr = event.target.getAttribute("classid");
         Session.set("newWork", true);
-        Session.set("currentWork",{class: attr, dueDate: (new Date((new Date()).valueOf() + 1000*3600*24))});
+        Session.set("currentWork",{class: attr, dueDate: moment().startOf('day').add(1,"days")._d, type:"normal"});
         $(".overlay").velocity("fadeIn", 150);
         $("#comment").slimScroll({
             width: '100%',
@@ -447,7 +532,6 @@ Template.main.events({
         $("#userDropdown").velocity("fadeIn", 150);
     },
     'click .workCard' (event) { // Display work information on work card click.
-        if(event.target.className.indexOf("fa") !== -1) return;
         var workid = event.target.getAttribute("workid");
         var thisWork = work.findOne({
             _id: workid
@@ -456,17 +540,6 @@ Template.main.events({
         Session.set("newWork", false);
         Session.set("currentWork", thisWork);
 
-        if (!Session.get("newWork")) {
-            var currClass = classes.findOne({
-                _id: thisWork["class"]
-            });
-            if (!(Meteor.userId() === thisWork.creator || // If user has permission.
-                  Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
-                  currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
-                  currClass.banned.indexOf(Meteor.userId()) !== -1)) {
-                var inputs = $('#editWork .clickModify').css("cursor", "default");
-            }
-        }
         $(".overlay").velocity("fadeIn", 150);
         $("#comment").slimScroll({
             width: '100%',
@@ -613,15 +686,16 @@ Template.main.events({
     'click .optionText' (event) { // Click each preferences setting.
         var option = event.target.childNodes[0].nodeValue;
         if(modifyingInput[0] === 'w') {
+            document.getElementById(modifyingInput).children[0].childNodes[0].nodeValue = option;
             var newSetting = Session.get("currentWork");
-            newSetting[modifyingInput.charAt(1).toLowerCase() + modifyingInput.slice(2)] = option.toLowerCase();
+            newSetting.type = options.type.filter(function(names) {
+                return names.alias === option;
+            })[0].val;
             Session.set("currentWork", newSetting);
-            serverData = Session.get("currentWork");
-
+            console.log(newSetting);
+            closeInput();
             toggleOptionMenu(false, modifyingInput);
-            if(Session.get("newWork")) return;
-            if(checkMissing()) return;
-            sendData("editWork");
+            modifyingInput = null;
         } else if(modifyingInput.slice(0,3) === "cre") {
             document.getElementById(modifyingInput).value = option;
         } else {
@@ -672,10 +746,27 @@ Template.main.events({
         }
     },
     'click #workSubmit' () { // Click submit work to create a work.
-        serverData = Session.get("currentWork");
-        if(checkMissing()) return;
-        sendData("createWork");
-        $(".overlay").velocity("fadeIn", 150);
+        var thisWork = Session.get("currentWork");
+        var no = [];
+        if(thisWork.name === "") no.push("name");
+        if(thisWork.dueDate === "") no.push("due date");
+        if(thisWork.type === "") no.push("type");
+        
+        if(no.length === 0) {
+            serverData = Session.get("currentWork");
+            sendData("createWork");
+            $(".overlay").velocity("fadeOut", 150);
+        } else {
+            var message = no.reduce(function(a, b) {
+                return (b === no[no.length - 1]) ? a + ((no.length === 2) ? " and " : ", and ") + b : a + ", " + b;
+            });
+            sAlert.error("You are missing the " + message + "!", {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 2000
+            });
+            return;
+        } 
     },
     'click #workDelete' () {
         serverData = Session.get("currentWork")._id;
@@ -772,66 +863,44 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu
 }
 
 function closeInput() { // Close a changeable input and change it back to span.
-    var data = getHomeworkFormData();
-    Session.set("currentWork", data);
+    var thisWork = Session.get("currentWork");
+    var inputs = $(".clickModify");
+
     Session.set("restrictText", {});
-    $("#"+modifyingInput).css('cursor','pointer');
-    $("#"+modifyingInput).css('background-color', 'rgba(0,0,0,0)');
+    if(modifyingInput !== "wType") {
+        $("#"+modifyingInput).css('cursor','pointer');
+        $("#"+modifyingInput).css('background-color', 'rgba(0,0,0,0)');
+    }
+
+    thisWork.name = inputs[0].value;
+    thisWork.dueDate = toDate(inputs[1].value);
+    thisWork.description = inputs[2].value;
+    thisWork.type = options.type.filter(function(names) {
+        return names.alias === inputs[3].children[0].innerHTML;
+    })[0].val;
+    Session.set("currentWork", thisWork);
+
     if(!Session.get("newWork")) {
-        serverData = Session.get("currentWork");
-        if(checkMissing()) return;
-        sendData("editWork");
-    }
-}
+        var no = [];
+        if(thisWork.name === "") no.push("name");
+        if(thisWork.dueDate === "") no.push("due date");
+        if(thisWork.type === "") no.push("type");
 
-function getHomeworkFormData() { // Get all data relating to work creation.
-    var inputs = ["wName", "wDueDate", "wDescription", "wType"]; // All work fields.
-    var optional = ["wDescription"]; // Optional work fields.
-    var data = Session.get("currentWork");
-    for(var i = 0; i < inputs.length; i++) {
-        var title = inputs[i].charAt(1).toLowerCase() + inputs[i].slice(2);
-        var thisData = (function() {
-            if(title === "type") {
-                return $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue.toLowerCase();
-            } else if (title === "dueDate") {
-                var val = $("#"+inputs[i])[0].value;
-                return toDate(val);
-            } else {
-                return $("#"+inputs[i])[0].value;
-            }
-        })();
-        // True signifies missing field to prevent missing if value is'Missing field.'
-        data[title] =  data[title] = (thisData.toString().includes(defaultWork[title].slice(0,-3)) && !_.contains(optional, title)) ? true : thisData;
-    }
-    return data;
-}
-
-function checkMissing() {
-    var required = ["name","dueDate","type"];
-    var no = false;
-    if(serverData === null || Object.keys(serverData).length < 4) {
-        for(var i = 0; i < required.length; i++) {
-            var id = "w" + required[i].charAt(0).toUpperCase() + required[i].slice(1);
-            $("#"+id).addClass("formInvalid");
-            $("#"+id)[0].value = "";
-            $("#"+id)[0].placeholder = "Missing field";
-        }
-        return true;
-    }
-    for(var key in serverData) {
-        if(!_.contains(required, key)) continue;
-        var id = "w" + key.charAt(0).toUpperCase() + key.slice(1);
-        if(serverData[key] === true || serverData[key] === "" || serverData[key] === undefined) {
-            no = true;
-            $("#"+id).addClass("formInvalid");
-            $("#"+id)[0].value = "";
-            $("#"+id)[0].placeholder = "Missing field";
+        if(no.length === 0) {
+            serverData = Session.get("currentWork");
+            sendData("editWork");
         } else {
-            $("#"+id)[0].placeholder = "";
-            $("#"+id).removeClass("formInvalid");
-        }
+            var message = no.reduce(function(a, b) {
+                return (b === no[no.length - 1]) ? a + ((no.length === 2) ? " and " : ", and ") + b : a + ", " + b;
+            });
+            sAlert.error("You are missing " + message + "!", {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 2000
+            });
+            return;
+        } 
     }
-    return no;
 }
 
 var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
@@ -846,97 +915,7 @@ toDate = function(date) { // Turns formatted date back to Date constructor.
     month = months.indexOf(date.substring(0, date.search(" ")));
     day = date.substring(date.search(" ") + 1, date.search(","));
     year = date.substring(date.search(",") + 2, date.length);
-    return new Date(year, month, day, 11, 59, 59);
-}
-
-function formReadable(input, val) { // Makes work information readable by users.
-    try {
-        switch (val) {
-            case "typeColor":
-                return input.typeColor = workColors[input.type];
-            case "name":
-                return input.name;
-            case "class":
-                var id = input["class"]; 
-                return (id === Meteor.userId()) ? "Personal" : classes.findOne({_id: id}).name;
-            case "dueDate":
-                return getReadableDate(input.dueDate);
-            case "description":
-                return input.description;
-            case "type":
-                return input.type[0].toUpperCase() + input.type.slice(1);
-            case "comments":
-                var comments = input.comments;
-                var resort = [];
-                if (Session.get("newWork")) return []; // Don't display comments if user is creating work.
-                for (var k = 0; k < comments.length; k++) {
-                    var re = comments.length - k - 1;
-                    resort[re] = {
-                        "comment": comments[k].comment,
-                        "date": null,
-                        "user": null,
-                        "avatar": null,
-                        "email": null
-                    };
-                    var user = Meteor.users.findOne({
-                        _id: comments[k].user
-                    });
-                    resort[re].user = user.profile.name;
-                    resort[re].date = moment(comments[k].date).fromNow();
-                    resort[re].avatar = user.services.google.picture;
-                    resort[re].email = user.services.google.email;
-                }
-                return resort;
-            case "done":
-                if (Session.get("newWork")) return [];
-                for (var i = 0; i < input.done.length; i++) { // Display users who marked as done.
-                    var user = Meteor.users.findOne({
-                        _id: input.done[i]
-                    });
-
-                    input.done[i] = {
-                        "user": user.profile.name,
-                        "avatar": user.services.google.picture,
-                        "email": user.services.google.email
-                    };
-                }
-                return input.done;
-            case "doneCol":
-                if (Session.get("newWork")) return "";
-                if (!_.contains(input.done, Meteor.userId())) return "";
-                return "#27A127";
-            case "doneText":
-                if (Session.get("newWork")) return "";
-                if (!_.contains(input.done, Meteor.userId())) return "Mark done";
-                return "Done!";
-            case "doneIcon":
-                if (Session.get("newWork")) return "";
-                if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
-                return "fa-check-square-o";
-            case "userConfirm":
-                if (!_.contains(input.confirmations, Meteor.userId())) return (Meteor.Device.isPhone() || Meteor.Device.isTablet()) ? "rgb(101,101,101)" : "";
-                return "#27A127";
-            case "confirmations":
-                return input.confirmations.length;
-            case "userReport":
-                if (!_.contains(input.reports, Meteor.userId()))  return (Meteor.Device.isPhone() || Meteor.Device.isTablet()) ? "rgb(101,101,101)" : "";
-                return "#FF1A1A";
-            case "reports":
-                return input.reports.length;
-            case "email":
-                return Meteor.users.findOne({
-                    _id: input.creator
-                }).services.google.email;
-            case "avatar":
-                return Meteor.users.findOne({
-                    _id: input.creator
-                }).services.google.picture;
-            case "creator":
-                return Meteor.users.findOne({
-                    _id: input.creator
-                }).profile.name;
-        }
-    } catch(err){}
+    return new Date(year, month, day, 0,0,0);
 }
 
 checkComplete = function(required, inputs) {
@@ -1092,7 +1071,7 @@ updateWork = function(id, fields, type) {
             return work._id !== id;
         });
         myWork.push(workObj);
-        if(Session.get("currentWork")._id === id) {
+        if(!Session.equals("currentWork", null) && Session.get("currentWork")._id === id) {
             Session.set("currentWork", workObj);
             if($(".overlay").css("display") !== "none") { // If currently viewing work.
                 var message = Object.keys(fields)[0].replace("dueDate", "due date");
diff --git a/hourglass/server/main.js b/hourglass/server/main.js
index d5863a5..742f700 100644
--- a/hourglass/server/main.js
+++ b/hourglass/server/main.js
@@ -528,7 +528,7 @@ Meteor.methods({
             _id: currentwork.class
         });
         if(change.description) change.description = change.description.trim();
-        var security = securityCheck([[1,16, 13, 14, 5, false], 11, 12, 10, 20, true],
+        var security = securityCheck([[1, 16, 13, 14, 5, false], 11, 12, 10, 20, true],
                                      Object.assign({}, currentclass || {}, currentwork, {description: change.description, name: change.name, dueDate: change.dueDate, type: change.type}));
 
         if (!security) {
@@ -616,7 +616,7 @@ Meteor.methods({
         var currentclass = classes.findOne({
             _id: currentwork.class
         });
-        var security = securityCheck([1, 16, 13, 5, false],
+        var security = securityCheck([1, 16, 13, 14, 5, false],
                                      Object.assign({}, currentwork, currentclass || {}));
         if (!security) {
             work.remove({