Commit 0fbf269f authored by tron's avatar tron
Browse files

better filter

parent 946c6d77
......@@ -425,25 +425,30 @@ if (element !== null) {
super(props);
this.state = {
topic: [
{ id: 1, category: "focus", label: "hci", name: "Human-Computer Interaction", isChecked: true, checkBoxRef: React.createRef()},
{ id: 2, category: "focus", label: "cs", name: "Computer Science", isChecked: true, checkBoxRef: React.createRef()},
{ id: 3, category: "focus", label: "ge", name: "Games Engineering", isChecked: true, checkBoxRef: React.createRef()},
{ id: 4, category: "level", label: "ba", name: "Bachelor", isChecked: true, checkBoxRef: React.createRef()},
{ id: 5, category: "level", label: "ma", name: "Master", isChecked: true, checkBoxRef: React.createRef()},
{ id: 6, category: "level", label: "phd", name: "Ph.D.", isChecked: true, checkBoxRef: React.createRef()},
{ id: 7, category: "type", label: "project", name: "Project", isChecked: true, checkBoxRef: React.createRef()},
{ id: 8, category: "type", label: "thesis", name: "Thesis", isChecked: true, checkBoxRef: React.createRef()},
{ id: 9, category: "type", label: "intern", name: "Internship", isChecked: true, checkBoxRef: React.createRef()},
{ id: 10, category: "type", label: "grl", name: "Games Research Lab", isChecked: true, checkBoxRef: React.createRef()},
{ id: 11, category: "type", label: "ind", name: "Industry Cooperation", isChecked: true, checkBoxRef: React.createRef()}
{ id: 1, category: "focus", label: "hci", name: "Human-Computer Interaction", isChecked: false, checkBoxRef: React.createRef()},
{ id: 2, category: "focus", label: "cs", name: "Computer Science", isChecked: false, checkBoxRef: React.createRef()},
{ id: 3, category: "focus", label: "ge", name: "Games Engineering", isChecked: false, checkBoxRef: React.createRef()},
{ id: 4, category: "level", label: "ba", name: "Bachelor", isChecked: false, checkBoxRef: React.createRef()},
{ id: 5, category: "level", label: "ma", name: "Master", isChecked: false, checkBoxRef: React.createRef()},
{ id: 6, category: "level", label: "phd", name: "Ph.D.", isChecked: false, checkBoxRef: React.createRef()},
{ 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()}
],
};
this.state.topic.forEach(function(e){
if (element.attributes.filterDefault.value.includes(e.label)) {
e.isChecked = true;
}
});
this.updateTopics = this.updateTopics.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleAllChange = this.handleAllChange.bind(this);
this.updateTopics();
}
//TODO
updateTopics() {
let tempChecked = "";
let tempUnchecked = "";
......@@ -457,10 +462,6 @@ if (element !== null) {
$(tempUnchecked.slice(0, -1) ).hide();
$(tempChecked.slice(0, -1) ).show(); }
handleAllChange (id) {
//TODO
}
handleChange (event) {
this.state.topic.filter(unfiltered => (unfiltered.id == event.target.value)).map(idOnly => {
idOnly.isChecked = !idOnly.isChecked;
......@@ -538,56 +539,55 @@ if (element !== null) {
return (
<div className="column-layout">
<div class="block">
<b>Focus</b>
{/* {this.renderFocusList()} */}
<b class="topicfilterheading">Focus</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div key={focusOnly.id}>
<input
<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)}
/>
<label>{focusOnly.name}</label>
/> <span>{focusOnly.name}</span></label>
</div>
))}
</div>
<div class="block">
<b>Level</b>
{/* {this.renderLevelList()} */}
<b class="topicfilterheading">Level</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div key={levelOnly.id}>
<input
<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)}
/>
<label>{levelOnly.name}</label>
/> <span>{levelOnly.name}</span></label>
</div>
))}
</div>
<div class="block">
<b>Type</b>
{/* {this.renderTypeList()} */}
<b class="topicfilterheading">Type</b>
{this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div key={typeOnly.id}>
<input
<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)}
/>
<label>{typeOnly.name}</label>
/> <span>{typeOnly.name}</span></label>
</div>
))}
</div>
......
......@@ -2,11 +2,21 @@
layout: base
---
<h1>{{ page.title }}</h1>
{% if page.topic-status == "open" %}
{% 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 %}
{% endfor %}
{% endif %}
{% if page.topic-status == "open" and page.hide-filter == false %}
<hr/>
<div id="react-placeholder-topicSelector" status="{{ page.topic-status }}"></div>
<div id="react-placeholder-topicSelector" filterDefault='{{ defaultFilter }}' status="{{ page.topic-status }}" ></div>
<hr/>
{% endif %}
{% else %}
<div id="react-placeholder-topicSelector" style="display:none;" filterDefault='{{ defaultFilter }}' status="{{ page.topic-status }}" ></div>
{% endif %}
{% assign topics = site.topics %}
......
......@@ -790,4 +790,14 @@ table {
font-style: italic;
}
}
}
.topicfiltercheckbox input {
vertical-align: middle;
}
.topicfiltercheckbox label span {
vertical-align: middle;
}
.topicfilterheading {
padding-bottom: 10px;
}
\ No newline at end of file
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