New inputs for creating work, restriction and comments still needed

hourglass/.meteor/packages

@@ -9,10 +9,9 @@ mobile-experience@1.0.4       # Packages for a great mobile UX
 mongo@1.1.12_1                   # The database Meteor supports right now
 blaze-html-templates@1.0.4    # Compile .html files into Meteor Blaze views
 reactive-var@1.0.10            # Reactive variable for tracker
-jquery@1.11.9                  # Helpful client-side library
+jquery                  # Helpful client-side library
 tracker@1.1.0                 # Meteor's client-side reactive programming library
 
-standard-minifier-css@1.2.0_1   # CSS minifier run for production mode
 standard-minifier-js@1.2.0_1    # JS minifier run for production mode
 es5-shim@4.6.14_1                # ECMAScript 5 compatibility for older browsers.
 ecmascript@0.5.8_1              # Enable ECMAScript2015+ syntax in app code
@@ -36,7 +35,6 @@ underscore@1.0.9
 ahref:dragula
 harrison:papa-parse
 pfafman:filesaver
-flemay:less-autoprefixer
 natestrauser:select2
 juliancwirko:s-alert
 juliancwirko:s-alert-stackslide
@@ -44,3 +42,4 @@ aldeed:collection2
 dburles:collection-helpers
 yogiben:admin-edit
 mfactory:admin-lte
+standard-minifier-css

hourglass/.meteor/versions

@@ -42,7 +42,6 @@ email@1.0.16
 es5-shim@4.6.14_1
 eternicode:bootstrap-datepicker@1.6.0_3
 fastclick@1.0.12
-flemay:less-autoprefixer@1.2.0
 fortawesome:fontawesome@4.5.0
 geojson-utils@1.0.9
 google@1.1.14
@@ -74,7 +73,7 @@ meteor-base@1.0.4
 meteorhacks:meteorx@1.4.1
 meteorhacks:unblock@1.1.0
 mfactory:admin-lte@0.0.2
-minifier-css@1.2.14
+minifier-css@1.2.14_1
 minifier-js@1.2.14_1
 minimongo@1.0.17
 mizzao:autocomplete@0.5.1

hourglass/client/main/main.css

