govnokod1.js

import React from 'react'
import Relay from 'react-relay'

import { Router, Link, browserHistory } from 'react-router'

import merge from 'merge'

import styles from './SeatProfileAdd.scss'

import { Row, Col, Container, FormGroup, ControlLabel, RadioGroup, FormControl, Radio } from 'react-bootstrap'
import { Checkbox, CheckboxGroup } from 'react-checkbox-group'

export default class SeatProfileAdd extends React.Component {

  constructor(props) {
    super(props);
    if (this.props.seat_profile) {
      this.state = {
        seats: [],
        seat_profile: {
          id: this.props.seat_profile.id,
          name: this.props.seat_profile.name || '',
          seat_type: this.props.seat_profile.seat_type || '',
          decks: this.props.seat_profile.decks || 1,
          upper_deck_rows: props.seat_profile.upper_deck_rows || 4,
          upper_deck_cols: props.seat_profile.upper_deck_cols || 3,
          bottom_deck_rows: props.seat_profile.bottom_deck_rows || 4,
          bottom_deck_cols: props.seat_profile.bottom_deck_cols || 3,
          fill_up: props.seat_profile.fill_up || 'numeric',
          seat_settings: props.seat_profile.seat_settings || ''
        },
      };
    } else {
      this.state = {
        seats: [],
        seat_profile: {
          name: '',
          seat_type: '',
          decks: 1,
          upper_deck_rows: 4,
          upper_deck_cols: 3,
          bottom_deck_rows: 4,
          bottom_deck_cols: 3,
          fill_up: 'numeric',
          seat_settings: '',
        }
      };
    }
  }

  componentDidMount() {
    if( this.props.seat_profile ) {
      var settings = this.props.seat_profile.seat_settings.split(','), result = [];
      if( this.props.seat_profile.seat_settings.length > 0 ){
        settings.map( (e, i) => {
          if( e.charAt(0) == 'y' ) result.push(i+1)
        })
      } else {
        for( var i = 1; i <= parseInt(this.state.seat_profile.upper_deck_cols)*parseInt(this.state.seat_profile.upper_deck_rows); i++ ){
          result.push(i);
        }
      }
      this.setState({
        seats: result
      })
    } else {
      this.setState({
        seats: [1,2,3,4,5,6,7,8,9,10,11,12],
        seat_profile: {
          name: '',
          seat_type: '',
          decks: 1,
          upper_deck_rows: 4,
          upper_deck_cols: 3,
          bottom_deck_rows: 4,
          bottom_deck_cols: 3,
          fill_up: 'numeric',
          seat_settings: '',
        }
      });
    }
  }

  generateSeatMaps( deckRows, deckCols, deck){

    var seat_profile = this.state.seat_profile, offset = 0, offset_i = 0, rows = 1, seats = [], input_val, ABC = ["A", "B", "C", "D"],
        values = [...Array(deckRows * deckCols + 1).keys()], type = (deck == "upper_deck" ? 1 : 0);

    values.reverse().pop()

    if( seat_profile.decks == 2 && deck == "bottom_deck"){
      deckRows = seat_profile.bottom_deck_rows; deckCols = seat_profile.bottom_deck_cols;
      offset = (this.state.seat_profile.fill_up == 'alpha_numeric' ? offset = seat_profile.upper_deck_rows : offset = seat_profile.upper_deck_cols * seat_profile.upper_deck_rows);
      offset_i = seat_profile.upper_deck_cols * seat_profile.upper_deck_rows;
    }

    for (; rows <= deckRows; rows++) {
      var cols = 1
      for (; cols <= deckCols; cols++) {
        input_val = (this.state.seat_profile.fill_up == 'alpha_numeric' ?
                    `${parseInt(rows)+parseInt(offset)}${ABC[cols - 1]}` : values[values.length-1]+offset)
        seats.push(
          <FormGroup className={'col-xs-1 seat-item aaa'} key={type+':'+rows+':'+cols}>
            <Checkbox ref={'check'+parseInt(values[values.length-1])+parseInt(offset_i)} value={parseInt(values[values.length-1])+parseInt(offset_i)} className='seat-item-checkbox' />
            <div className='seat-item-input'>{input_val}</div>
          </FormGroup>
        )
        values.pop()
      }
      seats.push(<Col key={deck+':'+rows+':'+cols+':spr'} xs={12} />)
    }

    return (
      <CheckboxGroup name="seats" value={this.state.seats} onChange={this._handleSeatChange.bind(this)}>
        {seats}
      </CheckboxGroup>
    )
  }

