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 ReactDOM from "react-dom";
import React from "react";
import React, { useState } from "react";
// const path = require("path");
// const YAML = require('yamljs');
......@@ -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 {
constructor(props) {
super(props);
......@@ -249,7 +249,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) {
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 {
constructor(props) {
super(props);
......@@ -289,7 +289,7 @@ if (document.getElementById("react-placeholder-toggleVisibility") !== null) {
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 {
constructor(props) {
super(props);
......@@ -365,7 +365,7 @@ if (document.getElementById("react-placeholder-filterInput") !== null) {
};
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>");
$("body").append($temp);
$temp.val(copyText).select();
......@@ -419,206 +419,211 @@ $(document).ready(function () {
// ////////////////////////////////////////////////////////////////////////////
const element = document.getElementById("react-placeholder-topicSelector");
if (element !== null) {
const TopicSelector = class extends React.Component {
constructor(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 = {
selectedFocus: 0,
selectedLevel: 0,
selectedType: 0
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: "coop", label: "Industry Cooperation", isChecked: true}
]
};
// this.stateSelectedFocus = 0;
// this.stateSelectedLevel = 0;
// this.stateSelectedType = 0;
// this.state = {
// selectedFocus: 0,
// };
// this.state = {
// selectedLevel: 0,
// };
// this.state = {
// selectedType: 0
// };
// this.handleChange = this.handleChange.bind(this);
}
//TODO
updateTopics() {
if (this.state.selectedFocus == 0) {
this.topicFocus.forEach(
element => $(".topic."+element).show()
);
// if (this.topic.isChecked == true) {
// 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(
element => $(".topic."+element).show()
handleChange (e) {
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) {
this.topicType.forEach(
element => $(".topic."+element).show()
);
return { topic, allChecked };
});
}
let topics = "";
if (this.state.selectedFocus !== 0) {
topics += "." + this.topicFocus[this.state.selectedFocus - 1];
$(".topic:not(." + this.topicFocus[this.state.selectedFocus - 1] + ")").hide();
// handleChange(e){
// let items = this.topic
// items.forEach(item => {
// 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];
$(".topic:not(." + this.topicLevel[this.state.selectedLevel - 1] + ")").hide();
renderFocusList() {
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];
$(".topic:not(." + this.topicType[this.state.selectedType - 1] + ")").hide();
renderLevelList() {
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() {
return (
// <div className="topic-selector-layout">
// {
// ["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">
<div className="column-layout">
<div class="block">
<b>Focus</b>
{
["Any"].concat(this.topicFocusName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedFocus === index} onChange={() => this.setState({ selectedFocus: index }, this.updateTopics)} />
{string}
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
))
}
<br />
{this.renderFocusList()}
</div>
<div class="block">
<b>Level</b>
{
["Any"].concat(this.topicLevelName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedLevel === index} onChange={() => this.setState({ selectedLevel: index }, this.updateTopics)} />
{string}
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
))
}
<br />
{this.renderLevelList()}
</div>
<div class="block">
<b>Type</b>
{
["Any"].concat(this.topicTypeName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedType === index} onChange={() => this.setState({ selectedType: index }, this.updateTopics)} />
{string}
<div>
<input
type="checkbox"
name="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange}
/> Check / Uncheck All
</div>
<br />
{this.renderTypeList()}
</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
{% for topic in topics %}
<!-- focus -->
{% assign typeClasses = "topic " %}
{% if topic.type-hci == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-hci" %}
{% if topic.focus == "hci" %}
{% assign typeClasses = typeClasses | append: " " | append: "hci" %}
{% endif %}
{% if topic.type-cs == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-cs" %}
{% if topic.focus == "cs" %}
{% assign typeClasses = typeClasses | append: " " | append: "cs" %}
{% endif %}
{% if topic.type-ge == true %}
{% if topic.focus == "ge" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ge" %}
{% endif %}
<!-- level -->
{% if topic.type-ba == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ba" %}
{% if topic.level == "ba" %}
{% assign typeClasses = typeClasses | append: " " | append: "ba" %}
{% endif %}
{% if topic.type-ma == true %}
{% if topic.level == "ma" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ma" %}
{% endif %}
{% if topic.type-phd == true %}
{% if topic.level == "phd" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-phd" %}
{% endif %}
<!-- type -->
{% if topic.type-project == true %}
{% if topic.type-project == "project" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-project" %}
{% endif %}
{% if topic.type-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-thesis" %}
{% if topic.type == "thesis" %}
{% assign typeClasses = typeClasses | append: " " | append: "thesis" %}
{% endif %}
{% if topic.type-intern == true %}
{% if topic.type == "intern" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-intern" %}
{% endif %}
{% if topic.type-grl == true %}
{% if topic.type == "grl" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-grl" %}
{% endif %}
{% if topic.type-coop == true %}
{% if topic.type == "coop" %}
{% assign typeClasses = typeClasses | append: " " | append: "type-coop" %}
{% endif %}
{% 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