front: clean up and enhance simulation report sheet

Signed-off-by: Achraf Mohyeddine <[email protected]>
OpenRailAssociation · Dec 10, 2024 · c95d87e · c95d87e
1 parent 9c34c10
commit c95d87e
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 135 deletions.
diff --git a/front/public/locales/en/stdcm-simulation-report-sheet.json b/front/public/locales/en/stdcm-simulation-report-sheet.json
@@ -17,7 +17,7 @@
   "passageStop": "passage",
   "refEngine": "Ref. engine",
   "referenceEngine": "reference engine",
-  "referencePath": "Reference path",
+  "length": "Length",
   "requestedRoute": "requested route",
   "scheduledArrival": "scheduled arrival on {{date}} at {{time}}",
   "scheduledDeparture": "scheduled departure on {{date}} at {{time}}",

diff --git a/front/public/locales/fr/stdcm-simulation-report-sheet.json b/front/public/locales/fr/stdcm-simulation-report-sheet.json
@@ -2,9 +2,7 @@
   "applicationDate": "Date d'application",
   "asap": "au plus tôt",
   "code": "CH",
-  "conventionalSign": "signe conv.",
   "convoy": "convoi",
-  "crossedATE": "ATE croisé",
   "endStop": "arrivée",
   "for": "pour",
   "formattedDate": "le {{day}}/{{month}}/{{year}} à {{hours}}:{{minutes}}",
@@ -17,7 +15,7 @@
   "passageStop": "passage",
   "refEngine": "Engin de réf.",
   "referenceEngine": "engin de référence",
-  "referencePath": "Sillon de référence",
+  "length": "Longueur",
   "requestedRoute": "parcours demandé",
   "scheduledArrival": "arrivée prévue le {{date}} à {{time}}",
   "scheduledDeparture": "départ prévu le {{date}} à {{time}}",

diff --git a/front/src/applications/stdcm/components/StdcmResults/SimulationReportSheet.tsx b/front/src/applications/stdcm/components/StdcmResults/SimulationReportSheet.tsx
@@ -1,7 +1,5 @@
-import { useEffect, useState } from 'react';
-
 import { Table, TR, TH, TD } from '@ag-media/react-pdf-table';
-import { Page, Text, Image, Document, View, Link } from '@react-pdf/renderer';
+import { Page, Text, Image, Document, View } from '@react-pdf/renderer';
 import { useTranslation } from 'react-i18next';
 
 import iconAlert from 'assets/simulationReportSheet/icon_alert_fill.png';
@@ -10,18 +8,20 @@ import type { PathStep } from 'reducers/osrdconf/types';
 import { extractHHMM, formatDateToString, formatDay } from 'utils/date';
 import { msToKmh } from 'utils/physics';
 import { capitalizeFirstLetter } from 'utils/strings';
+import { secToMin } from 'utils/timeManipulation';
 
 import styles from './SimulationReportStyleSheet';
 import type { SimulationReportSheetProps } from '../../types';