  _handleSeatChange(seats){
    this.setState({
      seats: seats
    })
  }

  _handleInputChange(e) {
    this.setState({
      seat_profile: merge(this.state.seat_profile, {[e.target.dataset.field]: e.target.value})
    });
  }

  _handleSeatGridChange(e) {
    this.setState({
      seat_profile: merge(this.state.seat_profile, {[e.target.dataset.field]: e.target.value}),
      seats: this.checkAllSeats(e)
    });
  }

  checkAllSeats(e){
    var count = 0, profile = this.state.seat_profile, seats = [];
    if( e.target.dataset.field == "decks" ){
      if( parseInt(e.target.value) == 1 ) count = profile.upper_deck_cols*profile.upper_deck_rows;
      if( parseInt(e.target.value) == 2 ) count = profile.upper_deck_cols*profile.upper_deck_rows+profile.bottom_deck_rows*profile.bottom_deck_cols;
    } else {
      if( profile.decks == 1 ){
        if( e.target.dataset.field == "upper_deck_cols" ) count += e.target.value*profile.upper_deck_rows;
        if( e.target.dataset.field == "upper_deck_rows" ) count += e.target.value*profile.upper_deck_cols;
      } else {
        if( e.target.dataset.field == "bottom_deck_rows" ) count += e.target.value*profile.bottom_deck_cols+profile.upper_deck_cols*profile.upper_deck_rows;
        if( e.target.dataset.field == "bottom_deck_cols" ) count += e.target.value*profile.bottom_deck_rows+profile.upper_deck_cols*profile.upper_deck_rows;
        if( e.target.dataset.field == "upper_deck_cols" ) count += e.target.value*profile.upper_deck_rows+profile.bottom_deck_rows*profile.bottom_deck_cols;
        if( e.target.dataset.field == "upper_deck_rows" ) count += e.target.value*profile.upper_deck_cols+profile.bottom_deck_rows*profile.bottom_deck_cols;
      }
    }
    for( var i = 1; i <= count; i++ ){
      seats.push(i)
    }
    return seats;
  }

  generateSeatSettings(){
    var upper = this.state.seat_profile.upper_deck_rows*this.state.seat_profile.upper_deck_cols,
        result = [], ABC = ["A", "B", "C", "D"],
        col = 0, row = 1;
    for(var i = 1; i <= upper; i++){
      if( this.state.seat_profile.fill_up == "numeric" ) {
        result.push(( this.state.seats.indexOf(i) > -1 ? `y${i}` : `n${i}`))
      } else {
        if( col == this.state.seat_profile.upper_deck_cols ) {
          col = 0;
          row++;
        }
        result.push(( this.state.seats.indexOf(i) > -1 ? `y${row}${ABC[col]}` : `n${row}${ABC[col]}`))
        col++
      }
    }
    if( parseInt(this.state.seat_profile.decks) == 2 ){
      for(var i = upper+1; i <= this.state.seat_profile.bottom_deck_rows*this.state.seat_profile.bottom_deck_cols+upper; i++){
        if( this.state.seat_profile.fill_up == "numeric" ) {
          result.push(( this.state.seats.indexOf(i) > -1 ? `y${i}` : `n${i}`))
        } else {
          if( col == this.state.seat_profile.bottom_deck_cols ) {
            col = 0;
            row++;
          }
          result.push(( this.state.seats.indexOf(i) > -1 ? `y${row}${ABC[col]}` : `n${row}${ABC[col]}`))
          col++
        }
      }

    }
    return result.join(',')
  }

  saveItem() {
    var settings = this.generateSeatSettings();
    var seat_profile = merge(this.state.seat_profile, {seat_settings: settings})

    if ( this.props.seat_profile ) {
      this.props.initUpdateItem(seat_profile);
    } else {
      this.props.initCreateItem(seat_profile);
    }
  }

