profile page
This commit is contained in:
Kenneth Jao
parent
5026ead717
commit
c80dc3e325
@ -76,6 +76,10 @@ body {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: Raleway !important;
|
||||
}
|
||||
|
||||
.noScroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -56,11 +56,6 @@ Template.main.rendered = function() {
|
||||
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
|
||||
};
|
||||
|
||||
Template.profile.rendered = function() {
|
||||
Accounts._loginButtonsSession.set('dropdownVisible', true);
|
||||
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
|
||||
};
|
||||
|
||||
// Global Helpers
|
||||
|
||||
Template.registerHelper('adminPage', () => {
|
||||
@ -968,6 +963,26 @@ function formReadable(input, val) { // Makes work information readable by users.
|
||||
}
|
||||
}
|
||||
|
||||
checkComplete = function(required, inputs) {
|
||||
var values = {};
|
||||
var no = [];
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
var val = inputs[i].value;
|
||||
var where = inputs[i].getAttribute("form");
|
||||
if (val === "" && _.contains(required, where)) {
|
||||
no.push(where);
|
||||
}
|
||||
values[where] = val;
|
||||
}
|
||||
if (no.length > 0) { // Check missing fields.
|
||||
return [false,no.reduce(function(a, b) {
|
||||
return (b === no[no.length - 1]) ? a + ((no.length === 2) ? " and " : ", and ") + b : a + ", " + b;
|
||||
}), values];
|
||||
} else {
|
||||
return [true,"", values];
|
||||
}
|
||||
}
|
||||
|
||||
startDragula = function() {
|
||||
dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')], {
|
||||
moves: function(el, container, handle) {
|
||||
|
||||
@ -503,23 +503,11 @@ Template.createClass.helpers({
|
||||
Template.createClass.events({
|
||||
'click #creSubmit' () {
|
||||
var inputs = document.getElementsByClassName("creInput");
|
||||
var values = {};
|
||||
var required = ["school", "name", "privacy", "category"];
|
||||
var no = [];
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
var val = inputs[i].value;
|
||||
var where = inputs[i].getAttribute("form");
|
||||
if (val === "" && _.contains(required, where)) {
|
||||
no.push(where);
|
||||
}
|
||||
values[where] = val;
|
||||
}
|
||||
console.log(values);
|
||||
console.log(no);
|
||||
if (no.length > 0) { // Check missing fields.
|
||||
sAlert.error("Missing " + no.reduce(function(a, b) {
|
||||
return (b === no[no.length - 1]) ? a + ", and " + b : a + ", " + b;
|
||||
}), {
|
||||
var alert = checkComplete(required, inputs);
|
||||
var values = alert[2];
|
||||
if (!alert[0]) { // Check missing fields.
|
||||
sAlert.error("Missing " + alert[1], {
|
||||
effect: 'stackslide',
|
||||
position: 'top',
|
||||
timeout: 3000
|
||||
|
||||
@ -3,14 +3,45 @@
|
||||
height: 100%;
|
||||
|
||||
background-color: #282933;
|
||||
color: #FCF0F0 !important;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#profPageWrapper input {
|
||||
color: #FCF0F0 !important;
|
||||
}
|
||||
|
||||
#profPageWrapper .optionText {
|
||||
background-color: #282933 !important;
|
||||
}
|
||||
|
||||
#profPageWrapper #classSearch {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
border: 0;
|
||||
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-ms-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#profPageWrapper #classSearch:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
#profPageWrapper .classBox:not(:first-child) {
|
||||
border: 1px solid #FCF0F0 !important;
|
||||
}
|
||||
|
||||
#basicInfo {
|
||||
margin-top: 10%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
#newUserWrapper {
|
||||
@ -39,9 +70,11 @@
|
||||
|
||||
#basicNext {
|
||||
padding: 2%;
|
||||
border: 1px solid #FCF0F0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
@ -54,3 +87,58 @@
|
||||
#basicNext:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#backArrow {
|
||||
margin: auto;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
position: relative;
|
||||
top: 5%;
|
||||
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-ms-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#backArrow i {
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
#backArrow:hover {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
#forwardArrow {
|
||||
margin: auto;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
position: relative;
|
||||
top: 85%;
|
||||
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-ms-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#forwardArrow:hover {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
#enrollInfo {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 150%;
|
||||
}
|
||||
|
||||
#enrollUserWrapper {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
padding: 1%;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<template name="profile">
|
||||
{{> sAlert}}
|
||||
<div id="profPageWrapper">
|
||||
<div id="backArrow" class="circleIcon moveArrow" style="display:{{showArrow 'back'}}">
|
||||
<i class="fa fa-chevron-up" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="basicInfo">
|
||||
<div id="newUserWrapper">
|
||||
<div class="formDiv">
|
||||
<p class="opTitle">**School:</p>
|
||||
<input id="school" class="clickModify dropdown" type="text" form="privacy" placeholder=" Click here to edit..." readonly>
|
||||
<input id="school" class="basicInfoField clickModify dropdown" type="text" form="school" placeholder=" Click here to edit..." readonly>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'school'}}
|
||||
{{> option}}
|
||||
@ -14,20 +17,54 @@
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
<p class="opTitle">**Grade:</p>
|
||||
<input id="grade" class="clickModify dropdown" type="text" form="privacy" placeholder="Click here to edit..." readonly>
|
||||
<input id="grade" class="basicInfoField clickModify dropdown" type="text" form="grade" placeholder="Click here to edit..." readonly>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'grade'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="basicNext" style="border:1px solid {{divColor 'textColor'}}">Continue</h3>
|
||||
<h3 id="basicNext">Continue</h3>
|
||||
</div>
|
||||
</div>
|
||||
<button id="schoolnext" {{schoolgradenext}}>Next</button>
|
||||
<div id="enrollInfo">
|
||||
<div id="enrollUserWrapper">
|
||||
<div id="joinTop">
|
||||
<i class="fa fa-search" aria-hidden="true"></i>
|
||||
{{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
|
||||
<!-- <h4 id="private">Join Private Class</h4>
|
||||
<input id="privateCode" placeholder="Enter code here..."> -->
|
||||
</div>
|
||||
<div id="settingClassWrapper">
|
||||
<div id="label" class="classBox">
|
||||
<span class="name classText">Class Name</span>
|
||||
<span class="teacher classText">Teacher</span>
|
||||
<span class="hour classText">Hour</span>
|
||||
<span class="subscriptions classText">Members</span>
|
||||
</div>
|
||||
{{#if notsearching}}
|
||||
{{#each classes}}
|
||||
{{> classDisplay}}
|
||||
{{/each}}
|
||||
{{#if noclass}}
|
||||
<h3>No results found...</h3>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#each autocompleteClasses}}
|
||||
{{> classDisplay}}
|
||||
{{/each}}
|
||||
{{#if notfound}}
|
||||
<h3>No results found...</h3>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="classsection" style="display:none;">
|
||||
<!-- CLASS ENROLLMENT + CREATE -->
|
||||
</div>
|
||||
<button>Finish</button>
|
||||
<div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
|
||||
<i class="fa fa-chevron-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,6 +3,13 @@ import {
|
||||
Template
|
||||
} from 'meteor/templating';
|
||||
|
||||
|
||||
Session.set("sections", [0,0]) // [Completed, Viewing]
|
||||
Session.set("profile", {});
|
||||
Session.set("notsearching", true); // If user isn't searching
|
||||
Session.set("noclass", null); // If user doesn't have classes.
|
||||
Session.set("notfound", null); // If no results for autocomplete.
|
||||
|
||||
Template.profile.helpers({
|
||||
schoolgradenext() {
|
||||
if(_.contains([null, undefined, ""], Meteor.user().profile.school ||
|
||||
@ -11,6 +18,88 @@ Template.profile.helpers({
|
||||
} else {
|
||||
return "disabled";
|
||||
}
|
||||
},
|
||||
showArrow(type) {
|
||||
var order = [
|
||||
{"back":false, "forward":true},
|
||||
{"back":true, "forward":true},
|
||||
{"back":true, "forward":false}
|
||||
];
|
||||
var section = Session.get("sections");
|
||||
if(type === "forward") {
|
||||
return (section[1]+1 <= section[0] && order[section[1]][type]) ? "block":"none";
|
||||
} else {
|
||||
return (order[section[1]][type]) ? "block":"none";
|
||||
}
|
||||
},
|
||||
classes() {
|
||||
var array = classes.find({
|
||||
status: {
|
||||
$eq: true
|
||||
},
|
||||
privacy: {
|
||||
$eq: false
|
||||
},
|
||||
school: {
|
||||
$eq: Session.get("profile").school
|
||||
}
|
||||
}, {
|
||||
sort: {
|
||||
subscribers: -1
|
||||
}
|
||||
}, {
|
||||
limit: 20
|
||||
}).fetch();
|
||||
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
array[i].join = true;
|
||||
array[i].subscribers = array[i].subscribers.length;
|
||||
array[i].teachershort = array[i].teacher.split(" ").slice(1).reduce(function(a, b) {
|
||||
return a + " " + b;
|
||||
});
|
||||
}
|
||||
if (array.length === 0) {
|
||||
Session.set("noclass", true);
|
||||
} else {
|
||||
Session.set("noclass", false);
|
||||
}
|
||||
return array;
|
||||
},
|
||||
classSettings() {
|
||||
return {
|
||||
position: "bottom",
|
||||
limit: 10,
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: classes,
|
||||
template: Template.classDisplay,
|
||||
filter: {
|
||||
privacy: false,
|
||||
status: true
|
||||
},
|
||||
selector: (match) => {
|
||||
regex = new RegExp(match, 'i');
|
||||
return {
|
||||
$or: [{
|
||||
'name': regex
|
||||
}, {
|
||||
'teacher': regex
|
||||
}, {
|
||||
'hour': regex
|
||||
}]
|
||||
};
|
||||
}
|
||||
}]
|
||||
};
|
||||
},
|
||||
notsearching() { // Tells whether user is using the searchbox
|
||||
return Session.get("notsearching");
|
||||
},
|
||||
autocompleteClasses() { // Returns current auto-completes for classes
|
||||
return Session.get("autocompleteDivs");
|
||||
},
|
||||
notfound() { // Returns if autocomplete has no results.
|
||||
return Session.get("notfound");
|
||||
}
|
||||
});
|
||||
|
||||
@ -19,16 +108,37 @@ Template.profile.events({
|
||||
var e = event.target.className;
|
||||
|
||||
if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
|
||||
console.log("hia");
|
||||
if (!(e.includes("optionHolder") || e.includes("optionText"))) {
|
||||
console.log("hi");
|
||||
toggleOptionMenu(false, modifyingInput);
|
||||
modifyingInput = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
'click #schoolnext' () {
|
||||
// Animation to display class section
|
||||
'click #basicNext' () {
|
||||
var inputs = document.getElementsByClassName("basicInfoField");
|
||||
var required = ["school", "grade"];
|
||||
var alert = checkComplete(required, inputs);
|
||||
var values = alert[2];
|
||||
if(!alert[0]) {
|
||||
sAlert.error("Missing " + alert[1], {
|
||||
effect: 'stackslide',
|
||||
position: 'top',
|
||||
timeout: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
var profile = Session.get("profile");
|
||||
profile.school = values["school"];
|
||||
profile.grade = values["grade"];
|
||||
Session.set("profile", profile);
|
||||
Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]])
|
||||
slideToField(1);
|
||||
},
|
||||
'click #backArrow' () {
|
||||
slideToField(Session.get("sections")[1]-1);
|
||||
},
|
||||
'click #forwardArrow' () {
|
||||
slideToField(Session.get("sections")[1]+1);
|
||||
},
|
||||
// HANDLING INPUT CHANGING
|
||||
'focus .clickModify' (event) {
|
||||
@ -99,4 +209,51 @@ Template.profile.events({
|
||||
toggleOptionMenu(false, modifyingInput);
|
||||
$(".selectedOption").removeClass("selectedOption");
|
||||
},
|
||||
'input #classSearch' (event) { // Auto-complete updater
|
||||
if (event.target.value.length === 0) {
|
||||
Session.set("notsearching", true);
|
||||
} else {
|
||||
Session.set("notsearching", false);
|
||||
}
|
||||
Session.set("autocompleteDivs", null);
|
||||
var divs = [];
|
||||
try {
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
|
||||
if (items.length === 0) { // If no results.
|
||||
Session.set("notfound", true);
|
||||
} else {
|
||||
Session.set("notfound", false);
|
||||
}
|
||||
for (var i = 2; i < items.length; i += 3) { // Iterate through autocomplete div.
|
||||
var item = items[i].childNodes[3];
|
||||
if (Meteor.user().profile.classes.indexOf(item.getAttribute("classid")) !== -1) continue;
|
||||
divs.push({
|
||||
name: item.childNodes[1].childNodes[0].nodeValue,
|
||||
teacher: item.childNodes[3].childNodes[0].nodeValue,
|
||||
hour: item.childNodes[5].childNodes[0].nodeValue,
|
||||
subscribers: Math.floor(item.childNodes[7].childNodes[0].nodeValue.replace(",", "").length / 17),
|
||||
_id: item.getAttribute("classid")
|
||||
});
|
||||
}
|
||||
Session.set("autocompleteDivs", divs.sort(function(a, b) {
|
||||
return b.subscribers - a.subscribers;
|
||||
}));
|
||||
} catch (err) {}
|
||||
},
|
||||
});
|
||||
|
||||
function slideToField(field) {
|
||||
var order = ["basicInfo", "enrollInfo"];
|
||||
$(".moveArrow").animate({"opacity":0})
|
||||
var viewing = Session.get("sections")[1]
|
||||
var move = (viewing-field < 0) ? "-50%" : "150%";
|
||||
$("#"+order[viewing]).animate({top: move});
|
||||
$("#"+order[field]).animate({
|
||||
top:"20%"
|
||||
},{
|
||||
complete: function() {
|
||||
Session.set("sections", [Session.get("sections")[0],field]);
|
||||
$(".moveArrow").animate({"opacity":1});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user