Commit 5eeb6369 authored by dihokon's avatar dihokon
Browse files

index to topic

parent 2f30b4d9
......@@ -426,18 +426,19 @@ if (element !== null) {
this.state = {
allChecked: true,
topic: [
{ category: "focus", id: "hci", label: "Human-Computer Interaction", isChecked: true},
{ category: "focus", id: "cs", label: "Computer Science", isChecked: true},
{ category: "focus", id: "ge", label: "Games Engineering", isChecked: true},
{ category: "level", id: "ba", label: "Bachelor", isChecked: true},
{ category: "level", id: "ma", label: "Master", isChecked: true},
{ category: "level", id: "phd", label: "Ph.D.", isChecked: true},
{ category: "type", id: "project", label: "Project", isChecked: true},
{ category: "type", id: "thesis", label: "Thesis", isChecked: true},
{ category: "type", id: "intern", label: "Internship", isChecked: true},
{ category: "type", id: "grl", label: "Games Research Lab", isChecked: true},
{ category: "type", id: "ind", label: "Industry Cooperation", isChecked: true}
{ 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}
],
selectedCheckboxes: []
};
this.handleChange = this.handleChange.bind(this);
......@@ -447,6 +448,10 @@ if (element !== null) {
//TODO
updateTopics() {
if (this.state.topic.isChecked == false) {
console.log("unchecked")
}
// if (this.state.topic.isChecked == true) {
// this.state.topic.id.forEach(
// element => $(".topic." + element).show()
......@@ -462,12 +467,26 @@ if (element !== null) {
// $(".topic" + topics).show();
}
handleAllChange (e) {
handleAllChange (id) {
//TODO
}
handleChange(e){
this.setState({isChecked: !this.state.topic.isChecked}, this.updateTopics);
handleChange (id) {
const selectedCheckboxes = this.state.selectedCheckboxes;
// Find index
const findIdx = selectedCheckboxes.indexOf(id);
// Index > -1 means that the item exists and that the checkbox is checked
// and in that case we want to remove it from the array and uncheck it
if (findIdx > -1) {
selectedCheckboxes.splice(findIdx, 1);
} else {
selectedCheckboxes.push(id);
}
this.setState({selectedCheckboxes: selectedCheckboxes});
console.log("Checkbox: ", selectedCheckboxes)
}
renderFullList() {
......@@ -484,20 +503,23 @@ if (element !== null) {
<label>{item.label}</label>
</div>
));
}
}
renderFocusList() {
const { selectedCheckboxes } = this.state;
return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map((focusOnly) => (
<div>
<input
key={focusOnly.id}
type="checkbox"
label={focusOnly.label}
value={focusOnly.label}
label={focusOnly.name}
value={focusOnly.name}
defaultChecked={focusOnly.isChecked}
onChange={this.handleChange}
onChange={() => this.handleChange(focusOnly.id)}
// onChange={this.handleChange}
selected={selectedCheckboxes.includes(checkbox.id)}
/>
<label>{focusOnly.label}</label>
<label>{focusOnly.name}</label>
</div>
));
}
......@@ -508,12 +530,12 @@ if (element !== null) {
<input
key={levelOnly.id}
type="checkbox"
label={levelOnly.label}
value={levelOnly.label}
label={levelOnly.name}
value={levelOnly.name}
defaultChecked={levelOnly.isChecked}
onChange={this.handleChange}
/>
<label>{levelOnly.label}</label>
<label>{levelOnly.name}</label>
</div>
));
}
......@@ -524,17 +546,18 @@ if (element !== null) {
<input
key={typeOnly.id}
type="checkbox"
label={typeOnly.label}
value={typeOnly.label}
label={typeOnly.name}
value={typeOnly.name}
defaultChecked={typeOnly.isChecked}
onChange={this.handleChange}
/>
<label>{typeOnly.label}</label>
<label>{typeOnly.name}</label>
</div>
));
}
render() {
const { selectedCheckboxes } = this.state;
return (
<div className="column-layout">
<div class="block">
......@@ -548,7 +571,19 @@ if (element !== null) {
/> Check / Uncheck All
</div>
<br />
{this.renderFocusList()}
{/* {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)}
/>
<label>{focusOnly.name}</label>
</div>
))}
</div>
<div class="block">
......@@ -562,7 +597,19 @@ if (element !== null) {
/> Check / Uncheck All
</div>
<br />
{this.renderLevelList()}
{/* {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)}
/>
<label>{levelOnly.name}</label>
</div>
))}
</div>
<div class="block">
......@@ -576,7 +623,19 @@ if (element !== null) {
/> Check / Uncheck All
</div>
<br />
{this.renderTypeList()}
{/* {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)}
/>
<label>{typeOnly.name}</label>
</div>
))}
</div>
</div>
);
......
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