-import { base64ToJpeg, getStopDurationTime } from '../../utils/formatSimulationReportSheet';
+import { getStopDurationTime } from '../../utils/formatSimulationReportSheet';
 
 const SimulationReportSheet = ({
   stdcmLinkedPaths,
   stdcmData,
   consist,
   simulationReportSheetNumber,
-  mapCanvas,
   operationalPointsList,
+  tolerances,
+  username,
 }: SimulationReportSheetProps) => {
   const { t } = useTranslation(['stdcm-simulation-report-sheet', 'stdcm']);
   let renderedIndex = 0;
@@ -33,38 +33,6 @@ const SimulationReportSheet = ({
   const convoyLength = consist?.totalLength ?? rollingStock.length;
   const convoyMaxSpeed = consist?.maxSpeed ?? msToKmh(rollingStock.max_speed);
 
-  // TODO: Add RC information when it becomes avalaible, until that, we use fake ones
-  const fakeInformation = {
-    rcName: 'Super Fret',
-    rcPersonName: 'Jane Smith',
-    rcPhoneNumber: '01 23 45 67 89',
-    rcMail: '[email protected]',
-    path_number1: 'n°XXXXXX',
-    path_number2: 'n°YYYYYY',
-  };
-
-  const [mapImageUrl, setMapImageUrl] = useState<string | null>(null);
-
-  // Convert image to JPEG
-  useEffect(() => {
-    if (mapCanvas) {
-      base64ToJpeg(mapCanvas, 0.8).then((blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        setMapImageUrl(objectUrl);
-      });
-    }
-  }, [mapCanvas]);
-
-  // Cleanup the object URL when the component is unmounted or before a new one is created
-  useEffect(
-    () => () => {
-      if (mapImageUrl) {
-        URL.revokeObjectURL(mapImageUrl);
-      }
-    },
-    [mapImageUrl]
-  );
-
   const getArrivalTime = (
     step: PathStep,
     { isFirstStep, isLastStep }: { isFirstStep?: boolean; isLastStep?: boolean }
@@ -107,19 +75,12 @@ const SimulationReportSheet = ({
 
         <View style={styles.rcInfo.rcInfo}>
           <View style={styles.rcInfo.rcBox}>
-            <Text style={styles.rcInfo.rcName}>{fakeInformation.rcName}</Text>
-            <Text style={styles.rcInfo.rcPersonName}>{fakeInformation.rcPersonName}</Text>
-          </View>
-          <View style={styles.rcInfo.rcBox}>
-            <Text style={styles.rcInfo.rcPhoneNumber}>{fakeInformation.rcPhoneNumber}</Text>
-            <Text style={styles.rcInfo.rcMail}>{fakeInformation.rcMail}</Text>
+            <Text style={styles.rcInfo.rcName}>{username}</Text>
           </View>
           <View style={styles.rcInfo.rcBox}>
             <View style={styles.rcInfo.stdcmApplication}>
               <Text style={styles.rcInfo.applicationDate}>{t('applicationDate')}</Text>
               <Text style={styles.rcInfo.date}>{formatDay(departureTime)}</Text>
-              <Text style={styles.rcInfo.referencePath}>{t('referencePath')}</Text>
-              <Text style={styles.rcInfo.pathNumber}>{fakeInformation.path_number1}</Text>
             </View>
           </View>
         </View>
@@ -160,9 +121,7 @@ const SimulationReportSheet = ({
               <View style={styles.convoyAndRoute.fromBox}>
                 <Text style={styles.convoyAndRoute.from}>{t('from')}</Text>
               </View>
-              <Text style={styles.convoyAndRoute.fromNumber}>
-                {anteriorPath?.trainName || fakeInformation.path_number1}
-              </Text>
+              <Text style={styles.convoyAndRoute.fromNumber}>{anteriorPath?.trainName}</Text>
               <Text style={styles.convoyAndRoute.fromScheduled}>
                 {anteriorPath &&
                   t('scheduledArrival', { date: anteriorPath.date, time: anteriorPath.time })}
@@ -216,7 +175,19 @@ const SimulationReportSheet = ({
                       </View>
                       <View style={styles.convoyAndRoute.stopTableStartWidth}>
                         <TD style={styles.convoyAndRoute.stopTableStartColumn}>
-                          {getArrivalTime(step, { isFirstStep })}
+                          <View>
+                            <Text>{getArrivalTime(step, { isFirstStep })}</Text>
+                          </View>
+                          {isFirstStep && (
+                            <View style={styles.convoyAndRoute.tolerancesWidth}>
+                              <Text style={styles.convoyAndRoute.tolerancesText}>
+                                {tolerances?.before ? `-${secToMin(tolerances.before)}` : ''}
+                              </Text>
+                              <Text style={styles.convoyAndRoute.tolerancesText}>
+                                {tolerances?.after ? `+${secToMin(tolerances.after)}` : ''}
+                              </Text>
+                            </View>
+                          )}
                         </TD>
                       </View>
                       <View style={styles.convoyAndRoute.stopTableStopTypeWidth}>
@@ -236,30 +207,25 @@ const SimulationReportSheet = ({
               </Table>
             </View>
             {/* TODO: Add path number and date from reference path when it becomes avalaible */}
-            <View style={styles.convoyAndRoute.forBanner}>
-              <Text style={styles.convoyAndRoute.forScheduled}>
-                {posteriorPath &&
-                  t('scheduledDeparture', { date: posteriorPath.date, time: posteriorPath.time })}
-              </Text>
-              <Text style={styles.convoyAndRoute.forNumber}>
-                {posteriorPath?.trainName || fakeInformation.path_number2}
-              </Text>
-              <View style={styles.convoyAndRoute.forBox}>
-                <Text style={styles.convoyAndRoute.for}>{t('for')}</Text>
+            {posteriorPath && (
+              <View style={styles.convoyAndRoute.forBanner}>
+                <Text style={styles.convoyAndRoute.forScheduled}>
+                  {t('scheduledDeparture', {
+                    date: posteriorPath.date,
+                    time: posteriorPath.time,
+                  })}
+                </Text>
+                <Text style={styles.convoyAndRoute.forNumber}>{posteriorPath?.trainName}</Text>
+                <View style={styles.convoyAndRoute.forBox}>
+                  <Text style={styles.convoyAndRoute.for}>{t('for')}</Text>
+                </View>
               </View>
-            </View>
+            )}
           </View>
         </View>
         <View style={styles.simulation.simulation}>
           <View style={styles.simulation.simulationContainer}>
             <Text style={styles.simulation.simulationUppercase}>{t('simulation')}</Text>
-            <Link
-              href="#simulationMap"
-              src="#simulationMap"
-              style={styles.simulation.viewSimulation}
-            >
-              {t('viewSimulation')}
-            </Link>
             <Text style={styles.simulation.simulationLength}>
               {`${Math.round(stdcmData.path.length / 1000000)} km`}
             </Text>
@@ -291,15 +257,12 @@ const SimulationReportSheet = ({
                 <View style={styles.simulation.weightWidth}>
                   <TD>{t('weight')}</TD>
                 </View>
+                <View style={styles.simulation.length}>
+                  <TD>{t('length')}</TD>
+                </View>
                 <View style={styles.simulation.refEngineWidth}>
                   <TD>{t('referenceEngine')}</TD>
                 </View>
-                <View style={styles.simulation.convSignWidth}>
-                  <TD>{t('conventionalSign')}</TD>
-                </View>
-                <View style={styles.simulation.crossedATEWidth}>
-                  <TD>{t('crossedATE')}</TD>
-                </View>
               </TH>
               {operationalPointsList.map((step, index) => {
                 const isFirstStep = index === 0;
@@ -402,29 +365,21 @@ const SimulationReportSheet = ({
                         {!isFirstStep ? '=' : `${Math.floor(convoyMass)} t`}
                       </TD>
                     </View>
+                    <View style={styles.simulation.length}>
+                      <TD style={tdPassageStopStyle}>{!isFirstStep ? '=' : `${convoyLength} m`}</TD>
+                    </View>
                     <View style={styles.simulation.refEngineWidth}>
                       <TD style={tdPassageStopStyle}>
                         {!isFirstStep ? '=' : rollingStock.metadata?.reference}
                       </TD>
                     </View>
-                    <View style={styles.simulation.convSignWidth}>
-                      <TD style={tdPassageStopStyle} aria-label="conventionalSign" />
-                    </View>
-                    <View style={styles.simulation.crossedATEWidth}>
-                      <TD style={tdPassageStopStyle} aria-label="crossedATE" />
-                    </View>
                   </TR>
                 );
               })}
             </Table>
             <View style={styles.simulation.horizontalBar} />
           </View>
         </View>
-        {mapCanvas && (
-          <View style={styles.map.map} id="simulationMap">
-            {mapImageUrl && <Image src={mapImageUrl} />}
-          </View>
-        )}
         <View style={styles.footer.warrantyBox}>
           <Text style={styles.footer.warrantyMessage}>{t('withoutWarranty')}</Text>
         </View>

diff --git a/front/src/applications/stdcm/components/StdcmResults/SimulationReportStyleSheet.ts b/front/src/applications/stdcm/components/StdcmResults/SimulationReportStyleSheet.ts
@@ -140,24 +140,6 @@ const styles = {
       color: '#005BC1',
       letterSpacing: '-0.22',
     },
-    rcPersonName: {
-      fontSize: '16',
-      marginLeft: '40',
-      color: '#005BC1',
-      letterSpacing: '-0.2',
-    },
-    rcPhoneNumber: {
-      fontSize: '18',
-      marginTop: '22',
-      marginBottom: '3',
-      color: '#005BC1',
-      letterSpacing: '-0.22',
-    },
-    rcMail: {
-      fontSize: '16',
-      color: '#005BC1',
-      letterSpacing: '-0.2',
-    },
     stdcmApplication: {
       marginTop: '25',
     },
@@ -170,10 +152,6 @@ const styles = {
       fontWeight: 'semibold',
       marginBottom: '25',
     },
-    referencePath: {
-      fontSize: '14',
-      color: '#797671',
-    },
     pathNumber: {
       fontSize: '24',
       marginBottom: '29',
@@ -301,6 +279,21 @@ const styles = {
     stopTableStartWidth: {
       width: '168',
     },
+    tolerancesWidth: {
+      width: '25',
+      height: '25',
+      marginLeft: '5',
+      marginBottom: '3',
+    },
+    stopTolerancesView: {
+      width: '168',
+      fontSize: '14',
+      lineHeight: '14',
+      marginLeft: '25',
+    },
+    tolerancesText: {
+      fontSize: '14',
+    },
     stopTableStopTypeWidth: {
       width: '216',
     },
@@ -466,6 +459,9 @@ const styles = {
     weightWidth: {
       width: '96',
     },
+    length: {
+      width: '96',
+    },
     refEngineWidth: {
       width: '155',
     },

diff --git a/front/src/applications/stdcm/components/StdcmResults/StdcmResults.tsx b/front/src/applications/stdcm/components/StdcmResults/StdcmResults.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
 import { PDFDownloadLink } from '@react-pdf/renderer';
@@ -13,6 +13,7 @@ import {
 import { hasConflicts, hasResults } from 'applications/stdcm/utils/simulationOutputUtils';
 import { type TrackRange } from 'common/api/osrdEditoastApi';
 import { Map } from 'modules/trainschedule/components/ManageTrainSchedule';
+import useAuth from 'utils/hooks/OsrdAuth';
 
 import SimulationReportSheet from './SimulationReportSheet';
 import StdcmDebugResults from './StdcmDebugResults';
@@ -45,7 +46,6 @@ const StcdmResults = ({
   pathTrackRanges,
 }: StcdmResultsProps) => {
   const { t } = useTranslation('stdcm', { keyPrefix: 'simulation.results' });
-  const [mapCanvas, setMapCanvas] = useState<string>();
 
   const selectedSimulation = simulationsList[selectedSimulationIndex];
   const { outputs } = selectedSimulation || {};
@@ -54,6 +54,7 @@ const StcdmResults = ({
   const hasSimulationResults = hasResults(outputs);
 
   const { trackConflicts, workConflicts } = useConflictsMessages(t, outputs);
+  const { username } = useAuth();
 
   const simulationReportSheetNumber = generateCodeNumber();
   const isSelectedSimulationRetained = selectedSimulationIndex === retainedSimulationIndex;
@@ -100,8 +101,9 @@ const StcdmResults = ({
                         stdcmLinkedPaths={selectedSimulation.inputs.linkedPaths}
                         stdcmData={outputs.results}
                         consist={selectedSimulation.inputs.consist}
+                        tolerances={selectedSimulation.inputs.tolerances}
+                        username={username}
                         simulationReportSheetNumber={simulationReportSheetNumber}
-                        mapCanvas={mapCanvas}
                         operationalPointsList={operationalPointsList}
                       />
                     }
@@ -168,7 +170,6 @@ const StcdmResults = ({
             hideAttribution
             showStdcmAssets
             isFeasible={!hasConflictResults}
-            setMapCanvas={setMapCanvas}
             pathGeometry={outputs?.pathProperties?.geometry}
             simulationPathSteps={simulationPathSteps}
           />

diff --git a/front/src/applications/stdcm/hooks/useStdcm.ts b/front/src/applications/stdcm/hooks/useStdcm.ts
@@ -53,7 +53,12 @@ const useStdcm = ({
   const osrdconf = useSelector(getConf) as OsrdStdcmConfState;
   const timetableId = useSelector(getTimetableID);
 
-  const stdcmResults = useStdcmResults(stdcmResponse, stdcmTrainResult, setPathProperties);
+  const stdcmResults = useStdcmResults(
+    stdcmResponse,
+    stdcmTrainResult,
+    setPathProperties,
+    dispatch
+  );
 
   const [postTimetableByIdStdcm] = osrdEditoastApi.endpoints.postTimetableByIdStdcm.useMutation();
 

diff --git a/front/src/applications/stdcm/hooks/useStdcmForm.ts b/front/src/applications/stdcm/hooks/useStdcmForm.ts
@@ -38,6 +38,7 @@ const useStdcmForm = (): StdcmSimulationInputs => {
       pathSteps,
       departureDate: originArrival?.arrivalDate,
       departureTime: originArrival?.arrivalTime,
+      tolerances: origin.tolerances,
       consist: {
         tractionEngine: rollingStock,
         towedRollingStock,