Commit 32dbd02f authored by tron's avatar tron
Browse files

filter and/or

parent 31d6fec5
......@@ -434,8 +434,9 @@ if (element !== null) {
{ id: 7, category: "type", label: "project", name: "Project", isChecked: false, checkBoxRef: React.createRef()},
{ id: 8, category: "type", label: "thesis", name: "Thesis", isChecked: false, checkBoxRef: React.createRef()},
{ id: 9, category: "type", label: "intern", name: "Internship", isChecked: false, checkBoxRef: React.createRef()},
{ id: 10, category: "type", label: "grl", name: "Games Research Lab", isChecked: false, checkBoxRef: React.createRef()},
{ id: 11, category: "type", label: "ind", name: "Industry Cooperation", isChecked: false, checkBoxRef: React.createRef()}
{ id: 11, category: "affiliation", label: "emlab", name: "Embodiment Lab", isChecked: false, checkBoxRef: React.createRef()},
{ id: 10, category: "affiliation", label: "grl", name: "Games Research Lab", isChecked: false, checkBoxRef: React.createRef()},
{ id: 12, category: "affiliation", label: "ind", name: "Industry Cooperation", isChecked: false, checkBoxRef: React.createRef()}
],
};
......@@ -450,17 +451,31 @@ if (element !== null) {
}
updateTopics() {
let tempChecked = "";
let tempUnchecked = "";
let checked = {};
let unChecked = {};
this.state.topic.forEach(function(element){
if(!(element.category in checked)){
checked[element.category] = [];
unChecked[element.category] = [];
}
if (element.isChecked) {
tempChecked += ".topic." + element.label +",";
checked[element.category].push("."+element.label);
} else {
tempUnchecked += ".topic." + element.label +",";
unChecked[element.category].push("."+element.label);
}
});
$(tempUnchecked.slice(0, -1) ).hide();
$(tempChecked.slice(0, -1) ).show(); }
let toShow = $('.topic');
let toHide = $('.topic');
Object.keys(checked).forEach(e => {
toShow = checked[e].length != 0 ? toShow.filter(checked[e].join(',')) : toShow.not(unChecked[e].join(','));
});
toHide.hide();
toShow.show();
}
handleChange (event) {
this.state.topic.filter(unfiltered => (unfiltered.id == event.target.value)).map(idOnly => {
......@@ -470,7 +485,7 @@ if (element !== null) {
this.setState({selectedCheckboxes: this.state.topic}, this.updateTopics);
}
renderFullList() {
/*renderFullList() {
return this.state.topic.map(item => (
<div>
<input
......@@ -487,89 +502,129 @@ if (element !== null) {
}
renderFocusList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div class="topicfiltercheckbox" key={focusOnly.id}>
<label for={focusOnly.id}><input
const { selectedCheckboxes } = this.state;
return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map((focusOnly) => (
<div>
<input
key={focusOnly.id}
type="checkbox"
style={{
transform: "scale(1.2)",
margin: "2px"
}}
id = {focusOnly.id}
name = {focusOnly.id}
label={focusOnly.name}
value={focusOnly.id}
checked={focusOnly.isChecked}
ref={focusOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{focusOnly.name}</span></label>
onChange={() => this.handleChange(this)}
/>
<label>{focusOnly.name}</label>
</div>
));
));
}
renderLevelList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div class="topicfiltercheckbox" key={levelOnly.id}>
<label for={levelOnly.id}><input
<div>
<input
key={levelOnly.id}
type="checkbox"
style={{
transform: "scale(1.2)",
margin: "2px"
}}
id = {levelOnly.id}
name = {levelOnly.id}
label={levelOnly.name}
value={levelOnly.id}
checked={levelOnly.isChecked}
ref={levelOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{levelOnly.name}</span></label>
onChange={this.handleChange}
/>
<label>{levelOnly.name}</label>
</div>
));
));
}
renderTypeList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div class="topicfiltercheckbox" key={typeOnly.id}>
<label for={typeOnly.id} ><input
<div>
<input
key={typeOnly.id}
type="checkbox"
style={{
transform: "scale(1.2)",
margin: "2px"
}}
id = {typeOnly.id}
name = {typeOnly.id}
label={typeOnly.name}
value={typeOnly.id}
checked={typeOnly.isChecked}
ref={typeOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span style={{ fontSize: '15px' }}>{typeOnly.name}</span></label>
onChange={this.handleChange}
/>
<label>{typeOnly.name}</label>
</div>
));
}
));
}*/
render() {
return (
<div className="column-layout">
<div class="block">
<h3 class="topicfilterheading">Focus</h3>
<div class="block">
{this.renderFocusList()}
<div class="block topic-filter">
<b class="topicfilterheading">Focus</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div class="topicfiltercheckbox" key={focusOnly.id}>
<label for={focusOnly.id} ><input
type="checkbox"
id = {focusOnly.id}
name = {focusOnly.id}
label={focusOnly.name}
value={focusOnly.id}
checked={focusOnly.isChecked}
ref={focusOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{focusOnly.name}</span></label>
</div>
))}
</div>
<div class="block topic-filter">
<b class="topicfilterheading">Level</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div class="topicfiltercheckbox" key={levelOnly.id}>
<label for={levelOnly.id}><input
type="checkbox"
id = {levelOnly.id}
name = {levelOnly.id}
label={levelOnly.name}
value={levelOnly.id}
checked={levelOnly.isChecked}
ref={levelOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{levelOnly.name}</span></label>
</div>
))}
</div>
<div class="block">
<h3 class="topicfilterheading">Level</h3>
<div class="block">
{this.renderLevelList()}
<div class="block topic-filter">
<b class="topicfilterheading">Type</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div class="topicfiltercheckbox" key={typeOnly.id}>
<label for={typeOnly.id} ><input
type="checkbox"
id = {typeOnly.id}
name = {typeOnly.id}
label={typeOnly.name}
value={typeOnly.id}
checked={typeOnly.isChecked}
ref={typeOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{typeOnly.name}</span></label>
</div>
))}
</div>
<div class="block">
<h3 class="topicfilterheading">Type</h3>
<div class="block">
{this.renderTypeList()}
<div class="block topic-filter">
<b class="topicfilterheading">Affiliation</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "affiliation")).map(affiliationOnly => (
<div class="topicfiltercheckbox" key={affiliationOnly.id}>
<label for={affiliationOnly.id} ><input
type="checkbox"
id = {affiliationOnly.id}
name = {affiliationOnly.id}
label={affiliationOnly.name}
value={affiliationOnly.id}
checked={affiliationOnly.isChecked}
ref={affiliationOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/> <span>{affiliationOnly.name}</span></label>
</div>
))}
</div>
</div>
);
}
......
......@@ -6,7 +6,7 @@ layout: base
{% if page.topic-category %}
{% for t in page.topic-category %}
{% assign defaultFilter = "" %}
{% assign defaultFilter = defaultFilter | append: " " | append: t.focus | append: " " | append: t.level | append: " " | append: t.type %}
{% assign defaultFilter = defaultFilter | append: " " | append: t.focus | append: " " | append: t.level | append: " " | append: t.type | append: " " | append: t.affiliation %}
{% endfor %}
{% endif %}
......@@ -63,7 +63,7 @@ layout: base
{% for topic in topics %}
{% for t in topic.topic-category %}
{% assign typeClasses = "topic" %}
{% assign typeClasses = typeClasses | append: " " | append: t.focus | append: " " | append: t.level | append: " " | append: t.type %}
{% assign typeClasses = typeClasses | append: " " | append: t.focus | append: " " | append: t.level | append: " " | append: t.type | append: " " | append: t.affiliation | remove: "," %}
{% endfor %}
{% assign title = topic.title %}
......
......@@ -480,6 +480,10 @@ figure > figcaption {
}
}
.column-layout .topic-filter {
flex-basis: 22%;
}
.column-layout {
@include columnLayout(20px, 10px);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment