diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html index 6b6c2b4..712531e 100644 --- a/hourglass/client/menus/menus.html +++ b/hourglass/client/menus/menus.html @@ -485,6 +485,14 @@ {{/if}} + + diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js index f8c8e91..e50b401 100644 --- a/hourglass/client/menus/menus.js +++ b/hourglass/client/menus/menus.js @@ -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"), ""]; diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 381bf12..d962527 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -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; } diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index dc4f350..0e9ab61 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -32,8 +32,7 @@
{{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}} - + Class not here?
@@ -60,11 +59,64 @@
- + + diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index a6c8317..b633ab5 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -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); + } } }); }