components/AddTask/AddTask.jsx

/**
 * Окно для добавление нового задания
 * @module AddTask
 * @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/big-pencil.png
 * @requires img/plus.png
 * @requires img/title-ok.png
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as StateConfigAction from '../../actions/StateConfigAction.js';
import * as StateUserAction from '../../actions/StateUserAction.js';
import Link from '../Common/Link.jsx';
import Pencil from '../../img/big-pencil.png';
import Plus from '../../img/plus.png';
import Ok from '../../img/title-ok.png';

/**
 * Окно для добавление нового задания
 * @extends Component
 */
class AddTask extends Component {

	/**
	 * Объект состяния компонента
	 * @type {Object} 
	 * @inner
	 * @property {Array} fields Массив полей
	 */
	state = {
		fields: [{
			id: 1,
			word: '',
			translate: '' 
		}, {
			id: 2,
			word: '',
			translate: '' 
		}]
	}

	/**
	 * Закрыть попап
	 * @fires click
	 * @param {Object} e
	 */
	close(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'add_task');
	}

	/**
	 * Добавление нового поля
	 * @fires click
	 * @param {Object} e
	 */
	add(e) {
		var f = this.state.fields;
		f.push({
			id: this.state.fields[this.state.fields.length - 1].id,
			word: '',
			translate: ''
		});
		this.setState({fields: f});
	}

	/**
	 * Ввод слова
	 * @fires input
	 * @param {Number} index Индекс поля в массиве
	 * @param {Object} e
	 */
	inputWord(index, e) {
		var f = this.state.fields;

		if(e.target.value.length <= 32) {
			f[index].word = e.target.value;
			this.setState({fields: f});
		}

		else {
			e.target.value = e.target.value.substr(0, 32);
		}
	}

	/**
	 * Ввод перевода
	 * @fires input
	 * @param {Number} index Индекс поля в массиве
	 * @param {Object} e
	 */
	inputTranslate(index, e) {
		var f = this.state.fields;

		if(e.target.value.length <= 32) {
			f[index].translate = e.target.value;
			this.setState({fields: f});
		}

		else {
			e.target.value = e.target.value.substr(0, 32);
		}
	}

	/**
	 * Добавление таска
	 * @fires click
	 * @param {Object} e
	 */
	confirm(e) {
		let taskCountDaysEl = document.getElementById('task-count-days');
		let user = this.props.user;
		var i,
			group,
			flag = 0;

		for(i = 0; i < this.state.fields.length; i++) {
			if(this.state.fields[i].word === '' || this.state.fields[i].translate === '') {
				flag = 1;
			}
		}

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

		if(taskCountDaysEl.value.length > 0 && flag === 0) {
			this.props.StateUserAction.addLessonFirst(this.props.user, {
				data: this.state.fields,
				days: taskCountDaysEl.value,
				class_name: group.name,
				group_id: group.id
			}, (o) => {
				this.props.config.add_task_finish = 1;
				this.props.StateConfigAction.update(this.props.config);
			});
		}
	}

	/**
	 * Валидация поля для кол ва дней
	 * @fires input
	 * @param {Object} e
	 */
	validDays(e) {
		e.target.value = e.target.value.replace(/\D/, '');
		e.target.value = e.target.value.substr(0, 4);
	}

	/**
	 * Отменить добавление нового урока
	 * @fires click
	 * @param {Object} e
	 */
	reset(e) {
		var i,
			group;
		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];
				break;
			}
		}

		group.lessons.pop();
		this.props.StateUserAction.update(this.props.user, () => {
			this.props.StateConfigAction.showElement(this.props.config, 'add_task');
		});
	}

	/**
	 * Подтвердить создание задания
	 * @fires click
	 * @param {Object} e
	 */
	create(e) {
		let nameFieldEl = document.getElementById('task-name');
		let firstFieldEl = document.getElementById('repeat-first-time');
		let secondFieldEl = document.getElementById('repeat-second-time');
		let thirdFieldEl = document.getElementById('repeat-third-time');
		let forthFieldEl = document.getElementById('repeat-forth-time');
		let fifthFieldEl = document.getElementById('repeat-fifth-time');

		if(nameFieldEl.value !== '' && 
			firstFieldEl.value !== '' && 
			secondFieldEl.value !== '' &&
			thirdFieldEl.value !== '' &&
			forthFieldEl.value !== '' &&
			fifthFieldEl.value !== '') {
				this.props.StateUserAction.create(this.props.user, {
					name: nameFieldEl.value,
					learn_word_repeat: thirdFieldEl.value,
					write_word_repeat: forthFieldEl.value,
					find_word_repeat: fifthFieldEl.value,
					snake_repeat: firstFieldEl.value,
					scrabble_repeat: secondFieldEl.value
				}, {
					name: nameFieldEl.value,
					learn_word_repeat: thirdFieldEl.value,
					write_word_repeat: forthFieldEl.value,
					find_word_repeat: fifthFieldEl.value,
					snake_repeat: firstFieldEl.value,
					scrabble_repeat: secondFieldEl.value,
					words: this.state.fields,
				}, () => {
					this.props.config.create_task_success = 1;
					this.props.StateConfigAction.update(this.props.config);
				});
		}
	}

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

		for(i = 0; i < this.state.fields.length; i++) {
			fields.push(<div key={i} className="line">
							<div>
								<span className="main-span">{lang.word_title}</span>
								<input type="text" 
									id={'word-input-'+ this.state.fields[i].id}
									defaultValue={this.state.fields[i].word}
									onInput={this.inputWord.bind(this, i)} />
							</div>
							
							<div>
								<span className="main-span">{lang.translate_title}</span>
								<input type="text"
									id={'translate-input-'+ this.state.fields[i].id}
									defaultValue={this.state.fields[i].translate}
									onInput={this.inputTranslate.bind(this, i)} />
							</div>
						</div>);
		}

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

		if(this.props.config.add_task_finish === 1) {
			return <div className="modal fade show" 
						id="popup11"
						tabIndex="-1" 
						role="dialog">
							<div className="modal-dialog" role="document">
								<div className="modal-content">
									<div className="title">
										<img src={Pencil} alt="pencil" />
										<span>{lang.new_task_second_title}</span>
									</div>
									
									<div className="line-block">
										<div className="line">
											<div>
												<span className="main-span">
													<b>{lang.task_name_title}</b>
												</span>
											</div>
											<div>
												<input type="text"
													id="task-name" />
											</div>
										</div>

										<div className="line">
											<div>
												<span className="main-span">{lang.task_repeat_first_type}</span>
											</div>
											<div>
												<input type="text"
													id="repeat-first-time"
													onInput={this.validDays.bind(this)} />
											</div>
										</div>

										<div className="line">
											<div>
												<span className="main-span">{lang.task_repeat_second_type}</span>
											</div>
											<div>
												<input type="text"
													id="repeat-second-time"
													onInput={this.validDays.bind(this)} />
											</div>
										</div>

										<div className="line">
											<div>
												<span className="main-span">{lang.task_repeat_third_type}</span>
											</div>
											<div>
												<input type="text"
													id="repeat-third-time"
													onInput={this.validDays.bind(this)} />
											</div>
										</div>

										<div className="line">
											<div>
												<span className="main-span">{lang.task_repeat_forth_type}</span>
											</div>
											<div>
												<input type="text"
													id="repeat-forth-time"
													onInput={this.validDays.bind(this)} />
											</div>
										</div>

										<div className="line">
											<div>
												<span className="main-span">{lang.task_repeat_fifth_type}</span>
											</div>
											<div>
												<input type="text"
													id="repeat-fifth-time"
													onInput={this.validDays.bind(this)} />
											</div>
										</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.create.bind(this)}>{lang.ready_title}</Link>
									</div>
								</div>
							</div>
						</div>
		}

		return <div className="modal fade show" 
					id="popup10"
					tabIndex="-1"
					role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={Pencil} alt="pencil" />
									<span>{lang.new_task_first_title}</span>
								</div>

								<div className="mean-block">
									<div>{lang.word_title}</div>
									<div>{lang.translate_title}</div>
								</div>

								<div className="line-block">
									{fields}									

									<div className="js_addline1 addline"
										onClick={this.add.bind(this)}>
											<img src={Plus} alt="plus" />
									</div>

									<div className="line last-line">
										<div>
											<span className="main-span">{lang.task_days_title}</span>
										</div>

										<div>
											<input type="text"
												id="task-count-days"
												onInput={this.validDays.bind(this)} />
										</div>
									</div>
								</div>

								<div className="button-wrap">
									<Link 
										data-dismiss="modal" 
										className="button disable-button"
										onClick={this.close.bind(this)}>{lang.reset_title}</Link>

									<Link 
										data-dismiss="modal"
										className="button"
										onClick={this.confirm.bind(this)}>{lang.ready_title}</Link>
								</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)(AddTask);