kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More sign-in page, CSS/text fixes, calendar refectching fix

Browse Source
This commit is contained in:
Kenneth Jao 2017-01-19 01:11:17 -05:00
parent 6b10de2d89
commit 49bafc87ed
9 changed files with 374 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
hourglass/client/main/main.css
View File

@ -38,19 +38,23 @@ html {
}
::-webkit-input-placeholder {
font-size: 70%;
color: #FCF0F0;
font-size: 70%;
}
:-moz-placeholder {
font-size: 70%;
color: #FCF0F0;
font-size: 70%;
}
::-moz-placeholder {
font-size: 70%;
color: #FCF0F0;
font-size: 70%;
}
:-ms-input-placeholder {
font-size: 70%;
:-ms-input-placeholder {
color: #FCF0F0;
font-size: 70%;
}
.formInvalid::-webkit-input-placeholder {
@ -163,9 +167,8 @@ input {
.noScroll input, .noScroll textarea {
font-family: 'Raleway';
background-color: #EBEBEB;
border: 3px solid #CECECE;
border-radius: 3px;
background-color: rgba(0,0,0,0.2);
border: 0;
resize: none;
}
@ -1287,12 +1290,14 @@ textarea.clickModify {
}
#requestArea {
font-size: 1.8vh;
width: 85%;
font-size: 1.5vh;
width: 80%;
height: 35%;
padding: 4%;
margin-left: calc(7.5% - 6px);
margin-bottom: 5px;
display: inline;
outline: none;
}

8
hourglass/client/main/main.html
View File

@ -31,7 +31,7 @@
</div>
</div>
<div id="divCenter">
<header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{refetchEvents}}">
<header id="mainHeader" style="background-color:{{divColor 'mainColor'}}">
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
<div id="dropdown">
<img src="{{avatar}}">
@ -81,7 +81,7 @@
<div id="workComments">
<h3>Comments</h3>
<div>
<textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200"></textarea><br>
<textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200" style="color:{{divColor 'textColor'}}"></textarea><br>
<div>
<span class="resText">{{restrict 'workComment'}}</span>
<div id="commentSubmit">Submit</div>
@ -155,10 +155,6 @@
<p>{{username}}</p>
</div>
<div id="userFunctions" style="background-color:{{divColor 'userDropdownColor'}}">
<div id="myprofile" class="userFunction" onclick="window.location='/profile';">
<i class="fa fa-user" aria-hidden="true"></i>
<p>My Profile</p>
</div>
{{#if admin}}
<div id="myprofile" class="userFunction" onclick="window.location='/admin';">
<i class="fa fa-cogs" aria-hidden="true"></i>

321
hourglass/client/main/main.js
View File

@ -18,7 +18,8 @@ var defaultWork = {
// Reactive variables.
Session.set("user", {}); // Stores user preferences.
Session.set("calendarClasses", []); // Stores calendar classes.
Session.set("calendarEvents", []); // Stores calendar classes.
Session.set("myClasses", []); // Stores user classes.
Session.set("requests", false); // Status of requests.
Session.set("sidebarMode", ""); // Status of sidebars.
Session.set("newWork", null); // If user creating new work.
@ -27,7 +28,6 @@ Session.set("classDisp", []); // Stores current filter for classes.
Session.set("typeFilter", []); // Stores type filters for classes.
Session.set("typeFilterHover", null); // Stores current hovered type filter.
Session.set("classDispHover", null); // Stores current hovered class filter.
Session.set("refetchEvents", null); // Stores whether to get calendar events again.
Session.set("restrictText", {}); // Stores text for comment character restriction.
Session.set("confirmText", ""); // Stores text for confirmations.
@ -85,120 +85,11 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
if (Session.get("user").classes.length === 0) { // Null checking.
return [];
} else {
var array = [];
var refetch = true;
var courses = Session.get("user").classes;
var classDisp = Session.get("classDisp"); // Get sidebar class filter.
var sideFilter = Session.get("typeFilter"); // Get sidebar type filter.
var hide = Session.get("user").preferences.timeHide;
for (var i = 0; i < courses.length; i++) { // For each user class.
if (courses[i] === Meteor.userId()) {
found = {
_id: courses[i],
name: "Personal",
subscribers: 1,
mine: false,
box: " owned"
};
} else {
found = classes.findOne({
_id: courses[i]
});
found.subscribers = found.subscribers.length;
found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;});
found.mine = true;
if (found.admin === Meteor.userId()) { // If user owns this class.
found.box = " owned";
found.mine = false;
}
}
found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
array.push(found);
var thisWork = work.find({
class: courses[i]
}).fetch();
if (classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { // Filter classes based on filter.
array[i].thisClassWork = [];
continue;
}
for (var j = 0; j < thisWork.length; j++) { // For each work in class.
if (hide !== 0) { // Time to hide isn't never.
var due = (moment(thisWork[j].dueDate))._d;
var offset = (moment().subtract(hide, 'days'))._d;
if (offset > due) { // If due is before hide days before today
thisWork[j] = "no";
}
}
if (thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
thisWork[j] = "no";
}
}
if (thisWork[j] !== "no" && sideFilter.length !== 0 && !_.contains(sideFilter, thisWork[j].type)) {
thisWork[j] = "no";
}
if (thisWork[j] !== "no" && Session.get("user").preferences.hideReport && (thisWork[j].confirmations.length / thisWork[j].reports.length) <= 0.9) {
thisWork[j] = "no";
}
}
while (thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"), 1); // Splice all filtered works.
for (j = 0; j < thisWork.length; j++) {
thisWork[j].classid = courses[i];
thisWork[j].realDate = thisWork[j].dueDate;
thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, {
sameDay: '[Today]',
nextDay: '[Tomorrow]',
nextWeek: 'dddd',
lastDay: '[Yesterday]',
lastWeek: '[Last] dddd',
sameElse: 'MMMM Do'
});
if (thisWork[j].dueDate === "Today") { // Font weight based on date proximity.
thisWork[j].cardDate = "600";
} else if (thisWork[j].dueDate === "Tomorrow") {
thisWork[j].cardDate = "400";
}
thisWork[j].typeColor = workColors[thisWork[j].type];
thisWork[j].confirmationLength = thisWork[j].confirmations.length; // Counts the number of confirmations and reports for a particular work.
thisWork[j].reportLength = thisWork[j].reports.length;
thisWork[j].creator = Meteor.users.findOne({
_id: thisWork[j].creator
}).profile.name;
var conf = thisWork[j].confirmations.length;
var repo = thisWork[j].reports.length;
var ratio = conf / repo;
var normalColor = Session.get("user").preferences.theme.text;
if (Math.abs(conf - repo)) {
if ((conf + repo) <= 1) {
thisWork[j].doneRatio = normalColor;
} else {
thisWork[j].doneRatio = "#F9F906";
}
} else if (ratio >= 2) {
thisWork[j].doneRatio = "#33DD33";
} else if (ratio <= 0.9) {
thisWork[j].doneRatio = "#FF1A1A";
}
}
array[i].thisClassWork = thisWork.sort(function(a, b) {
return Date.parse(a.realDate) - Date.parse(b.realDate);
});
}
Session.set("calendarClasses", array);
Session.set("refetchEvents", refetch);
var array = myClasses();
Session.set("myClasses", array);
calendarEvents(array);
$("#fullcalendar").fullCalendar("removeEvents");
$("#fullcalendar").fullCalendar("addEventSource", Session.get("calendarEvents"))
return array;
}
});
@ -308,38 +199,7 @@ Template.main.helpers({
day: 'Day'
},
eventLimit: 3,
events: function(start, end, timezone, callback) {
var events = [];
var userClasses = Session.get("calendarClasses");
for (var i = 0; i < userClasses.length; i++) {
var works = userClasses[i].thisClassWork;
for (var j = 0; j < works.length; j++) {
var work = works[j];
var currClass = classes.findOne({
_id: work.class
});
var inRole = false;
if (work.class === Meteor.userId() ||
Meteor.userId() === work.creator ||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
currClass.banned.indexOf(Meteor.userId()) !== -1
) inRole = true;
events.push({
id: work._id,
start: work.realDate.toISOString().slice(0, 10),
title: work.name,
backgroundColor: workColors[work.type],
borderColor: "#444",
startEditable: inRole,
className: work.type + " workevent " + work.class
});
}
}
callback(events);
},
events: Session.get("calendarEvents"),
eventDrop: function(event, delta, revertFunc) { // When user drops from click-dragging.
var current = work.findOne({
_id: event.id
@ -420,12 +280,6 @@ Template.main.helpers({
},
admin() {
return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']);
},
refetchEvents() {
if (Session.get("refetchEvents")) {
$("#fullcalendar").fullCalendar('refetchEvents');
Session.set("refetchEvents", null);
}
}
});
@ -536,7 +390,7 @@ Template.main.events({
array.info = {
"users": Meteor.users.find().fetch(),
"userInfo": Meteor.user(),
"userClasses": Session.get("calendarClasses")
"userClasses": Session.get("myClasses")
};
Meteor.call("createRequest", array, function(err, result) {
area.value = "";
@ -553,7 +407,7 @@ Template.main.events({
},
'click #exportDiv' (event) {
var events = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//hacksw/handcal//NONSGML v1.0//EN";
var userClasses = Session.get("calendarClasses");
var userClasses = Session.get("myClasses");
var timestamp = new Date().toJSON().replace(/-|:|\./gi, "");
for (var i = 0; i < userClasses.length; i++) {
var works = userClasses[i].thisClassWork;
@ -784,11 +638,11 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu
position: 'top'
});
} else {
sAlert.success("Success!", {
/*sAlert.success("Success!", {
effect: 'stackslide',
position: 'bottom-right',
timeout: 2500
});
});*/
if(funcName === "createClass") {
var inputs = document.getElementsByClassName("creInput");
for(var i = 0; i < inputs.length; i++) {
@ -797,6 +651,9 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu
toggleToMode("manageClass");
}
}
calendarEvents(myClasses());
$("#fullcalendar").fullCalendar("removeEvents");
$("#fullcalendar").fullCalendar("addEventSource", Session.get("calendarEvents"));
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
});
}
@ -1000,3 +857,151 @@ startDragula = function() {
Meteor.call("reorderClasses", final);
});
};
function myClasses() {
var array = [];
var courses = Session.get("user").classes;
var classDisp = Session.get("classDisp"); // Get sidebar class filter.
var sideFilter = Session.get("typeFilter"); // Get sidebar type filter.
var hide = Session.get("user").preferences.timeHide;
for (var i = 0; i < courses.length; i++) { // For each user class.
if (courses[i] === Meteor.userId()) {
found = {
_id: courses[i],
name: "Personal",
subscribers: 1,
mine: false,
box: " owned"
};
} else {
found = classes.findOne({
_id: courses[i]
});
found.subscribers = found.subscribers.length;
found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;});
found.mine = true;
if (found.admin === Meteor.userId()) { // If user owns this class.
found.box = " owned";
found.mine = false;
}
}
found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
array.push(found);
var thisWork = work.find({
class: courses[i]
}).fetch();
if (classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { // Filter classes based on filter.
array[i].thisClassWork = [];
continue;
}
for (var j = 0; j < thisWork.length; j++) { // For each work in class.
if (hide !== 0) { // Time to hide isn't never.
var due = (moment(thisWork[j].dueDate))._d;
var offset = (moment().subtract(hide, 'days'))._d;
if (offset > due) { // If due is before hide days before today
thisWork[j] = "no";
}
}
if (thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
thisWork[j] = "no";
}
}
if (thisWork[j] !== "no" && sideFilter.length !== 0 && !_.contains(sideFilter, thisWork[j].type)) {
thisWork[j] = "no";
}
if (thisWork[j] !== "no" && Session.get("user").preferences.hideReport && (thisWork[j].confirmations.length / thisWork[j].reports.length) <= 0.9) {
thisWork[j] = "no";
}
}
while (thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"), 1); // Splice all filtered works.
for (j = 0; j < thisWork.length; j++) {
thisWork[j].classid = courses[i];
thisWork[j].realDate = thisWork[j].dueDate;
thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, {
sameDay: '[Today]',
nextDay: '[Tomorrow]',
nextWeek: 'dddd',
lastDay: '[Yesterday]',
lastWeek: '[Last] dddd',
sameElse: 'MMMM Do'
});
if (thisWork[j].dueDate === "Today") { // Font weight based on date proximity.
thisWork[j].cardDate = "600";
} else if (thisWork[j].dueDate === "Tomorrow") {
thisWork[j].cardDate = "400";
}
thisWork[j].typeColor = workColors[thisWork[j].type];
thisWork[j].confirmationLength = thisWork[j].confirmations.length; // Counts the number of confirmations and reports for a particular work.
thisWork[j].reportLength = thisWork[j].reports.length;
thisWork[j].creator = Meteor.users.findOne({
_id: thisWork[j].creator
}).profile.name;
var conf = thisWork[j].confirmations.length;
var repo = thisWork[j].reports.length;
var ratio = conf / repo;
var normalColor = Session.get("user").preferences.theme.text;
if (Math.abs(conf - repo)) {
if ((conf + repo) <= 1) {
thisWork[j].doneRatio = normalColor;
} else {
thisWork[j].doneRatio = "#F9F906";
}
} else if (ratio >= 2) {
thisWork[j].doneRatio = "#33DD33";
} else if (ratio <= 0.9) {
thisWork[j].doneRatio = "#FF1A1A";
}
}
array[i].thisClassWork = thisWork.sort(function(a, b) {
return Date.parse(a.realDate) - Date.parse(b.realDate);
});
}
return array;
}
function calendarEvents(array) {
var events = [];
var userClasses = array;
for (var i = 0; i < userClasses.length; i++) {
var works = userClasses[i].thisClassWork;
for (var j = 0; j < works.length; j++) {
var work = works[j];
var currClass = classes.findOne({
_id: work.class
});
var inRole = false;
if (work.class === Meteor.userId() ||
Meteor.userId() === work.creator ||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
currClass.banned.indexOf(Meteor.userId()) !== -1
) inRole = true;
events.push({
id: work._id,
start: work.realDate.toISOString().slice(0, 10),
title: work.name,
backgroundColor: workColors[work.type],
borderColor: "#444",
startEditable: inRole,
className: work.type + " workevent " + work.class
});
}
}
Session.set("calendarEvents", events);
}

36
hourglass/client/menus/menus.css
View File

@ -113,7 +113,8 @@
#settingClassWrapper {
width: 90%;
padding: 2% 0 0 3%;
margin: auto;
padding-top: 2%;
}
#label {
@ -125,6 +126,12 @@
cursor: default;
}
#classBody {
height: 64vh;
overflow-y: auto;
overflow-x: hidden;
}
#settingClassWrapper h3 {
font-weight: 300;
font-style: italic;
@ -133,7 +140,7 @@
.classBox {
font-size: 1.3vw;
width: 100%;
width: 95%;
margin-bottom: 3%;
padding: 2%;
@ -492,7 +499,7 @@
#classSearch, #privateCode {
font-size: 2vh;
padding: 1%;
padding: 1% !important;
outline: none;
}
@ -534,7 +541,11 @@
}
#createWrapper {
margin: auto;
margin-top: 3%;
width: 80%;
padding: 3%;
background-color: rgba(0,0,0,0.1);
}
#creRules p {
@ -542,12 +553,12 @@
}
.formDiv {
margin-left: 25%;
padding: 1% 2% 1% 2%;
width: 30%;
background-color: rgba(255,255,255,0.1);
width: 100%;
margin: 0;
padding: 2%;
background-color: transparent;
position: relative;
display: table;
display: inline;
}
.formDiv:first-child {
@ -562,11 +573,6 @@
font-size: 2vh;
width: calc(98% - 8px) !important;
padding: 1%;
margin: 1%;
}
.formDiv .optionHolder {
width: 89%;
}
.formDiv .-autocomplete-container {
@ -585,9 +591,9 @@
font-weight: 200;
width: 30%;
padding: 2%;
margin: auto;
margin-top: 2%;
margin-left: 25%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

56
hourglass/client/menus/menus.html
View File

@ -130,7 +130,7 @@
<h3>Requests</h3>
</div>
<p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
<textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
<textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..." style="color:{{divColor 'textColor'}}"></textarea><br>
<span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
<span style="opacity:0">.</span>
<div id="requestSubmit">
@ -142,7 +142,7 @@
<template name="sidebarCreatePlate">
<div class="sectionTitle downOffset">
<h3>Requests</h3>
<h3>Classes</h3>
</div>
<p class="sidebarDesc">Pick a class to create work for.</p>
{{#each myClasses}}
@ -223,27 +223,31 @@
<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 id="classHeader">
<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>
{{#if notsearching}}
{{#each classes}}
{{> classDisplay}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
<div id="classBody">
{{#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}}
{{else}}
{{#each autocompleteClasses}}
{{> classDisplay}}
{{/each}}
{{#if notfound}}
<h3>No results found...</h3>
{{/if}}
{{/if}}
</div>
</div>
</div>
<div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
@ -294,15 +298,19 @@
</div>
<div id="formContainer">
<div class="formDiv">
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" form="school" placeholder="**School | Ex: International Academy" }}
<p class="profTitle">**School:</p>
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" form="school" placeholder="**School | Ex: International Academy" }}
</div>
<div class="formDiv">
<p class="profTitle">Hour:</p>
<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" }}
<p class="profTitle">Teacher:</p>
{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
</div>
<div class="formDiv">
<p class="profTitle">**Class Name:</p>
<input class="creInput" type="text" form="name" placeholder="**Class Name">
</div>
<div class="formDiv">
@ -324,7 +332,7 @@
</div>
</div>
<h3 id="creSubmit" style="border:1px solid {{divColor 'textColor'}}">Submit Request</h3>
</div>
</div>
</div>
</div>
</div>

54
hourglass/client/profile/profile.css
View File

@ -34,12 +34,12 @@
background-color: rgba(0,0,0,0.2);
}
#profPageWrapper .classBox:not(:first-child) {
#profPageWrapper .classBox:not(#label) {
border: 1px solid #FCF0F0 !important;
}
#profPageWrapper #createWrapper {
#profPageWrapper .optionHolder {
width: 100%;
}
#basicInfo {
@ -50,28 +50,17 @@
#newUserWrapper {
width: 25%;
padding: 2.5%;
padding: 2%;
margin: auto;
background-color: rgba(255,255,255,0.2);
}
#newUserWrapper .formDiv {
width: 100%;
margin: 0;
padding: 0;
background-color: transparent;
}
.opTitle {
font-weight: 200;
margin: 0;
}
#newUserWrapper .optionHolder {
width: 100% !important;
}
#basicNext {
padding: 2%;
border: 1px solid #FCF0F0;
@ -142,11 +131,14 @@
#enrollUserWrapper {
width: 60%;
height: 42vh;
height: 60vh;
margin: auto;
padding: 1%;
background-color: rgba(255,255,255,0.2);
overflow-y: auto;
}
#enrollUserWrapper #classBody {
height: 40vh;
}
#enrollClassList {
@ -236,25 +228,43 @@
top: 150%;
}
#createWrapper {
#profPageWrapper #createWrapper {
margin: auto;
padding: 3%;
padding-bottom: 2%;
width: 30%;
background-color: rgba(255,255,255,0.2);
}
#createWrapper .formDiv {
.formDiv {
width: 100%;
margin: 0;
padding: 2%;
background-color: transparent;
display: inline;
}
#createWrapper #creSubmit {
width: 30%;
margin: auto;
#profPageWrapper #creSubmit {
border: 1px solid #FCF0F0 !important;
}
#profPageWrapper .profTitle {
margin-bottom: 1%;
}
#createWrapper p {
margin: 0;
}
#profPageWrapper input {
margin: 0;
padding: 2%;
background-color: rgba(0,0,0,0.1);
border: 0;
}
#profileSubmit {
position:absolute;
top: 5%;
}

