Adding work, display each work in correct class
This commit is contained in:
Kenneth Jao
parent
9957cba048
commit
6833e3a1cd
@ -112,8 +112,9 @@ h4 {
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
input, textarea {
|
||||
font-family: 'Raleway';
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#aboveBar {
|
||||
@ -159,6 +160,10 @@ input {
|
||||
background-color: #33ADFF;
|
||||
}
|
||||
|
||||
#login-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menuContainer, #optionsContainer {
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
@ -311,12 +316,14 @@ input {
|
||||
}
|
||||
|
||||
.creWork {
|
||||
margin-bottom: 5%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 5px 5px 1px #666;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
-moz-transition: background-color 0.4s ease;
|
||||
-ms-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.creWork:hover {
|
||||
@ -327,6 +334,45 @@ input {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.workHolder {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.workCard {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 5%;
|
||||
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
-moz-transition: background-color 0.4s ease;
|
||||
-ms-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.workCard:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.cWorkCont {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
.cWorkType {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.cWorkName {
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#editWork {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -396,6 +442,43 @@ input {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.inputRadio {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
#workComments h3 {
|
||||
margin-bottom: 2%;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
#workSubmit {
|
||||
font-weight: 200;
|
||||
font-size: 140%;
|
||||
padding: 4%;
|
||||
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
left: -91%;
|
||||
bottom: 7%;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
-moz-transition: background-color 0.4s ease;
|
||||
-ms-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
#workSubmit:hover {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -4,11 +4,13 @@
|
||||
</head>
|
||||
|
||||
<template name="main">
|
||||
{{> loginButtons}}
|
||||
<header style="background-color:{{divColor 'header'}}">
|
||||
<div id="aboveBar">
|
||||
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
|
||||
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
|
||||
<i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
|
||||
<div id="logout" onclick='document.getElementById("login-buttons-logout").click();'>Logout</div>
|
||||
</div>
|
||||
<div id="loadBar">
|
||||
<div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
|
||||
@ -61,40 +63,56 @@
|
||||
<div id="workTypeBar" style="background-color:{{workType}}"></div>
|
||||
<div id="workInfoContainer">
|
||||
<div>
|
||||
<span class="change" id="workName">{{work 'name'}}</span>
|
||||
<span class="change req" id="workName">{{work 'name'}}</span>
|
||||
</div>
|
||||
<div id="workInfoNmCont">
|
||||
<div>
|
||||
<span class="workTitle">Due Date:</span>
|
||||
<span class="change" id="workDate">{{work 'dueDate'}}</span>
|
||||
<span class="change req" id="workDate">{{work 'dueDate'}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="workTitle">Description:</span><br>
|
||||
<span class="change" id="workDesc">{{work 'description'}}</span>
|
||||
<span class="change req" type="textarea" id="workDesc">{{work 'description'}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="inputRadio">
|
||||
<span class="workTitle">Type:</span>
|
||||
<span class="change radio" opc="0" op="0" re="readonly" id="workType">{{work 'type'}}</span>
|
||||
<span class="change radio req" 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 class="workOptions type" style="background-color:{{divColor 'header'}}">
|
||||
<p class="workOptionText">Normal</p>
|
||||
<p class="workOptionText">Quiz</p>
|
||||
<p class="workOptionText">Test</p>
|
||||
<p class="workOptionText">Project</p>
|
||||
<p class="workOptionText">Other</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="workAttach">Attach other files</div>
|
||||
<div id="workAttachmentHolder">
|
||||
{{#each work 'attach'}}
|
||||
{{#each work 'attachments'}}
|
||||
<a href={{link}}>{{filename}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#unless newWork}}
|
||||
<div id="workComments">
|
||||
<div>
|
||||
<h3>Comments</h3>
|
||||
<textarea id="workComment" rows="4" cols="50"></textarea>
|
||||
</div>
|
||||
<div id="comment">
|
||||
{{#each work 'comments'}}
|
||||
{{> comment}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
{{#if newWork}}
|
||||
{{#if inRole}}
|
||||
<div id="workSubmit">Save</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,9 +137,19 @@
|
||||
<h4>Add Work</h4>
|
||||
</div>
|
||||
<div class="workHolder">
|
||||
<!-- {{#each myWork}}
|
||||
{{#each thisClassWork}}
|
||||
{{> classModeWork}}
|
||||
{{/each}} -->
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="classModeWork">
|
||||
<div class="workCard">
|
||||
<div class="cWorkType" style="background-color:{{typeColor}}"></div>
|
||||
<div class="cWorkCont">
|
||||
<p class="cWorkName">{{name}}</p>
|
||||
<span class="cWorkDate">{{dueDate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -63,12 +63,21 @@ Template.registerHelper('myClasses', () => {
|
||||
} else {
|
||||
var array = [];
|
||||
var courses = Meteor.user().profile.classes;
|
||||
|
||||
for(var i = 0; i < courses.length; i++) {
|
||||
array.push(classes.findOne({_id:courses[i]}));
|
||||
var thisWork = work.find({class:array[i]["_id"]}).fetch();
|
||||
|
||||
for(var j = 0; j < thisWork.length; j++) {
|
||||
thisWork[j].dueDate = getReadableDate(thisWork[j].dueDate);
|
||||
thisWork[j].typeColor = workColors[thisWork[j].type];
|
||||
}
|
||||
console.log(thisWork);
|
||||
array[i].thisClassWork = thisWork;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
Template.main.helpers({
|
||||
schoolName() {
|
||||
@ -171,8 +180,21 @@ Template.main.helpers({
|
||||
return workColors.type;
|
||||
}
|
||||
},
|
||||
cWorkColor(type) {
|
||||
return workColors["type"];
|
||||
},
|
||||
newWork() {
|
||||
return Session.get("newWork");
|
||||
},
|
||||
inRole() {
|
||||
if(Session.get("newWork")) {
|
||||
return true;
|
||||
} else {
|
||||
if(Meteor.userId() === work.findOne({_id: Session.get("workId")}).creator ||
|
||||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
|
||||
classes.findOne({_id: work.findOne({_id: Session.get("workId")}).class}).moderators.indexOf(Meteor.userId()) !== -1
|
||||
) return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -244,7 +266,7 @@ Template.main.events({
|
||||
if (event.target.id !== sessval &&
|
||||
event.target.id !== sessval + "a" &&
|
||||
!Session.equals("modifying", null) &&
|
||||
!event.target.parentNode.className.includes("profOptions")) {
|
||||
!event.target.parentNode.className.includes("workOptions")) {
|
||||
closeInput(sessval);
|
||||
}
|
||||
if (!event.target.className.includes("radio") &&
|
||||
@ -262,12 +284,17 @@ Template.main.events({
|
||||
}
|
||||
},
|
||||
'click .creWork' (event) {
|
||||
if(event.target.className !== "creWork") {
|
||||
var attr = event.target.parentNode.getAttribute("classid");
|
||||
} else {
|
||||
var attr = event.target.getAttribute("classid");
|
||||
}
|
||||
openDivFade(document.getElementsByClassName("overlay")[0]);
|
||||
Session.set("newWork", true);
|
||||
Session.set("currentWork",
|
||||
{
|
||||
name:"Name | Click here to edit...",
|
||||
class:event.target.getAttribute("classid"),
|
||||
class:attr,
|
||||
dueDate:"Click here to edit...",
|
||||
description:"Click here to edit...",
|
||||
type:"Click here to edit..."
|
||||
@ -283,14 +310,21 @@ Template.main.events({
|
||||
ele.style.display = "none";
|
||||
var input = document.createElement("input");
|
||||
|
||||
if (ele.getAttribute("type") !== null) {
|
||||
input.type = ele.getAttribute("type");
|
||||
var typ = ele.getAttribute("type")
|
||||
if (typ === "textarea") {
|
||||
input = document.createElement("textarea");
|
||||
input.style.height = 3 * dim.height.toString() + "px";
|
||||
input.rows = "4";
|
||||
} else if (typ !== null) {
|
||||
input.type = typ;
|
||||
input.style.height = 0.9 * dim.height.toString() + "px";
|
||||
} else {
|
||||
input.type = "text";
|
||||
input.typ = "text";
|
||||
input.style.height = 0.9 * dim.height.toString() + "px";
|
||||
}
|
||||
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";
|
||||
@ -316,9 +350,38 @@ Template.main.events({
|
||||
ele.parentNode.appendChild(span);
|
||||
}
|
||||
},
|
||||
'click .radio' (event) {
|
||||
var op = event.target;
|
||||
Session.set("radioDiv", op.getAttribute("op"));
|
||||
Session.set("radioOffset", op.getAttribute("opc"));
|
||||
try {
|
||||
for (var i = 0; i < document.getElementsByClassName("workOptions").length; i++) {
|
||||
var curr = document.getElementsByClassName("workOptions")[i];
|
||||
if (Session.get("radioDiv") !== i.toString()) {
|
||||
closeDivFade(document.getElementsByClassName("workOptions")[i]);
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
openDivFade(document.getElementsByClassName("workOptions")[op.getAttribute("op")]);
|
||||
},
|
||||
'click .workOptions p' (event) {
|
||||
var sessval = Session.get("modifying");
|
||||
var p = event.target;
|
||||
var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset")));
|
||||
var input = document.getElementsByClassName("op")[opnum];
|
||||
input.value = p.childNodes[0].nodeValue;
|
||||
try {
|
||||
closeInput(sessval);
|
||||
} catch (err) {}
|
||||
|
||||
closeDivFade(p.parentNode);
|
||||
input.focus();
|
||||
Session.set("radioDiv", null);
|
||||
Session.set("radioOffset", null);
|
||||
},
|
||||
'keydown' (event) {
|
||||
var sessval = Session.get("modifying");
|
||||
if (event.keyCode == 13) {
|
||||
if (event.keyCode == 13 && sessval != "workDesc") {
|
||||
try {
|
||||
closeInput(sessval);
|
||||
} catch (err) {}
|
||||
@ -344,15 +407,23 @@ Template.main.events({
|
||||
}
|
||||
},
|
||||
'click #workSubmit' () {
|
||||
Session.set("serverData",getHomeworkFormData());
|
||||
data = getHomeworkFormData();
|
||||
if(data === null) return;
|
||||
console.log(data);
|
||||
Session.set("serverData",data);
|
||||
if(Session.get("newWork")) {
|
||||
sendData("editWork");
|
||||
} else {
|
||||
sendData("createWork");
|
||||
} else {
|
||||
sendData("editWork");
|
||||
}
|
||||
Session.set("newWork",null);
|
||||
Session.set("currentWork",null);
|
||||
}
|
||||
closeDivFade(document.getElementsByClassName("overlay")[0]);
|
||||
Session.set("currentWork", null);
|
||||
},
|
||||
'focus .op' (event) {
|
||||
event.target.click();
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
function openDivFade(div) {
|
||||
@ -377,6 +448,7 @@ function sendData(funcName) {
|
||||
function closeInput(sessval) {
|
||||
var input = document.getElementById(sessval + "a");
|
||||
var span = document.getElementById(sessval);
|
||||
span.style.color = "#8C8C8C";
|
||||
input.parentNode.removeChild(input);
|
||||
try {
|
||||
var restrict = document.getElementById("restrict");
|
||||
@ -389,17 +461,44 @@ function closeInput(sessval) {
|
||||
}
|
||||
span.style.display = "initial";
|
||||
Session.set("modifying", null);
|
||||
if(Session.get("newWork")) {
|
||||
if(!Session.get("newWork")) {
|
||||
Session.set("serverData",getHomeworkFormData());
|
||||
sendData("editProfile");
|
||||
sendData("editWork");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getHomeworkFormData() {
|
||||
return;
|
||||
var inputs = document.getElementsByClassName("req");
|
||||
var stop;
|
||||
for(var i = 0; i < inputs.length; i++) {
|
||||
var value = inputs[i].childNodes[0].nodeValue;
|
||||
if(i === 2) {
|
||||
if(Date.parse(inputs[i]) === NaN) { // Implement moment.
|
||||
value = "Invalid date";
|
||||
stop = true;
|
||||
}
|
||||
} else {
|
||||
if(value.includes("Click here to edit")) {
|
||||
value = "Missing field";
|
||||
inputs[i].style.color = "#FF1A1A";
|
||||
stop = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(stop) return null;
|
||||
|
||||
var data = Session.get("currentWork");
|
||||
data.name = document.getElementById("workName").childNodes[0].nodeValue;
|
||||
data.dueDate = new Date(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);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function clearHomeworkForm() {
|
||||
|
||||
function getReadableDate(date) {
|
||||
var days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
|
||||
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
|
||||
return days[date.getDay()]+", "+months[date.getMonth()]+" "+date.getDate();
|
||||
}
|
||||
@ -305,7 +305,7 @@ Template.profile.events({
|
||||
'click .profOptions p' (event) {
|
||||
var sessval = Session.get("modifying");
|
||||
var p = event.target;
|
||||
var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString();
|
||||
var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
|
||||
var input = document.getElementsByClassName("op")[opnum];
|
||||
input.value = p.childNodes[0].nodeValue;
|
||||
try {
|
||||
|
||||
@ -166,13 +166,13 @@ Meteor.methods({
|
||||
var found = classes.findOne({
|
||||
_id: input.class
|
||||
});
|
||||
console.log(input);
|
||||
|
||||
if (Meteor.user() !== null &&
|
||||
found !== null &&
|
||||
Meteor.user().profile.classes.indexOf(input.class) !== -1 &&
|
||||
found.banned.indexOf(Meteor.userId()) === -1 &&
|
||||
found.blockEdit.indexOf(Meteor.userId()) === -1 &&
|
||||
input.dueDate.getTime() >= ref && worktype.indexOf(type) != -1 &&
|
||||
input.dueDate.getTime() >= ref && worktype.indexOf(input.type) != -1 &&
|
||||
input.name.length <= 50 && input.description.length <= 150) {
|
||||
|
||||
input.confirmations = [Meteor.userId()];
|
||||
@ -201,7 +201,7 @@ Meteor.methods({
|
||||
$set: change
|
||||
});
|
||||
} else if (authorized.indexOf(Meteor.userId()) != -1) {
|
||||
if (change.name.length <= 50 && change.description.length <= 150 && worktype.indexOf(type) != -1) {
|
||||
if (change.name.length <= 50 && change.description.length <= 150 && worktype.indexOf(change.type) != -1) {
|
||||
Meteor.update({
|
||||
_id: change._id
|
||||
}, {
|
||||
@ -219,7 +219,7 @@ Meteor.methods({
|
||||
} else if (Meteor.userId() === work.findOne({
|
||||
_id: change._id
|
||||
}).creator) {
|
||||
if (change.name.length <= 50 && worktype.indexOf(type) != -1 && input.dueDate.getTime() >= ref) {
|
||||
if (change.name.length <= 50 && worktype.indexOf(change.type) != -1 && input.dueDate.getTime() >= ref) {
|
||||
Meteor.update({
|
||||
_id: change._id
|
||||
}, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user