More of sign-up page
This commit is contained in:
Kenneth Jao
parent
c80dc3e325
commit
1a741af421
@ -485,6 +485,14 @@
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
<template name="classAutoList">
|
||||
<span class="name classText">{{name}}</span>
|
||||
<span class="teacher classText">{{teacher}}</span>
|
||||
<span class="hour classText">{{hour}}</span>
|
||||
<span class="subscribers classText">{{subscribers}}</span>
|
||||
<span class="subscribers classText">{{_id}}</span>
|
||||
</template>
|
||||
|
||||
<template name="schoolList">
|
||||
{{name}}
|
||||
</template>
|
||||
|
||||
@ -367,7 +367,7 @@ Template.joinClass.helpers({
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: classes,
|
||||
template: Template.classDisplay,
|
||||
template: Template.classAutoList,
|
||||
filter: {
|
||||
privacy: false,
|
||||
status: true
|
||||
@ -421,27 +421,32 @@ Template.joinClass.events({
|
||||
Session.set("autocompleteDivs", null);
|
||||
var divs = [];
|
||||
try {
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
|
||||
if (items.length === 0) { // If no results.
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].children;
|
||||
if(items[0].tagName === "I") {
|
||||
Session.set("notfound", true);
|
||||
return;
|
||||
} else {
|
||||
items = items[0].children;
|
||||
for(var i = 0; i < items.length; i++) {
|
||||
var item = items[i].children;
|
||||
var id = item[4].textContent;
|
||||
if(Session.get("user").classes.indexOf(id) !== -1) continue;
|
||||
divs.push({
|
||||
name: item[0].textContent,
|
||||
teachershort: item[1].textContent.split(" ")[1],
|
||||
hour: item[2].textContent,
|
||||
subscribers: (item[3].textContent.match(new RegExp(",","g")) || []).length+1,
|
||||
_id: id,
|
||||
join: true
|
||||
})
|
||||
}
|
||||
Session.set("autocompleteDivs", divs.sort(function(a, b) {
|
||||
return b.subscribers - a.subscribers;
|
||||
}));
|
||||
Session.set("notfound", false);
|
||||
return;
|
||||
}
|
||||
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) {}
|
||||
} catch(err) {}
|
||||
},
|
||||
'click .classBox .fa-plus' (event) {
|
||||
serverData = [event.target.parentNode.getAttribute("classid"), ""];
|
||||
|
||||
@ -38,6 +38,10 @@
|
||||
border: 1px solid #FCF0F0 !important;
|
||||
}
|
||||
|
||||
#profPageWrapper #createWrapper {
|
||||
|
||||
}
|
||||
|
||||
#basicInfo {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@ -138,7 +142,119 @@
|
||||
|
||||
#enrollUserWrapper {
|
||||
width: 60%;
|
||||
height: 42vh;
|
||||
margin: auto;
|
||||
padding: 1%;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#enrollClassList {
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#enrollClassList h3 {
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 10%;
|
||||
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
border: 0;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#enrollClassList h4 {
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
width: 90%;
|
||||
padding: 10%;
|
||||
|
||||
display: table-cell;
|
||||
cursor: pointer;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
#enrollClassList i {
|
||||
font-size: 2vh;
|
||||
width: 20%;
|
||||
display: table-cell;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
|
||||
-webkit-transition: color 0.5s ease;
|
||||
-moz-transition: color 0.5s ease;
|
||||
-ms-transition: color 0.5s ease;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
#enrollClassList i:hover {
|
||||
color: #FF1A1A;
|
||||
}
|
||||
|
||||
#ESCWrapper {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
#ESCWrapper:hover {
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#createActivate {
|
||||
margin-right: 5%;
|
||||
padding: 1%;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
#createActivate:hover {
|
||||
background-color: rgba(0,0,0,0.2)
|
||||
}
|
||||
|
||||
#createInfo {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 150%;
|
||||
}
|
||||
|
||||
#createWrapper {
|
||||
margin: auto;
|
||||
width: 30%;
|
||||
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
#createWrapper .formDiv {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#createWrapper #creSubmit {
|
||||
width: 30%;
|
||||
margin: auto;
|
||||
border: 1px solid #FCF0F0 !important;
|
||||
}
|
||||
|
||||
#createWrapper p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -32,8 +32,7 @@
|
||||
<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..."> -->
|
||||
<span id="createActivate">Class not here?</span>
|
||||
</div>
|
||||
<div id="settingClassWrapper">
|
||||
<div id="label" class="classBox">
|
||||
@ -60,11 +59,64 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="classsection" style="display:none;">
|
||||
<!-- CLASS ENROLLMENT + CREATE -->
|
||||
<div id="enrollClassList">
|
||||
<h3>My Classes</h3>
|
||||
{{#each enrollClass}}
|
||||
{{> enrollSideClass}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="createInfo">
|
||||
<div id="createWrapper">
|
||||
<div id="creRules">
|
||||
<p>Submit a request for a class to be approved by an administrator.<br>
|
||||
You can have up to 8 unapproved classes at once.</p>
|
||||
</div>
|
||||
<div id="formContainer">
|
||||
<div class="formDiv">
|
||||
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" form="school" placeholder="**School | Ex: International Academy" }}
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
<input class="creInput" type="text" form="hour" placeholder="Hour">
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
<input class="creInput" type="text" form="name" placeholder="**Class Name">
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
<p class="profTitle">**Privacy:</p>
|
||||
<input id="creprivacy" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="privacy" placeholder="Click here to edit..." readonly>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'privacy'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="formDiv">
|
||||
<p class="profTitle">**Category:</p>
|
||||
<input id="crecategory" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="category" placeholder="Click here to edit..." readonly>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'category'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="creSubmit" style="border:1px solid {{divColor 'textColor'}}">Submit Request</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
|
||||
<i class="fa fa-chevron-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="enrollSideClass">
|
||||
<div id="ESCWrapper" classid="{{_id}}">
|
||||
<h4 class="enrollSideClass">{{name}}</h4>
|
||||
{{#if x}}
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,7 +5,8 @@ import {
|
||||
|
||||
|
||||
Session.set("sections", [0,0]) // [Completed, Viewing]
|
||||
Session.set("profile", {});
|
||||
Session.set("profile", {classes: []});
|
||||
Session.set("autocompleteDivs", null);
|
||||
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.
|
||||
@ -40,6 +41,9 @@ Template.profile.helpers({
|
||||
privacy: {
|
||||
$eq: false
|
||||
},
|
||||
_id: {
|
||||
$nin: Session.get("profile").classes
|
||||
},
|
||||
school: {
|
||||
$eq: Session.get("profile").school
|
||||
}
|
||||
@ -72,7 +76,7 @@ Template.profile.helpers({
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: classes,
|
||||
template: Template.classDisplay,
|
||||
template: Template.classAutoList,
|
||||
filter: {
|
||||
privacy: false,
|
||||
status: true
|
||||
@ -92,6 +96,31 @@ Template.profile.helpers({
|
||||
}]
|
||||
};
|
||||
},
|
||||
schoolComplete() { // Returns autocomplete array for schools.
|
||||
return {
|
||||
position: "bottom",
|
||||
limit: 6,
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: schools,
|
||||
field: 'name',
|
||||
matchAll: true,
|
||||
template: Template.schoolList
|
||||
}]
|
||||
};
|
||||
},
|
||||
teacherComplete() { // Returns autocomplete array for teachers.
|
||||
return {
|
||||
position: "bottom",
|
||||
limit: 1,
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: teachers,
|
||||
field: 'name',
|
||||
template: Template.teacherList
|
||||
}]
|
||||
};
|
||||
},
|
||||
notsearching() { // Tells whether user is using the searchbox
|
||||
return Session.get("notsearching");
|
||||
},
|
||||
@ -100,6 +129,11 @@ Template.profile.helpers({
|
||||
},
|
||||
notfound() { // Returns if autocomplete has no results.
|
||||
return Session.get("notfound");
|
||||
},
|
||||
enrollClass() {
|
||||
var myClasses = Session.get("profile").classes;
|
||||
if(myClasses === undefined || myClasses.length === 0) return [{name:"Enroll!",x:false}];
|
||||
return myClasses.map(function(a){return {name:classes.findOne({_id:a}).name,x:true,_id:a}});
|
||||
}
|
||||
});
|
||||
|
||||
@ -131,9 +165,13 @@ Template.profile.events({
|
||||
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]])
|
||||
Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]]);
|
||||
slideToField(1);
|
||||
},
|
||||
'click #createActivate' () {
|
||||
Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);
|
||||
slideToField(2);
|
||||
},
|
||||
'click #backArrow' () {
|
||||
slideToField(Session.get("sections")[1]-1);
|
||||
},
|
||||
@ -218,33 +256,71 @@ Template.profile.events({
|
||||
Session.set("autocompleteDivs", null);
|
||||
var divs = [];
|
||||
try {
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
|
||||
if (items.length === 0) { // If no results.
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].children;
|
||||
if(items[0].tagName === "I") {
|
||||
Session.set("notfound", true);
|
||||
return;
|
||||
} else {
|
||||
items = items[0].children;
|
||||
for(var i = 0; i < items.length; i++) {
|
||||
var item = items[i].children;
|
||||
var id = item[4].textContent;
|
||||
if(Session.get("profile").classes.indexOf(id) !== -1) continue;
|
||||
divs.push({
|
||||
name: item[0].textContent,
|
||||
teachershort: item[1].textContent.split(" ")[1],
|
||||
hour: item[2].textContent,
|
||||
subscribers: (item[3].textContent.match(new RegExp(",","g")) || []).length+1,
|
||||
_id: id,
|
||||
join: true
|
||||
})
|
||||
}
|
||||
Session.set("autocompleteDivs", divs.sort(function(a, b) {
|
||||
return b.subscribers - a.subscribers;
|
||||
}));
|
||||
Session.set("notfound", false);
|
||||
return;
|
||||
}
|
||||
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")
|
||||
});
|
||||
}
|
||||
} catch(err) {}
|
||||
},
|
||||
'click .classBox .fa-plus' (event) {
|
||||
var profile = Session.get("profile");
|
||||
var id = event.target.parentNode.getAttribute("classid");
|
||||
if(profile.classes.indexOf(id) === -1) {
|
||||
profile.classes.push(id);
|
||||
Session.set("profile", profile);
|
||||
if(Session.get("autocompleteDivs") === null) return;
|
||||
var divs = Session.get("autocompleteDivs");
|
||||
divs.splice(divs.map(function(a) {
|
||||
return a._id;
|
||||
}).indexOf(id),1);
|
||||
Session.set("autocompleteDivs", divs);
|
||||
}
|
||||
},
|
||||
'click #ESCWrapper .fa-times' (event) {
|
||||
var profile = Session.get("profile");
|
||||
var id = event.target.parentNode.getAttribute("classid");
|
||||
if(profile.classes.indexOf(id) !== -1) {
|
||||
profile.classes.splice(profile.classes.indexOf(id),1);
|
||||
Session.set("profile", profile);
|
||||
if(Session.get("autocompleteDivs") === null) return;
|
||||
var divs = Session.get("autocompleteDivs");
|
||||
var myClass = classes.findOne({_id: id});
|
||||
myClass.subscribers = myClass.subscribers.length;
|
||||
myClass.teachershort = myClass.teacher.split(" ")[1]
|
||||
myClass.join = true;
|
||||
divs.push(myClass);
|
||||
Session.set("autocompleteDivs", divs.sort(function(a, b) {
|
||||
return b.subscribers - a.subscribers;
|
||||
}));
|
||||
} catch (err) {}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function slideToField(field) {
|
||||
var order = ["basicInfo", "enrollInfo"];
|
||||
var order = ["basicInfo", "enrollInfo", "createInfo"];
|
||||
$(".moveArrow").animate({"opacity":0})
|
||||
$("#enrollClassList").fadeOut(200);
|
||||
var viewing = Session.get("sections")[1]
|
||||
var move = (viewing-field < 0) ? "-50%" : "150%";
|
||||
$("#"+order[viewing]).animate({top: move});
|
||||
@ -254,6 +330,9 @@ function slideToField(field) {
|
||||
complete: function() {
|
||||
Session.set("sections", [Session.get("sections")[0],field]);
|
||||
$(".moveArrow").animate({"opacity":1});
|
||||
if(field === 1) {
|
||||
$("#enrollClassList").fadeIn(200);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user