schedule-select-1.0.0

index.html

<div id="js-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.2.0/redux-form.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>

<script src="http://codepen.io/clindsey/pen/BQVxVJ.js"></script> <!-- schedule-logic-1.0.0 -->

schedule-logic-1-0-0.markdown

schedule-logic-1.0.0

A Pen by not important on CodePen.

License.

schedule-select-1-0-0.markdown

schedule-select-1.0.0

A Pen by not important on CodePen.

License.

script.babel

const {
  Field,
  Fields,
  reduxForm
} = ReduxForm;

setTimeout(() => {
  const {Provider} = ReactRedux;
  const store = configureStore({
    formValues: generateInitialFormValues()
  });
  ReactDOM.render(
    <Provider {...{store}}>
      <MainContainer />
    </Provider>
  , document.getElementById('js-app'));
}, 0);

const scheduleSettings = {
  endTime: '0130',
  maxDuration: 9 * 60,
  minDuration: 2 * 60,
  minLeadTime: 2 * 60,
  startTime: '0700',
  timeIncrement: 15
};

function generateInitialFormValues () {
  const targetDate = moment().startOf('day');
  const startTime = targetDate.clone().set({hours: 7, minutes: 0});
  const endTime = startTime.clone().add(2, 'hours');
  const schedule = scheduleLogic.calculateTimeRange(scheduleSettings, targetDate, startTime, endTime);
  return {
    scheduleForm: {
      targetDate: startTime.clone().startOf('day').toISOString(),
      startTime: schedule.startTime.toISOString(),
      endTime: schedule.endTime.toISOString()
    }
  };
}

function configureStore (initialState) {
  const reducers = Redux.combineReducers({
    formValues: (state = {}, action) => {
      if (action.type === 'UPDATE_FORM_VALUES') {
        const {values} = action;
        return {
          ...state,
          ...values
        };
      }
      return state;
    },
    form: ReduxForm.reducer
  });
  return Redux.createStore(reducers, initialState, Redux.applyMiddleware());
};

class MainComponent extends React.Component {
  render () {
    const {
      formValues: {
        scheduleForm
      },
      handleFormChange,
      updateFormValues
    } = this.props;
    return (
      <ScheduleForm
          onSubmit={values => {
            updateFormValues(values);
            console.log('!!!!!!', values);
          }}
          initialValues={{
            ...scheduleForm
          }}
          {...{handleFormChange}}
      />
    );
  }
}

const MainContainer = ReactRedux.connect(state => {
  const {
    formValues
  } = state;
  return {
    formValues
  };
}, { 
  updateFormValues: values => ({
    type: 'UPDATE_FORM_VALUES',
    values
  }),
  handleFormChange: ReduxForm.change
})(MainComponent);

class ScheduleComponent extends React.Component {
  renderFields (props) {
    const currentDay = moment().startOf('day');
    const targetDate = moment(props.targetDate.input.value);
    const startTime = moment(props.startTime.input.value);
    const endTime = moment(props.endTime.input.value);
    const schedule = scheduleLogic.calculateTimeRange(scheduleSettings, targetDate, startTime, endTime);
    if (props.startTime.input.value !== schedule.startTime.toISOString()) {
      setTimeout(() => {
        props.handleFormChange('scheduleForm', 'startTime', schedule.startTime.toISOString());
      });
    }
    // console.log(props.startTime.input.value, schedule.startTime.toISOString(), schedule.startTimes.map(t => t.toISOString()));
    return (
      <div>
        <div>
          <select {...props.targetDate.input}>
            {Array(...Array(12)).map((_, index) => {
              const day = currentDay.clone();
              day.add(index, 'day');
              const label = day.format('MM/DD');
              const value = day.toISOString();
              return (
                <option
                    key={index}
                    {...{value}}
                >{label}</option>
              );
            })}
          </select>
        </div>
        <div>
          <select {...props.startTime.input}>
            {schedule.startTimes.map((time, key) => {
              const value = time.toISOString();
              const label = time.format('HH:mm');
              return (
                <option {...{value, key}}>{label}</option>
              );
            })}
          </select>
        </div>
        <div>
          <select {...props.endTime.input}>
            {schedule.endTimes.map((time, key) => {
              const value = time.toISOString();
              const label = time.format('HH:mm');
              return (
                <option {...{value, key}}>{label}</option>
              );
            })}
          </select>
        </div>
      </div>
    );
  }

  render () {
    const {
      handleFormChange,
      handleSubmit
    } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <Fields
            component={this.renderFields}
            names={[
              'endTime',
              'startTime',
              'targetDate'
            ]}
            {...{handleFormChange}}
        />
        <div>
          <button type="submit">{'Save'}</button>
        </div>
      </form>
    );
  }
}

const ScheduleForm = reduxForm({form: 'scheduleForm'})(ScheduleComponent);