  initCancelItem() {
    this.props.initCancelItem();
    this.setState({
      seats: [1,2,3,4,5,6,7,8,9,10,11,12],
      seat_profile: {
        name: '',
        seat_type: '',
        decks: 1,
        upper_deck_rows: 4,
        upper_deck_cols: 3,
        bottom_deck_rows: 4,
        bottom_deck_cols: 3,
        fill_up: 'numeric',
        seat_settings: '',
      }
    });
  }


  generateDeckControls(type = "upper_deck", header = "Upper Deck"){
    return(
      <div className={"deck-editor editor_"+type}>
        <FormGroup>
          <h3>{header}:</h3>
          <FormGroup>
            <ControlLabel>Rows:</ControlLabel>
            <FormControl componentClass="select"
              data-field={type+"_rows"} data-type={type}
              value={this.state.seat_profile[type+"_rows"]}
              onChange={this._handleSeatGridChange.bind(this)}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </FormControl>
          </FormGroup>
          <FormGroup>
            <ControlLabel>Cols:</ControlLabel>
            <FormControl componentClass="select"
              data-field={type+"_cols"}
              value={this.state.seat_profile[type+"_cols"]}
              onChange={this._handleSeatGridChange.bind(this)}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </FormControl>
          </FormGroup>
        </FormGroup>
        <FormGroup>
          <h4>{header} Seats</h4>
          <br/>
          {this.generateSeatMaps(this.state.seat_profile[type+"_rows"], this.state.seat_profile[type+"_cols"], type)}
          <div className="clearfix" />
        </FormGroup>
      </div>
    )
  }


  renderDecks(){

    if ( this.state.seat_profile.decks == 1 ){
      return(
        <div className="seat-controls-form single-deck">
          {this.generateDeckControls("upper_deck", "Upper Deck")}
        </div>
      )
    } else if ( this.state.seat_profile.decks == 2 ){
      return(
        <div className="seat-controls-form double-deck">
          {this.generateDeckControls("upper_deck", "Upper Deck")}
          {this.generateDeckControls("bottom_deck", "Bottom Deck")}
        </div>
      )
    }

  }

  render() {

    return (
      <div id='item-add' className="the-editor">
        <div className='container'>
          <form>
            <FormGroup>
              <ControlLabel>Seat profile</ControlLabel>
              <FormControl
                type='text'
                placeholder='(e.g. 24 Seater Executive)'
                data-field="name"
                value={this.state.seat_profile.name}
                onChange={this._handleInputChange.bind(this)}/>
            </FormGroup>

            <FormGroup>
              <ControlLabel>Seat type</ControlLabel>
              <FormControl
                type='text'
                className='form-control'
                placeholder='(e.g. Executive, Double Decker, VIP)'
                data-field="seat_type"
                value={this.state.seat_profile.seat_type}
                onChange={this._handleInputChange.bind(this)}/>
            </FormGroup>

            <FormGroup>
              <ControlLabel>Deck Type</ControlLabel>
              <FormControl
                componentClass="select"
                data-field="decks"
                value={this.state.seat_profile.decks}
                onChange={this._handleSeatGridChange.bind(this)}>
                <option value="1">Single Deck</option>
                <option value="2">Double Deck</option>
              </FormControl>
            </FormGroup>

            <FormGroup>
              <ControlLabel>Fill up with:</ControlLabel>
              <FormControl
                componentClass="select"
                data-field="fill_up"
                value={this.state.seat_profile.fill_up}
                onChange={this._handleInputChange.bind(this)}>
                <option value="numeric">1, 2, 3 ...</option>
                <option value="alpha_numeric">1A, 1B, 1C ...</option>
              </FormControl>
            </FormGroup>

            {this.renderDecks()}

            <div className="buttons-group">
              <div className='btn btn-default' onClick={this.initCancelItem.bind(this)}>
                Cancel
              </div>
              <div className='btn btn-primary' onClick={this.saveItem.bind(this)}>
                Save
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

сделай комментарии