AB#57920: Add line query mode for StopRoutePlate component (#123)

* AB#57920: Add line query mode for StopRoutePlate component

* Add styling to StopRoutePlate line query option

* Add error checking and clearing selected lines after generating starts

Author: e-halinen

src/components/Generator.js

@@ -3,6 +3,7 @@ import { inject, observer, PropTypes } from 'mobx-react';
 import styled from 'styled-components';
 import FlatButton from 'material-ui/FlatButton';
 import RaisedButton from 'material-ui/RaisedButton';
+import { Switch } from '@material-ui/core';
 import DatePicker from 'material-ui/DatePicker';
 import TextField from 'material-ui/TextField';
 import RadioGroup from './RadioGroup';
@@ -13,7 +14,7 @@ import SelectTemplate from './SelectTemplate';
 import SelectRuleTemplates from './SelectRuleTemplates';
 import { componentsWithMapOptions } from '../stores/generatorStore';
 import TerminalSelect from './TerminalSelect';
-import LineSelect from './LineSelect';
+import { ObservedLineSelect, ObservedSingleLineSelect } from './LineSelect';
 
 const Root = styled.div`
   display: flex;
@@ -80,7 +81,11 @@ const Generator = props => {
         break;
 
       case 'StopRoutePlate':
-        text = stopCount;
+        if (generatorStore.useLineQuery && generatorStore.selectedRoutePlateLine) {
+          text = 1;
+        } else {
+          text = stopCount;
+        }
         break;
 
       default:
@@ -124,6 +129,22 @@ const Generator = props => {
                 />
               </div>
             )}
+            {generatorStore.component === 'StopRoutePlate' && (
+              <div style={{ marginLeft: '20px' }}>
+                <span style={{ opacity: generatorStore.useLineQuery ? 0.4 : 1.0 }}>
+                  Pysäkkihaku
+                </span>
+                <Switch
+                  checked={generatorStore.useLineQuery}
+                  onChange={() => generatorStore.toggleUseLineQuery()}
+                  color="primary"
+                  inputProps={{ 'aria-label': 'Linjahaku' }}
+                  className="muiSwitch-toggle"
+                  style={{ color: '#0077c7' }}
+                />
+                <span style={{ opacity: generatorStore.useLineQuery ? 1.0 : 0.4 }}>Linjahaku</span>
+              </div>
+            )}
           </div>
         </Column>
 
@@ -211,7 +232,7 @@ const Generator = props => {
 
       {generatorStore.component === 'LineTimetable' && (
         <Main>
-          <LineSelect
+          <ObservedLineSelect
             setLineQuery={commonStore.setLineQuery}
             lines={commonStore.lines}
             lineQuery={commonStore.lineQuery}
@@ -222,7 +243,20 @@ const Generator = props => {
         </Main>
       )}
 
-      {generatorStore.component !== 'LineTimetable' && (
+      {generatorStore.component === 'StopRoutePlate' && generatorStore.useLineQuery && (
+        <Main>
+          <ObservedSingleLineSelect
+            setLineQuery={commonStore.setLineQuery}
+            lines={commonStore.lines}
+            lineQuery={commonStore.lineQuery}
+            selectedRoutePlateLine={generatorStore.selectedRoutePlateLine}
+            setSelectedRoutePlateLine={generatorStore.setSelectedRoutePlateLine}
+            clearSelectedRoutePlateLine={generatorStore.clearSelectedRoutePlateLine}
+          />
+        </Main>
+      )}
+
+      {generatorStore.component !== 'LineTimetable' && !generatorStore.useLineQuery && (
         <div>
           <Main>
             <StopList
@@ -302,7 +336,7 @@ const Generator = props => {
         </Row>
       )}
 
-      {generatorStore.component !== 'LineTimetable' && (
+      {generatorStore.component !== 'LineTimetable' && !generatorStore.useLineQuery && (
         <div>
           <h3>Poissuodatettavat linjat</h3>
           <Row>
@@ -334,7 +368,10 @@ const Generator = props => {
         <RaisedButton
           data-cy="generate-button"
           disabled={
-            (stopCount < 1 && generatorStore.component !== 'LineTimetable') ||
+            (stopCount < 1 &&
+              generatorStore.component !== 'LineTimetable' &&
+              !generatorStore.useLineQuery) ||
+            (generatorStore.useLineQuery && generatorStore.selectedRoutePlateLine === null) ||
             !generatorStore.buildId ||
             (generatorStore.component === 'TerminalPoster' && generatorStore.terminalId === '') ||
             (generatorStore.component === 'LineTimetable' && generatorStore.lineId === '') ||

src/components/LineSelect.js

@@ -24,7 +24,7 @@ const ListContainer = styled.div`
 `;
 
 const mapLineItems = (lines, onClick) => {
-  if (lines.length > 0) {
+  if (lines.length > 0 && lines[0] !== null) {
     return lines.map((line, index) => (
       <ListItem onClick={() => onClick(line)} key={index}>
         <ListItemTitle>{line.lineIdParsed}</ListItemTitle> <p>{line.nameFi}</p>
@@ -54,6 +54,26 @@ const LineSelect = props => (
   </div>
 );
 
+const SingleLineSelect = props => (
+  <div>
+    <SectionHeading>Linjahaku</SectionHeading>
+    <TextField
+      id="line-select"
+      hintText="Hae linjaa..."
+      onChange={event =>
+        event.target.value ? props.setLineQuery(event.target.value) : props.setLineQuery('')
+      }
+      value={props.lineQuery}
+      style={{ width: '100%' }}
+    />
+    <ListContainer>{mapLineItems(props.lines, props.setSelectedRoutePlateLine)}</ListContainer>
+    <div>
+      <SelectedLinesTitle>Valittu linja</SelectedLinesTitle>
+      {mapLineItems([props.selectedRoutePlateLine], props.clearSelectedRoutePlateLine)}
+    </div>
+  </div>
+);
+
 LineSelect.propTypes = {
   setLineQuery: PropTypes.func.isRequired,
   lineQuery: PropTypes.string.isRequired,
@@ -63,4 +83,20 @@ LineSelect.propTypes = {
   selectedLines: PropTypes.object.isRequired,
 };
 
-export default observer(LineSelect);
+SingleLineSelect.propTypes = {
+  setLineQuery: PropTypes.func.isRequired,
+  lineQuery: PropTypes.string.isRequired,
+  lines: PropTypes.object.isRequired,
+  selectedRoutePlateLine: PropTypes.object,
+  setSelectedRoutePlateLine: PropTypes.func.isRequired,
+  clearSelectedRoutePlateLine: PropTypes.func.isRequired,
+};
+
+SingleLineSelect.defaultProps = {
+  selectedRoutePlateLine: null,
+};
+
+export const ObservedLineSelect = observer(LineSelect);
+export const ObservedSingleLineSelect = observer(SingleLineSelect);
+
+export default { ObservedLineSelect, ObservedSingleLineSelect };

src/stores/generatorStore.js

@@ -44,6 +44,8 @@ const store = observable({
   legend: true,
   isSmallTerminalPoster: false,
   selectedLines: [],
+  selectedRoutePlateLine: null,
+  useLineQuery: false,
   get rows() {
     let rows = [];
 
@@ -164,6 +166,23 @@ store.removeLine = line => {
   store.selectedLines.remove(line);
 };
 
+store.clearSelectedLines = () => {
+  store.selectedLines = [];
+};
+
+store.toggleUseLineQuery = () => {
+  store.clearSelectedRoutePlateLine();
+  store.useLineQuery = !store.useLineQuery;
+};
+
+store.setSelectedRoutePlateLine = line => {
+  store.selectedRoutePlateLine = line;
+};
+
+store.clearSelectedRoutePlateLine = () => {
+  store.selectedRoutePlateLine = null;
+};
+
 store.generate = () => {
   const user = commonStore.getUser();
   const routeFilter = commonStore.routeFilter;
@@ -219,6 +238,8 @@ store.generate = () => {
     selectedRuleTemplates: [],
     template: 'default',
     downloadTable: true,
+    useLineQuery: store.useLineQuery,
+    lineId: store.selectedRoutePlateLine ? store.selectedRoutePlateLine.lineId : null,
   });
 
   let props;
@@ -242,6 +263,9 @@ store.generate = () => {
   }
 
   store.resetChecked();
+  store.clearSelectedRoutePlateLine();
+  store.clearSelectedLines();
+
   commonStore.addPosters(store.buildId, store.component, props);
 };