Added joining classes, and viewing classes

hourglass/client/main/main.css

@@ -335,7 +335,7 @@ select {
 	border-radius: 30px;
 
 	position: absolute;
-	top: 50%;
+	top: 30%;
 	left: 50%;
 
 	text-align: center;

hourglass/client/main/main.js

@@ -45,6 +45,15 @@ Template.registerHelper( 'divColor', (div) => {
 	return themeColors[Cookie.get("theme")][div];	
 })
 
+Template.registerHelper( 'overlayDim', (part) => {
+	var dim = [window.innerWidth * .2,window.innerHeight * .2];
+	var width = "width:"+dim[0].toString() + "px;";
+	var height = "height:"+dim[1].toString() + "px;";
+	var margin = "margin-left:"+(-dim[0]/2).toString() + "px;";
+	var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";";
+	return width+height+margin+bg;
+})
+
 Template.main.helpers({
 	schoolname() {
 		return " - " + Meteor.user().profile.school;
@@ -106,14 +115,6 @@ Template.main.helpers({
 	  		return openValues["options"];
 	  	}
 	},
-	overlayDim(part) {
-		var dim = [window.innerWidth * .2,window.innerHeight * .2];
-		var width = "width:"+dim[0].toString() + "px;";
-		var height = "height:"+dim[1].toString() + "px;";
-		var margin = "margin:"+(-dim[0]/2).toString() + "px 0 0 " + -(dim[1]/2).toString() + "px;";
-		var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";";
-		return width+height+margin+bg;
-	},
 	creHighlight(input) {
 		if(input == Session.get("creInput")) {
 			return "#CCEEFF";
@@ -152,17 +153,17 @@ Template.main.helpers({
 	},
 	calendarOptions() {
 		var cursor = work.find({});
-		var donelist = [];
+		var events = [];
 		cursor.forEach(function(current) {
 			backgroundColor = calendarColors[current.type];
 			title = current.name;
 			duedate = current.dueDate.toISOString().slice(0,10);
-			donelist.push({start: duedate, title: title, backgroundColor: backgroundColor});			    
+			events.push({start: duedate, title: title, backgroundColor: backgroundColor});			    
 		});
-
+		console.log(events);
 		return {
 			height: window.innerHeight *.8,
-			events: donelist
+			events: events
 		};
 	},
 	calCenter() {

hourglass/client/profile/profile.css

@@ -29,6 +29,7 @@
 
 #profPage {
 	width: 100%;
+	overflow-x: hidden;
 	overflow-y: auto;
 }
 
@@ -111,15 +112,17 @@
 }
 
 .card {
+	margin-bottom: 5%;
 	padding: 4%;
 	padding-top: 2.5%;
-	padding-right: 6%;
+	padding-right: 4%;
 
 	box-shadow: 2px 2px 5px 3px #666;
 }
 
 #profInfo {
 	width: 30%;
+	float: left;
 	border-top: 5px solid #CC4444;
 }
 
@@ -128,9 +131,148 @@
 }
 
 #profClasses {
-	width: 44%;
+	width: 50%;
-	margin-top: -21.8%;
+	height: 30%;
 	float: right;
 	border-top: 5px solid #2E4F74;
+
+	-webkit-transition: width 0.4s ease;  
+	-moz-transition: width 0.4s ease; 
+	-ms-transition: width 0.4s ease;
+	transition: width 0.4s ease;
+}
+
+#profClassInfoHolder {
+
+
+	-webkit-transition: opacity 0.4s ease;  
+	-moz-transition: opacity 0.4s ease; 
+	-ms-transition: opacity 0.4s ease;
+	transition: opacity 0.4s ease; 
+}
+
+#classes {
+	padding: 4% 0 4% 0;
+}
+
+#profFunctions {
+	display: inline;
+}
+
+.profFunction {
+	margin-right: 1%;
+	padding: 2%;
+
+	border: 2px solid rgba(0,0,0,0.2);
+
+	display: inherit;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+.profFunction:hover {
+	background-color: rgba(0,0,0,0.1);
+
+}
+
+.profFunction i, .profFunction h4 {
+	padding: 1%;
+}
+
+#searchBar {
+	display: inline;
+}
+
+#profClassSearch {
+	font-size: 125%;
+	width: 30%;
+	margin-top: 3%;
+	padding: 1.5% 1% 1.5% 1%;
+
+	-webkit-animation: expand .7s ease 1;
+    animation: expand .7s ease 1;
+}
+
+@-webkit-keyframes expand {
+    0%	 { width: 0%; }
+    100% { width: 30%; }
+} 
+
+@keyframes expand {
+    0%	 { width: 0%; }
+    100% { width: 30%; }
+}
+
+#label {
+	width: 90%;
+	margin-top: 2.5%;
+	margin-bottom: 2%;
+	
+	background-color: rgba(0,0,0,0.2);
+	box-shadow: none;
+
+	display: table;
+	cursor: default;
+}
+
+.classHolder {
+	width: 90%;
+	padding: 1%;
+	padding-right: 100%;
+
+	display: inline-block;
+
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+.classBox {
+	font-size: 150%;
+	width: 100%;
+	margin-bottom: 3%;
+	padding: 2%;
+
+	box-shadow: 2px 2px 5px 3px #666;
+	display: table;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+.classBox:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+.classText {
+	margin-left: .5%;
+	margin-right: 10%;
+	display: table-cell;
+}
+
+.name {
+	width: 40%;
+}
+
+.teacher {
+	width: 25%;
+}
+
+.hour {
+	width: 15%;
+}
+
+.subscribers {
+	width: 13%;
+}
+
+.-autocomplete-container {
+	display: none;
 }
 

hourglass/client/profile/profile.html

@@ -29,7 +29,7 @@
 			            </div>
 			        </div>
 				</div>
-				<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}}">
+				<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};height:{{profClassHeight}};">
 					<h3 class="profHea">Classes</h3>
 					<div id="classes">
 						<div id="profFunctions">
