Commit eb2446a2 authored by dihokon's avatar dihokon
Browse files

change to checkboxes !selection still not working!

parent 267949b1
import $ from "jquery"; import $, { type } from "jquery";
import "slick-carousel"; import "slick-carousel";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import React from "react"; import React, { useState } from "react";
// const path = require("path"); // const path = require("path");
// const YAML = require('yamljs'); // const YAML = require('yamljs');
...@@ -209,7 +209,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) { ...@@ -209,7 +209,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) {
} }
if (document.getElementById("react-placeholder-toggleVisibility-topics-open") !== null) { if (document.getElementById("react-placeholder-toggleVisibility-topics-open") !== null) {
const ToggleVisibilityTopicsOpen = class extends React.Component { const ToggleVisibilityTopicsOpen = class extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -249,7 +249,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) { ...@@ -249,7 +249,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) {
ReactDOM.render(<ToggleVisibilityTopicsOpen />, document.getElementById("react-placeholder-toggleVisibility-topics-open")); ReactDOM.render(<ToggleVisibilityTopicsOpen />, document.getElementById("react-placeholder-toggleVisibility-topics-open"));
} }
if (document.getElementById("react-placeholder-toggleVisibility-topics-closed") !== null) { if (document.getElementById("react-placeholder-toggleVisibility-topics-closed") !== null) {
const ToggleVisibilityTopicsClosed = class extends React.Component { const ToggleVisibilityTopicsClosed = class extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -289,7 +289,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) { ...@@ -289,7 +289,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) {
ReactDOM.render(<ToggleVisibilityTopicsClosed />, document.getElementById("react-placeholder-toggleVisibility-topics-closed")); ReactDOM.render(<ToggleVisibilityTopicsClosed />, document.getElementById("react-placeholder-toggleVisibility-topics-closed"));
} }
if (document.getElementById("react-placeholder-toggleVisibility-topics-assigned") !== null) { if (document.getElementById("react-placeholder-toggleVisibility-topics-assigned") !== null) {
const ToggleVisibilityTopicsAssigned = class extends React.Component { const ToggleVisibilityTopicsAssigned = class extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -365,7 +365,7 @@ if (document.getElementById("react-placeholder-filterInput") !== null) { ...@@ -365,7 +365,7 @@ if (document.getElementById("react-placeholder-filterInput") !== null) {
}; };
const copyURL = (event) => { const copyURL = (event) => {
var copyText = window.location.origin +'/publications/?query='+ $("#react-placeholder-filterInput[bibType='filter'] > div > input").val().replace(' ','&query='); var copyText = window.location.origin + '/publications/?query=' + $("#react-placeholder-filterInput[bibType='filter'] > div > input").val().replace(' ', '&query=');
var $temp = $("<input>"); var $temp = $("<input>");
$("body").append($temp); $("body").append($temp);
$temp.val(copyText).select(); $temp.val(copyText).select();
...@@ -419,206 +419,211 @@ $(document).ready(function () { ...@@ -419,206 +419,211 @@ $(document).ready(function () {
// //////////////////////////////////////////////////////////////////////////// // ////////////////////////////////////////////////////////////////////////////
const element = document.getElementById("react-placeholder-topicSelector"); const element = document.getElementById("react-placeholder-topicSelector");
if (element !== null) { if (element !== null) {
const TopicSelector = class extends React.Component { const TopicSelector = class extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
// this.typeClasses = [
// // topic focus
// "type-hci", //add mcs too?
// "type-cs",
// "type-ge",
// // topic level
// "type-ba",
// "type-ma",
// "type-phd",
// // topic type
// "type-project",
// "type-thesis",
// "type-intern",
// "type-grl",
// // topic coop
// "type-coop"
// ];
// this.typeStrings = [
// "Human-Computer Interaction",
// "Computer Science",
// "Games Engineering",
// "Bachelor",
// "Master",
// "Ph.D.",
// "Project",
// "Thesis",
// "Internship",
// "Games Research Lab",
// "Industry Cooperation"
// ];
this.topicFocus = [
"type-hci", //add mcs too?
"type-cs",
"type-ge"
];
this.topicFocusName = [
"Human-Computer Interaction",
"Computer Science",
"Games Engineering",
];
this.topicLevel = [
"type-ba",
"type-ma",
"type-phd",
];
this.topicLevelName = [
"Bachelor",
"Master",
"Ph.D.",
];
this.topicType = [
"type-project",
"type-thesis",
"type-intern",
"type-grl",
"type-coop"
];
this.topicTypeName = [
"Project",
"Thesis",
"Internship",
"Games Research Lab",
"Industry Cooperation"
];
this.state = { this.state = {
selectedFocus: 0, allChecked: true,
selectedLevel: 0, topic: [
selectedType: 0 { 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: "coop", label: "Industry Cooperation", isChecked: true}
]
}; };
// this.stateSelectedFocus = 0;
// this.stateSelectedLevel = 0; // this.handleChange = this.handleChange.bind(this);
// this.stateSelectedType = 0;
// this.state = {
// selectedFocus: 0,
// };
// this.state = {
// selectedLevel: 0,
// };
// this.state = {
// selectedType: 0
// };
} }
//TODO
updateTopics() { updateTopics() {
if (this.state.selectedFocus == 0) {
this.topicFocus.forEach( // if (this.topic.isChecked == true) {
element => $(".topic."+element).show() // this.topic.forEach(
); // element => $(".topic." + element.id).show()
// );
// }
// let topics = "";
// if(this.topic.isChecked == false){
// topics += "." + this.topic.id[this.topic.isChecked == false];
// $(".topic:not(." + this.topicFocus[this.topic.isChecked == false] + ")").hide();
// }
// if (this.topic.isChecked == true) {
// $(".topic." + this.topic.id).show();
// }
// if (this.topic.isChecked == false) {
// $(".topic." + this.topic.id).hide();
// }
// if (this.topic.isSelected == true) {
// $(".topic." + this.topic.id[this.topic.selected == true]).show();
// }
// let topics = "";
// if (this.state.selectedFocus !== 0) {
// topics += "." + this.topicFocus[this.state.selectedFocus - 1];
// $(".topic:not(." + this.topicFocus[this.state.selectedFocus - 1] + ")").hide();
// }
// if (this.state.selectedLevel !== 0) {
// topics += "." + this.topicLevel[this.state.selectedLevel - 1];
// $(".topic:not(." + this.topicLevel[this.state.selectedLevel - 1] + ")").hide();
// }
// if (this.state.selectedType !== 0) {
// topics += "."+ this.topicType[this.state.selectedType - 1];
// $(".topic:not(." + this.topicType[this.state.selectedType - 1] + ")").hide();
// }
// $(".topic" + topics).show();
} }
if (this.state.selectedLevel == 0) {
this.topicLevel.forEach( handleChange (e) {
element => $(".topic."+element).show() let itemLabel = e.target.label;
let checked = e.target.checked;
this.setState(prevState => {
let { topic, allChecked } = prevState;
if (itemLabel === "checkAll") {
allChecked = checked;
topic = topic.map(item => ({ ...item, isChecked: checked }));
} else {
topic = topic.map(item =>
item.label === itemLabel ? { ...item, isChecked: checked } : item
); );
allChecked = topic.every(item => item.isChecked);
} }
if (this.state.selectedType == 0) { return { topic, allChecked };
this.topicType.forEach( });
element => $(".topic."+element).show()
);
} }
let topics = ""; // handleChange(e){
if (this.state.selectedFocus !== 0) { // let items = this.topic
topics += "." + this.topicFocus[this.state.selectedFocus - 1]; // items.forEach(item => {
$(".topic:not(." + this.topicFocus[this.state.selectedFocus - 1] + ")").hide(); // if (item.id === event.target.id) {
// item.isChecked = event.target.isChecked
// }
// })
// this.setState({isChecked: this.topic.isChecked}, this.updateTopics);
// }
renderFullList() {
return this.state.topic.map(item => (
<div>
<input
key={item.id}
type="checkbox"
label={item.label}
value={item.label}
checked={item.isChecked}
onChange={this.handleChange}
/>
<label>{item.label}</label>
</div>
));
} }
if (this.state.selectedLevel !== 0) {
topics += "." + this.topicLevel[this.state.selectedLevel - 1]; renderFocusList() {
$(".topic:not(." + this.topicLevel[this.state.selectedLevel - 1] + ")").hide(); return this.state.topic.filter(unfiltered => (unfiltered.category === "focus")).map(focusOnly => (
<div>
<input
key={focusOnly.id}
type="checkbox"
label={focusOnly.label}
value={focusOnly.label}
checked={focusOnly.isChecked}
onChange={this.handleChange.bind(this)}
/>
<label>{focusOnly.label}</label>
</div>
));
} }
if (this.state.selectedType !== 0) {
topics += "."+ this.topicType[this.state.selectedType - 1]; renderLevelList() {
$(".topic:not(." + this.topicType[this.state.selectedType - 1] + ")").hide(); return this.state.topic.filter(unfiltered => (unfiltered.category === "level")).map(levelOnly => (
<div>
<input
key={levelOnly.id}
type="checkbox"
label={levelOnly.label}
value={levelOnly.label}
checked={levelOnly.isChecked}
onChange={this.handleChange.bind(this)}
/>
<label>{levelOnly.label}</label>
</div>
));
} }
$(".topic" + topics).show(); renderTypeList() {
return this.state.topic.filter(unfiltered => (unfiltered.category === "type")).map(typeOnly => (
<div>
<input
key={typeOnly.id}
type="checkbox"
label={typeOnly.label}
value={typeOnly.label}
checked={typeOnly.isChecked}
onChange={this.handleChange.bind(this)}
/>
<label>{typeOnly.label}</label>
</div>
));
} }
render() { render() {
return ( return (
// <div className="topic-selector-layout"> <div className="column-layout">
// { <div class="block">
// ["Show all"].concat(this.typeStrings).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
<div className="topic-selector-layout">
<b>Focus</b> <b>Focus</b>
{ <div>
["Any"].concat(this.topicFocusName).map((string, index) => ( <input
<div key={index}> type="checkbox"
<input type="radio" value={index} checked={this.state.selectedFocus === index} onChange={() => this.setState({ selectedFocus: index }, this.updateTopics)} /> name="checkAll"
{string} checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div> </div>
)) <br />
} {this.renderFocusList()}
</div>
<div class="block">
<b>Level</b> <b>Level</b>
{ <div>
["Any"].concat(this.topicLevelName).map((string, index) => ( <input
<div key={index}> type="checkbox"
<input type="radio" value={index} checked={this.state.selectedLevel === index} onChange={() => this.setState({ selectedLevel: index }, this.updateTopics)} /> name="checkAll"
{string} checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div> </div>
)) <br />
} {this.renderLevelList()}
</div>
<div class="block">
<b>Type</b> <b>Type</b>
{ <div>
["Any"].concat(this.topicTypeName).map((string, index) => ( <input
<div key={index}> type="checkbox"
<input type="radio" value={index} checked={this.state.selectedType === index} onChange={() => this.setState({ selectedType: index }, this.updateTopics)} /> name="checkAll"
{string} checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
<br />
{this.renderTypeList()}
</div> </div>
))
}
</div> </div>
// <div className="some-page-wrapper">
// <div class="topic-selector-row">
// <div class=".topic-selector-column">
// <b>Focus</b>
// {
// ["Show all"].concat(this.topicFocusName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// <div class=".topic-selector-column">
// <b>Level</b>
// {
// [].concat(this.topicLevelName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// <div class=".topic-selector-column">
// <b>Type</b>
// {
// [].concat(this.topicTypeName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// </div>
// </div>
); );
} }
}; };
......
...@@ -53,39 +53,39 @@ layout: base ...@@ -53,39 +53,39 @@ layout: base
{% for topic in topics %} {% for topic in topics %}
<!-- focus --> <!-- focus -->
{% assign typeClasses = "topic " %} {% assign typeClasses = "topic " %}
{% if topic.type-hci == true %} {% if topic.focus == "hci" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-hci" %} {% assign typeClasses = typeClasses | append: " " | append: "hci" %}
{% endif %} {% endif %}
{% if topic.type-cs == true %} {% if topic.focus == "cs" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-cs" %} {% assign typeClasses = typeClasses | append: " " | append: "cs" %}
{% endif %} {% endif %}
{% if topic.type-ge == true %} {% if topic.focus == "ge" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ge" %} {% assign typeClasses = typeClasses | append: " " | append: "type-ge" %}
{% endif %} {% endif %}
<!-- level --> <!-- level -->
{% if topic.type-ba == true %} {% if topic.level == "ba" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ba" %} {% assign typeClasses = typeClasses | append: " " | append: "ba" %}
{% endif %} {% endif %}
{% if topic.type-ma == true %} {% if topic.level == "ma" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ma" %} {% assign typeClasses = typeClasses | append: " " | append: "type-ma" %}
{% endif %} {% endif %}
{% if topic.type-phd == true %} {% if topic.level == "phd" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-phd" %} {% assign typeClasses = typeClasses | append: " " | append: "type-phd" %}
{% endif %} {% endif %}
<!-- type --> <!-- type -->
{% if topic.type-project == true %} {% if topic.type-project == "project" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-project" %} {% assign typeClasses = typeClasses | append: " " | append: "type-project" %}
{% endif %} {% endif %}
{% if topic.type-thesis == true %} {% if topic.type == "thesis" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-thesis" %} {% assign typeClasses = typeClasses | append: " " | append: "thesis" %}
{% endif %} {% endif %}
{% if topic.type-intern == true %} {% if topic.type == "intern" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-intern" %} {% assign typeClasses = typeClasses | append: " " | append: "type-intern" %}
{% endif %} {% endif %}
{% if topic.type-grl == true %} {% if topic.type == "grl" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-grl" %} {% assign typeClasses = typeClasses | append: " " | append: "type-grl" %}
{% endif %} {% endif %}
{% if topic.type-coop == true %} {% if topic.type == "coop" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-coop" %} {% assign typeClasses = typeClasses | append: " " | append: "type-coop" %}
{% endif %} {% endif %}
{% assign title = topic.title %} {% assign title = topic.title %}
......
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