front: stdcm: add linked path search

front/public/locales/en/stdcm-simulation-report-sheet.json

@@ -19,8 +19,8 @@
   "referenceEngine": "reference engine",
   "referencePath": "Reference path",
   "requestedRoute": "requested route",
-  "scheduledArrival": "scheduled arrival at",
-  "scheduledDeparture": "scheduled departure at",
+  "scheduledArrival": "scheduled arrival on {{date}} at {{time}}",
+  "scheduledDeparture": "scheduled departure on {{date}} at {{time}}",
   "serviceStop": "Service stop",
   "simulation": "Simulation",
   "speedLimitByTag": "speed limit by tag",

front/public/locales/en/stdcm.json

@@ -16,18 +16,22 @@
   },
   "departureTime": "Departure time",
   "destinationTime": "Destination time",
+  "find": "Find",
   "form": {
     "datePickerErrors": {
       "invalidInput": "The date must be formatted as dd/mm/yy",
       "invalidDate": "Select a date between {{startDate}} and {{endDate}}"
     }
   },
+  "indicateAnteriorPath": "Indicate anterior path",
+  "indicatePosteriorPath": "Indicate posterior path",
   "leaveAt": "Leave at {{ time }}",
   "loaderImageLegend": "Morning view of the locomotive shed at Le Bourget depot",
   "noConfigurationFound": {
     "title": "A configuration problem prevents you from performing a search",
     "text": "Please contact the maintenance team so they can get you back on track."
   },
