add filters for work types

This commit is contained in:
Kenneth Jao 2016-09-15 08:30:24 -04:00
parent d8d20229c6
commit e6da917ca0
3 changed files with 108 additions and 24 deletions

View File

@ -321,18 +321,30 @@ input, textarea {
width: 100%;
padding-right: 50%;
position: absolute;
overflow-y: auto;
}
#sideClassWrapper {
max-height: 20vh;
}
#classListHolder h3 {
font-weight: 200;
margin: 5%;
margin-right: 4%;
display: inline-block;
}
.sideClass {
#classFilterHolder h3 {
font-weight: 200;
padding: 5%;
box-shadow: 0px 4px 10px 1px #222;
background-color: rgba(0,0,0,0.2);
}
.sideClass, .sideFilter {
width: 100%;
height: 5vh;
padding: 1.5vh;
@ -347,12 +359,15 @@ input, textarea {
}
.sideClass div {
width: 100%;
height: 100%;
display: table;
display: inline-block;
}
.sideClass:hover {
.sideClass div:first-child {
width: 80%;
}
.sideClass:hover, .sideFilter:hover {
background-color: rgba(255,255,255,0.3);
}
@ -369,16 +384,36 @@ input, textarea {
display: table-row;
}
.sideTypeName {
margin: 0;
display: inline-block;
}
.sideFilter {
height: auto;
}
.fa-dot-circle-o {
font-size: 3vh;
color: #53BD42;
margin-top: -3.5vh;
margin-right: 4vh;
float: right;
text-align: right;
}
-webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666);
.sideClass .fa-dot-circle-o {
line-height: 4.4vh;
}
.sideFilter div {
width: 100%;
height: 100%;
}
.sideFilter .fa-dot-circle-o {
margin: 0;
margin-right: 3vh;
display: inline-block;
}
#classesMode {
@ -1082,7 +1117,7 @@ input, textarea {
}
#done {
height: 37vh;
height: 34vh;
top: 0;
overflow-y: auto;
}

View File

@ -31,8 +31,8 @@
<h4>Manage Classes</h4>
</div>
</div>
<div id="classListHolder">
{{#if myClasses}}
<div id="classListHolder">
<h3>Enrolled</h3>
{{#if calCreWork}}
<h3 id="calCreWork">-- Pick a class</h3>
@ -41,11 +41,20 @@
<h3 id="disableFilter">Disable All</h3>
{{/if}}
{{/if}}
<div id="sideClassWrapper">
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
{{/if}}
</div>
</div>
<div id="classFilterHolder">
<h3>Filters</h3>
{{#each types}}
{{> sideTypeFilter}}
{{/each}}
</div>
{{/if}}
</div>
<div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
<h3>Preferences</h3>
@ -256,12 +265,13 @@
<div>
<p class="sideClassName">{{name}}</p>
<p class="sideClassHour">{{hour}}</p>
</div>
<div>
{{#if selected}}
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
{{/if}}
</div>
</div>
</template>
<template name="classesMode">
@ -327,3 +337,14 @@
</div>
</div>
</template>
<template name="sideTypeFilter">
<div class="sideFilter" type="{{type}}">
<div>
<p class="sideTypeName">{{typeName}}</p>
{{#if selected}}
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
{{/if}}
</div>
</div>
</template>

View File

@ -8,6 +8,7 @@ import './main.html';
var load = true;
var calWorkOpen = null;
var calWorkDate = null;
//["class1","class2"] {"2":"class2","1":"class1"}
var openValues = {
"menu": "-270px",
@ -56,6 +57,7 @@ Session.set("modifying", null); // Stores current open input.
Session.set("noclass", null); // If user does not have classes.
Session.set("calCreWork", null); // If user is creating a work from calendar.
Session.set("classDisp", []); // Stores current filter for classes.
Session.set("typeFilter", []); // Stores type filters for classes.
Session.set("classDispHover", null); // Stores current hovered filter.
Session.set("refetchEvents", null); // Stores whether to get calendar events again.
Session.set("commentRestrict", ""); // Stores text for comment character restriction.
@ -79,7 +81,6 @@ Template.registerHelper('userProfile', () => {
});
Template.registerHelper('screen', (multiplier, fraction) => {
console.log(multiplier,fraction);
if(typeof multiplier !== "string") return screen.width.toString() + "px";
if(typeof fraction !== "string") return (screen.width * parseFloat(multiplier)).toString() + "px"
return ((screen.width) * parseFloat(multiplier) / parseFloat(fraction)).toString() + "px";
@ -384,6 +385,18 @@ Template.main.helpers({
newWork() { // If user is creating a new work.
return Session.get("newWork");
},
types() {
var types = Object.keys(workColors);
var array = [];
for(var i = 0; i < types.length; i++) {
array.push({
"type": types[i],
"typeName": types[i][0].toUpperCase() + types[i].slice(1),
"selected": _.contains(Session.get("typeFilter"), types[i])
});
}
return array;
},
inRole() { // Checks correct permissions.
var thisWork = work.findOne({
_id: Session.get("currentWorkId")
@ -806,6 +819,21 @@ Template.main.events({
Session.set("classDisp", array);
}
},
'click .sideFilter' (event) {
console.log("hi");
var div = event.target;
while (div.getAttribute("type") === null) div = div.parentNode;
var type = div.getAttribute("type");
var array = Session.get("typeFilter");
if (array.indexOf(classid) !== -1) {
array.splice(array.indexOf(classid), 1);
} else {
array.push(classid);
}
console.log(array);
Session.set("typeFilter", array);
},
'click #disableFilter' () {
Session.set("classDisp", []);
},