diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index bfe3653..a214497 100644 --- a/hourglass/client/main/main.css +++ b/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%; diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index b0acb1c..d6c169f 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -56,10 +56,46 @@ {{/if}}
-
-

Are you sure?

- - +
+
+
+
+
+ {{work 'name'}} +
+
+
+ Due Date: + {{work 'dueDate'}} +
+
+ Description:
+ {{work 'description'}} +
+
+
+ Type: + {{work 'type'}} +
+
+

9th

+

10th

+

11th

+

12th

+
+
+
Attach other files
+
+ {{#each work 'attach'}} + {{filename}} + {{/each}} +
+
+
+ {{#if newWork}} +
Save
+ {{/if}} +
@@ -78,12 +114,14 @@

{{hour}}

{{teacher}}

-
+

Add Work

+
+
\ No newline at end of file diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 4a2662a..0b59892 100644 --- a/hourglass/client/main/main.js +++ b/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() { - // Take form data +function sendData(funcName) { + 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() { + +} \ No newline at end of file