+  "noCorrespondingResults": "No results matching your search.",
   "notificationTitle": "Phase 1: from D-7 to D-1 5pm, on the Perrigny-Miramas axis.",
   "pleaseWait": "Please wait…",
   "simulation": {
@@ -84,12 +88,14 @@
   "stdcmSimulationReport": "Path simulation report",
   "trainPath": {
     "addVia": "Add intermediate OP",
+    "anteriorPath": "Anterior path",
     "asSoonAsPossible": "as soon as possible",
     "ch": "CH",
     "ci": "CI",
     "date": "Date",
     "destination": "Destination",
     "origin": "Origin",
+    "posteriorPath": "Posterior path",
     "preciseTime": "precise time",
     "stopFor": "Minimum stop time",
     "stopType": {

front/public/locales/fr/stdcm-simulation-report-sheet.json

@@ -19,8 +19,8 @@
   "referenceEngine": "engin de référence",
   "referencePath": "Sillon de référence",
   "requestedRoute": "parcours demandé",
-  "scheduledArrival": "arrivée prévue à",
-  "scheduledDeparture": "départ prévu à",
+  "scheduledArrival": "arrivée prévue le {{date}} à {{time}}",
+  "scheduledDeparture": "départ prévu le {{date}} à {{time}}",
   "serviceStop": "Arrêt de service",
   "simulation": "Simulation",
   "speedLimitByTag": "code de composition",

front/public/locales/fr/stdcm.json

@@ -16,18 +16,22 @@
   },
   "departureTime": "Horaire de départ",
   "destinationTime": "Horaire de destination",
+  "find": "Trouver",
   "form": {
     "datePickerErrors": {
       "invalidInput": "Saississez une date au format dd/mm/yy",
       "invalidDate": "Renseignez une date entre le {{startDate}} et le {{endDate}}"
     }
   },
+  "indicateAnteriorPath": "Indiquer le sillon antérieur",
+  "indicatePosteriorPath": "Indiquer le sillon postérieur",
   "leaveAt": "Partir à {{ time }}",
   "loaderImageLegend": "Vue matinale du relais de locomotives du dépôt du Bourget",
   "noConfigurationFound": {
     "title": "Un problème de configuration vous empêche de faire une recherche",
     "text": "Veuillez contacter l'équipe de maintenance pour qu'elle puisse vous remettre sur les rails."
   },
+  "noCorrespondingResults": "Aucun résultat ne correspond à votre recherche.",
   "notificationTitle": "Phase 1 : de J-7 à J-1 17h, sur l’axe Perrigny—Miramas.",
   "pleaseWait": "Veuillez patientez…",
   "simulation": {
@@ -84,12 +88,14 @@
   "stdcmSimulationReport": "Fiche simulation",
   "trainPath": {
     "addVia": "Ajouter un PR intermédiaire",
+    "anteriorPath": "Sillon antérieur",
     "asSoonAsPossible": "dès que possible",
     "ch": "CH",
     "ci": "CI",
     "date": "Date",
     "destination": "Destination",
     "origin": "Origine",
+    "posteriorPath": "Sillon postérieur",
     "preciseTime": "horaire précis",
     "stopFor": "Temps d'arrêt minimum",
     "stopType": {

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
+import { ArrowDown, ArrowUp } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +16,7 @@ import { useAppDispatch } from 'store';
 
 import StdcmConsist from './StdcmConsist';
 import StdcmDestination from './StdcmDestination';
+import StdcmLinkedPathSearch from './StdcmLinkedPathSearch';
 import StdcmOrigin from './StdcmOrigin';
 import useStaticPathfinding from '../../hooks/useStaticPathfinding';
 import type { StdcmConfigErrors } from '../../types';
@@ -139,35 +141,49 @@ const StdcmConfig = ({
           <StdcmSimulationParams {...{ disabled, projectID, studyID, scenarioID }} />
         </div>
       )}
-
       <div className="d-flex">
-        <div className="stdcm-simulation-inputs">
-          <div className="stdcm-consist-container">
-            <StdcmConsist disabled={disabled} />
-          </div>
-          <div className="stdcm__separator" />
-          <div className="stdcm-simulation-itinerary">
-            {/* //TODO: use them when we implement this feature #403 */}
-            {/* <StdcmDefaultCard text="Indiquer le sillon antérieur" Icon={<ArrowUp size="lg" />} /> */}
-            <StdcmOrigin disabled={disabled} />
-            <StdcmVias disabled={disabled} />
-            <StdcmDestination disabled={disabled} />
-            {/* <StdcmDefaultCard text="Indiquer le sillon postérieur" Icon={<ArrowDown size="lg" />} /> */}
-            <div
-              className={cx('stdcm-launch-request', {
-                'wizz-effect': pathfinding?.status !== 'success' || formErrors,
-              })}
-            >
-              {showBtnToLaunchSimulation && (
-                <Button label={t('simulation.getSimulation')} onClick={startSimulation} />
-              )}
-              {formErrors && (
-                <StdcmWarningBox
-                  errorInfos={formErrors}
-                  removeOriginArrivalTime={removeOriginArrivalTime}
-                  removeDestinationArrivalTime={removeDestinationArrivalTime}
-                />
-              )}
+        <div className="d-flex flex-column">
+          <StdcmLinkedPathSearch
+            disabled={disabled}
+            defaultCardText={t('indicateAnteriorPath')}
+            cardName={t('trainPath.anteriorPath')}
+            cardIcon={<ArrowUp size="lg" />}
+            className="anterior-linked-path"
+            linkedOp={{ extremityType: 'destination', id: origin.id }}
+          />
+          <div className="stdcm-simulation-inputs">
+            <div className="stdcm-consist-container">
+              <StdcmConsist disabled={disabled} />
+            </div>
+            <div className="stdcm__separator" />
+            <div className="stdcm-simulation-itinerary">
+              <StdcmOrigin disabled={disabled} />
+              <StdcmVias disabled={disabled} />
+              <StdcmDestination disabled={disabled} />
+              <StdcmLinkedPathSearch
+                disabled={disabled}
+                defaultCardText={t('indicatePosteriorPath')}
+                cardName={t('trainPath.posteriorPath')}
+                cardIcon={<ArrowDown size="lg" />}
+                className="posterior-linked-path"
+                linkedOp={{ extremityType: 'origin', id: destination.id }}
+              />
+              <div
+                className={cx('stdcm-launch-request', {
+                  'wizz-effect': pathfinding?.status !== 'success' || formErrors,
+                })}
+              >
+                {showBtnToLaunchSimulation && (
+                  <Button label={t('simulation.getSimulation')} onClick={startSimulation} />
+                )}
+                {formErrors && (
+                  <StdcmWarningBox
+                    errorInfos={formErrors}
+                    removeOriginArrivalTime={removeOriginArrivalTime}
+                    removeDestinationArrivalTime={removeDestinationArrivalTime}
+                  />
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -182,7 +198,6 @@ const StdcmConfig = ({
             simulationPathSteps={pathSteps}
           />
         </div>
-        <div />
       </div>
     </div>
   );

front/src/applications/stdcm/components/StdcmForm/StdcmDefaultCard.tsx

@@ -6,15 +6,17 @@ type StdcmCardProps = {
   hasTip?: boolean;
   disabled?: boolean;
   onClick?: () => void;
+  className?: string;
 };
 const StdcmDefaultCard = ({
   text,
   Icon,
   hasTip = false,
   onClick,
   disabled = false,
+  className = 'add-via',
 }: StdcmCardProps) => (
-  <StdcmCard hasTip={hasTip} disabled={disabled} className="add-via">
+  <StdcmCard hasTip={hasTip} disabled={disabled} className={className}>
     <button type="button" onClick={onClick}>
       <span className="stdcm-default-card-icon">{Icon}</span>
       <span className="stdcm-default-card-button">{text}</span>

front/src/applications/stdcm/components/StdcmForm/StdcmInputVia.tsx

@@ -45,7 +45,7 @@ const StdcmInputVia = ({ stopType, stopDuration, updatePathStepStopTime }: Stdcm
 
   return (
     stopType !== StdcmStopTypes.PASSAGE_TIME && (
-      <div className="stdcm-v2-via-stop-for stop-time">
+      <div className="stop-time">
         <Input
           id="stdcm-via-stop-time"
           type="text"

front/src/applications/stdcm/components/StdcmForm/StdcmLinkedPathResults.tsx

@@ -0,0 +1,79 @@
+import { RadioButton } from '@osrd-project/ui-core';
+import cx from 'classnames';
+import { useDispatch } from 'react-redux';
+
+import { useOsrdConfActions } from 'common/osrdContext';
+import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
+
+import type { StdcmLinkedPathResult, ExtremityPathStepType } from '../../types';
+
+type StdcmLinkedPathResultsProps = {
+  linkedPathResults: StdcmLinkedPathResult[];
+  linkedOp: { extremityType: ExtremityPathStepType; id: string };
+};
+
+const StdcmLinkedPathResults = ({
+  linkedPathResults,
+  linkedOp: { extremityType, id },
+}: StdcmLinkedPathResultsProps) => {
+  const dispatch = useDispatch();
+  const { updateLinkedPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
+  return (
+    <div className="stdcm-linked-path-results">
+      {linkedPathResults.map(({ trainName, origin, destination }, index) => (
+        <button
+          key={`linked-path-${index}`}
+          tabIndex={0}
+          type="button"
+          className="linked-path-result-infos"
+          onClick={() => {
+            if (linkedPathResults.length === 1)
+              dispatch(
+                updateLinkedPathStep({
+                  linkedPathStep: extremityType,
+                  trainName,
+                  pathStep: linkedPathResults[0][extremityType],
+                  pathStepId: id,
+                })
+              );
+          }}
+        >
+          {linkedPathResults.length > 1 ? (
+            <RadioButton
+              label={trainName}
+              id={`${extremityType}-${index}`}
+              value={`${index}`}
+              name={`linked-path-radio-buttons-${extremityType}`}
+              onClick={({ target }) => {
+                const resultIndex = Number((target as HTMLInputElement).value);
+                dispatch(
+                  updateLinkedPathStep({
+                    linkedPathStep: extremityType,
+                    trainName,
+                    pathStep: linkedPathResults[resultIndex][extremityType],
+                    pathStepId: id,
+                  })
+                );
+              }}
+            />
+          ) : (
+            <p className="train-name grey80">{trainName}</p>
+          )}
+          {[origin, destination].map((opPoint) => (
+            <div
+              key={`linked-op-${opPoint.obj_id}-${index}`}
+              className={cx('d-flex', { 'ml-4 pl-1': linkedPathResults.length > 1 })}
+            >
+              <p className="opDetails grey50">{opPoint.date}</p>
+              <p className="opDetails info60">{opPoint.time}</p>
+              <p className="opDetails grey80">{opPoint.name}</p>
+              {'trigram' in opPoint && <p className="opDetails grey80">{opPoint.trigram}</p>}
+            </div>
+          ))}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default StdcmLinkedPathResults;