54
hourglass/client/profile/profile.html
View File

@ -35,27 +35,31 @@
<span id="createActivate">Class not here?</span>
</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 id="classHeader">
<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>
{{#if notsearching}}
{{#each classes}}
{{> classDisplay}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
<div id="classBody">
{{#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}}
{{else}}
{{#each autocompleteClasses}}
{{> classDisplay}}
{{/each}}
{{#if notfound}}
<h3>No results found...</h3>
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
@ -73,15 +77,19 @@
</div>
<div id="formContainer">
<div class="formDiv">
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" form="school" placeholder="**School | Ex: International Academy" }}
<p class="profTitle">**School:</p>
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" form="school" placeholder="**School | Ex: International Academy" }}
</div>
<div class="formDiv">
<p class="profTitle">Hour:</p>
<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" }}
<p class="profTitle">Teacher:</p>
{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
</div>
<div class="formDiv">
<p class="profTitle">**Class Name:</p>
<input class="creInput" type="text" form="name" placeholder="**Class Name">
</div>
<div class="formDiv">
@ -106,6 +114,10 @@
</div>
</div>
</div>
<div id="profileSubmit">
<h3>Finish!</h3>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>

82
hourglass/client/profile/profile.js
View File

@ -6,6 +6,7 @@ import {
Session.set("sections", [0,0]) // [Completed, Viewing]
Session.set("profile", {classes: []});
Session.set("newClasses", []);
Session.set("autocompleteDivs", null);
Session.set("notsearching", true); // If user isn't searching
Session.set("noclass", null); // If user doesn't have classes.
@ -132,8 +133,15 @@ Template.profile.helpers({
},
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}});
var newClasses = Session.get("newClasses");
if((myClasses === undefined || myClasses.length === 0) && newClasses.length === 0) return [{name:"Enroll!",x:false}];
var array = myClasses.map(function(a) {
return {name:classes.findOne({_id:a}).name,x:true,_id:a}
});
array.push.apply(array,newClasses.map(function(a){
return {name:a.name,_id:(Math.floor(Math.random()*1000)).toString(),x:true};
}));
return array;
}
});
@ -172,6 +180,58 @@ Template.profile.events({
Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);
slideToField(2);
},
'click #creSubmit' () {
var inputs = document.getElementsByClassName("creInput");
var required = ["school", "name", "privacy", "category"];
var alert = checkComplete(required, inputs);
var values = alert[2];
if(!alert[0]) {
sAlert.error("Missing " + alert[1], {
effect: 'stackslide',
position: 'top',
timeout: 3000
});
return;
}
values.privacy = (values.privacy === "Public") ? false : true;
values.status = false;
values.category.toLowerCase();
values.code = "";
var newClasses = Session.get("newClasses");
var duplicate = false;
for(var i = 0; i < newClasses.length; i++) {
if(JSON.stringify(newClasses[i]) === JSON.stringify(values)) duplicate = true;
}
if(!duplicate && newClasses.length < 8) newClasses.push(values);
if(duplicate) sAlert.error("You already created this class!", {
effect: 'stackslide',
position: 'bottom-right',
timeout: 3000
});
if(newClasses.length === 8) sAlert.error("You already created 8 classes!", {
effect: 'stackslide',
position: 'bottom-right',
timeout: 3000
});
Session.set("newClasses", newClasses);
$(".creInput").each(function(){$(this).val('');});
/*if (!teachers.findOne({
name: values.teacher
})) {
Meteor.call("createTeacher", values.teacher, values.school, function(error, result) {
if (error !== undefined) {
sAlert.error(error.message, {
effect: 'stackslide',
position: 'top'
});
} else {
sendData("createClass");
}
});
} else {
sendData("createClass");
}*/
},
'click #backArrow' () {
slideToField(Session.get("sections")[1]-1);
},
@ -300,6 +360,14 @@ Template.profile.events({
'click #ESCWrapper .fa-times' (event) {
var profile = Session.get("profile");
var id = event.target.parentNode.getAttribute("classid");
if(id.length < 17) {
var newClasses = Session.get("newClasses");
newClasses.splice(newClasses.map(function(a) {
return a._id;
}).indexOf(id),1);
Session.set("newClasses", newClasses);
return;
}
if(profile.classes.indexOf(id) !== -1) {
profile.classes.splice(profile.classes.indexOf(id),1);
Session.set("profile", profile);
@ -320,19 +388,17 @@ Template.profile.events({
function slideToField(field) {
var order = ["basicInfo", "enrollInfo", "createInfo"];
$(".moveArrow").animate({"opacity":0})
$("#enrollClassList").fadeOut(200);
if(field === 0) $("#enrollClassList").fadeOut(200);
var viewing = Session.get("sections")[1]
var move = (viewing-field < 0) ? "-50%" : "150%";
var move = (viewing-field < 0) ? "-100%" : "150%";
$("#"+order[viewing]).animate({top: move});
$("#"+order[field]).animate({
top:"20%"
top:"17%"
},{
complete: function() {
Session.set("sections", [Session.get("sections")[0],field]);
$(".moveArrow").animate({"opacity":1});
if(field === 1) {
$("#enrollClassList").fadeIn(200);
}
if(field === 1) $("#enrollClassList").fadeIn(200);
}
});
}

4
hourglass/lib/constants.js
View File

@ -2,8 +2,8 @@ themeColors = {
"lux": {
"background": "White.jpg",
"mainColor": "#DBDBDB",
"secondaryColor": "#E8E8E8",
"sidebarColor": "#799CB8",
"secondaryColor": "#567393",
"sidebarColor": "#6C94B4",
"userDropdownColor": "#E6E6E6",
"iconHighlight": "#FFF",
"modeHighlight": "#D34949",