Commit 946c6d77 authored by tron's avatar tron
Browse files

filter working

parent 0f4e03c9
......@@ -424,21 +424,19 @@ if (element !== null) {
constructor(props) {
super(props);
this.state = {
allChecked: true,
topic: [
{ id: 1, category: "focus", label: "hci", name: "Human-Computer Interaction", isChecked: true},
{ id: 2, category: "focus", label: "cs", name: "Computer Science", isChecked: true},
{ id: 3, category: "focus", label: "ge", name: "Games Engineering", isChecked: true},
{ id: 4, category: "level", label: "ba", name: "Bachelor", isChecked: true},
{ id: 5, category: "level", label: "ma", name: "Master", isChecked: true},
{ id: 6, category: "level", label: "phd", name: "Ph.D.", isChecked: true},
{ id: 7, category: "type", label: "project", name: "Project", isChecked: true},
{ id: 8, category: "type", label: "thesis", name: "Thesis", isChecked: true},
{ id: 9, category: "type", label: "intern", name: "Internship", isChecked: true},
{ id: 10, category: "type", label: "grl", name: "Games Research Lab", isChecked: true},
{ id: 11, category: "type", label: "ind", name: "Industry Cooperation", isChecked: true}
{ 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()}
],
selectedCheckboxes: []
};
this.handleChange = this.handleChange.bind(this);
......@@ -447,56 +445,28 @@ if (element !== null) {
//TODO
updateTopics() {
let tempLabel = "";
let tempChecked = "";
let tempUnchecked = "";
this.state.topic.forEach(function(element){
if (element.isChecked == true) {
tempLabel += " ." + element.label;
if (element.isChecked) {
tempChecked += ".topic." + element.label +",";
} else {
tempUnchecked += ".topic." + element.label +",";
}
});
// this.state.topic.forEach( element => (
// if (element.isChecked == true) {
// tempLabel += " ." + element.label
// }
// ));
$(".topic" + tempLabel).show();
$(".topic:not(" + tempLabel + ")").hide();
// if (selectedCheckboxes.includes("1")) {
// $(".topic." + this.state.topic.label[this.state.topic.id]).show();
// }
// $(".topic:not(." + this.topic.id[this.topic.selected == false] + ")").hide();
// if (this.state.topic.isChecked == true) {
// this.state.topic.id.forEach(
// element => $(".topic." + element).show()
// );
// }
// let topics = "";
// if (this.state.topic.isChecked == false) {
// topics += "." + this.state.topic.id;
// $(".topic:not(." + this.state.topic.id + ")").hide();
// }
// $(".topic" + topics).show();
}
$(tempUnchecked.slice(0, -1) ).hide();
$(tempChecked.slice(0, -1) ).show(); }
handleAllChange (id) {
//TODO
}
handleChange (id) {
this.state.selectedCheckboxes[selectedCheckboxes.indexOf(id)].isChecked = !this.state.selectedCheckboxes[selectedCheckboxes.indexOf(id)].isChecked;
// const findIdx = selectedCheckboxes.indexOf(id);
// if (findIdx > -1) {
// selectedCheckboxes.splice(findIdx, 1);
// } else {
// selectedCheckboxes.push(id);
// }
// this.setState({selectedCheckboxes: selectedCheckboxes}, this.updateTopics);
// console.log("Checkbox: ", selectedCheckboxes)
handleChange (event) {
this.state.topic.filter(unfiltered => (unfiltered.id == event.target.value)).map(idOnly => {
idOnly.isChecked = !idOnly.isChecked;
idOnly.checkBoxRef.checked = idOnly.isChecked;
});
this.setState({selectedCheckboxes: this.state.topic}, this.updateTopics);
}
renderFullList() {
......@@ -523,11 +493,9 @@ if (element !== null) {
key={focusOnly.id}
type="checkbox"
label={focusOnly.name}
value={focusOnly.name}
defaultChecked={focusOnly.isChecked}
onChange={() => this.handleChange(focusOnly.id)}
// onChange={this.handleChange}
selected={selectedCheckboxes.includes(checkbox.id)}
value={focusOnly.id}
checked={focusOnly.isChecked}
onChange={() => this.handleChange(this)}
/>
<label>{focusOnly.name}</label>
</div>
......@@ -541,8 +509,8 @@ if (element !== null) {
key={levelOnly.id}
type="checkbox"
label={levelOnly.name}
value={levelOnly.name}
defaultChecked={levelOnly.isChecked}
value={levelOnly.id}
checked={levelOnly.isChecked}
onChange={this.handleChange}
/>
<label>{levelOnly.name}</label>
......@@ -557,8 +525,8 @@ if (element !== null) {
key={typeOnly.id}
type="checkbox"
label={typeOnly.name}
value={typeOnly.name}
defaultChecked={typeOnly.isChecked}
value={typeOnly.id}
checked={typeOnly.isChecked}
onChange={this.handleChange}
/>
<label>{typeOnly.name}</label>
......@@ -567,29 +535,20 @@ if (element !== null) {
}
render() {
const { selectedCheckboxes } = this.state;
return (
<div className="column-layout">
<div class="block">
<b>Focus</b>
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
<br />
<b>Focus</b>
{/* {this.renderFocusList()} */}
{this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div key={focusOnly.id}>
<input
type="checkbox"
label={focusOnly.name}
value={focusOnly.name}
onChange={() => this.handleChange(focusOnly.id)}
selected={selectedCheckboxes.includes(focusOnly.id)}
value={focusOnly.id}
checked={focusOnly.isChecked}
ref={focusOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/>
<label>{focusOnly.name}</label>
</div>
......@@ -598,24 +557,17 @@ if (element !== null) {
<div class="block">
<b>Level</b>
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
<br />
{/* {this.renderLevelList()} */}
{this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div key={levelOnly.id}>
<input
type="checkbox"
label={levelOnly.name}
value={levelOnly.name}
onChange={() => this.handleChange(levelOnly.id)}
selected={selectedCheckboxes.includes(levelOnly.id)}
value={levelOnly.id}
checked={levelOnly.isChecked}
ref={levelOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/>
<label>{levelOnly.name}</label>
</div>
......@@ -624,24 +576,16 @@ if (element !== null) {
<div class="block">
<b>Type</b>
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
<br />
{/* {this.renderTypeList()} */}
{this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div key={typeOnly.id}>
<input
type="checkbox"
label={typeOnly.name}
value={typeOnly.name}
onChange={() => this.handleChange(typeOnly.id)}
selected={selectedCheckboxes.includes(typeOnly.id)}
value={typeOnly.id}
checked={typeOnly.isChecked}
ref={typeOnly.checkBoxRef}
onChange={() => this.handleChange(event)}
/>
<label>{typeOnly.name}</label>
</div>
......@@ -650,6 +594,8 @@ if (element !== null) {
</div>
);
}
};
ReactDOM.render(<TopicSelector />, document.getElementById("react-placeholder-topicSelector"));
......
......@@ -52,9 +52,10 @@ layout: base
{% assign counter = 0 %}
{% 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 = "topic" %}
{% assign typeClasses = typeClasses | append: " " | append: t.focus | append: " " | append: t.level | append: " " | append: t.type %}
{% endfor %}
{% assign title = topic.title %}
{% if t.put-on-top-of-the-list == true %}
{% assign title = title | append: " &#9733;" %}
......
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