front: update column styles in time stops table

Signed-off-by: Alice Khoudli <[email protected]>
OpenRailAssociation · Oct 23, 2024 · c832944 · c832944
1 parent 12f6851
commit c832944
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 31 deletions.
diff --git a/front/public/locales/en/timesStops.json b/front/public/locales/en/timesStops.json
@@ -1,18 +1,38 @@
 {
   "arrivalTime": "requested arrival time",
+  "arrivalTime1": "requested ",
+  "arrivalTime2": "arrival time",
   "calculatedArrivalTime": "calculated arrival time",
+  "calculatedArrivalTime1": "calculated ",
+  "calculatedArrivalTime2": "arrival time",
   "calculatedDepartureTime": "calculated departure time",
+  "calculatedDepartureTime1": "calculated ",
+  "calculatedDepartureTime2": "departure time",
   "dayCounter": "D+{{count}}",
   "departureTime": "requested departure time",
+  "departureTime1": "requested ",
+  "departureTime2": "departure time",
   "diffMargins": "margins diff. (s)",
+  "diffMargins1": "margins ",
+  "diffMargins2": "diff. (s)",
   "name": "CI",
-  "ch": "ch",
+  "ch": "CH",
   "noPathLoaded": "No path loaded",
   "realMargin": "real margin (s)",
+  "realMargin1": "real ",
+  "realMargin2": "margin (s)",
   "receptionOnClosedSignal": "reception on closed signal",
+  "receptionOnClosedSignal1": "reception on ",
+  "receptionOnClosedSignal2": "closed signal",
   "stopTime": "stopping time (s)",
+  "stopTime1": "stopping ",
+  "stopTime2": "time (s)",
   "theoreticalMargin": "theoretical margin",
+  "theoreticalMargin1": "theoretical ",
+  "theoreticalMargin2": "margin",
   "theoreticalMarginPlaceholder": "% or min/100km",
   "theoreticalMarginSeconds": "linear theoretical margin (s)",
+  "theoreticalMarginSeconds1": "linear theoretical ",
+  "theoreticalMarginSeconds2": "margin (s)",
   "waypoint": "Waypoint {{id}}"
 }
diff --git a/front/public/locales/fr/timesStops.json b/front/public/locales/fr/timesStops.json
@@ -1,18 +1,38 @@
 {
   "arrivalTime": "arrivée demandée",
+  "arrivalTime1": "arrivée ",
+  "arrivalTime2": "demandée",
   "calculatedArrivalTime": "arrivée calculée",
+  "calculatedArrivalTime1": "arrivée ",
+  "calculatedArrivalTime2": "calculée",
   "calculatedDepartureTime": "départ calculé",
+  "calculatedDepartureTime1": "départ ",
+  "calculatedDepartureTime2": "calculé",
   "dayCounter": "J+{{count}}",
   "departureTime": "départ demandé",
+  "departureTime1": "départ ",
+  "departureTime2": "demandé",
   "diffMargins": "diff. marges (s)",
+  "diffMargins1": "diff. ",
+  "diffMargins2": "marges (s)",
   "name": "CI",
-  "ch": "ch",
+  "ch": "CH",
   "noPathLoaded": "Aucun chemin chargé",
   "realMargin": "marge réelle (s)",
+  "realMargin1": "marge ",
+  "realMargin2": "réelle (s)",
   "receptionOnClosedSignal": "réception sur signal fermé",
-  "stopTime": "temps d'arrêt (s)",
+  "receptionOnClosedSignal1": "réception sur ",
+  "receptionOnClosedSignal2": "signal fermé",
+  "stopTime": "temps d'arrêt (s)",
+  "stopTime1": "temps ",
+  "stopTime2": "d'arrêt (s)",
   "theoreticalMargin": "marge théorique",
+  "theoreticalMargin1": "marge ",
+  "theoreticalMargin2": "théorique",
   "theoreticalMarginPlaceholder": "% ou min/100km",
-  "theoreticalMarginSeconds": "marge théorique linéaire (s)",
+  "theoreticalMarginSeconds": "marge linéaire théorique (s)",
+  "theoreticalMarginSeconds1": "marge linéaire ",
+  "theoreticalMarginSeconds2": "théorique (s)",
   "waypoint": "Via {{id}}"
 }
