Add homework framework
This commit is contained in:
Kenneth Jao
parent
f068fd23a6
commit
0afd5c2ba1
@ -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%;
|
||||
|
||||
@ -56,10 +56,46 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="overlayCont" style="{{overlayDim}};">
|
||||
<p>Are you sure?</p>
|
||||
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
|
||||
<i class="fa fa-times-circle-o" aria-hidden="true"></i>
|
||||
<div id="editWork">
|
||||
<div id="editWorkCont" style="{{workCenter}};background-color:{{divColor 'header'}}">
|
||||
<div id="workTypeBar" style="background-color:{{workType}}"></div>
|
||||
<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>
|
||||
@ -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() {
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user