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

Merge branch 'master' of https://github.com/ksjdragon/hourglass

Browse Source
This commit is contained in:
Yaman Qalieh 2016-09-05 13:44:30 -04:00
commit 604db80371
10 changed files with 441 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
hourglass/client/admin/admin.css
View File

@ -26,8 +26,9 @@
border-top-right-radius: 2px;
display: block;
text-align: center;
float: left;
text-align: center;
cursor: pointer;
-webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease;
-moz-transition: background-color 0.3s ease, box-shadow 0.3s ease;
@ -51,7 +52,7 @@
display: inline-block;
}
#sectionTop {
.sectionTop {
font-size: 130%;
margin: 0;
padding: 6% 6% 6% 9%;
@ -59,16 +60,18 @@
box-shadow: -5px -1px 7px 3px #555;
}
#sectionTop p {
.sectionTop p {
margin-left: 10%;
display: inline;
}
.filter {
.aFilter, .aFunction {
font-size: 100%;
margin: 0;
padding: 7% 10% 7% 5%;
text-align: right;
cursor: pointer;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
@ -76,10 +79,31 @@
transition: box-shadow 0.3s ease;
}
.filter:hover {
.aFilter:hover, .aFunction:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.08);
}
.aFunction {
font-size: 100%;
}
.aFunction i {
width: 40%;
margin: 0;
padding: 0;
-webkit-filter: none;
filter: none;
display: inline-block;
}
.aFunction p {
width: 50%;
margin: 0;
display: inline-block;
}
#adminContent {
width: 90%;
height: 100%;

46
hourglass/client/admin/admin.html
View File