diff --git a/front/src/modules/timesStops/TimesStopsOutput.tsx b/front/src/modules/timesStops/TimesStopsOutput.tsx
@@ -48,7 +48,7 @@ const TimesStopsOutput = ({
     <TimesStops
       rows={enrichedOperationalPoints}
       tableType={TableType.Output}
-      cellClassName={({ rowData: rowData_ }) => {
+      cellClassName={({ rowData: rowData_, columnId }) => {
         const rowData = rowData_ as TimeStopsRow;
         const arrivalScheduleNotRespected = rowData.arrival?.time
           ? rowData.calculatedArrival !== rowData.arrival.time
@@ -57,6 +57,7 @@ const TimesStopsOutput = ({
         return cx({
           'warning-schedule': arrivalScheduleNotRespected,
           'warning-margin': negativeDiffMargins,
+          'cell-index': columnId === 'ch',
         });
       }}
       headerRowHeight={65}

diff --git a/...s/timesStops/hooks/useTimeStopsColumns.ts → .../timesStops/hooks/useTimeStopsColumns.tsx b/...s/timesStops/hooks/useTimeStopsColumns.ts → .../timesStops/hooks/useTimeStopsColumns.tsx
@@ -24,14 +24,26 @@ const timeColumn = (isOutputTable: boolean) =>
     isCellEmpty: ({ rowData }) => !rowData,
   }) as Partial<Column<TimeExtraDays | undefined, string, string>>;
 
-const fixedWidth = (width: number) => ({ minWidth: width, maxWidth: width });
+function putHeadersOnTwoLines(headerLine1: string, headerLine2: string) {
+  return (
+    <span className="flex justify-end ml-2 mr-4">
+      <div>
+        {headerLine1}
+        <br />
+        {headerLine2}
+      </div>
+    </span>
+  );
+}
 
 export const useTimeStopsColumns = <T extends TimeStopsRow>(
   tableType: TableType,
   allWaypoints: T[] = []
 ) => {
   const { t } = useTranslation('timesStops');
 
+  const fixedWidth = (width: number) => ({ minWidth: width, maxWidth: width });
+
   const columns = useMemo<Column<T>[]>(() => {
     const isOutputTable = tableType === TableType.Output;
     const extraOutputColumns = (
@@ -41,25 +53,31 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
               ...disabledTextColumn('theoreticalMarginSeconds', t('theoreticalMarginSeconds'), {
                 alignRight: true,
               }),
-              ...fixedWidth(110),
+              ...fixedWidth(130),
             },
             {
               ...disabledTextColumn('calculatedMargin', t('realMargin'), {
                 alignRight: true,
               }),
-              ...fixedWidth(120),
+              ...fixedWidth(100),
             },
             {
-              ...disabledTextColumn('diffMargins', t('diffMargins'), { alignRight: true }),
-              ...fixedWidth(120),
+              ...disabledTextColumn('diffMargins', t('diffMargins'), {
+                alignRight: true,
+              }),
+              ...fixedWidth(100),
             },
             {
-              ...disabledTextColumn('calculatedArrival', t('calculatedArrivalTime')),
-              ...fixedWidth(95),
+              ...disabledTextColumn('calculatedArrival', t('calculatedArrivalTime'), {
+                alignRight: true,
+              }),
+              ...fixedWidth(120),
             },
             {
-              ...disabledTextColumn('calculatedDeparture', t('calculatedDepartureTime')),
-              ...fixedWidth(97),
+              ...disabledTextColumn('calculatedDeparture', t('calculatedDepartureTime'), {
+                alignRight: true,
+              }),
+              ...fixedWidth(120),
             },
           ]
         : []
@@ -69,30 +87,40 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
       {
         ...keyColumn('name', createTextColumn()),
         title: t('name'),
+        component: isOutputTable
+          ? ({ rowData }) => (
+              <span
+                title={rowData.name}
+                className="ml-1 whitespace-nowrap overflow-hidden"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                {rowData.name}
+              </span>
+            )
+          : undefined,
         disabled: true,
-        minWidth: isOutputTable ? 180 : 300,
+        minWidth: isOutputTable ? undefined : 300,
+        maxWidth: isOutputTable ? 560 : undefined,
       },
       {
-        ...keyColumn('ch', createTextColumn()),
+        ...keyColumn(
+          'ch',
+          createTextColumn({
+            alignRight: true,
+          })
+        ),
         title: t('ch'),
         disabled: true,
         maxWidth: 45,
       },
       {
         ...keyColumn('arrival', timeColumn(isOutputTable)),
-        alignRight: true,
-        title: t('arrivalTime'),
+        title: putHeadersOnTwoLines(t('arrivalTime1'), t('arrivalTime2')),
+        ...fixedWidth(120),
 
         // We should not be able to edit the arrival time of the origin
         disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
       },
-      {
-        ...keyColumn('departure', timeColumn(isOutputTable)),
-        title: t('departureTime'),
-
-        // We should not be able to edit the departure time of the origin
-        disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
-      },
       {
         ...keyColumn(
           'stopFor',
@@ -101,18 +129,26 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
             alignRight: true,
           })
         ),
-        title: t('stopTime'),
+        title: putHeadersOnTwoLines(t('stopTime1'), t('stopTime2')),
         disabled: isOutputTable,
-        maxWidth: isOutputTable ? 90 : undefined,
+        maxWidth: isOutputTable ? 100 : undefined,
         grow: 0.6,
       },
+      {
+        ...keyColumn('departure', timeColumn(isOutputTable)),
+        title: putHeadersOnTwoLines(t('departureTime1'), t('departureTime2')),
+        ...fixedWidth(120),
+
+        // We should not be able to edit the departure time of the origin
+        disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
+      },
       {
         ...keyColumn('onStopSignal', checkboxColumn as Partial<Column<boolean | undefined>>),
         title: t('receptionOnClosedSignal'),
+        ...fixedWidth(120),
 
         // We should not be able to edit the reception on close signal if stopFor is not filled
         // except for the destination
-        ...fixedWidth(94),
         disabled: ({ rowData, rowIndex }) =>
           isOutputTable || (rowIndex !== allWaypoints.length - 1 && !rowData.stopFor),
       },
@@ -134,9 +170,10 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
         ),
         cellClassName: ({ rowData }) =>
           cx({ invalidCell: !isOutputTable && !rowData.isMarginValid }),
-        title: t('theoreticalMargin'),
+        title: putHeadersOnTwoLines(t('theoreticalMargin1'), t('theoreticalMargin2')),
+        minWidth: 100,
+        maxWidth: 145,
         disabled: ({ rowIndex }) => isOutputTable || rowIndex === allWaypoints.length - 1,
-        ...fixedWidth(110),
       },
       ...extraOutputColumns,
     ] as Column<T>[];

diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss
@@ -11,11 +11,16 @@
   .activeRow {
     font-weight: bold;
     color: var(--black100);
-    .dsg-cell-gutter {
+    .dsg-cell-gutter,
+    .cell-index {
       font-weight: normal;
     }
   }
 
+  .cell-index {
+    color: var(--grey50);
+  }
+
   .invalidCell {
     color: red !important;
   }