profile page

hourglass/client/main/main.css

@@ -76,6 +76,10 @@ body {
 	pointer-events: all;
 }
 
+input {
+	font-family: Raleway !important;
+}
+
 .noScroll {
 	width: 100%;
 	height: 100%;

hourglass/client/main/main.js

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

hourglass/client/menus/menus.js

@@ -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 = [];
+        var alert = checkComplete(required, inputs);
-        for (var i = 0; i < inputs.length; i++) {
+        var values = alert[2];
-            var val = inputs[i].value;
+        if (!alert[0]) { // Check missing fields.
-            var where = inputs[i].getAttribute("form");
+            sAlert.error("Missing " + alert[1], {
-            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;
-            }), {
                 effect: 'stackslide',
                 position: 'top',
                 timeout: 3000

hourglass/client/profile/profile.css

@@ -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);
+}

hourglass/client/profile/profile.html

@@ -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>
+        <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>
-        <button id="schoolnext" {{schoolgradenext}}>Next</button>
         <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>

hourglass/client/profile/profile.js

@@ -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' () {    
+    'click #basicNext' () {
-        // Animation to display class section
+        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});
+        }
+    });
+}