Improve trip settings #323
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,107 @@ | ||
| import { Field } from 'formik' | ||
| import React, { Component } from 'react' | ||
| import { Alert, FormControl, Glyphicon } from 'react-bootstrap' | ||
| import styled from 'styled-components' | ||
|
|
||
| import Icon from '../../narrative/icon' | ||
|
|
||
| const notificationChannelLabels = { | ||
| email: 'email', | ||
| sms: 'SMS' | ||
| } | ||
|
|
||
| // Element styles | ||
| const SettingsList = styled.ul` | ||
| border-spacing: 0 10px; | ||
| display: table; | ||
| padding-left: 0; | ||
| width: 100%; | ||
| label { | ||
| font-weight: inherit; | ||
| } | ||
| & > li { | ||
| align-items: center; | ||
| display: block; | ||
| } | ||
| ` | ||
|
|
||
| // Using table display for this element, so that all dropdowns occupy the same width. | ||
| // (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.) | ||
| const SettingsListWithAlign = styled(SettingsList)` | ||
| & > li { | ||
| display: table-row; | ||
| & > * { | ||
| display: table-cell; | ||
| } | ||
| & > label { | ||
| padding-right: 10px; | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| const InlineFormControl = styled(FormControl)` | ||
| display: inline-block; | ||
| margin: 0 0.5em; | ||
| width: auto; | ||
| ` | ||
|
|
||
| const SettingsToggle = styled.button` | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| & span.fa { | ||
| line-height: 150%; | ||
| } | ||
| ` | ||
|
|
||
| /** | ||
| * A label followed by a dropdown control. | ||
| */ | ||
| const Select = ({ children, Control = FormControl, label, name }) => ( | ||
| // <Field> is kept outside of <label> to accommodate layout in table/grid cells. | ||
| <> | ||
| <label htmlFor={name}>{label}</label> | ||
| <Field | ||
| as={Control} | ||
| componentClass='select' | ||
| id={name} | ||
| name={name} | ||
| > | ||
| {children} | ||
| </Field> | ||
| </> | ||
| ) | ||
|
|
||
| /** | ||
| * This component wraps the elements to edit trip notification settings. | ||
| */ | ||
| class TripNotificationsPane extends Component { | ||
| state = { | ||
| showAdvancedSettings: false | ||
| } | ||
|
|
||
| _handleToggleAdvancedSettings = () => { | ||
| this.setState({ showAdvancedSettings: !this.state.showAdvancedSettings }) | ||
| } | ||
|
|
||
| _handleDelayThresholdChange = e => { | ||
| // To spare users the complexity of the departure/arrival delay thresholds, | ||
| // set both the arrival and departure variance delays to the selected value. | ||
| const { setFieldValue } = this.props | ||
| const threshold = e.target.value | ||
| setFieldValue('arrivalVarianceMinutesThreshold', threshold) | ||
| setFieldValue('departureVarianceMinutesThreshold', threshold) | ||
| } | ||
|
|
||
| render () { | ||
| const { notificationChannel, values } = this.props | ||
| const areNotificationsDisabled = notificationChannel === 'none' | ||
| // Define a common trip delay field for simplicity, set to the smallest between the | ||
| // retrieved departure/arrival delay attributes. | ||
| const commonDelayThreshold = Math.min( | ||
| values.arrivalVarianceMinutesThreshold, | ||
| values.departureVarianceMinutesThreshold | ||
| ) | ||
|
|
||
| let notificationSettingsContent | ||
| if (areNotificationsDisabled) { | ||
|
|
@@ -42,66 +117,72 @@ class TripNotificationsPane extends Component { | |
| </Alert> | ||
| ) | ||
| } else { | ||
| const { showAdvancedSettings } = this.state | ||
| notificationSettingsContent = ( | ||
| <> | ||
| <h4>Notify me via {notificationChannelLabels[notificationChannel]} when:</h4> | ||
| <SettingsListWithAlign> | ||
| <li> | ||
| <Select | ||
| label='There is a realtime alert flagged on my journey' | ||
| name='notifyOnAlert' | ||
| > | ||
| <option value>Yes (default)</option> | ||
| <option value={false}>No</option> | ||
| </Select> | ||
| </li> | ||
| <li> | ||
| <Select | ||
| label='An alternative route or transfer point is recommended' | ||
| name='notifyOnItineraryChange' | ||
| > | ||
| <option value>Yes (default)</option> | ||
| <option value={false}>No</option> | ||
| </Select> | ||
| </li> | ||
| <li> | ||
| <label htmlFor='commonDelayThreshold'>There are delays or disruptions of more than</label> | ||
| <FormControl | ||
| componentClass='select' | ||
| id='commonDelayThreshold' | ||
| onChange={this._handleDelayThresholdChange} | ||
| value={commonDelayThreshold} | ||
| > | ||
| <option value={5}>5 min (default)</option> | ||
| <option value={10}>10 min</option> | ||
| <option value={15}>15 min</option> | ||
| </FormControl> | ||
| </li> | ||
| </SettingsListWithAlign> | ||
|
|
||
| <h4> | ||
| <SettingsToggle | ||
| aria-expanded={showAdvancedSettings} | ||
| aria-label='Toggle advanced settings' | ||
| onClick={this._handleToggleAdvancedSettings} | ||
| type='button' | ||
| > | ||
| <Icon type={showAdvancedSettings ? 'caret-down' : 'caret-right'} /> | ||
| Advanced settings | ||
| </SettingsToggle> | ||
| </h4> | ||
| {showAdvancedSettings && ( | ||
| <SettingsList> | ||
| <li> | ||
| <Select | ||
| Control={InlineFormControl} | ||
| label='Monitor this trip' | ||
| name='leadTimeInMinutes' | ||
| > | ||
| <option value={15}>15 min</option> | ||
| <option value={30}>30 min (default)</option> | ||
|
Member
There was a problem hiding this comment. Because it's not the first option, 30 minutes is not selected by default. For this select and the others, we may want to add a selected prop? I'm not too familiar with how Formik handles
Collaborator
Author
There was a problem hiding this comment. Forgot about that, glad you pointed it out.
Collaborator
Author
There was a problem hiding this comment. That was trickier. The default value was already populated correctly in the trip object, but the I passed the wrong component for styling, so it's fixed now in 4801a00. |
||
| <option value={45}>45 min</option> | ||
| <option value={60}>1 hour</option> | ||
| </Select> | ||
| before it begins until it ends. | ||
| </li> | ||
| </SettingsList> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After seeing this in action, let's make all these settings flush with the left edge (i.e., no indentation). Same goes for the below item in Advanced Settings.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated in 4801a00.