fix(editor): fix pattern direction icons/text

fixes #80

Author: landonreed

lib/common/components/OptionButton.js

@@ -1,5 +1,5 @@
 import React, {PropTypes, Component} from 'react'
-import {Button} from 'react-bootstrap'
+import {Button, OverlayTrigger} from 'react-bootstrap'
 
 export default class OptionButton extends Component {
   static propTypes = {
@@ -16,13 +16,25 @@ export default class OptionButton extends Component {
   }
 
   render () {
-    return (
+    const {children, tooltip} = this.props
+    const button = (
       <Button
         {...this.props}
         href='#' // required for button width to appear correctly
         onClick={this._onClick}>
-        {this.props.children}
+        {children}
       </Button>
     )
+    if (tooltip) {
+      return (
+        <OverlayTrigger
+          placement='bottom'
+          overlay={tooltip}>
+          {button}
+        </OverlayTrigger>
+      )
+    } else {
+      return button
+    }
   }
 }

lib/editor/components/pattern/EditSchedulePanel.js

@@ -1,10 +1,11 @@
 import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component, PropTypes} from 'react'
-import {Button, FormGroup, ControlLabel, ButtonGroup, DropdownButton, MenuItem} from 'react-bootstrap'
+import {Button, FormGroup, ControlLabel, ButtonGroup, DropdownButton, MenuItem, Tooltip} from 'react-bootstrap'
 
 import OptionButton from '../../../common/components/OptionButton'
 import {ENTITY} from '../../constants'
 
+// Outbound is zero, inbound is one.
 const DIRECTIONS = [0, 1]
 
 export default class EditSchedulePanel extends Component {
@@ -18,45 +19,70 @@ export default class EditSchedulePanel extends Component {
 
   _editTimetables = () => {
     const {setActiveEntity, feedSource, activeEntity, activePattern} = this.props
-    setActiveEntity(feedSource.id, 'route', activeEntity, 'trippattern', activePattern, 'timetable')
+    setActiveEntity(
+      feedSource.id,
+      'route',
+      activeEntity,
+      'trippattern',
+      activePattern,
+      'timetable'
+    )
   }
 
   _isDirectionOutbound = dir => dir === DIRECTIONS[0]
 
   _onChangeDirection = directionId => {
-    this.props.updateActiveEntity(this.props.activePattern, 'trippattern', {directionId})
-    this.props.saveActiveEntity('trippattern')
+    const {activePattern, saveActiveEntity, updateActiveEntity} = this.props
+    updateActiveEntity(activePattern, 'trippattern', {directionId})
+    saveActiveEntity('trippattern')
   }
 
   _onChangeUseFrequency = key => {
-    const {activePattern, deleteAllTripsForPattern, feedSource, saveActiveEntity, showConfirmModal, updateActiveEntity} = this.props
+    const {
+      activePattern,
+      deleteAllTripsForPattern,
+      feedSource,
+      saveActiveEntity,
+      showConfirmModal,
+      updateActiveEntity
+    } = this.props
+    const {name, patternId} = activePattern
     const useFrequency = key !== 'timetables' ? 1 : 0
     const unselectedOption = key === 'timetables' ? 'frequencies' : 'timetables'
     showConfirmModal({
-      title: `Use ${key} for ${activePattern.name}?`,
-      body: `Are you sure you want to use ${key} for this trip pattern? Any trips created using ${unselectedOption} will be lost.`,
+      title: `Use ${key} for ${name}?`,
+      body: `Are you sure you want to use ${key} for this trip pattern?
+      Any trips created using ${unselectedOption} will be lost.`,
       onConfirm: () => {
         // Update and save useFrequency field
         updateActiveEntity(activePattern, 'trippattern', {useFrequency})
         saveActiveEntity('trippattern')
           // Then, delete all trips for the pattern.
-          .then(() => deleteAllTripsForPattern(feedSource.id, activePattern.patternId))
+          .then(() => deleteAllTripsForPattern(feedSource.id, patternId))
       }
     })
   }
 
   render () {
     const {activePattern, activePatternId} = this.props
+    if (!activePattern) return null
+    const {
+      directionId,
+      name,
+      patternStops,
+      tripCount,
+      useFrequency
+    } = activePattern
     const timetableOptions = [
       <span><Icon type='table' /> Use timetables</span>,
       <span><Icon type='clock-o' /> Use frequencies</span>
     ]
     const editSchedulesDisabled = activePatternId === ENTITY.NEW_ID ||
-      (activePattern && activePattern.patternStops && activePattern.patternStops.length === 0)
+      patternStops.length === 0
     return (
       <div>
         <h4 className='line'>
-          Schedules {`(${activePattern.tripCount} trip${activePattern.tripCount !== 1 ? 's' : ''})`}
+          Schedules {`(${tripCount} trip${tripCount !== 1 ? 's' : ''})`}
         </h4>
         <FormGroup style={{marginTop: '5px'}}>
           <ButtonGroup className='pull-right'>
@@ -65,37 +91,51 @@ export default class EditSchedulePanel extends Component {
               pullRight
               style={{width: '170px'}}
               bsSize='small'
-              title={activePattern.useFrequency ? timetableOptions[1] : timetableOptions[0]}
+              title={useFrequency ? timetableOptions[1] : timetableOptions[0]}
               id='frequency-dropdown'>
               <MenuItem
-                eventKey={activePattern.useFrequency ? 'timetables' : 'frequencies'}>
-                {activePattern.useFrequency ? timetableOptions[0] : timetableOptions[1]}
+                eventKey={useFrequency ? 'timetables' : 'frequencies'}>
+                {useFrequency ? timetableOptions[0] : timetableOptions[1]}
               </MenuItem>
             </DropdownButton>
           </ButtonGroup>
-          <ControlLabel style={{marginTop: '3px'}}><small>Type</small></ControlLabel>
+          <ControlLabel
+            style={{marginTop: '3px'}}>
+            <small>Type</small>
+          </ControlLabel>
         </FormGroup>
         <FormGroup style={{marginTop: '5px'}}>
           <ButtonGroup className='pull-right'>
-            {DIRECTIONS.map(dir => (
-              <OptionButton
-                key={dir}
-                active={activePattern.directionId === dir}
-                value={dir}
-                bsSize='small'
-                style={{width: '85px'}}
-                name={dir}
-                title={this._isDirectionOutbound() ? 'Outbound (0)' : 'Inbound (1)'}
-                onClick={this._onChangeDirection}>
-                <Icon type={this._isDirectionOutbound() ? 'sign-out' : 'sign-in'} />
-              </OptionButton>
-            ))}
+            {DIRECTIONS.map(dir => {
+              const isOutbound = this._isDirectionOutbound(dir)
+              return (
+                <OptionButton
+                  key={dir}
+                  active={directionId === dir}
+                  value={dir}
+                  bsSize='small'
+                  style={{width: '85px'}}
+                  name={dir}
+                  tooltip={
+                    <Tooltip
+                      id={`tooltip-dir-${dir}`}>
+                      {isOutbound ? 'Outbound (0)' : 'Inbound (1)'}
+                    </Tooltip>
+                  }
+                  onClick={this._onChangeDirection}>
+                  <Icon type={isOutbound ? 'sign-out' : 'sign-in'} />
+                </OptionButton>
+              )
+            })}
           </ButtonGroup>
           <ControlLabel><small>Direction</small></ControlLabel>
         </FormGroup>
         <Button
           disabled={editSchedulesDisabled}
-          title={editSchedulesDisabled ? `Must add stops to pattern before editing schedules for ${activePattern.name}` : `Edit schedules for ${activePattern.name}`}
+          // FIXME: Should this be a tooltip for a better user experience?
+          title={editSchedulesDisabled
+            ? `Must add stops to pattern before editing schedules for ${name}`
+            : `Edit schedules for ${name}`}
           block
           bsSize='small'
           onClick={this._editTimetables}>