More of sign-up page

hourglass/client/menus/menus.html

@@ -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>

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;
+            var items = document.getElementsByClassName("-autocomplete-container")[0].children;  
-            if (items.length === 0) { // If no results.
+            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.
+        } catch(err) {}
-                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) {}
     },
     'click .classBox .fa-plus' (event) {
         serverData = [event.target.parentNode.getAttribute("classid"), ""];

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;
 }

hourglass/client/profile/profile.html

@@ -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>
+                    <span id="createActivate">Class not here?</span>
-                    <input id="privateCode" placeholder="Enter code here..."> -->
                 </div>
                 <div id="settingClassWrapper">
                     <div id="label" class="classBox">
@@ -60,11 +59,64 @@
                 </div>
             </div>
         </div>
-        <div id="classsection" style="display:none;">
+        <div id="enrollClassList">
-            <!-- CLASS ENROLLMENT + CREATE -->
+            <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>

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;
+            var items = document.getElementsByClassName("-autocomplete-container")[0].children;  
-            if (items.length === 0) { // If no results.
+            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.
+        } catch(err) {}
-                var item = items[i].childNodes[3];
+    },
-                if (Meteor.user().profile.classes.indexOf(item.getAttribute("classid")) !== -1) continue;
+    'click .classBox .fa-plus' (event) {
-                divs.push({
+        var profile = Session.get("profile");
-                    name: item.childNodes[1].childNodes[0].nodeValue,
+        var id = event.target.parentNode.getAttribute("classid");
-                    teacher: item.childNodes[3].childNodes[0].nodeValue,
+        if(profile.classes.indexOf(id) === -1) {
-                    hour: item.childNodes[5].childNodes[0].nodeValue,
+            profile.classes.push(id);
-                    subscribers: Math.floor(item.childNodes[7].childNodes[0].nodeValue.replace(",", "").length / 17),
+            Session.set("profile", profile);
-                    _id: item.getAttribute("classid")
+            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);
+            }
         }
     });
 }