add filters for work types
This commit is contained in:
Kenneth Jao
parent
d8d20229c6
commit
e6da917ca0
@ -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;
|
||||
}
|
||||
|
||||
@ -31,21 +31,30 @@
|
||||
<h4>Manage Classes</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div id="classListHolder">
|
||||
{{#if myClasses}}
|
||||
<h3>Enrolled</h3>
|
||||
{{#if calCreWork}}
|
||||
<h3 id="calCreWork">-- Pick a class</h3>
|
||||
{{else}}
|
||||
{{#if filterOn}}
|
||||
<h3 id="disableFilter">Disable All</h3>
|
||||
<div id="classListHolder">
|
||||
<h3>Enrolled</h3>
|
||||
{{#if calCreWork}}
|
||||
<h3 id="calCreWork">-- Pick a class</h3>
|
||||
{{else}}
|
||||
{{#if filterOn}}
|
||||
<h3 id="disableFilter">Disable All</h3>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#each myClasses}}
|
||||
{{> sidebarClasses}}
|
||||
<div id="sideClassWrapper">
|
||||
{{#each myClasses}}
|
||||
{{> sidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="classFilterHolder">
|
||||
<h3>Filters</h3>
|
||||
{{#each types}}
|
||||
{{> sideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</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>
|
||||
@ -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", []);
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user