AB#32085: Add UI for testing line timetable generation (#111)

HSLdevcom · Aug 6, 2024 · 72030bf · 72030bf
1 parent 6d07051
commit 72030bf
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 36 deletions.
diff --git a/src/components/Generator.js b/src/components/Generator.js
@@ -13,6 +13,7 @@ import SelectTemplate from './SelectTemplate';
 import SelectRuleTemplates from './SelectRuleTemplates';
 import { componentsWithMapOptions } from '../stores/generatorStore';
 import TerminalSelect from './TerminalSelect';
+import LineSelect from './LineSelect';
 
 const Root = styled.div`
   display: flex;
@@ -102,7 +103,10 @@ const Generator = props => {
             valuesByLabel={generatorStore.rowTypesByLabel}
             valueSelected={generatorStore.rowType}
             onChange={value => generatorStore.setRowType(value)}
-            disabled={generatorStore.component === 'TerminalPoster'}
+            disabled={
+              generatorStore.component === 'TerminalPoster' ||
+              generatorStore.component === 'LineTimetable'
+            }
           />
         </Column>
 
@@ -112,6 +116,7 @@ const Generator = props => {
             valuesByLabel={{ Talvi: false, Kesä: true }}
             valueSelected={generatorStore.isSummerTimetable}
             onChange={value => generatorStore.setIsSummerTimetable(value)}
+            disabled={generatorStore.component === 'LineTimetable'}
           />
         </Column>
 
@@ -158,29 +163,43 @@ const Generator = props => {
         </Main>
       )}
 
-      <Main>
-        <StopList onCheck={generatorStore.setChecked} onReset={generatorStore.resetChecked} />
-      </Main>
-
-      <Main>
-        <SelectTemplate
-          currentTemplate={commonStore.currentTemplate}
-          templates={commonStore.templates}
-          onSelectTemplate={commonStore.selectTemplate}
-          showControls={false}
-        />
-      </Main>
-
-      {generatorStore.component !== 'TerminalPoster' && (
+      {generatorStore.component === 'LineTimetable' && (
         <Main>
-          <SelectRuleTemplates
-            selectedRuleTemplates={generatorStore.selectedRuleTemplates}
-            templates={commonStore.ruleTemplates}
-            setSelectedRuleTemplates={generatorStore.setSelectedRuleTemplates}
-          />
+          <LineSelect onChange={generatorStore.setLineId} />
         </Main>
       )}
 
+      {generatorStore.component !== 'LineTimetable' && (
+        <div>
+          <Main>
+            <StopList
+              onCheck={generatorStore.setChecked}
+              onReset={generatorStore.resetChecked}
+              disabled={generatorStore.component === 'LineTimetable'}
+            />
+          </Main>
+          <Main>
+            <SelectTemplate
+              currentTemplate={commonStore.currentTemplate}
+              templates={commonStore.templates}
+              onSelectTemplate={commonStore.selectTemplate}
+              showControls={false}
+            />
+          </Main>
+        </div>
+      )}
+
+      {generatorStore.component !== 'TerminalPoster' &&
+        generatorStore.component !== 'LineTimetable' && (
+          <Main>
+            <SelectRuleTemplates
+              selectedRuleTemplates={generatorStore.selectedRuleTemplates}
+              templates={commonStore.ruleTemplates}
+              setSelectedRuleTemplates={generatorStore.setSelectedRuleTemplates}
+            />
+          </Main>
+        )}
+
       {componentsWithMapOptions.includes(generatorStore.component) && (
         <Row>
           <Column>
@@ -227,16 +246,21 @@ const Generator = props => {
         </Row>
       )}
 
-      <h3>Linjasuodatus</h3>
-      <Row>
-        <TextField
-          data-cy="routeFilterInput"
-          onChange={(_, value) => commonStore.setRouteFilter(value)}
-          value={commonStore.routeFilter}
-          hintText="Esim. 7*"
-          fullWidth
-        />
-      </Row>
+      {generatorStore.component !== 'LineTimetable' && (
+        <div>
+          <h3>Linjasuodatus</h3>
+          <Row>
+            <TextField
+              disabled={generatorStore.component === 'LineTimetable'}
+              data-cy="routeFilterInput"
+              onChange={(_, value) => commonStore.setRouteFilter(value)}
+              value={commonStore.routeFilter}
+              hintText="Esim. 7*"
+              fullWidth
+            />
+          </Row>
+        </div>
+      )}
 
       <Heading>Generointi</Heading>
       <Footer>
@@ -254,9 +278,10 @@ const Generator = props => {
         <RaisedButton
           data-cy="generate-button"
           disabled={
-            stopCount < 1 ||
+            (stopCount < 1 && generatorStore.component !== 'LineTimetable') ||
             !generatorStore.buildId ||
-            (generatorStore.component === 'TerminalPoster' && generatorStore.terminalId === '')
+            (generatorStore.component === 'TerminalPoster' && generatorStore.terminalId === '') ||
+            (generatorStore.component === 'LineTimetable' && generatorStore.lineId === '')
           }
           onClick={async () => {
             if ((await commonStore.currentTemplate) === undefined) {

diff --git a/src/components/LineSelect.js b/src/components/LineSelect.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import styled from 'styled-components';
+import { TextField } from 'material-ui';
+
+const SectionHeading = styled.h4`
+  margin-bottom: 0.5rem;
+`;
+
+const LineSelect = props => (
+  <div>
+    <SectionHeading>Linja</SectionHeading>
+    <TextField
+      id="line-select"
+      placeholder="Kirjoita linjan tunnus (esim. 6211U)"
+      onChange={event =>
+        event.target.value ? props.onChange(event.target.value) : props.onChange('')
+      }
+      style={{ width: '100%' }}
+    />
+  </div>
+);
+
+LineSelect.propTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
+export default observer(LineSelect);
diff --git a/src/stores/generatorStore.js b/src/stores/generatorStore.js
@@ -10,6 +10,7 @@ const componentsByLabel = {
   Aikataulu: 'Timetable',
   PysäkkijulisteA3: 'A3StopPoster',
   Terminaalijuliste: 'TerminalPoster',
+  'Linja-aikataulu': 'LineTimetable',
 };
 
 export const componentsWithMapOptions = ['StopPoster', 'TerminalPoster'];
@@ -41,6 +42,7 @@ const store = observable({
   minimapZoneSymbols: true,
   legend: true,
   isSmallTerminalPoster: false,
+  lineId: '',
   get rows() {
     let rows = [];
 
@@ -152,6 +154,10 @@ store.setIsSmallTerminalPoster = () => {
   store.isSmallTerminalPoster = !store.isSmallTerminalPoster;
 };
 
+store.setLineId = value => {
+  store.lineId = value;
+};
+
 store.generate = () => {
   const user = commonStore.getUser();
   const routeFilter = commonStore.routeFilter;
@@ -190,10 +196,30 @@ store.generate = () => {
       store.isSmallTerminalPoster && store.component === componentsByLabel.Terminaalijuliste,
   });
 
-  const props =
-    store.component !== 'TerminalPoster'
-      ? stops.map(stopId => propsTemplate(stopId))
-      : [propsTemplate(store.terminalId, stops)];
+  const lineTimetablePropsTemplate = id => ({
+    lineId: id,
+    dateBegin: store.dateBegin ? format(store.dateBegin) : null,
+    dateEnd: store.dateEnd ? format(store.dateEnd) : null,
+    printTimetablesAsA4: true,
+    selectedRuleTemplates: [],
+    template: commonStore.currentTemplate.id,
+  });
+
+  let props;
+
+  switch (store.component) {
+    case 'TerminalPoster':
+      props = [propsTemplate(store.terminalId, stops)];
+      break;
+
+    case 'LineTimetable':
+      props = [lineTimetablePropsTemplate(store.lineId)];
+      break;
+
+    default:
+      props = stops.map(stopId => propsTemplate(stopId));
+      break;
+  }
 
   store.resetChecked();
   commonStore.addPosters(store.buildId, store.component, props);