From d8d20229c6f8526fb05abc03fdca9ddef7d93efa Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Tue, 13 Sep 2016 01:37:47 -0400
Subject: [PATCH] Optimized and fixed currentWork for reactive updating,
 editWork CSS scale/zoom fixes

---
 hourglass/client/main/main.css  |  28 +--
 hourglass/client/main/main.html |  10 +-
 hourglass/client/main/main.js   | 290 +++++++++++++++-----------------
 3 files changed, 149 insertions(+), 179 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index e0698e4..3cbb3c7 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -463,7 +463,7 @@ input, textarea {
 
 .workCard {
 	width: 90%;
-	margin: 2.5% 5% 2.5% 5%;
+	margin: 5%;
 	background-color: rgba(255,255,255,0.3);
 	box-shadow: 2px 2px 5px 3px #666;
 	cursor: pointer;
@@ -474,14 +474,6 @@ input, textarea {
 	transition: box-shadow 0.4s ease, transform 0.3s ease;
 }
 
-.workCard:first-child {
-	margin-top: 5%;
-}
-
-.workCard:last-child {
-	margin-bottom: 5%;
-}
-
 .workCard:hover {
 	box-shadow: 2px 2px 5px 3px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
 }
@@ -528,8 +520,6 @@ input, textarea {
 }
 
 #editWork {
-	width: 40%;
-	height: 70%;
 	margin: auto;
 	margin-top: 5%;
 
@@ -572,7 +562,7 @@ input, textarea {
 }
 
 .workTitle, .prefTitle {
-	font-size: 200%;
+	font-size: 150%;
 	font-weight: 400;
 	margin: 0 3% 1% 0;
 	cursor: default;
@@ -633,13 +623,13 @@ input, textarea {
 }
 
 #workInfoContainer {
-	width: 28vw;
+	width: 70%;
 	margin-right: 3%;
 	float: left;
 }
 
 #workToggle {
-	width: 10.8vw;
+	width: 27%;
 	float: right;
 	vertical-align: top;
 }
@@ -1007,7 +997,7 @@ input, textarea {
 
 #comment {
 	width: 100%;
-	max-height: 25vh;
+	max-height: 20vh;
 	position: relative;
 	overflow-y: auto;
 }
@@ -1098,9 +1088,9 @@ input, textarea {
 }
 
 .doneUser {
-	font-size: 1.5vh;
+	font-size: 2vh;
 	margin: 0;
-	padding: 4% 4% 3% 6%;
+	padding: 5%;
 	background-color: rgba(0,0,0,0.1);
 
 	position: relative;
@@ -1117,14 +1107,10 @@ input, textarea {
 }
 
 .doneUser div {
-	height: 2vw;
-	line-height: 2vw;
 	text-align: center;
 }
 
 .doneUser img {
-	height: 2vw;
-	width: 2vw;
 	margin-bottom: 0.3vw;
 
 	display: inline-block;
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index d7c8b1f..311f9f8 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -113,8 +113,8 @@
         </div>
 
         <div class="overlay">
-            <div id="editWork">
-                <div id="editWorkCont" style="background-color:{{divColor 'header'}};border-top:10px solid {{workType}}">
+            <div id="editWork" style="width:{{screen '.4'}}">
+                <div id="editWorkCont" style="background-color:{{divColor 'header'}};border-top:10px solid {{work 'typeColor'}}">
                     <div id="workInfoContainer">
                         <div id="workNameDiv">
                             <span id="workNamerestrict">{{commentLength}}</span>
@@ -189,8 +189,8 @@
                                     <p>{{work 'reports'}}</p>
                                 </div>
                                 <div class="workCreator doneUser" onclick="window.location='/user/{{work 'email'}}'">
-                                    <div style="display:inline-block">
-                                        <img src="{{work 'avatar'}}">
+                                    <div style="display:inline-block;width:{{screen '3' '140'}}">
+                                        <img src="{{work 'avatar'}}" style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
                                     </div>
                                     <div style="display:inline-block;margin-left:0.3vw">
                                         <span>{{work 'creator'}}</span>
@@ -320,7 +320,7 @@
 <template name="doneUsers">
     <div class="doneUser" onclick="window.location='/user/{{email}}'">
         <div style="display:inline-block">
-            <img src='{{avatar}}'>
+            <img src='{{avatar}}' style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
         </div>
         <div style="display:inline-block;margin-left:0.3vw">
             <span>{{user}}</span>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 21238c5..1a8e12b 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -24,6 +24,13 @@ var workColors = {
     "other": "#852E6D"
 };
 
+var defaultWork = {
+    name: "Name | Click here to edit...",
+    dueDate: "Click here to edit...",
+    description: "Click here to edit...",
+    type: "Click here to edit..."
+}
+
 // Creates variables for due dates
 
 var ref = {
@@ -43,6 +50,7 @@ Session.set("sidebar", null); // Status of sidebar.
 Session.set("requests",false); // Status of requests.
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWork", null); // Stores current selected work info.
+Session.set("currentWorkId",null);
 Session.set("currentReadableWork", null); // Stores readable selected work info.
 Session.set("modifying", null); // Stores current open input.
 Session.set("noclass", null); // If user does not have classes.
@@ -71,9 +79,10 @@ Template.registerHelper('userProfile', () => {
 });
 
 Template.registerHelper('screen', (multiplier, fraction) => {
-    if(multiplier === undefined) return screen.width.toString() + "px";
-    if(fraction === undefined) return (screen.width * parseInt(multiplier)).toString() + "px"
-    return ((screen.width) * parseInt(multiplier) / parseInt(fraction)).toString() + "px";
+    console.log(multiplier,fraction);
+    if(typeof multiplier !== "string") return screen.width.toString() + "px";
+    if(typeof fraction !== "string") return (screen.width * parseFloat(multiplier)).toString() + "px"
+    return ((screen.width) * parseFloat(multiplier) / parseFloat(fraction)).toString() + "px";
 });
 
 Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
@@ -314,12 +323,7 @@ Template.main.helpers({
             },
             eventClick: function(event, jsEvent, view) { // On-click for work.
                 Session.set("newWork", false);
-                var thisWork = work.findOne({
-                    _id: event.id
-                });
-                Session.set("currentWork", thisWork);
-                var thisReadWork = formReadable(thisWork);
-                Session.set("currentReadableWork", thisReadWork);
+                Session.set("currentWorkId", event.id);
                 openDivFade(document.getElementsByClassName("overlay")[0]);
             },
             eventMouseover: function (event, jsEvent, view) {
@@ -368,37 +372,30 @@ Template.main.helpers({
         }
         return;
     },
-    workCenter() { // Centers work overlay.
-        var w = window.innerWidth * 0.3;
-        var h = window.innerHeight * 0.7;
-        return "width:" + w.toString() + "px;height:" + h.toString() + "px;margin-left:" + -0.5 * w.toString() + "px;margin-top:" + -0.5 * h.toString() + "px";
-    },
     work(value) { // Returns the specified work value.
-        if (Session.equals("currentWork", null)) return;
-        return Session.get("currentReadableWork")[value];
-    },
-    workType() { // Returns color for respective work type.
-        if (Session.equals("currentWork", null)) return;
-        if (Session.get("currentWork").type === undefined) return;
-        type = Session.get("currentWork").type;
-        if (type.includes("edit")) {
-            return;
+        if (Session.equals("currentWorkId", null)) return;
+        if (Session.get("newWork")) {
+            return defaultWork[value]; 
         } else {
-            return workColors[type];
+            var thisWork = work.findOne({_id: Session.get("currentWorkId")});
+            return formReadable(thisWork,value);
         }
     },
     newWork() { // If user is creating a new work.
         return Session.get("newWork");
     },
     inRole() { // Checks correct permissions.
-        if (Session.equals("currentWork", null)) return;
+        var thisWork = work.findOne({
+            _id: Session.get("currentWorkId")
+        });
         if (Session.get("newWork")) {
             return true;
         } else {
+            if (thisWork === undefined) return;
             var currClass = classes.findOne({
-                _id: Session.get("currentWork")["class"]
+                _id: thisWork["class"]
             });
-            if (Meteor.userId() === Session.get("currentWork").creator ||
+            if (Meteor.userId() === thisWork.creator ||
                 Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
                 currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
                 currClass.banned.indexOf(Meteor.userId()) !== -1
@@ -448,14 +445,9 @@ Template.main.events({
         if (e === "overlay") { // Overlay closing.
             closeDivFade(document.getElementsByClassName("overlay")[0]);
             if (!Session.get("newWork")) {
-                if (getHomeworkFormData() === null) return;
-                serverData = Session.get("currentWork");
-                sendData("editWork");
                 document.getElementById("workComment").value = "";
             }
             Session.set("newWork", null);
-            Session.set("currentWork", null);
-            Session.set("currentReadableWork", null);
             $('.req').css("color", "");
             Session.set("commentRestrict", null);
         }
@@ -506,7 +498,6 @@ Template.main.events({
         }
     },
     'click #requests .fa-question' () {
-        console.log("hi");
         Session.set("requests",!Session.get("requests"));
     },
     'click .classes' () { // Click classes mode button.
@@ -539,17 +530,7 @@ Template.main.events({
             attr = event.target.getAttribute("classid");
         }
         Session.set("newWork", true);
-        Session.set("currentReadableWork", // Default readable work.
-            {
-                name: "Name | Click here to edit...",
-                class: attr,
-                dueDate: "Click here to edit...",
-                description: "Click here to edit...",
-                type: "Click here to edit..."
-            });
-        Session.set("currentWork", {
-            class: attr
-        });
+        Session.set("currentWorkId",attr);
         openDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click #dropdown' (event) {
@@ -564,18 +545,16 @@ Template.main.events({
         workid = event.target.getAttribute("workid");
 
         Session.set("newWork", false);
+        Session.set("currentWorkId",workid);
         var thisWork = work.findOne({
             _id: workid
         });
-        Session.set("currentWork", thisWork);
-        var thisReadWork = formReadable(thisWork);
-        Session.set("currentReadableWork", thisReadWork);
 
         if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
             var currClass = classes.findOne({
-                _id: Session.get("currentWork")["class"]
+                _id: thisWork["class"]
             });
-            if (!(Meteor.userId() === Session.get("currentWork").creator || // If user has permission.
+            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)) {
@@ -605,11 +584,14 @@ Template.main.events({
     },
     // HANDLING INPUT CHANGING
     'click .change' (event) { // Click changable inputs. Creates an input where the span is.
+        var thisWork = work.findOne({
+            _id: Session.get("currentWorkId")
+        });
         if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
             var currClass = classes.findOne({
-                _id: Session.get("currentWork")["class"]
+                _id: thisWork["class"]
             });
-            if (!(Meteor.userId() === Session.get("currentWork").creator || // If user has permission.
+            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
@@ -665,11 +647,14 @@ Template.main.events({
         }
     },
     'click .radio' (event) { // Click dropdown input. Opens the dropdown menu.
+        var thisWork = work.findOne({
+            _id: Session.get("currentWorkId")
+        });
         if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
             var currClass = classes.findOne({
-                _id: Session.get("currentWork")["class"]
+                _id: thisWork["class"]
             });
-            if (!(Meteor.userId() === Session.get("currentWork").creator ||
+            if (!(Meteor.userId() === thisWork.creator ||
                 Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
                 currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
                 currClass.banned.indexOf(Meteor.userId()) !== -1
@@ -761,50 +746,39 @@ Template.main.events({
     },
     // WORK OVERLAY BUTTONS
     'click #commentSubmit' (event) { // Click to submit a comment.
-        workId = Session.get("currentWork")._id;
+        workId = Session.get("currentWorkId")
         var input = document.getElementById('workComment');
         comment = input.value;
         input.value = "";
         Session.set("commentRestrict", null);
         if (comment !== "") {
             document.getElementById('workComment').value = "";
-            Meteor.call('addComment', [comment, workId], function(err, result) {
-                var thisWork = work.findOne({
-                    _id: workId
-                });
-                Session.set("currentWork", thisWork);
-                var thisReadWork = formReadable(thisWork);
-                Session.set("currentReadableWork", thisReadWork);
-            });
+            Meteor.call('addComment', [comment, workId])
         }
     },
     'click #workSubmit' () { // Click submit work to create a work.
         if (getHomeworkFormData() === null) return; // Makes sure to check valid homework.
-        serverData = Session.get("currentWork");
-        if (Session.get("newWork")) {
-            sendData("createWork");
-        } else {
-            sendData("editWork");
-        }
+        serverData = getHomeworkFormData();
+        serverData.class = Session.get("currentWorkId");
+        sendData("createWork");
         Session.set("newWork", null);
         closeDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click #workDelete' () {
-        serverData = Session.get("currentWork")._id;
+        serverData = Session.get("currentWorkId");
         sendData("deleteWork");
         closeDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click #markDone' () { // Click done button.
-        serverData = [Session.get("currentWork")._id, "done"];
-        console.log(serverData);
+        serverData = [Session.get("currentWorkId"), "done"];
         sendData("toggleWork");
     },
     'click #markConfirm' () { // Click confirm button.
-        serverData = [Session.get("currentWork")._id, "confirmations"];
+        serverData = [Session.get("currentWorkId"), "confirmations"];
         sendData("toggleWork");
     },
     'click #markReport' () { // Click report button.
-        serverData = [Session.get("currentWork")._id, "reports"];
+        serverData = [Session.get("currentWorkId"), "reports"];
         sendData("toggleWork");
     },
     // CLASS FILTERS
@@ -820,17 +794,7 @@ Template.main.events({
             var date = calWorkDate.split("-");
             date = new Date(date[0], parseInt(date[1]) - 1, date[2], 11, 59, 59);
             Session.set("newWork", true);
-            Session.set("currentReadableWork", {
-                name: "Name | Click here to edit...",
-                class: classid,
-                dueDate: getReadableDate(date),
-                description: "Click here to edit...",
-                type: "Click here to edit..."
-            });
-            Session.set("currentWork", {
-                class: classid,
-                dueDate: date
-            });
+            Session.get("currentWorkId",classid);
             openDivFade(document.getElementsByClassName("overlay")[0]);
         } else { // Normal clicking turns on filter.
             var array = Session.get("classDisp");
@@ -881,17 +845,7 @@ function closeDivFade(div) {
 }
 
 function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function.
-    Meteor.call(funcName, serverData, function(err, result) {
-        if (funcName === "toggleWork") {
-            var workId = Session.get("currentWork")._id;
-            var thisWork = work.findOne({
-                _id: workId
-            });
-            Session.set("currentWork", thisWork);
-            var thisReadWork = formReadable(thisWork);
-            Session.set("currentReadableWork", thisReadWork);
-        }
-    });
+    Meteor.call(funcName, serverData);
 }
 
 function closeInput(modifyingInput) { // Close a changeable input and change it back to span.
@@ -922,7 +876,7 @@ function closeInput(modifyingInput) { // Close a changeable input and change it
         sendData("editProfile");
     } else if (!Session.get("newWork")) {
         if (getHomeworkFormData() === null) return;
-        serverData = Session.get("currentWork");
+        serverData = getHomeworkFormData();
         sendData("editWork");
     }
 }
@@ -940,15 +894,21 @@ function getHomeworkFormData() { // Get all data relating to work creation.
     }
     if (stop) return null;
 
-    var data = Session.get("currentWork");
+    if (Session.get("newWork")) {
+        var data = {
+            "class": Session.get("currentWorkId")
+        };
+    } else {
+        var data = work.findOne({
+            _id: Session.get("currentWorkId")
+        });
+    }
     data.name = document.getElementById("workName").childNodes[0].nodeValue;
     data.dueDate = toDate(document.getElementById("workDate").childNodes[0].nodeValue);
     data.description = document.getElementById("workDesc").childNodes[0].nodeValue;
     data.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase();
 
-    Session.set("currentWork", data);
-    var readableData = formReadable(data);
-    Session.set("currentReadableWork", readableData);
+    return data;
 }
 
 function getPreferencesData() { // Get all data relating to preferences.
@@ -978,56 +938,27 @@ function toDate(date) { // Turns formatted date back to Date constructor.
     return new Date(year, month, day, 11, 59, 59);
 }
 
-function formReadable(input) { // Makes work information readable by users.
-    input.dueDate = getReadableDate(input.dueDate);
-    input.type = input.type[0].toUpperCase() + input.type.slice(1);
-
-    if (!Session.get("newWork")) {
-        if (input.done.indexOf(Meteor.userId()) !== -1) { // If user marked as done.
-            input.doneCol = "#27A127";
-            input.doneText = "Done!";
-        } else {
-            input.doneCol = "";
-            input.doneText = "Mark done";
-        }
-
-        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.profile.avatar,
-                "email": user.services.google.email
-            };
-        }
-
-        if (input.confirmations.indexOf(Meteor.userId()) !== -1) { // If user confirmed.
-            input.userConfirm = "#27A127";
-        } else {
-            input.userConfirm = "";
-        }
-
-        if (input.reports.indexOf(Meteor.userId()) !== -1) { // If user reported.
-            input.userReport = "#FF1A1A";
-        } else {
-            input.userReport = "";
-        }
-
-        var thisUser = Meteor.users.findOne({
-            _id: input.creator
-        });
-
-        input.confirmations = input.confirmations.length;
-        input.reports = input.reports.length;
-        input.creator = thisUser.profile.name;
-        input.avatar = thisUser.profile.avatar;
-        input.email = thisUser.services.google.email;
-
-        var comments = input.comments;
-        var resort = [];
-        if (!Session.get("newWork")) { // Don't display comments if user is creating work.
+function formReadable(input, val) { // Makes work information readable by users.
+    switch(val) {
+        case "typeColor":
+            return input.typeColor = workColors[input.type];
+            break;
+        case "name":
+            return input.name;
+            break;
+        case "dueDate":
+            return getReadableDate(input.dueDate);
+            break;
+        case "description":
+            return input.description;
+            break;
+        case "type":
+            return input.type[0].toUpperCase() + input.type.slice(1);
+            break;
+        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] = {
@@ -1045,8 +976,61 @@ function formReadable(input) { // Makes work information readable by users.
                 resort[re].avatar = user.profile.avatar;
                 resort[re].email = user.services.google.email;
             }
-            input.comments = resort;
-        }
+            return resort;
+            break;
+        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.profile.avatar,
+                    "email": user.services.google.email
+                };
+            }
+            return input.done;
+            break;
+        case "doneCol":
+            if (Session.get("newWork")) return "";
+            if (!_.contains(input.done,Meteor.userId())) return "";
+            return "#27A127";
+            break;
+        case "doneText":
+            if (Session.get("newWork")) return "";
+            if (!_.contains(input.done,Meteor.userId())) return "Mark done";
+            return "Done!";
+            break;
+        case "userConfirm":
+            if(!_.contains(input.confirmations, Meteor.userId())) return "";
+            return "#27A127";
+            break;
+        case "confirmations":
+            return input.confirmations.length;
+            break;
+        case "userReport":
+            if(!_.contains(input.reports, Meteor.userId())) return "";
+            return "#FF1A1A";
+            break;
+        case "reports":
+            return input.reports.length;
+            break;
+        case "email":
+            return Meteor.users.findOne({
+                _id: input.creator
+            }).services.google.email;
+            break;
+        case "avatar":
+            return Meteor.users.findOne({
+                _id: input.creator
+            }).profile.avatar;
+            break;
+        case "creator":
+            return Meteor.users.findOne({
+                _id: input.creator
+            }).profile.name;
+            break;
     }
-    return input;
 }