@ -1,5 +1,5 @@
<template name="admin">
<div id="adminBanner" style="{{banner}}{{textColor}}">
<div id="{{user}}adminBanner" style="{{banner}}{{textColor}}">
<ul id="adminTabs">
<li id="aClasses" style="background-color:{{divColor 'adminButtons'}};margin-left:0">Classes</li>
<li id="aUsers" style="background-color:{{divColor 'adminButtons'}}">Users</li>
@ -10,12 +10,52 @@
</div>
<div id="aContainer">
<div id="adminSide" style="background-color:{{divColor 'sidebar'}}">
<div id="sectionTop"><i class="fa fa-server" aria-hidden="true"></i><p>Filters</p></div>
<div id="adminFilters">
<div class="sectionTop">
<i class="fa fa-server" aria-hidden="true"></i>
<p>Filters</p>
</div>
{{#each filters}}
<p class="filter">{{filter}}</p>
<p class="aFilter">{{filter}}</p>
{{/each}}
</div>
<div id="adminFunctions">
<div class="sectionTop">
<i class="fa fa-sliders" aria-hidden="true"></i>
<p>Functions</p>
</div>
<div class="aFunction">
<p>Add Item</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="aFunction">
<p>Search</p>
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="adminContent" style="background-color:{{divColor 'header'}}">
{{#if adminTab 'aClasses'}}
{{#each collection 'classes'}}
{{/each}}
{{/if}}
{{#if adminTab 'aUsers'}}
{{#each collection 'users'}}
{{/each}}
{{/if}}
{{#if adminTab 'aWork'}}
{{#each collection 'work'}}
{{/each}}
{{/if}}
{{#if adminTab 'aSchools'}}
{{#each collection 'schools'}}
{{/each}}
{{/if}}
{{#if adminTab 'aReports'}}
{{#each collection 'requests'}}
{{/each}}
{{/if}}
</div>
</div>
</template>

21
hourglass/client/admin/admin.js
View File

@ -9,6 +9,27 @@ Template.admin.helpers({
},
filters() {
return [{filter:"Lol"}];
},
adminTab(val) {
return Session.equals("adminTab",val);
},
collection(val) {
switch(val) {
case "classes":
var classes = classes.find().fetch();
for(var i = 0; i < classes.length; i++) {
}
break;
case "users":
break;
case "work":
break;
case "schools":
break;
case "requests":
break;
}
}
});

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

@ -209,7 +209,7 @@ input, textarea {
box-shadow: 2px 2px 5px 3px #666;
position: absolute;
z-index: 1;
z-index: 5;
overflow: hidden;
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
@ -653,13 +653,17 @@ input, textarea {
}
#calendar {
padding-top: 2%;
width: 90%;
height: 100%;
margin: auto;
padding-top: 2%;
}
#calbg {
#fullcalendar {
background-color: rgba(255,255,255,0.3);
position: absolute;
border: 2vh solid rgba(255,255,255,0.3);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.fc-view-container, .fc-left {

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

@ -4,7 +4,7 @@
</head>
<template name="main">
<header style="background-color:{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
<header style="background-color:{{user}}{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
<div id="aboveBar">
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
@ -107,8 +107,7 @@
{{/if}}
{{#if currMode 'calendar'}}
<div id="calbg" style="{{calbg}}"></div>
<div id="calendar" style="{{calCenter}}{{calColor}}{{highlight}}">
<div id="calendar" style="{{calColor}}{{highlight}}">
{{> fullcalendar calendarOptions}}
</div>
{{/if}}

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

@ -36,6 +36,7 @@ var ref = {
};
// Reactive variables.
Session.set("user",null);
Session.set("calendarClasses", null);
Session.set("sidebar", null); // Status of sidebar
Session.set("newWork", null); // If user creating new work.
@ -49,36 +50,40 @@ Session.set("classDispHover", null); // Stores current hovered filter.
Session.set("refetchEvents", null); // Stores whether to get calendar events again.
Session.set("commentRestrict", null); // Stores text for comment character restriction.
Template.registerHelper('user', () => {
var user = Meteor.user().profile;
if(user === undefined || user === null) return;
Session.set("user", user);
return;
});
Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
if (Meteor.user() === undefined) return;
return themeColors[Meteor.user().profile.preferences.theme][div];
return themeColors[Session.get("user").preferences.theme][div];
});
Template.registerHelper('textColor', () => { // Reactive color for text.
if (Meteor.user() === undefined) return;
document.getElementsByTagName("body")[0].style.color = themeColors[Meteor.user().profile.preferences.theme].text;
document.getElementsByTagName("body")[0].style.color = themeColors[Session.get("user").preferences.theme].text;
return;
});
Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
if (Meteor.user() === undefined) return;
var dim = [window.innerWidth * 0.25, window.innerHeight * 0.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[Meteor.user().profile.preferences.theme].header + ";";
var bg = "background-color:" + themeColors[Session.get("user").preferences.theme].header + ";";
return width + height + margin + bg;
});
Template.registerHelper('myClasses', () => { // Gets all classes and respective works.
if (Meteor.user() === undefined) { // Null checking.
Session.set("noclass", true); // Makes sure to display nothing.
if(Session.get("user")["classes"].length === 0) { // Null checking.
Session.set("noclass",true); // Makes sure to display nothing.
return [];
} else {
var array = [];
var courses = Meteor.user().profile.classes;
var courses = Session.get("user").classes;
var classDisp = Session.get("classDisp"); // Get sidebar class filter.
var hide = Meteor.user().profile.preferences.timeHide;
var hide = Session.get("user").preferences.timeHide;
for (var i = 0; i < courses.length; i++) { // For each user class.
found = classes.findOne({
@ -111,8 +116,9 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
j = 0;
}
}
if (thisWork[j] !== "no" && Meteor.user().profile.preferences.done) { // If done filter is true
if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
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";
j = 0;
}
@ -159,9 +165,8 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
});
Template.registerHelper('pref', (val) => { // Obtains all user preferences.
if (Meteor.user() === undefined) return;
var preferences = Meteor.user().profile.preferences;
if (val === 'timeHide' || val === 'done') {
var preferences = Session.get("user").preferences;
if(val === 'timeHide' || val === 'done') {
var invert = _.invert(ref);
return invert[preferences[val]];
}
@ -170,29 +175,26 @@ Template.registerHelper('pref', (val) => { // Obtains all user preferences.
Template.main.helpers({
schoolName() { // Finds the name of the user's school.
if (Meteor.user().profile.school === undefined) return;
return " - " + Meteor.user().profile.school;
if(Session.get("user").school === undefined) return;
return " - " + Session.get("user").school;
},
iconColor(icon) { // Sidebar status color
if (Session.equals("sidebar", icon + "Container")) {
return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
} else if (Session.equals("sidebar", "both")) {
return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
if (Session.equals("sidebar",icon + "Container")) {
return themeColors[Session.get("user").preferences.theme].statusIcons;
} else if (Session.equals("sidebar","both")) {
return themeColors[Session.get("user").preferences.theme].statusIcons;
} else {
return;
}
},
defaultMode() { //Loads the default display mode for user.
if (load) {
Session.set("mode", Meteor.user().profile.preferences.mode);
load = false;
if(load) {
Session.set("mode",Session.get("user").preferences.mode);
}
return;
},
bgSrc() { // Adjusts for different, larger screen sizes.
var dim = [window.innerWidth, window.innerHeight];
var pic = "Backgrounds/" + themeColors[Meteor.user().profile.preferences.theme].background;
return pic;
bgSrc() { // Returns background.
return "Backgrounds/"+ themeColors[Session.get("user").preferences.theme].background;
},
menuStatus() { // Status of of menu sidebar.
if (Session.equals("sidebar", "menuContainer")) {
@ -213,11 +215,8 @@ Template.main.helpers({
}
},
modeStatus(status) { // Color status of display modes.
if (Session.equals("mode", status)) {
return themeColors[Meteor.user().profile.preferences.theme].highlightText;
} else {
return;
}
if (!Session.equals("mode",status)) return;
return themeColors[Session.get("user").preferences.theme].highlightText;
},
currMode(name) { // Status of display mode.
var mode = Session.get("mode");
@ -304,12 +303,7 @@ Template.main.helpers({
return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
},
calColor() { // Sets the color of the calendar according to theme
return "color:" + themeColors[Meteor.user().profile.preferences.theme].calendar;
},
calbg() { //Sets size of the calendar
var width = window.innerWidth * 0.865;
var height = window.innerHeight * 0.76;
return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px";
return "color:"+themeColors[Session.get("user").preferences.theme].calendar;
},
calCreWork() { // Display instructions for creating a work.
if (Session.get("calCreWork")) return true;
@ -890,7 +884,7 @@ function getHomeworkFormData() { // Get all data relating to work creation.
}
function getPreferencesData() { // Get all data relating to preferences.
var profile = Meteor.user().profile;
var profile = Session.get("user");
var options = {
"theme": document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
"mode": document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),

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

@ -26,6 +26,7 @@
.profHea {
font-size: 300%;
font-weight: 200;
padding: 6% 6% 0 8%;
}
#motda {
@ -35,42 +36,54 @@
#profPage {
width: 100%;
height: 100%;
padding-right: 10%;
overflow-x: hidden;
overflow-y: auto;
}
#profMainContainer {
width: 85%;
height: auto;
margin: auto;
}
#profTop {
position: relative;
top: 0;
left: 50%;
}
#profBanner {
border: 5px solid #0D0D0D;
border-top: 0;
border-bottom: 0;
width: 100%;
margin: 0;
border-left: 5px solid #0D0D0D;
border-right: 5px solid #0D0D0D;
}
#profAvatar {
height: 27vh;
width: 27vh;
border: 10px solid #0D0D0D;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 43%;
left: 2.5%;
float: left;
bottom: -6.5%;
left: 1.5%;
z-index: 5;
}
#motdBox {
width: 100%;
height: 5%;
margin-top: -0.3%;
padding: 0.5% 0 0.5% 0;
background-color: #0D0D0D;
border-left: 5px solid #0D0D0D;
border-right: 5px solid #0D0D0D;
}
#motdBox span {
@ -118,39 +131,69 @@
}
#profCards {
width: 100%;
height: 100%;
margin-top: 3%;
margin-bottom: 3%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display: table;
}
#cardColLeft, #cardColRight {
height: 100%;
display: table-cell;
vertical-align: top;
}
#cardColLeft {
width: 39.6%;
float: left;
}
#cardColRight {
width: 60%;
float: right;
text-align: right;
}
.card {
margin-bottom: 5%;
padding: 4%;
padding-top: 2.5%;
padding-right: 2%;
width: 95%;
margin-bottom: 9%;
box-shadow: 2px 2px 5px 3px #666;
text-align: left;
}
#profInfo {
width: 30%;
float: left;
margin-left: 0;
border-top: 5px solid #CC4444;
}
#about {
padding: 5%;
#about, #preferences {
padding: 3% 5% 7% 14%;
}
.radioContainer {
position: relative;
}
#classes {
padding: 3% 5% 7% 7%;
}
#profClasses {
width: 52%;
height: 30%;
float: right;
height: 90%;
margin-right: 0;
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;
float: right;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
transition: height 0.5s ease;
}
#profClassInfoHolder {
@ -160,10 +203,6 @@
transition: opacity 0.4s ease;
}
#classes {
padding: 4% 0 4% 0;
}
#profFunctions {
display: inline;
}
@ -238,6 +277,7 @@
.classHolder {
width: 90%;
max-height: 26vh;
padding: 1%;
padding-right: 100%;
@ -338,11 +378,11 @@
}
#creRules {
position: absolute;
margin: 5%;
margin-bottom: 0;
}
#create {
margin-top: 2.5%;
padding: 5%;
padding-top: 1%;
}
@ -401,26 +441,10 @@
color: #999 !important;
}
#mainpage:hover, #logout2:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
#mainpage h2, #logout2 h2 {
font-weight: 200;
width: 100%;
padding: 8%;
-webkit-filter: none;
filter: none !important;
}
#mainpage, #logout2 {
font-size: 90%;
padding: 0.3%;
margin: 0;
padding: 0.7%;
background-color: #617C9E;
box-shadow: -1px 2px 5px 1px #333;
@ -430,11 +454,22 @@
left: 10%;
z-index: 50;
-webkit-transition: transform 0.2s ease, background-color 0.1s ease;
-moz-transition: transform 0.2s ease, background-color 0.1s ease;
-ms-transition: transform 0.2s ease, background-color 0.1s ease;
transition: transform 0.2s ease, background-color 0.1s ease;
cursor: pointer;
-webkit-transition: background-color 0.1s ease;
-moz-transition: background-color 0.1s ease;
-ms-transition: background-color 0.1s ease;
transition: background-color 0.1s ease;
}
#mainpage:hover {
background-color: #56708D;
}
#logout2:hover {
background-color: #C84949;
}
#logout2 {
background-color: #DE5050;
position: absolute;
@ -442,8 +477,12 @@
left: 85%;
}
#mainpage:active, #logout2:active {
background-color: #56708D;
#mainpage h2, #logout2 h2 {
font-weight: 200;
width: 100%;
-webkit-filter: none;
filter: none !important;
}
#createdClasses {
@ -521,7 +560,7 @@
.userHolder {
width: 100%;
max-height: 10%;
max-height: 10vh;
margin-left: 5%;
padding: 2%;
padding-right: 20%;
@ -533,10 +572,10 @@
.userBox {
font-size: 100%;
width: 80%;
margin-bottom: 3%;
padding: 4%;
margin-bottom: 1.5%;
padding: 2%;
box-shadow: 2px 2px 5px 3px #666;
box-shadow: 1px 1px 5px 1px #666;
display: table;
}
@ -671,11 +710,5 @@
}
#profPreferences {
width: 30%;
float: left;
border-top: 5px solid #409333;
}
#preferences {
padding: 5%;
}

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

@ -1,15 +1,18 @@
<template name="profile">
{{> loginButtons}}
<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};{{textColor}}{{loadNew}}">
<div id="mainpage" onclick="window.location='/'"><h2>Main Page</h2></div>
<div id="mainpage{{user}}" onclick="window.location='/'"><h2>Main Page</h2></div>
<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></div>
<div id="profMainContainer" style="{{mainCenter}}">
<div id="profBanner" style="{{banner}};"></div>
<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
<div id="profPage" style="background-color:{{divColor 'header'}};{{textColor}}{{loadNew}}">
<div id="profMainContainer">
<div id="profTop">
<img id="profBanner" src='{{banner}}' alt="Banner">
<img id="profAvatar" src='{{avatar}}' alt="Avatar">
<div id="motdBox">
<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
</div>
</div>
<div id="profCards">
<div id="cardColLeft">
<!-- Card 1 -->
<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
<h3 class="profHea">About</h3>
<div id="about">
@ -18,7 +21,7 @@
<span class="change" id="school">{{school}}</span>
</div>
<br>
<div>
<div class="radioContainer">
<div>
<p class="profTitle">Grade:</p>
<span class="change radio" re="readonly" id="grade">{{grade}}</span>
@ -32,7 +35,62 @@
</div>
</div>
</div>
<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};height:{{profClassHeight}};">
<!-- Card 2 -->
<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
<h3 class="profHea">Preferences</h3>
<div id="preferences">
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Light</p>
<p class="profOptionText">Dark</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Classes</p>
<p class="profOptionText">Calendar</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">1 Day</p>
<P class="profOptionText">2 Days</p>
<p class="profOptionText">1 Week</p>
<p class="profOptionText">1 Month</p>
<p class="profOptionText">Never</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Yes</p>
<p class="profOptionText">No</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardColRight">
<!-- Card 3 -->
<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};">
<h3 class="profHea">Classes</h3>
<div id="classes">
<div id="profFunctions">
@ -57,7 +115,7 @@
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder" style="max-height:{{classHolderHeight}}">
<div class="classHolder">
{{#each myClasses}}
{{> classDisplay}}
@ -78,7 +136,7 @@
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder" style="max-height:{{classHolderHeight}}">
<div class="classHolder">
{{#if notsearching}}
{{#each classes}}
{{> classDisplay}}
@ -99,7 +157,6 @@
{{#if profClassTab "creClass"}}
<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
<form id="create">
<div id="formContainer">
<div class="formDiv">
<p class="profTitle">School:</p>
@ -136,61 +193,10 @@
</div>
</div>
<h3 id="creSubmit">Submit Request</h3>
</form>
{{/if}}
</div>
</div>
</div>
<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
<h3 class="profHea">Preferences</h3>
<div id="preferences">
<div>
<div class="inputRadio">
<p class="profTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Light</p>
<p class="profOptionText">Dark</p>
</div>
</div>
<br>
<div>
<div class="inputRadio">
<p class="profTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Classes</p>
<p class="profOptionText">Calendar</p>
</div>
</div>
<br>
<div>
<div class="inputRadio">
<p class="profTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">1 Day</p>
<P class="profOptionText">2 Days</p>
<p class="profOptionText">1 Week</p>
<p class="profOptionText">1 Month</p>
<p class="profOptionText">Never</p>
</div>
</div>
<br>
<div>
<div class="inputRadio">
<p class="profTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
</div>
<div class="profOptions" style="background-color:{{divColor 'header'}}">
<p class="profOptionText">Yes</p>
<p class="profOptionText">No</p>
</div>
</div>
</div>
</div>
</div>
</div>
@ -216,7 +222,7 @@
<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="userHolder" style="max-height:{{userHolder}}">
<div class="userHolder">
{{#each selectedClass 'moderators'}}
{{> userDisplay}}
{{/each}}
@ -228,7 +234,7 @@
<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="userHolder" style="max-height:{{userHolder}}">
<div class="userHolder">
{{#each selectedClass 'banned'}}
{{> userDisplay}}
{{/each}}
@ -245,6 +251,7 @@
<input id="privateCode" type="text" placeholder="Enter code here...">
<h4 id="privSubmit">Submit</h4>
</div>
{{> loginButtons}}
</template>
<template name="classDisplay">

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

@ -1,4 +1,6 @@
import {
/* jshint esversion: 6 */
import {
Template
} from 'meteor/templating';
@ -58,46 +60,14 @@ Template.profile.helpers({
}]
};
},
mainCenter() { // Centers main div container.
var width = window.innerWidth * 1600 / 1920 + 10;
return "width:" + width.toString() + "px;margin-left:" + -0.5 * width.toString() + "px";
banner() { // Returns banner
return Session.get("user").banner;
},
mainHeight() { // Returns height of screen for div.
return window.innerHeight.toString() + "px";
},
banner() { // Styles the banner
var width = window.innerWidth * 1600 / 1920;
var height = width * 615 / 1600;
if (Meteor.user().profile.banner !== undefined || Meteor.user().profile.banner !== null) {
var banner = Meteor.user().profile.banner;
} else {
var banner = "Banners/defaultcover.jpg";
currentprofile = Meteor.user().profile;
currentprofile.banner = banner
Meteor.call("editProfile", currentprofile);
}
return "width:" + width.toString() + "px;height:" + height.toString() + "px;background-image:url(" + banner + ");background-size:" + width.toString() + "px " + height.toString() + "px";
},
avatar() { // Styles the avatar
var dim = window.innerWidth * 1600 / 1920 * 0.16;
var pic = "";
var userprofile = Meteor.user().profile.avatar;
if (userprofile !== undefined && userprofile !== null) {
pic = Meteor.user().profile.avatar;
} else {
pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString() + ".png";
currentprofile = Meteor.user().profile;
currentprofile.avatar = pic;
Meteor.call("editProfile", currentprofile);
}
return "background-image:url(" + pic + ");background-size:" + dim.toString() + "px " + dim.toString() + "px";
},
avatarDim() { // Dimensions of the avatar
var dim = window.innerWidth * 1600 / 1920 * 0.16;
return "height:" + dim.toString() + "px;width:" + dim.toString() + "px;top:" + 0.43 * window.innerHeight.toString() + "px;";
avatar() { // Returns avatar
return Session.get("user").avatar;
},
username() { //Returns current user's username
return Meteor.user().profile.name;
return Session.get("user").name;
},
motd() { // Returns the current user's description
if (Meteor.user().profile.description) {
@ -141,12 +111,6 @@ Template.profile.helpers({
}
return array;
},
profClassHeight() { // Dimensions the class height
return 0.6 * window.innerHeight.toString() + "px";
},
classHolderHeight() { // Dimensions the container for the classes
return 0.26 * window.innerHeight.toString() + "px";
},
profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]    
if (Session.equals("profClassTab",status)) {            
return themeColors[Meteor.user().profile.preferences.theme].highlightText;        
@ -206,9 +170,6 @@ Template.profile.helpers({
},
code() { // Returns if selected class has code.
return Session.get("code");
},
userHolder() { // Returns height of user holders for moderators/banned.
return 0.15 * window.innerHeight.toString() + "px";
}
});
@ -249,29 +210,41 @@ Template.profile.events({
}
},
// MAIN BUTTONS
'click .addClass' () {        
'click .addClass' () { 
if(Session.equals("profClassTab","addClass")) return;         
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);        
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%"
setTimeout(function() {            
Session.set("profClassTab", "addClass");            
Session.set("profClassTab", "addClass");
div.style.height = "90%";          
openDivFade(functionHolder);        
}, 300);    
}, 400);
},
    'click .manageClass' () {        
    'click .manageClass' () { 
if(Session.equals("profClassTab","manClass")) return;      
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);        
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%"     
setTimeout(function() {            
Session.set("profClassTab", "manClass");            
Session.set("profClassTab", "manClass"); 
div.style.height = "90%";           
openDivFade(functionHolder);        
}, 300);    
}, 400);    
},
    'click .createClass' () {        
    'click .createClass' () {
if(Session.equals("profClassTab","creClass")) return;       
var functionHolder = document.getElementById("profClassInfoHolder");        
closeDivFade(functionHolder);        
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%"
setTimeout(function() {            
Session.set("profClassTab", "creClass");            
Session.set("profClassTab", "creClass");
div.style.height = "90%";
openDivFade(functionHolder);        
}, 300);    
}, 400);    
},
'click .classBox' (event) { // When you click on a box that holds class
if (event.target.id === "label" ||
@ -600,7 +573,8 @@ function closeInput(modifyingInput) { // Closes current modifying input.
}
span.style.display = "initial";
Session.set("modifying", null);
serverData = getProfileData();
Session.set("user", getProfileData());
serverData = Session.get("user");
sendData("editProfile");
}
@ -609,19 +583,19 @@ function sendData(funcName) {
}
function getProfileData() { // Gets all data related to profile.
var profile = Meteor.user().profile;
var profile = Session.get("user");
profile.description = document.getElementById("motd").childNodes[0].nodeValue;
profile.school = document.getElementById("school").childNodes[0].nodeValue;
var gradein = document.getElementById("grade").childNodes[0].nodeValue;
profile.grade = parseInt(gradein.substring(gradein.length - 2, gradein));
profile.avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
profile.banner = document.getElementById("profBanner").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
profile.avatar = document.getElementById("profAvatar").src;
profile.banner = document.getElementById("profBanner").src;
profile.preferences = {
"theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
"mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
"timeHide":document.getElementById("prefHide").childNodes[0].nodeValue
"timeHide":ref[document.getElementById("prefHide").childNodes[0].nodeValue],
"done":ref[document.getElementById("prefDone").childNodes[0].nodeValue]
};
return profile;
}

9
hourglass/lib/constants.js
View File

@ -29,3 +29,12 @@ themeColors = {
};
serverData = null;
ref = {
"1 Day":1,
"2 Days":2,
"1 Week":7,
"1 Month":30,
"Never":0,
"Yes":true,
"No":false
};