@@ -476,8 +476,8 @@ body {
 	white-space: normal;
 	word-break: break-all;
 
-	-webkit-filter: none;
+	-webkit-filter: none !important;
-	filter: none;
+	filter: none !important;
 }
 
 .mainClassHour {
@@ -555,8 +555,8 @@ body {
 	width: 50%;
 	margin-top: 0;
 	
-	-webkit-filter: none;
+	-webkit-filter: none !important;
-	filter: none;
+	filter: none !important;
 
 	display: table-cell;
 	white-space: normal;
@@ -574,10 +574,12 @@ body {
 }
 
 input.clickModify, textarea.clickModify {
+	width: 100%;
 	font-size: 2.2vh;
 	font-weight: 200;
 	background-color: rgba(0,0,0,0);
 	border-color: rgba(0,0,0,0);
+	cursor: pointer;
 
 	-webkit-transition: background-color 0.4s ease, border-color 0.4s ease;  
 	-moz-transition: background-color 0.4s ease, border-color 0.4s ease; 
@@ -586,9 +588,8 @@ input.clickModify, textarea.clickModify {
 }
 
 input.clickModify:hover, textarea.clickModify:hover {
-	cursor: pointer;
+	background-color: rgba(0,0,0,0.1);
-	background-color: rgba(255,255,255,0.1);
+	border-color: rgba(0,0,0,0.1);;
-	border-color: rgba(255,255,255,0.1);;
 }
 
 textarea.clickModify {
@@ -657,8 +658,9 @@ textarea.clickModify {
 .clickModify.dropdown {
 	font-size: 2.5vh;
 	width: 100%;
+	border: 1px solid #666;
 
-	background-color: rgba(0,0,0,0.15);
+	background-color: rgba(0,0,0,0.07);
 	cursor: pointer;
 	outline: 0;
 
@@ -669,7 +671,7 @@ textarea.clickModify {
 }
 
 .clickModify.dropdown:hover {
-	background-color: rgba(0,0,0,0.07);
+	background-color: rgba(0,0,0,0.03);
 }
 
 .clickModify.dropdown span {
@@ -688,11 +690,14 @@ textarea.clickModify {
 
 .optionHolder {
 	width: 100%;
+	margin-top: -1px;
 
 	border: 1px solid #666;
-	position: absolute;
+	border-top: none;
 
+	position: absolute;
 	z-index: 5;
+	display: none;
 
 	opacity: 0;
 
@@ -702,10 +707,6 @@ textarea.clickModify {
 	transition: opacity 0.4s ease; 
 }
 
-.optionHolder:hover {
-	background-color: rgba(255,255,255,0.05);
-}
-
 .optionText {
 	font-size: 150%;
 	min-width: 10%;
@@ -720,8 +721,8 @@ textarea.clickModify {
 	transition: box-shadow 0.4s ease;
 }
 
-.optionText:hover {
+.selectedOption {
-	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
 }
 
 .workOptions p:hover, .prefOptions p:hover {
@@ -757,7 +758,13 @@ textarea.clickModify {
 
 #wType {
 	margin: 0 !important;
-	padding: 2%;
+}
+
+#typeWrapper {
+	margin: 0 !important;
+	min-width: 56%;
+	position: relative;
+	display: inline-block;
 }
 
 .datepicker {
@@ -768,11 +775,7 @@ textarea.clickModify {
 }
 
 .type {
-	width: 95%;
+	margin: -1px 0 0 0 !important;
-	margin-left: 1%;
-}
-.type p {
-	padding: 3% 5% 3% 5%;
 }
 
 #workComments h3 {

hourglass/client/main/main.html

@@ -148,31 +148,29 @@
                     <div id="workInfoContainer">
                         <div id="workNameDiv">
                             <span id="workNamerestrict">{{commentLength}}</span>
-                            <!-- <span class="change req" id="workName" restrict="50">{{work 'name'}}</span> -->
+                            <input id="wName" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}" tabindex="10">
-                            <input id="wName" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}">
                         </div>
                         <div id="workInfoNmCont">
                             <div>
                                 <span class="workTitle">Due Date:</span><br>
-                                <!-- <span class="change req" re="readonly" id="workDate">{{work 'dueDate'}}</span> -->
+                                <input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}" tabindex="11" readonly>
-                                <input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}">
                             </div>
                             <div>
                                 <span class="workTitle">Description:</span><br>
-                                <span id="workDescrestrict">{{commentLength}}</span>
+                                <textarea id="wDescription" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5" tabindex="12"></textarea>
-                                <!-- <span class="change" type="textarea" id="workDesc" restrict="150">{{work 'description'}}</span> -->
-                                <textarea id="wDescription" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5"></textarea>
                             </div>
                             <div>
                                 <span class="workTitle">Type:</span>
-                                <div id="wType" class="clickModify dropdown">
+                                <div id="typeWrapper">
-                                    <span>{{work 'type'}}</span>
+                                    <div id="wType" class="clickModify dropdown" tabindex="13">
-                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
+                                        <span>{{work 'type'}}</span>
-                                </div>
+                                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                                <div class="optionHolder type">
+                                    </div>
-                                    {{#each selectOptions 'type'}}
+                                    <div class="optionHolder type">
-                                        {{> option}}
+                                        {{#each selectOptions 'type'}}
-                                    {{/each}}
+                                            {{> option}}
+                                        {{/each}}
+                                    </div>
                                 </div>
                             </div>
                             <!-- <div id="workAttach">Attach other files</div>

hourglass/client/main/main.js

@@ -41,7 +41,6 @@ Session.set("requests", false); // Status of requests.
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWorkId",null); // Stores current work Id.
 Session.set("currentWork",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.
 Session.set("calCreWork", null); // If user is creating a work from calendar.
@@ -60,6 +59,14 @@ Template.login.rendered = function() {
 Template.main.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
     setTimeout(startDragula, 300);
+    $(".optionText").hover(
+        function() {
+            $(this).addClass("selectedOption");
+        },
+        function() {
+            $(this).removeClass("selectedOption");
+        }
+    );
 };
 
 Template.profile.rendered = function() {
@@ -250,6 +257,8 @@ function startDragula() {
     });
 }
 
+
+
 Template.main.helpers({
     themeName() {
         var vals = _.values(themeColors);
@@ -424,7 +433,7 @@ Template.main.helpers({
     work(value) { // Returns the specified work value.
         var thisWork = Session.get("currentWork");
         if (Session.equals("currentWork", null)) return;
-        if (Session.get("newWork") && (thisWork[value] === "Missing field" || thisWork[value] === undefined)) {
+        if (Session.get("newWork") && (thisWork[value] === true || thisWork[value] === undefined)) {
             return defaultWork[value];
         } else {
             return formReadable(thisWork,value);
@@ -482,13 +491,12 @@ Template.main.events({
         var e = event.target.className;
 
         if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
-            if (!_.contains(e, ["optionHolder", "optionText"])) {
+            if (!(e.includes("optionHolder") || e.includes("optionText"))) {
                 if(document.getElementById(modifyingInput).className.includes("dropdown")) {
                     $(".optionHolder")
-                    .fadeOut('fast')
+                    .fadeOut(250, "linear");
-                    .hide('fast');
 
-                    dropOpen = false;
+                    $(".selectedOption").removeClass("selectedOption");
                 } else {     
                     closeInput(modifyingInput);
                 }
@@ -517,7 +525,6 @@ Template.main.events({
             if (!Session.get("newWork")) {
                 document.getElementById("workComment").value = "";
             }
-            Session.set("newWork", null);
             $('.req').css("color", "");
             Session.set("commentRestrict", null);
         }
@@ -637,74 +644,6 @@ Template.main.events({
             }, 750);
         });
     },
-    // HANDLING INPUT CHANGING
-    'click .clickModify' (event) {
-        if(modifyingInput !== event.target.id) modifyingInput = event.target.id;
-    },
-    'focus .clickModify' (event) {
-        if(modifyingInput !== event.target.id) modifyingInput = event.target.id;
-    },
-    'keydown .dropdown' (event) {
-        console.log("hi");
-    },
-    'focus .dropdown' (event) {
-         if(event.target.id === modifyingInput) return;
-        event.target.click();
-    },
-    'click .dropdown' (event) {
-        console.log(dropOpen);
-        console.log(event.target.id === modifyingInput);
-        if(event.target.id === modifyingInput && dropOpen) {
-            dropOpen = false;
-            modifyingInput = null;
-            $("#" + modifyingInput).next()
-            .fadeOut(200)
-            .hide(200);
-            console.log("hiasdf");
-            return;
-        }
-        dropOpen = true;
-
-        $("#" + modifyingInput).next()
-        .css('opacity',0)
-        .slideDown(300)
-        .animate(
-            { opacity: 1 },
-            { queue: false, duration: 100 }
-        ) 
-        //event.target.focus();
-        
-    },
-    'click .optionText' (event) { // Click each preferences setting.
-        var option = event.target.childNodes[0].nodeValue;
-        if(modifyingInput[0] === 'w') {
-            var newSetting = Session.get("currentWork");
-            newSetting[modifyingInput.charAt(1).toLowerCase() + modifyingInput.slice(2)] = option;
-            Session.set("currentWork", newSetting);
-        } else {
-            var newSetting = Session.get("user");
-            newSetting.preferences[modifyingInput] = (function() {
-                var value = options[modifyingInput].filter(function(entry) {
-                    return option === entry.alias;
-                })[0].val;
-                return (modifyingInput === 'theme') ? themeColors[value] : value;
-            })();
-            Session.set("user", newSetting);
-            serverData = Session.get("user");
-            sendData("editProfile"); 
-        }
-
-        $("#" + modifyingInput).next()
-        .fadeOut('fast')
-        .hide('fast');
-    },
-    'click #workComment' (event) {
-        var restrict = event.target.maxLength;
-        Session.set("commentRestrict", restrict - event.target.value.length.toString() + " characters left");
-        var text = document.getElementById("commentrestrict");
-        text.style.display = "initial";
-        text.style.color = "#7E7E7E";
-    },
     'click #exportDiv' (event) {
         var events = [];
         var userClasses = Session.get("calendarClasses");
@@ -741,13 +680,97 @@ Template.main.events({
         });
         saveAs(eventBlob, "hourglass.csv");
     },
-    'keydown input' (event) { // Enter to close input.
+    // HANDLING INPUT CHANGING
-        var modifyingInput = Session.get("modifying");
+    'focus .clickModify' (event) {
-        if (event.keyCode == 13 && modifyingInput != "workDesc") {
+        $(".optionHolder")
-            try {
+        .fadeOut(250, "linear");
-                closeInput(modifyingInput);
+
-            } catch (err) {}
+        if(modifyingInput !== null) {
+            if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
         } 
+        modifyingInput = event.target.id;
+        if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
+            event.target.select();
+            event.target.style.cursor = "text";   
+        }
+    },
+    'keydown .dropdown' (event) {
+        var first = $("#"+modifyingInput).next().children("p:first-child");
+        var last = $("#"+modifyingInput).next().children("p:last-child"); 
+        var next = $(".selectedOption").next();
+        var prev = $(".selectedOption").prev();
+        var lastSel = $(".selectedOption");
+
+        if (event.keyCode === 38) {
+            if (lastSel === undefined) {
+                last.addClass("selectedOption");
+            } else {
+                if (prev.length === 0) {
+                    last.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");  
+                } else {
+                    prev.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                }
+            }
+        } else if (event.keyCode === 40) {
+            if (lastSel === undefined) {
+                first.addClass("selectedOption");
+                last.removeClass("selectedOption");
+            } else {
+                if (next.length === 0) {
+                    first.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                } else {
+                    next.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                }
+            }    
+        } else if (event.keyCode === 13) {
+            lastSel[0].click();
+        }
+    },
+    'focus .dropdown' (event) {
+        $(".selectedOption").removeClass("selectedOption");
+
+        $("#" + modifyingInput).next()
+        .css('opacity',0)
+        .slideDown(300)
+        .animate(
+            { opacity: 1 },
+            { queue: false, duration: 100 }
+        );
+    },
+    'click .optionText' (event) { // Click each preferences setting.
+        var option = event.target.childNodes[0].nodeValue;
+        if(modifyingInput[0] === 'w') {
+            var newSetting = Session.get("currentWork");
+            newSetting[modifyingInput.charAt(1).toLowerCase() + modifyingInput.slice(2)] = option.toLowerCase();
+            Session.set("currentWork", newSetting);
+        } else {
+            var newSetting = Session.get("user");
+            newSetting.preferences[modifyingInput] = (function() {
+                var value = options[modifyingInput].filter(function(entry) {
+                    return option === entry.alias;
+                })[0].val;
+                return (modifyingInput === 'theme') ? themeColors[value] : value;
+            })();
+            Session.set("user", newSetting);
+            serverData = Session.get("user");
+            sendData("editProfile"); 
+        }
+
+        $("#" + modifyingInput).next()
+        .fadeOut(250, "linear");;
+
+        $(".selectedOption").removeClass("selectedOption");
+    },
+    'click #workComment' (event) {
+        var restrict = event.target.maxLength;
+        Session.set("commentRestrict", restrict - event.target.value.length.toString() + " characters left");
+        var text = document.getElementById("commentrestrict");
+        text.style.display = "initial";
+        text.style.color = "#7E7E7E";
     },
     'input .restrict' (event) {
         var restrict = event.target.maxLength;
@@ -776,11 +799,7 @@ Template.main.events({
             startDate: 'd',
             todayHighlight: true,
             todayBtn: true,
-            
+            autoclose: true
-            onSelect: function(dateText, inst) {
-                alert("asdf");
-                closeInput(modifyingInput);
-            }
         });
     },
     // WORK OVERLAY BUTTONS
@@ -797,8 +816,9 @@ Template.main.events({
     },
     'click #workSubmit' () { // Click submit work to create a work.
         serverData = Session.get("currentWork");
+        if(checkMissing()) return;
         sendData("createWork");
-        Session.set("newWork", null);
+        Session.set("newWork",false);
         closeDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click #workDelete' () {
@@ -807,15 +827,15 @@ Template.main.events({
         closeDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click #markDone' () { // Click done button.
-        serverData = [Session.get("currentWorkId"), "done"];
+        serverData = [Session.get("currentWork")._id, "done"];
         sendData("toggleWork");
     },
     'click #markConfirm' () { // Click confirm button.
-        serverData = [Session.get("currentWorkId"), "confirmations"];
+        serverData = [Session.get("currentWork")._id, "confirmations"];
         sendData("toggleWork");
     },
     'click #markReport' () { // Click report button.
-        serverData = [Session.get("currentWorkId"), "reports"];
+        serverData = [Session.get("currentWork")._id, "reports"];
         sendData("toggleWork");
     },
     // CLASS FILTERS
@@ -913,19 +933,28 @@ function closeDivFade(div) {
 }
 
 function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function.
-    Meteor.call(funcName, serverData);
+    Meteor.call(funcName, serverData, function(error, result) {
+        serverData = null;
+        currWork = Session.get("currentWork");
+        if(currWork !== null && currWork._id !== undefined) {
+            Session.set("currentWork", work.findOne({
+                _id: currWork._id
+            }));
+        }
+    });
+    
+
 }
 
 function closeInput() { // Close a changeable input and change it back to span.
     var data = getHomeworkFormData();   
     Session.set("currentWork", data);
-    
+    $("#"+modifyingInput).css('cursor','pointer');
     if(!Session.get("newWork")) {
         serverData = Session.get("currentWork");
-         //sendData("editWork");
+        if(checkMissing()) return;
+        sendData("editWork");
     } 
-    console.log(serverData);
-   
 }
 
 function getHomeworkFormData() { // Get all data relating to work creation.
@@ -934,12 +963,43 @@ function getHomeworkFormData() { // Get all data relating to work creation.
     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 = (title === 'type') ? $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue : $("#"+inputs[i])[0].value;
+        var thisData = (function() {
-        data[title] = (thisData.includes(defaultWork[title].slice(0,-3)) && !_.contains(optional, title)) ? "Missing field" : thisData;
+            if(title === "type") {
+                console.log($("#"+inputs[i]+" span")[0].childNodes[0].nodeValue.toLowerCase())
+                return $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue.toLowerCase();
+            } else if (title === "dueDate") {
+                var val = $("#"+inputs[i])[0].value;
+                return (val.includes(defaultWork[title].slice(0,-3))) ? val : toDate(val);
+            } else {
+                return $("#"+inputs[i])[0].value;
+            }
+        })();
+        // True signifies missing field to prevent missing if value is'Missing field.'
+        data[title] = (thisData.toString().includes(defaultWork[title].slice(0,-3)) && !_.contains(optional, title)) ? true : thisData;
     }
     return data;
 }
 
+function checkMissing() {
+    var no = false;
+    console.log("hi");
+    for(var key in serverData) {
+        if(!_.contains(["name","dueDate","description","type"],key)) continue;
+        var id = "w" + key.charAt(0).toUpperCase() + key.slice(1);
+        console.log(id);
+        if(serverData[key] === true) {
+            no = true;
+            $("#"+id).addClass("formInvalid");
+            $("#"+id)[0].value = "";
+            $("#"+id)[0].placeholder = "Missing field";
+        } else {
+            $("#"+id)[0].placeholder = "";
+            $("#"+id).removeClass("formInvalid");
+        }
+    }
+    return no;
+}
+
 var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 

hourglass/lib/constants.js

@@ -2,7 +2,7 @@ themeColors =  {
     "light": {
         "background": "White.jpg",
         "mainColor": "#EBEBEB",
-        "secondaryColor": "#FEFEFE",
+        "secondaryColor": "#E8E8E8",
         "sidebarColor": "#65839A",
         "userDropdownColor": "#E6E6E6",
         "iconHighlight": "#33ADFF",
@@ -90,6 +90,13 @@ options = {
     "hideReport": [
         {"val": true, "alias": "Yes"},
         {"val": false, "alias": "No"}
+    ],
+    "type": [
+        {"val": "normal", "alias": "Normal"},
+        {"val": "quiz", "alias": "Quiz"},
+        {"val": "test", "alias": "Test"},
+        {"val": "project", "alias": "Project"},
+        {"val": "other", "alias": "Other"},
     ]
 }