components/TaskHistory/TaskHistory.jsx

/**
 * Окно статистики по урокам
 * @module TaskHistory
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires actions/StateConfigAction.js
 * @requires actions/StateUserAction.js
 * @requires components/Common/Link.jsx
 * @requires img/star-icon.png
 * @requires img/title-ok.png
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import TaskItem from './TaskItem/TaskItem.jsx';
import * as StateConfigAction from '../../actions/StateConfigAction.js';
import * as StateUserAction from '../../actions/StateUserAction.js';
import Link from '../Common/Link.jsx';
import Star from '../../img/star-icon.png';
import Ok from '../../img/title-ok.png';

/**
 * Окно статистики по урокам
 * @extends Component
 */
class TaskHistory extends Component {

	/**
	 * Закрыть окно
	 * @fires click
	 * @param {Object} e
	 */
	reset(e) {
		var group,
			i;

		for(i = 0; i < this.props.user.groups.length; i++) {
			if(this.props.user.groups[i].id === this.props.user.current_group) {
				group = this.props.user.groups[i];
			}
		}

		for(i = 0; i < group.lessons.length; i++) {
			group.lessons[i].remove = 0;
		}
		this.props.StateConfigAction.showElement(this.props.config, 'task_history');
	}

	/**
	 * Подтвердить изменения
	 * @fires click
	 * @param {Object} e
	 */
	confirm(e) {
		this.props.StateUserAction.configmRemoveTasks(this.props.user, () => {
			this.props.config.task_history_success = 1;
			this.props.StateConfigAction.update(this.props.config);
		});
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		let lang = this.props.lang;
		var group,
			i,
			lessons = [];

		if(this.props.config.task_history_success === 1) {
			return <div className="modal fade show" 
						id="popup21" 
						tabIndex="-1"
						role="dialog">
							<div className="modal-dialog" role="document">
								<div className="modal-content">
									<div className="title">
										<img src={Ok} alt="ok" />
										<span>{lang.tasks_history_title}</span>
									</div>
									<div className="main-text">
										{lang.save_success_msg}
									</div>
									<Link
										data-dismiss="modal"
										className="button"
										onClick={this.reset.bind(this)}>{lang.close_msg_title}</Link>
								</div>
							</div>
					</div>
		}

		for(i = 0; i < this.props.user.groups.length; i++) {
			if(this.props.user.groups[i].id === this.props.user.current_group) {
				group = this.props.user.groups[i];
			}
		}

		for(i = 0; i < group.lessons.length; i++) {
			if(group.lessons[i].remove === 0) {
				lessons.push(<TaskItem key={i}
								index={i}
								lesson={group.lessons[i]} />);
			}
		}

		return <div className="modal fade show" 
					id="popup22"
					tabIndex="-1"
					role="dialog">
						<div className="modal-dialog accordion-modal" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={Star} alt="star" />
									<span>{lang.tasks_history_title}</span>
								</div>
								
								<div className="block">
									<div className="inside-block">
										<div className="line topline">
											<div className="columns">
												<div className="c">{lang.task_name_title}</div>
												<div className="c">{lang.tasks_done_title}</div>
												<div className="c"></div>
												<div className="c"></div>
											</div>
										</div>

										<div id="accordion" role="tablist">
											{lessons}
										</div>
									</div>
									<div className="button-wrap">
										<Link 
											data-dismiss="modal"
											className="button disable-button"
											onClick={this.reset.bind(this)}>{lang.reset_title}</Link>

										<Link 
											data-dismiss="modal"
											className="button"
											onClick={this.confirm.bind(this)}>{lang.save_title}</Link>
									</div>
								</div>
							</div>
						</div>
					</div>
	}
}

/**
 * Init redux states
 * @param {Object} state
 * @return {Object}
 */
function mapStateToProps(state) {
	return {
		lang: state.lang,
		user: state.user,
		config: state.config,
	}
}

/**
 * Init redux actions
 * @param {Function} dispatch
 * @return {Object}
 */
function mapDispatchToProps(dispatch) {
	return {
		StateConfigAction: bindActionCreators(StateConfigAction, dispatch),
		StateUserAction: bindActionCreators(StateUserAction, dispatch),
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(TaskHistory);