Merge pull request #378 from opentripplanner/mailables

Mailables

example-config.yml

@@ -76,7 +76,7 @@ map:
   ###                 in the GTFS feed for those routes, or that a getTransitiveRouteLabel function is defined
   ###                 in the ComponentContext (see example.js for more).
   ### - styles.labels,
-  ###   styles.segment_labels: styles attributes recognized by transitive.js. 
+  ###   styles.segment_labels: styles attributes recognized by transitive.js.
   ###                         For examples of applicable style attributes, see
   ###                         https://github.com/conveyal/transitive.js/blob/master/stories/Transitive.stories.js#L47.
   # transitive:
@@ -160,6 +160,29 @@ modes:
       label: Own Bike
       iconWidth: 18
 
+# # The following modules require the datastoreUrl and trinetReDirect properties
+# # to be set. Note: Most of these components are currently only configured for
+# # TriMet.
+# datastoreUrl: https://localhost:9000
+# trinetReDirect: https://localhost:9001
+# modules:
+#   # Provides UI elements for Call Takers to record calls/trip queries.
+#   - id: call
+#   # Provides UI elements for planning field trips on transit vehicles.
+#   - id: ft
+#   # Provides a form for constructing PDF documents for mailing to customers.
+#   - id: mailables
+#     items:
+#     - name: Rte 1 Schedule (1-Vermont)
+#       largePrint: true
+#     # The below settings allow for customizing the PDF letter.
+#     horizontalMargin: 108
+#     verticalMargin: 120
+#     introduction: 'Thank you for calling us to request information.  We have enclosed for you the following item(s):'
+#     conclusion: Thank you for your patronage!
+#     footer: Transit Agency • 555-555-RIDE
+#     # NOTE: headerGraphic requires a valid URL to a png file.
+#     headerGraphic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Trimet_logo.svg/1280px-Trimet_logo.svg.png'
 
 routingTypes:
   - key: ITINERARY

example.js

