kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Profile page functions correctly, display mostly complete, minor fixes

Browse Source
This commit is contained in:
Kenneth Jao 2016-08-11 18:28:29 -04:00
parent e3444a8fc6
commit f8f36f2616
5 changed files with 304 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
hourglass/client/main/main.css
View File

@ -38,6 +38,38 @@ html {
user-select: none; user-select: none;
} }
::-webkit-input-placeholder {
font-size: 70%;
}
:-moz-placeholder {
font-size: 70%;
}
::-moz-placeholder {
font-size: 70%;
}
:-ms-input-placeholder {
font-size: 70%;
}
.formInvalid::-webkit-input-placeholder {
color: red;
}
.formInvalid:-moz-placeholder {
color: red;
}
.formInvalid::-moz-placeholder {
color: red;
}
.formInvalid:-ms-input-placeholder {
color: red;
}
body { body {
margin: 0; margin: 0;
} }

64
hourglass/client/profile/profile.css
View File

@ -15,6 +15,7 @@
font-size: 150%; font-size: 150%;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
margin-bottom: 1%;
} }
.profHea { .profHea {
@ -82,6 +83,8 @@
position: absolute; position: absolute;
display: none; display: none;
z-index: 5;
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease;
@ -94,6 +97,7 @@
font-size: 150%; font-size: 150%;
margin: 0; margin: 0;
padding: 20%; padding: 20%;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -144,8 +148,6 @@
} }
#profClassInfoHolder { #profClassInfoHolder {
-webkit-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease; -ms-transition: opacity 0.4s ease;
@ -231,6 +233,17 @@
overflow-y: scroll; overflow-y: scroll;
} }
.classHolder h3 {
font-style: italic;
font-weight: 200;
margin-left: 1%;
color: #999;
-webkit-filter :none;
filter: none;
}
.classBox { .classBox {
font-size: 150%; font-size: 150%;
width: 100%; width: 100%;
@ -273,10 +286,57 @@
width: 13%; width: 13%;
} }
#creRules {
position: absolute;
}
#create {
margin-top: 2.5%;
padding: 5%;
padding-top: 1%;
}
#create div {
margin: 2%;
margin-left: 11%;
margin-bottom: 5%;
display: inline-block;
}
.creInput {
font-size: 120%;
padding: 3%;
}
.creOp {
margin: 0 !important;
}
.-autocomplete-container { .-autocomplete-container {
margin: 0.5% 0 0 0 !important;
display: none; display: none;
} }
#creSubmit {
font-weight: 200;
font-size: 140%;
margin: 0 35% 0 35%;
padding: 2%;
background-color: rgba(0,0,0,0.25);
text-align: center;
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;
}
#creSubmit:hover {
background-color: rgba(0,0,0,0.15);
}
#restrict { #restrict {
font-size: 100%; font-size: 100%;
font-style: italic; font-style: italic;

54
hourglass/client/profile/profile.html
View File

