Add homework framework

hourglass/client/main/main.css

@@ -311,6 +311,8 @@ input {
 }
 
 .creWork {
+	cursor: pointer;
+
 	-webkit-transition: background-color 0.4s ease;  
 	-moz-transition: background-color 0.4s ease; 
 	-ms-transition: background-color 0.4s ease;
@@ -325,6 +327,75 @@ input {
 	padding-left: 0;
 }
 
+#editWork {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+
+#workTypeBar {
+	background-color: rgba(0,0,0,0.1);
+	height: 2%;
+}
+
+#workName {
+	font-weight: 400;
+}
+
+.workTitle {
+	font-size: 150%;
+	font-weight: 400;
+	margin: 0;
+	margin-right: 3%;
+	margin-bottom: 1%;
+}
+
+.workOptions {
+	box-shadow: 2px 2px 5px 3px #666;
+
+	position: absolute;
+	display: none;
+	z-index: 5;
+
+	opacity: 0;
+
+	-webkit-transition: opacity 0.4s ease;  
+	-moz-transition: opacity 0.4s ease; 
+	-ms-transition: opacity 0.4s ease;
+	transition: opacity 0.4s ease; 
+}
+
+.workOptionText {
+	font-size: 150%;
+	min-width: 10%;
+	padding: 20px;
+	margin: 0;
+
+	text-align: center;
+	cursor: pointer;
+	
+	-webkit-transition: box-shadow 0.4s ease;  
+	-moz-transition: box-shadow 0.4s ease; 
+	-ms-transition: box-shadow 0.4s ease;
+	transition: box-shadow 0.4s ease;
+}
+
+.workOptions p:hover {
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+}
+
+#workInfoContainer {
+	padding: 2%;
+}
+
+#workInfoNmCont {
+	padding: 3%;
+}
+
+#workInfoNmCont div {
+	margin-bottom: 5%;
+}
+
 .overlay {
 	width: 100%;
 	height: 100%;

hourglass/client/main/main.html

@@ -56,10 +56,46 @@
         {{/if}}
     </div>
     <div class="overlay">
-        <div class="overlayCont" style="{{overlayDim}};">
+        <div id="editWork">
-            <p>Are you sure?</p>
+            <div id="editWorkCont" style="{{workCenter}};background-color:{{divColor 'header'}}">
-            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+                <div id="workTypeBar" style="background-color:{{workType}}"></div>
-            <i class="fa fa-times-circle-o" aria-hidden="true"></i>
+                <div id="workInfoContainer">
+                    <div>
+                        <span class="change" id="workName">{{work 'name'}}</span>
+                    </div>
+                    <div id="workInfoNmCont">
+                        <div>
+                            <span class="workTitle">Due Date:</span>
+                            <span class="change" id="workDate">{{work 'dueDate'}}</span>
+                        </div>
+                        <div>
+                            <span class="workTitle">Description:</span><br>
+                            <span class="change" id="workDesc">{{work 'description'}}</span>
+                        </div>
+                        <div>
+                            <div>
+                            <span class="workTitle">Type:</span>
+                            <span class="change radio" opc="0" op="0" re="readonly" id="workType">{{work 'type'}}</span>
+                            </div>
+                            <div class="workOptions" style="background-color:{{divColor 'header'}}">
+                                <p class="workOptionText">9th</p>
+                                <p class="workOptionText">10th</p>
+                                <p class="workOptionText">11th</p>
+                                <p class="workOptionText">12th</p>
+                            </div>
+                        </div>
+                        <div id="workAttach">Attach other files</div>
+                        <div id="workAttachmentHolder">
+                            {{#each work 'attach'}}
+                                <a href={{link}}>{{filename}}</a>
+                            {{/each}}
+                        </div>
+                    </div>
+                </div>
+                {{#if newWork}}
+                    <div id="workSubmit">Save</div>
+                {{/if}}
+            </div>
         </div>
     </div>
 </template>
@@ -78,12 +114,14 @@
             <p class="mainClassHour">{{hour}}</p>
             <p class="mainClassTeacher">{{teacher}}</p>
         </div>
-        <div class="creWork">
+        <div class="creWork" classid="{{_id}}">
             <i class="fa fa-plus" aria-hidden="true"></i>
             <h4>Add Work</h4>
         </div>
+        <div class="workHolder">
         <!-- {{#each myWork}}
             {{> classModeWork}}
         {{/each}} -->
+        </div>
     </div>
 </template>

hourglass/client/main/main.js

@@ -7,6 +7,7 @@ import './main.html';
 Meteor.subscribe('schools');
 Meteor.subscribe('classes');
 Meteor.subscribe('work');
+
 var openValues = {
     "menu": "-25%",
     "options": "-20%"
@@ -26,7 +27,7 @@ var themeColors = {
     }
 };
 
-var calendarColors = {
+var workColors = {
     "test": "red",
     "project": "blue",
     "normal": "green",
@@ -36,6 +37,12 @@ var calendarColors = {
 Session.set("calendarclasses", null);
 Session.set("sidebar", null);
 Session.set("mode", null); // Change to user preferences
+Session.set("newWork",null);
+Session.set("currentWork",null);
+Session.set("modifying",null);
+Session.set("radioDiv",null);
+Session.set("radioOffset",null);
+Session.set("serverData",null);
 
 Template.registerHelper('divColor', (div) => {
     return themeColors[Cookie.get("theme")][div];
@@ -147,6 +154,25 @@ Template.main.helpers({
         var width = window.innerWidth * 0.865;
         var height = window.innerHeight * 0.76;
         return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px";
+    },
+    workCenter() {
+        var w = window.innerWidth * .3;
+        var h = window.innerHeight * 0.7;
+        return "width:"+w.toString()+"px;height:"+h.toString()+"px;margin-left:"+-.5*w.toString()+"px;margin-top:"+-.5*h.toString()+"px";
+    },
+    work(value) {
+    	return Session.get("currentWork")[value];
+    },
+    workType() {
+    	type = Session.get("currentWork").type
+    	if(type.includes("edit")) {
+    		return;
+    	} else {
+    		return workColors.type;
+    	}
+    },
+    newWork() {
+    	return Session.get("newWork");
     }
 });
 
@@ -195,6 +221,7 @@ Template.main.events({
     },
     'click' (event) {
         var e = event.target.className;
+        var sessval = Session.get("modifying");
         if (e !== Session.get("sidebar") &&
             !e.includes("fa-cog") &&
             !e.includes("fa-bars") &&
@@ -202,6 +229,129 @@ Template.main.events({
             !document.getElementById("optionsContainer").contains(event.target)) {
             Session.set("sidebar", null);
         }
+        if(e === "overlay") {
+        	closeDivFade(document.getElementsByClassName("overlay")[0]);
+        	if(!Session.get("newWork")) {
+        		Session.set("serverData",getHomeworkFormData())
+        		sendData("editWork");
+        	} else {
+        		clearHomeworkForm();
+        	}
+        	Session.set("newWork",null);
+        	Session.set("currentWork",null);
+        }
+
+        if (event.target.id !== sessval &&
+            event.target.id !== sessval + "a" &&
+            !Session.equals("modifying", null) &&
+            !event.target.parentNode.className.includes("profOptions")) {
+            closeInput(sessval);
+        }
+        if (!event.target.className.includes("radio") &&
+        !Session.equals("radioDiv", null) &&
+        !event.target.parentNode.className.includes("workOptions") &&
+        event.target.readOnly !== true) {
+            var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString();
+            for (var i = 0; i < document.getElementsByClassName("workOptions").length; i++) {
+                try {
+                    closeDivFade(document.getElementsByClassName("workOptions")[i]);
+                } catch (err) {}
+            }
+            Session.set("radioDiv", null);
+            Session.set("radioOffset", null);
+        }
+    },
+    'click .creWork' (event) {
+        openDivFade(document.getElementsByClassName("overlay")[0]);
+        Session.set("newWork", true);
+        Session.set("currentWork",
+    		{
+    			name:"Name | Click here to edit...",
+    			class:event.target.getAttribute("classid"),
+    			dueDate:"Click here to edit...",
+    			description:"Click here to edit...",
+    			type:"Click here to edit..."
+    		});
+    },
+    'click .change' (event) {
+    	var ele = event.target;
+        var sessval = Session.get("modifying");
+        if (ele.id !== sessval && sessval !== null) closeInput(sessval);
+
+        Session.set("modifying", ele.id);
+        var dim = ele.getBoundingClientRect();
+        ele.style.display = "none";
+        var input = document.createElement("input");
+
+        if (ele.getAttribute("type") !== null) {
+            input.type = ele.getAttribute("type");
+        } else {
+            input.type = "text";
+        }
+        input.value = ele.childNodes[0].nodeValue;
+        input.className = "changeInput";
+        input.style.height = 0.9 * dim.height.toString() + "px";
+        input.style.width = "70%";
+        input.style.padding = "0.1%";
+        input.id = ele.id + "a";
+        input.setAttribute("opc", ele.getAttribute("opc"));
+        ele.parentNode.appendChild(input);
+        if (ele.getAttribute("re") == "readonly") {
+            input.readOnly = true;
+            input.className += " op";
+            input.style.cursor = "pointer";
+        } else {
+            input.select();
+        }
+        input.focus();
+        if (ele.getAttribute("restrict") !== null) {
+            var span = document.createElement("span");
+            span.id = "restrict";
+            var num = parseInt(ele.getAttribute("restrict")) - input.value.length;
+            if (num <= 0) {
+                span.style.setProperty("color", "#FF1A1A", "important");
+                num = 0;
+            }
+            span.appendChild(document.createTextNode(num.toString() + " characters left"));
+            ele.parentNode.appendChild(span);
+        }
+    },
+    'keydown' (event) {
+        var sessval = Session.get("modifying");
+        if (event.keyCode == 13) {
+            try {
+                closeInput(sessval);
+            } catch (err) {}
+        }
+        if (sessval !== null && event.keyCode !== 13) {
+            var restrict = document.getElementById(sessval).getAttribute("restrict");
+            if (restrict !== null) {
+                var num = parseInt(restrict) - event.target.value.length;
+                var restext = document.getElementById("restrict");
+                if (num === 1) {
+                    restext.childNodes[0].nodeValue = num.toString() + " character left";
+                    restext.style.setProperty("color", "#999", "important");
+                } else if (num <= 0) {
+                    var input = document.getElementById(sessval + "a");
+                    input.value = input.value.substring(0, parseInt(restrict));
+                    restext.childNodes[0].nodeValue = "0 characters left";
+                    restext.style.setProperty("color", "#FF1A1A", "important");
+                } else {
+                    restext.childNodes[0].nodeValue = num.toString() + " characters left";
+                    restext.style.setProperty("color", "#999", "important");
+                }
+            }
+        }
+    },
+    'click #workSubmit' () {
+    	Session.set("serverData",getHomeworkFormData());
+    	if(Session.get("newWork")) {
+    		sendData("editWork");
+    	} else {
+    		sendData("createWork");
+    	}
+    	Session.set("newWork",null);
+        Session.set("currentWork",null);
     }
 });
 
@@ -220,6 +370,36 @@ function closeDivFade(div) {
     }, 100);
 }
 
-function sendData() {
+function sendData(funcName) {
-    // Take form data
+    Meteor.call(funcName, Session.get("serverData"));
+}
+
+function closeInput(sessval) {
+    var input = document.getElementById(sessval + "a");
+    var span = document.getElementById(sessval);
+    input.parentNode.removeChild(input);
+    try {
+        var restrict = document.getElementById("restrict");
+        restrict.parentNode.removeChild(restrict);
+    } catch (err) {}
+    if (input.value === "") {
+        span.childNodes[0].nodeValue = "Click here to edit...";
+    } else {
+        span.childNodes[0].nodeValue = input.value;
+    }
+    span.style.display = "initial";
+    Session.set("modifying", null);
+    if(Session.get("newWork")) {
+    	Session.set("serverData",getHomeworkFormData());
+    	sendData("editProfile");
+    }
+
+}
+
+function getHomeworkFormData() {
+	return;
+}
+
+function clearHomeworkForm() {
+	
 }