@@ -48,65 +48,91 @@
 					    </div>
 						<div id="profClassInfoHolder">
 						{{#if profClassTab "manClass"}}
-							
+							<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>
+							<div class="classHolder" style="max-height:{{classHolderHeight}}">
+								{{#each myclasses}}
+									{{> classDisplay}}
+								{{/each}}
+							</div>
 						{{/if}}
+
 						{{#if profClassTab "addClass"}}
-							{{> inputAutocomplete settings=classsettings placeholder="Search..."}}
+							<i class="fa fa-search" aria-hidden="true"></i>
+							{{> inputAutocomplete id="profClassSearch" settings=classsettings placeholder="Search..."}}
+							<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>
+							<div class="classHolder" style="max-height:{{classHolderHeight}}">
+							{{#if notsearching}}
+								{{#each classes}}
+									{{> classDisplay}}
+								{{/each}}
+							{{else}} 
+								{{#each autocompleteClasses}}
+									{{> classDisplay}}
+								{{/each}}
+							{{/if}}
+							</div>
 						{{/if}}
+
 						{{#if profClassTab "creClass"}}
-						{{/if}}
+							<!-- <form id="create">
-						<!-- {{#if currFunction "addClass"}}
-					          <p>Add a Class</p>
-					        {{/if}}
-
-					        {{#if currFunction "manClass"}}
-					          <p>Manage Classes</p>
-					        {{/if}}
-
-					        {{#if currFunction "creClass"}}
-					          <h2>Create a Class</h2>
-					          <form id="create">
 					            <p class="input">School:</p><br>
-					              {{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
+				              		{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" 		type="text" name="school" placeholder="Example: International Academy" }}
 					            <p class="input">Hour:</p><br>
-					              <input class="creInput" type="text" name="hour"><br>
+					              	<input class="creInput" type="text" name="hour"><br>
 					            <p class="input">Teacher:</p><br>
-					              {{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
+					              	{{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
 					            <p class="input">Class Name:</p><br>
-					              <input class="creInput" type="text" name="classname"><br>
+					              	<input class="creInput" type="text" name="classname"><br>
 					            <p class="input">Privacy:</p><br>
 					            <div class="select">
-					              <input class="creInputSel creInput" type="text" name="privacy" op="0" readonly><br>
+					              	<input class="creInputSel creInput" type="text" name="privacy" op="0" readonly><br>
-					              <div class="creOptions" style="background-color:{{divColor 'header'}}">
+					              	<div class="creOptions" style="background-color:{{divColor 'header'}}">
-					                  <p>Public</p>
+					                  	<p>Public</p>
-					                  <p>Private</p>
+					                  	<p>Private</p>
-					              </div>
+					              	</div>
 					            </div>
 					            <p class="input">Category:</p><br>
 					            <div class="select">
-					              <input class="creInputSel creInput" type="text" name="category" op="1" readonly><br>
+					              	<input class="creInputSel creInput" type="text" name="category" op="1" readonly><br>
-					              <div class="creOptions" style="background-color:{{divColor 'header'}}">
+					              	<div class="creOptions" style="background-color:{{divColor 'header'}}">
-					                  <p>Class</p>
+					                  	<p>Class</p>
-					                  <p>Club</p>
+					                  	<p>Club</p>
-					                  <p>Other</p>
+					                  	<p>Other</p>
-					              </div>
+					              	</div>
-					            </div>
+					            	</div>
-					            <div class="creSubmit">Submit Request</div>
+					         	<div class="creSubmit">Submit Request</div>
-					          </form> 
+				          	</form> --> 
-					        {{/if}}
+						{{/if}}
-							{{#each classes}}
-							{{/each}} -->
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
+	<div class="overlay">
+	    <div class="overlayCont" style="{{overlayDim}};">
+	     	<p>Join class?</p>
+	     	<i class="fa fa-check-circle-o" aria-hidden="true"></i>
+      		<i class="fa fa-times-circle-o" aria-hidden="true"></i>
+	    </div>
+  	</div>
 </template>
 
-<template name="classdisplay">
+<template name="classDisplay">
-	{{name}}
+	<div class="classBox" classid="{{_id}}">
-	{{teacher}}
+		<span class="name classText">{{name}}</span>
-	{{hour}}
+		<span class="teacher classText">{{teacher}}</span>
-	<button>join</button>
+		<span class="hour classText">{{hour}}</span>
+		<span class="subscribers classText">{{subscribers}}</span>
+	</div>
 </template>

hourglass/client/profile/profile.js

@@ -1,9 +1,13 @@
 import { Template } from 'meteor/templating';
 
 Session.set("profInputOpen",null);
-Session.set("profClassTab",null);
+Session.set("profClassTab","manClass");
 Session.set("modifying",null);
 Session.set("radioDiv",null);
+Session.set("notsearching",true);
+Session.set("confirm",null);
+Session.set("serverData",null);
+Session.set("autocompleteDivs", null);
 
 var themeColors = {
 	"light": {
@@ -28,7 +32,7 @@ Template.profile.helpers({
 	          token: '',
 	          collection: classes,
 	          field: "name",
-	          template: Template.classdisplay,
+	          template: Template.classDisplay,
 	          filter: {status: true}
 	        }
 	      ]
@@ -44,12 +48,20 @@ Template.profile.helpers({
 	banner() {
 		var width = window.innerWidth * 1600/1920;
 		var height = width * 615/1600;
-		var banner = "defaultcover.jpg"; // Add personal user banner eventually
+		if(Meteor.user().profile.banner !== undefined) {
+			var banner = Meteor.user().profile.banner;
+		} else {
+			var banner = "defaultcover.jpg";
+		}
 		return "width:"+width.toString()+"px;height:"+height.toString()+"px;background-image:url(\'"+banner+"\');background-size:"+width.toString()+"px "+height.toString()+"px";
 	},
 	avatar() {
 		var dim = window.innerWidth * 1600/1920 * .16;
-		var pic = "defaultAvatars/"+(Math.floor(Math.random() * (10 - 1)) + 1).toString()+".png"; // User personalization
+		if(Meteor.user().profile.avatar !== undefined) {
+			var pic = Meteor.users().profile.avatar;
+		} else {
+			var pic = "defaultAvatars/"+(Math.floor(Math.random() * (10 - 1)) + 1).toString()+".png";
+		}
 		return "background-image:url("+pic+");background-size:"+dim.toString()+"px "+dim.toString()+"px";
 	},
 	avatarDim() {
@@ -60,24 +72,34 @@ Template.profile.helpers({
 		return Meteor.user().profile.name;
 	},
 	motd() {
-		return "Say something about yourself!" // User personalization
+		if(Meteor.user().profile.description !== undefined) {
+			return Meteor.user().profile.description;
+		} else {
+			return "Say something about yourself!";
+		}
 	},
 	school() {
-		if(Meteor.user().profile.school !== null) {
+		if(Meteor.user().profile.school !== undefined) {
-			return "Click here to edit..."
-		} else {
 			return Meteor.user().profile.school;
+		} else {
+			return "Click here to edit...";
 		}
 	},
 	grade() {
-		if(Meteor.user().profile.grade !== null) {
+		if(Meteor.user().profile.grade !== undefined) {
-			return "Click here to edit..."
-		} else {
 			return Meteor.user().profile.grade;
+		} else {
+			return "Click here to edit...";
 		}
 	},
 	classes() {
-		return classes.find( { status: { $eq: true }, privacy: { $eq: false }}, {sort: { subscribers: -1 }}).fetch();
+		return classes.find( { status: { $eq: true }, privacy: { $eq: false }}, {sort: { subscribers: -1 }}, {limit: 20}).fetch();
+	},
+	profClassHeight() {
+		return .6*window.innerHeight.toString()+"px";
+	},
+	classHolderHeight() {
+		return .26*window.innerHeight.toString()+"px";
 	},
 	profClassTabColor(status) {
         if(status === Session.get("profClassTab")) {
@@ -92,6 +114,15 @@ Template.profile.helpers({
 		} else {
 			return false;
 		}
+	},
+	notsearching() {
+		return Session.get("notsearching");
+	},
+	autocompleteClasses() {
+		return Session.get("autocompleteDivs");
+	},
+	myclasses() {
+		return Meteor.user().profile.classes;
 	}
 })
 
@@ -141,9 +172,7 @@ Template.profile.events({
 		} else {
 			input.select();
 		}
-		input.focus();
+		input.focus();		
-
-		
 	},
 	'click' (event) {
 		var sessval = Session.get("modifying");
@@ -177,29 +206,78 @@ Template.profile.events({
 		Session.set("radioDiv",null)
 	},
 	'click .addClass' () {
-        //var functionHolder = document.getElementById("functionHolder")
+        var functionHolder = document.getElementById("profClassInfoHolder")
-        //closeDivFade(functionHolder);
+        closeDivFade(functionHolder);
-        //setTimeout(function() {
+        setTimeout(function() {
             Session.set("profClassTab","addClass");
-        //    openDivFade(functionHolder);
+            openDivFade(functionHolder);
-        //},300);
+        },300);
     },
     'click .manageClass' () {
-        //var functionHolder = document.getElementById("functionHolder")
+        var functionHolder = document.getElementById("profClassInfoHolder")
-        //closeDivFade(functionHolder);
+        closeDivFade(functionHolder);
-        //setTimeout(function() {
+        setTimeout(function() {
             Session.set("profClassTab","manClass");
-        //    openDivFade(functionHolder);
+            openDivFade(functionHolder);
-        //},300);
+        },300);
     },
     'click .createClass' () {
-        //var functionHolder = document.getElementById("functionHolder")
+        var functionHolder = document.getElementById("profClassInfoHolder")
-        //closeDivFade(functionHolder);
+        closeDivFade(functionHolder);
-        //setTimeout(function() {
+        setTimeout(function() {
             Session.set("profClassTab","creClass");
-        //    openDivFade(functionHolder);
+            openDivFade(functionHolder);
-        //},300);
+        },300);
     },
+	'click .fa-search' () {
+		Session.set("searching",true);
+	},
+	'click .fa-times-thin' () {
+		Session.set("searching",false);
+	},
+	'keyup #profClassSearch' (event) {
+		if(event.target.value === "") {
+			Session.set("notsearching",true);
+		} else {
+			Session.set("notsearching",false);
+		}
+		divs = [];
+		try {
+			var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
+			for(var i = 2; i < items.length; i+=3) {
+				var item = items[i].childNodes[3];
+				divs.push({
+						name: item.childNodes[1].childNodes[0].nodeValue,
+						teacher: item.childNodes[3].childNodes[0].nodeValue,
+						hour: item.childNodes[5].childNodes[0].nodeValue,
+						subscribers: item.childNodes[7].childNodes[0].nodeValue,
+						_id:item.getAttribute("classid")
+				});
+				Session.set("autocompleteDivs", divs);
+			}
+		} catch(err) {}
+	},
+	'click .classBox' (event) {
+		if(event.target.getAttribute("classid") === null) return;
+		openDivFade(document.getElementsByClassName("overlay")[0]);
+		setTimeout(function() {
+			document.getElementsByClassName("overlay")[0].style.opacity = "1";
+		}, 200);
+		Session.set("serverData",[event.target.getAttribute("classid"),""]);
+		Session.set("confirm","joinClass");
+	},
+	'click .fa-check-circle-o' () {
+		sendData(Session.get("confirm"));
+		closeDivFade(document.getElementsByClassName("overlay")[0]);
+		Session.set("serverData",null);
+		Session.set("confirm",null);
+	},
+	'click .fa-times-circle-o' () {
+		closeDivFade(document.getElementsByClassName("overlay")[0]);
+		closeDivFade(document.getElementById("functionHolder"));
+		Session.set("serverData",null);
+		Session.set("confirm",null);
+	},
 })
 
 function openDivFade(div) {
@@ -230,3 +308,6 @@ function closeInput(sessval) {
 	Session.set("modifying",null);
 }
 
+function sendData(funcName) {
+	Meteor.call(funcName,Session.get("serverData"));
+}