@@ -16,12 +16,13 @@ import {
   BatchResultsScreen,
   BatchRoutingPanel,
   BatchSearchScreen,
+  CallHistoryWindow,
   CallTakerControls,
   CallTakerPanel,
-  CallTakerWindows,
   DefaultItinerary,
   DefaultMainPanel,
   FieldTripWindows,
+  MailablesWindow,
   MobileResultsScreen,
   MobileSearchScreen,
   ResponsiveWebapp,
@@ -107,8 +108,9 @@ const components = {
       : DefaultMainPanel,
   MapWindows: isCallTakerModuleEnabled
     ? () => <>
-      <CallTakerWindows />
+      <CallHistoryWindow />
       <FieldTripWindows />
+      <MailablesWindow />
     </>
     : null,
   MobileResultsScreen: isBatchRoutingEnabled

lib/actions/call-taker.js

@@ -3,12 +3,14 @@ import { serialize } from 'object-to-formdata'
 import qs from 'qs'
 import { createAction } from 'redux-actions'
 
-import {toggleFieldTrips} from './field-trip'
-import {resetForm} from './form'
 import {searchToQuery, sessionIsInvalid} from '../util/call-taker'
+import {isModuleEnabled, Modules} from '../util/config'
 import {URL_ROOT} from '../util/constants'
 import {getTimestamp} from '../util/state'
 
+import {resetForm} from './form'
+import {toggleFieldTrips} from './field-trip'
+
 if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
 
 /// PRIVATE ACTIONS
@@ -24,6 +26,7 @@ const storeSession = createAction('STORE_SESSION')
 
 export const beginCall = createAction('BEGIN_CALL')
 export const toggleCallHistory = createAction('TOGGLE_CALL_HISTORY')
+export const toggleMailables = createAction('TOGGLE_MAILABLES')
 
 /**
  * Fully reset form and toggle call history (and close field trips if open).
@@ -44,9 +47,10 @@ export function resetAndToggleCallHistory () {
  */
 export function beginCallIfNeeded () {
   return function (dispatch, getState) {
-    const {callTaker, otp} = getState()
-    const calltakerConfig = otp.config.modules.find(m => m.id === 'call')
-    if (calltakerConfig && !callTaker.activeCall && !callTaker.fieldTrip.visible) {
+    const state = getState()
+    const {activeCall, fieldTrip} = state.callTaker
+    const callTakerEnabled = isModuleEnabled(state, Modules.CALL_TAKER)
+    if (callTakerEnabled && !activeCall && !fieldTrip.visible) {
       dispatch(beginCall())
     }
   }
@@ -155,7 +159,7 @@ export function fetchCalls () {
     if (sessionIsInvalid(callTaker.session)) return
     const {datastoreUrl} = otp.config
     const {sessionId} = callTaker.session
-    const limit = 30
+    const limit = 1000
     fetch(`${datastoreUrl}/calltaker/call?${qs.stringify({limit, sessionId})}`)
       .then(res => res.json())
       .then(calls => dispatch(receivedCalls({calls})))

lib/components/admin/call-history-window.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import * as callTakerActions from '../../actions/call-taker'
+import Icon from '../narrative/icon'
+
+import CallRecord from './call-record'
+import DraggableWindow from './draggable-window'
+import {WindowHeader} from './styled'
+
+function CallHistoryWindow (props) {
+  const {callTaker, fetchQueries, searches, toggleCallHistory} = props
+  const {activeCall, callHistory} = callTaker
+  if (!callHistory.visible) return null
+  return (
+    <DraggableWindow
+      header={<WindowHeader><Icon type='history' /> Call history</WindowHeader>}
+      onClickClose={toggleCallHistory}
+      style={{right: '15px', top: '50px', width: '450px'}}
+    >
+      {activeCall
+        ? <CallRecord
+          call={activeCall}
+          searches={searches}
+          inProgress />
+        : null
+      }
+      {callHistory.calls.data.length > 0
+        ? callHistory.calls.data.map((call, i) => (
+          <CallRecord
+            key={i}
+            index={i}
+            call={call}
+            fetchQueries={fetchQueries} />
+        ))
+        : <div>No calls in history</div>
+      }
+    </DraggableWindow>
+  )
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    callTaker: state.callTaker,
+    currentQuery: state.otp.currentQuery,
+    searches: state.otp.searches
+  }
+}
+
+const mapDispatchToProps = {
+  fetchQueries: callTakerActions.fetchQueries,
+  toggleCallHistory: callTakerActions.toggleCallHistory
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CallHistoryWindow)

lib/components/admin/call-taker-controls.js

@@ -6,6 +6,8 @@ import * as callTakerActions from '../../actions/call-taker'
 import * as fieldTripActions from '../../actions/field-trip'
 import * as uiActions from '../../actions/ui'
 import Icon from '../narrative/icon'
+import { isModuleEnabled, Modules } from '../../util/config'
+
 import {
   CallHistoryButton,
   CallTimeCounter,
@@ -126,8 +128,8 @@ class CallTakerControls extends Component {
 const mapStateToProps = (state, ownProps) => {
   return {
     callTaker: state.callTaker,
-    callTakerEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'call')),
-    fieldTripEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'ft')),
+    callTakerEnabled: isModuleEnabled(state, Modules.CALL_TAKER),
+    fieldTripEnabled: isModuleEnabled(state, Modules.FIELD_TRIP),
     session: state.callTaker.session
   }
 }

lib/components/admin/draggable-window.js

@@ -14,6 +14,7 @@ export default class DraggableWindow extends Component {
       header,
       height = '245px',
       onClickClose,
+      scroll = true,
       style
     } = this.props
     const GREY_BORDER = '#777 1.3px solid'
@@ -57,7 +58,7 @@ export default class DraggableWindow extends Component {
           <div style={{
             height,
             margin: '0px 5px',
-            overflowY: 'scroll'
+            overflowY: scroll ? 'scroll' : null
           }}>
             {children}
           </div>