Merge branch 'dev' into mongo-pojo

lib/common/util/config.js

@@ -14,7 +14,7 @@ export function getGtfsPlusSpec (): Array<GtfsPlusTable> {
 
 export function getComponentMessages (componentName: string): any {
   return (
-    objectPath.get(window.DT_CONFIG, ['messages', 'active', componentName]) ||
+    objectPath.get(window.DT_CONFIG, ['messages', 'active', 'components', componentName]) ||
     {}
   )
 }
@@ -65,7 +65,7 @@ export function initializeConfig () {
     : navigator.language
 
   config.messages.active =
-    lang.find(l => l.id === languageId) || lang.find(l => l.id === 'en-US')
+    lang.find(l => l._id === languageId) || lang.find(l => l._id === 'en-US')
 
   // console.log('config', config)
   window.DT_CONFIG = config

lib/editor/components/timetable/EditableCell.js

@@ -298,24 +298,10 @@ export default class EditableCell extends Component {
     const focusedNotEditing = this.props.isFocused && !this.state.isEditing
     const edgeDiff = this.props.isFocused ? 0 : 0.5
     const divStyle = {
-      height: '100%',
-      display: 'inline-block',
       paddingTop: `${3 + edgeDiff}px`,
       paddingLeft: `${3 + edgeDiff}px`,
-      UserSelect: 'none',
-      userSelect: 'none',
       fontWeight: this.state.edited ? 'bold' : 'normal'
     }
-    const inputStyle = {
-      width: '100%',
-      height: '100%',
-      outline: 'none',
-      margin: '1px',
-      marginLeft: '2px',
-      padding: '1px',
-      border: 0,
-      backgroundColor: 'rgba(0,0,0,0)'
-    }
     const cellStyle = {
       backgroundColor: this.props.invalidData && !this.state.isEditing
         ? 'pink'
@@ -333,27 +319,25 @@ export default class EditableCell extends Component {
         : '1px solid #ddd',
       margin: `${-0.5 + edgeDiff}px`,
       padding: `${-edgeDiff}px`,
-      whiteSpace: 'nowrap',
-      cursor: 'default',
-      fontWeight: '400',
       // fontFamily: '"Courier New", Courier, monospace',
       color: this.props.lightText ? '#aaa' : '#000',
       ...this.props.style
     }
     const cellHtml = this.state.isEditing
       ? <input
-        type='text'
-        ref={this._createRef}
-        readOnly={!this.state.isEditing}
         defaultValue={this.cellRenderer(this.state.data)}
-        placeholder={this.props.placeholder || ''}
-        onPaste={this.handlePaste}
-        style={inputStyle}
-        onKeyDown={this.handleKeyDown}
+        className='cell-input'
+        onBlur={this.cancel}
         onChange={this.handleChange}
         onFocus={this._onInputFocus}
-        onBlur={this.cancel} />
+        onKeyDown={this.handleKeyDown}
+        onPaste={this.handlePaste}
+        placeholder={this.props.placeholder || ''}
+        readOnly={!this.state.isEditing}
+        ref={this._createRef}
+        type='text' />
       : <div
+        className='cell-div noselect'
         style={divStyle}
         >
         {this.cellRenderer(this.state.data)}

lib/editor/components/timetable/TimetableGrid.js

@@ -271,8 +271,43 @@ export default class TimetableGrid extends Component {
     )
   }
 
+  /**
+   * Handle a change in the value of a cell.
+   *
+   * This function gets called with a post-processed value from the `save`
+   * method of EditableCell.  The value can be a time value or non-time entry
+   * such as Trip Id or Headsign.
+   */
   _onCellChange = (value, rowIndex, col, colIndex) => {
-    const {columns, hideDepartureTimes, updateCellValue} = this.props
+    const {
+      activePattern,
+      columns,
+      data,
+      hideDepartureTimes,
+      updateCellValue
+    } = this.props
+
+    // determine if the value is a time entry
+    if (isTimeFormat(col.type)) {
+      // make sure stop time isn't null
+      const splitColKeys = col.key.split('.')
+      const stopTimeIdx = splitColKeys[1]
+      const trip = data[rowIndex]
+      const stopTime = trip.stopTimes[stopTimeIdx]
+      if (!stopTime) {
+        // stop time is null.  Create new stop time
+
+        // get stop id from pattern
+        const {stopId} = activePattern.patternStops[stopTimeIdx]
+
+        // create filler stop time object
+        updateCellValue(
+          { stopId },
+          rowIndex,
+          `${rowIndex}.stopTimes.${stopTimeIdx}`
+        )
+      }
+    }
     updateCellValue(value, rowIndex, `${rowIndex}.${col.key}`)
     // if departure times are hidden, set departure time value equal to arrival time
     const nextCol = columns[colIndex + 1]

lib/editor/util/index.js

@@ -134,12 +134,22 @@ export function sortAndFilterTrips (
     ? trips
         .filter(t => t.useFrequency === useFrequency) // filter out based on useFrequency
         .sort((a, b) => {
-          if (!a.stopTimes[0].departureTime || !b.stopTimes[0].departureTime) {
+          // There may be a case where a null value (skipped stop) appears first
+          // in the list of stopTimes. In this case, we want to compare on the
+          // first stopTime that exists for each pair of trips.
+          let aStopTime, bStopTime
+          let count = 0
+          while (!aStopTime || !bStopTime) {
+            aStopTime = a.stopTimes[count]
+            bStopTime = b.stopTimes[count]
+            count++
+          }
+          if (!aStopTime.departureTime || !bStopTime.departureTime) {
             return 0
-          } else if (a.stopTimes[0].departureTime < b.stopTimes[0].departureTime) {
+          } else if (aStopTime.departureTime < bStopTime.departureTime) {
             return -1
           } else if (
-            a.stopTimes[0].departureTime > b.stopTimes[0].departureTime
+            aStopTime.departureTime > bStopTime.departureTime
           ) {
             return 1
           }

lib/style.css

@@ -154,9 +154,31 @@
 
 /* TIMETABLE EDITOR */
 
+.editable-cell {
+  cursor: default;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
 /* remove blue focus outline from timetable cell */
 .editable-cell:focus {
-  outline:0;
+  outline: 0;
+}
+
+.editable-cell .cell-input {
+  background-color: rgba(0,0,0,0);
+  border: 0;
+  height: 100%;
+  width: 100%;
+  margin: 1px;
+  margin-left: 2px;
+  outline: none;
+  padding: 1px;
+}
+
+.editable-cell .cell-div {
+  display: inline-block;
+  height: 100%;
 }
 
 /* Bootstrap button dropdown fix for menu showing up underneath leaflet zoom controls */