@ -19,7 +19,7 @@
<div> <div>
<div> <div>
<p class="profTitle">Grade:</p> <p class="profTitle">Grade:</p>
<span class="change radio" op="0" re="readonly" id="grade">{{grade}}</span> <span class="change radio" opc="0" op="0" re="readonly" id="grade">{{grade}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions" style="background-color:{{divColor 'header'}}">
<p>9th</p> <p>9th</p>
@ -80,39 +80,51 @@
{{#each autocompleteClasses}} {{#each autocompleteClasses}}
{{> classDisplay}} {{> classDisplay}}
{{/each}} {{/each}}
{{#if notfound}}
<h3>No results found...</h3>
{{/if}}
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}
{{#if profClassTab "creClass"}} {{#if profClassTab "creClass"}}
<!-- <form id="create"> <div id="creRules"><p>Insert description and rules of create a class --Will style later--</p></div>
<p class="input">School:</p><br> <form id="create">
{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }} <div>
<p class="input">Hour:</p><br> <p class="profTitle">School:</p>
<input class="creInput" type="text" name="hour"><br> {{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
<p class="input">Teacher:</p><br> </div>
<div>
<p class="profTitle">Hour:</p>
<input class="creInput" type="text" name="hour">
</div>
<div>
<p class="profTitle">Teacher:</p>
{{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }} {{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
<p class="input">Class Name:</p><br> </div>
<input class="creInput" type="text" name="classname"><br> <div>
<p class="input">Privacy:</p><br> <p class="profTitle">Class Name:</p>
<div class="select"> <input class="creInput" type="text" name="classname">
<input class="creInputSel creInput" type="text" name="privacy" op="0" readonly><br> </div>
<div class="creOptions" style="background-color:{{divColor 'header'}}"> <div>
<p class="profTitle">Privacy:</p>
<input class="creInput radio op" type="text" name="privacy" opc="1" op="1" readonly>
<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
<p>Public</p> <p>Public</p>
<p>Private</p> <p>Private</p>
</div> </div>
</div> </div>
<p class="input">Category:</p><br> <div>
<div class="select"> <p class="profTitle">Category:</p>
<input class="creInputSel creInput" type="text" name="category" op="1" readonly><br> <input class="creInput radio op" type="text" name="category" opc="1" op="2" readonly>
<div class="creOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
<p>Class</p> <p>Class</p>
<p>Club</p> <p>Club</p>
<p>Other</p> <p>Other</p>
</div> </div>
</div> </div>
<div class="creSubmit">Submit Request</div> <h3 id="creSubmit" style="margin-left:{{submitMargin}}">Submit Request</h3>
</form> --> </form>
{{/if}} {{/if}}
</div> </div>
</div> </div>

198
hourglass/client/profile/profile.js
View File

@ -82,15 +82,15 @@ Template.profile.helpers({
avatar() { avatar() {
var dim = window.innerWidth * 1600/1920 * .16; var dim = window.innerWidth * 1600/1920 * .16;
if(Meteor.user().profile.avatar !== undefined) { if(Meteor.user().profile.avatar !== undefined) {
var pic = Meteor.users().profile.avatar; var pic = "\'"+Meteor.user().profile.avatar+"\'";
} else { } else {
var pic = "defaultAvatars/"+(Math.floor(Math.random() * (10 - 1)) + 1).toString()+".png"; var pic = "defaultAvatars/"+(Math.floor(Math.random() * (11 - 1)) + 1).toString()+".png";
} }
return "background-image:url("+pic+");background-size:"+dim.toString()+"px "+dim.toString()+"px"; return "background-image:url("+pic+");background-size:"+dim.toString()+"px "+dim.toString()+"px";
}, },
avatarDim() { avatarDim() {
var dim = window.innerWidth * 1600/1920 * .16; var dim = window.innerWidth * 1600/1920 * .16;
return "height:"+dim.toString()+"px;width:"+dim.toString()+"px;top:"+.43*window.innerHeight.toString()+"px"; return "height:"+dim.toString()+"px;width:"+dim.toString()+"px;top:"+.43*window.innerHeight.toString()+"px;";
}, },
username() { username() {
return Meteor.user().profile.name; return Meteor.user().profile.name;
@ -146,7 +146,14 @@ Template.profile.helpers({
return Session.get("autocompleteDivs"); return Session.get("autocompleteDivs");
}, },
myclasses() { myclasses() {
return Meteor.user().profile.classes; if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) {
return [];
} else {
return Meteor.user().profile.classes;
}
},
notfound() {
return Session.get("notfound");
}, },
confirmText() { confirmText() {
return Session.get("confirmText"); return Session.get("confirmText");
@ -154,26 +161,17 @@ Template.profile.helpers({
}) })
Template.profile.events({ Template.profile.events({
'click #profile input' (event) {
var opened = Session.get("profradioDiv");
if(opened !== null && opened !== event.target.getAttribute("op")) {
closeDivFade(document.getElementsByClassName("creInputSel")[opened].parentNode.childNodes[4]);
}d
},
'click .profInputSel' (event) {
Session.set("profradioDiv", event.target.getAttribute("op"));
openDivFade(event.target.parentNode.childNodes[4]);
},
'click profOptions p' (event) { 'click profOptions p' (event) {
var p = event.target; var p = event.target;
p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue; p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode); closeDivFade(p.parentNode);
Session.set("radioDiv",null); Session.set("radioDiv",null);
Session.set("radioOffset",null);
}, },
'click .change' (event) { 'click .change' (event) {
var ele = event.target; var ele = event.target;
var sessval = Session.get("modifying"); var sessval = Session.get("modifying");
if(ele.id !== sessval && sessval != null) closeInput(sessval); if(ele.id !== sessval && sessval !== null) closeInput(sessval);
Session.set("modifying", ele.id); Session.set("modifying", ele.id);
var dim = ele.getBoundingClientRect(); var dim = ele.getBoundingClientRect();
@ -191,9 +189,11 @@ Template.profile.events({
input.style.width = "70%"; input.style.width = "70%";
input.style.padding = "0.1%"; input.style.padding = "0.1%";
input.id = ele.id+"a"; input.id = ele.id+"a";
input.setAttribute("opc",ele.getAttribute("opc"));
ele.parentNode.appendChild(input); ele.parentNode.appendChild(input);
if(ele.getAttribute("re") == "readonly") { if(ele.getAttribute("re") == "readonly") {
input.readOnly = true; input.readOnly = true;
input.className += " op";
input.style.cursor = "pointer"; input.style.cursor = "pointer";
} else { } else {
input.select(); input.select();
@ -219,10 +219,18 @@ Template.profile.events({
!event.target.parentNode.className.includes("profOptions")) { !event.target.parentNode.className.includes("profOptions")) {
closeInput(sessval); closeInput(sessval);
} }
if(!event.target.className.includes("radio") && if(!event.target.className.includes("radio") &&
!Session.equals("radioDiv",null) && !Session.equals("radioDiv",null) &&
!event.target.parentNode.className.includes("profOptions")) { !event.target.parentNode.className.includes("profOptions") &&
closeDivFade(document.getElementsByClassName("profOptions")[Session.get("radioDiv")]); event.target.readOnly !== true) {
var opnum = (parseInt(Session.get("radioDiv"))-parseInt(Session.get("radioOffset"))).toString();
for(var i = 0; i < document.getElementsByClassName("profOptions").length; i++) {
try {
closeDivFade(document.getElementsByClassName("profOptions")[i]);
} catch(err) {}
}
Session.set("radioDiv",null);
Session.set("radioOffset",null);
} }
}, },
'keydown' (event) { 'keydown' (event) {
@ -232,37 +240,54 @@ Template.profile.events({
closeInput(sessval); closeInput(sessval);
} catch(err) {} } catch(err) {}
} }
if(sessval !== null && event.keyCode !== 13) {
var restrict = document.getElementById(sessval).getAttribute("restrict"); var restrict = document.getElementById(sessval).getAttribute("restrict");
if(restrict !== null) { if(restrict !== null) {
var num = parseInt(restrict)-event.target.value.length; var num = parseInt(restrict)-event.target.value.length;
var restext = document.getElementById("restrict"); var restext = document.getElementById("restrict");
if(num === 1) { if(num === 1) {
restext.childNodes[0].nodeValue = num.toString()+" character left"; restext.childNodes[0].nodeValue = num.toString()+" character left";
restext.style.setProperty("color","#999","important"); restext.style.setProperty("color","#999","important");
} else if(num <= 0) { } else if(num <= 0) {
var input = document.getElementById(sessval+"a"); var input = document.getElementById(sessval+"a");
input.value = input.value.substring(0,parseInt(restrict)); input.value = input.value.substring(0,parseInt(restrict));
restext.childNodes[0].nodeValue = "0 characters left"; restext.childNodes[0].nodeValue = "0 characters left";
restext.style.setProperty("color","#FF1A1A","important"); restext.style.setProperty("color","#FF1A1A","important");
} else { } else {
restext.childNodes[0].nodeValue = num.toString()+" characters left"; restext.childNodes[0].nodeValue = num.toString()+" characters left";
restext.style.setProperty("color","#999","important"); restext.style.setProperty("color","#999","important");
}
} }
} }
}, },
'click .radio' (event) { 'click .radio' (event) {
Session.set("radioDiv", event.target.getAttribute("op")); var op = event.target;
openDivFade(event.target.parentNode.parentNode.childNodes[3]); Session.set("radioDiv", op.getAttribute("op"));
Session.set("radioOffset", op.getAttribute("opc"));
try {
for(var i = 0; i < document.getElementsByClassName("profOptions").length; i++) {
var curr = document.getElementsByClassName("profOptions")[i];
if(Session.get("radioDiv") !== i.toString()) {
closeDivFade(document.getElementsByClassName("profOptions")[i]);
}
}
} catch(err) {}
openDivFade(document.getElementsByClassName("profOptions")[op.getAttribute("op")]);
}, },
'click .profOptions p' (event) { 'click .profOptions p' (event) {
var sessval = Session.get("modifying"); var sessval = Session.get("modifying");
var p = event.target; var p = event.target;
var input = p.parentNode.parentNode.childNodes[1].childNodes[5]; var opnum = (parseInt(Session.get("radioDiv"))-parseInt(Session.get("radioOffset"))).toString();
var input = document.getElementsByClassName("op")[opnum];
input.value = p.childNodes[0].nodeValue; input.value = p.childNodes[0].nodeValue;
closeInput(sessval); try{
closeInput(sessval);
} catch(err) {}
closeDivFade(p.parentNode); closeDivFade(p.parentNode);
input.focus(); input.focus();
Session.set("radioDiv",null) Session.set("radioDiv",null);
Session.set("radioOffset",null);
}, },
'click .addClass' () { 'click .addClass' () {
        var functionHolder = document.getElementById("profClassInfoHolder")         var functionHolder = document.getElementById("profClassInfoHolder")
@ -300,9 +325,15 @@ Template.profile.events({
} else { } else {
Session.set("notsearching",false); Session.set("notsearching",false);
} }
divs = []; Session.set("autocompleteDivs",null);
var divs = [];
try { try {
var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes; var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
if(items.length === 0) {
Session.set("notfound",true);
} else {
Session.set("notfound",false);
}
for(var i = 2; i < items.length; i+=3) { for(var i = 2; i < items.length; i+=3) {
var item = items[i].childNodes[3]; var item = items[i].childNodes[3];
divs.push({ divs.push({
@ -317,14 +348,21 @@ Template.profile.events({
} catch(err) {} } catch(err) {}
}, },
'click .classBox' (event) { 'click .classBox' (event) {
if(event.target.getAttribute("classid") === null) return; if(event.target.id === "label") return;
if(event.target.className !== "classBox") {
var attribute = event.target.parentNode.getAttribute("classid");
} else {
var attribute = event.target.getAttribute("classid");
}
var data = [attribute,""];
Session.set("serverData",data);
Session.set("confirm","joinClass");
Session.set("confirmText","Join class?");
openDivFade(document.getElementsByClassName("overlay")[0]); openDivFade(document.getElementsByClassName("overlay")[0]);
setTimeout(function() { setTimeout(function() {
document.getElementsByClassName("overlay")[0].style.opacity = "1"; document.getElementsByClassName("overlay")[0].style.opacity = "1";
}, 200); }, 200);
Session.set("serverData",[event.target.getAttribute("classid"),""]);
Session.set("confirm","joinClass");
Session.set("confirmText","Join class?");
}, },
'click .fa-check-circle-o' () { 'click .fa-check-circle-o' () {
sendData(Session.get("confirm")); sendData(Session.get("confirm"));
@ -334,19 +372,33 @@ Template.profile.events({
}, },
'click .fa-times-circle-o' () { 'click .fa-times-circle-o' () {
closeDivFade(document.getElementsByClassName("overlay")[0]); closeDivFade(document.getElementsByClassName("overlay")[0]);
closeDivFade(document.getElementById("functionHolder"));
Session.set("serverData",null); Session.set("serverData",null);
Session.set("confirm",null); Session.set("confirm",null);
}, },
'click #save' () { 'click #save' () {
Session.set("serverData",getProfileData());
Session.set("confirm","editProfile");
Session.set("confirmText", "Save new profile settings?");
openDivFade(document.getElementsByClassName("overlay")[0]); openDivFade(document.getElementsByClassName("overlay")[0]);
setTimeout(function() { setTimeout(function() {
document.getElementsByClassName("overlay")[0].style.opacity = "1"; document.getElementsByClassName("overlay")[0].style.opacity = "1";
}, 200); }, 200);
getProfileData(); },
Session.set("serverData",getProfileData()); 'click #creSubmit' () {
Session.set("confirm","editProfile"); var data = getCreateFormData();
Session.set("confirmText", "Save new profile settings?"); if(data == null) return;
Session.set("serverData",data);
Session.set("confirm","createClass");
Session.set("confirmText", "Submit request?");
openDivFade(document.getElementsByClassName("overlay")[0]);
setTimeout(function() {
document.getElementsByClassName("overlay")[0].style.opacity = "1";
}, 200);
},
'focus .op' (event) {
event.target.click();
} }
}) })
@ -387,7 +439,55 @@ function sendData(funcName) {
} }
function getProfileData() { function getProfileData() {
var desc = document.getElementById("motd").childNodes[0].nodeValue; var description = document.getElementById("motd").childNodes[0].nodeValue;
var school = document.getElementById("school").childNodes[0].nodeValue; var school = document.getElementById("school").childNodes[0].nodeValue;
var grade = document.getElementById("grade").childNodes[0].nodeValue; var gradein = document.getElementById("grade").childNodes[0].nodeValue;
var grade = parseInt(gradein.substring(gradein.length-2,gradein));
var avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")","").replace("url(","").replace("\"","").replace("\"","");
var banner = document.getElementById("profBanner").style.backgroundImage.replace(")","").replace("url(","").replace("\"","").replace("\"","");
return {
school: school,
grade: grade,
description: description,
avatar: avatar,
banner: banner
};
}
function getCreateFormData() {
var stop;
var form = document.getElementsByClassName("creInput");
for(var i = 0; i < form.length; i++) {
if(form[i].value === "") {
form[i].focus();
form[i].placeholder = "Missing field";
form[i].className += " formInvalid";
stop = true;
} else {
form[i].className = form[i].className.replace(" formInvalid","");
}
}
if(stop) return null;
var school = form[0].value;
var hour = form[1].value;
var teacher = form[2].value;
var name = form[3].value;
if(form[4].value == "public") {
var privacy = false;
} else {
var privacy = true;
}
var category = form[5].value;
return {
school: school,
hour: hour,
teacher: teacher,
name: name,
privacy: privacy,
category: category,
status: false,
code: ""
};
} }

42
hourglass/server/main.js
View File

@ -91,16 +91,15 @@ Meteor.methods({
}, },
'editProfile': function(change) { 'editProfile': function(change) {
current = Meteor.user().profile; current = Meteor.user().profile;
current.school = change[0]; current.school = change.school;
current.grade = change[1]; current.grade = change.grade;
current.description = change[2]; current.description = change.description;
current.avatar = change[3]; current.avatar = change.avatar;
current.banner = change[4]; current.banner = change.banner;
if (schools.findOne({name:current.school}) != null && if (schools.findOne({name:current.school}) != null &&
Number.isInteger(current.grade) && Number.isInteger(current.grade) &&
current.grade >= 9 && current.grade >= 9 && current.grade <= 12 &&
current.grade <= 12 &&
current.description.length <= 50) { current.description.length <= 50) {
Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}}); Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}});
@ -109,22 +108,30 @@ Meteor.methods({
return 0; return 0;
} }
}, },
'joinClass': function(change, pass) { 'joinClass': function(input) {
found = classes.findOne({_id: change, status: true}); change = input[0];
pass = input[1];
if(Meteor.user().profile.classes === undefined) {
curr = Meteor.user().profile;
curr.classes = [];
Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: curr}})
}
prof = Meteor.user().profile;
found = classes.findOne({_id: change, status: true});
if (Meteor.user() != null && if (Meteor.user() != null &&
found != null && found != null &&
pass === found.code && pass === found.code &&
found.banned.indexOf(Meteor.userId()) === -1 && !found.banned.includes(Meteor.userId()) &&
Meteor.user().profile.classes.indexOf(change) === -1) { !prof.classes.includes(change)) {
current = Meteor.user().profile; current = Meteor.user().profile;
current.classes.append(change); current.classes.append(change);
Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}}); Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}});
return 1; return 1;
} else { } else {
return 0; return 0;
} }
}, },
'leaveClass': function(change) { 'leaveClass': function(change) {
if (Meteor.user() != null) { if (Meteor.user() != null) {
@ -142,4 +149,11 @@ Meteor.methods({
} }
} }
}); });
function has(array, has) {
for(var i = 0; i < array.length; i++) {
if(array[i] === has) return true;
}
return false;
}