front: dts: fix time display

Author: Akctarus

front/src/applications/osrd/components/DriverTrainSchedule/DriverTrainSchedule.scss

@@ -0,0 +1,55 @@
+.container-drivertrainschedule {
+    max-height: 30rem;
+  }
+
+  .modal-drivertrainschedule {
+    height: 50%;
+  }
+
+  .simulation-drivertrainschedule {
+    max-height: 15rem;
+    overflow: auto;
+  }
+
+  .table-drivertrainschedule, .table-drivertrainschedule th, .table-drivertrainschedule td {
+    border : none !important;
+    padding-right: 10px;
+
+    .drivertrainschedule-pk {
+      text-align: right;
+      width: 2rem;
+    }
+
+    .stoptime-container {
+      .box{
+      width:100%;
+      display:table;
+        .box-row {
+        display:table-row;
+        }
+        .box-cell {
+          display:table-cell;
+          width:calc(100% / 3);
+          text-align:left;
+          position: relative;
+            .box-cell::after {
+            content: '+';
+            position: absolute;
+          }
+        }
+      }
+    }
+
+    .drivertrainschedule-stop {
+      font-weight: bold;
+      small {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .table-drivertrainschedule th, thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }

front/src/applications/osrd/components/DriverTrainSchedule/DriverTrainScheduleHelpers.js

@@ -132,15 +132,28 @@ export default function formatStops(stop, idx, data) {
     stop.position,
     data.base.speeds
   );
+  const pk = Math.round(stop.position / 100) / 10;
   const stopTime =
     getTime(stop.time).at(-1) === '+' ? (
-      <span className="timeWithPlus">{getTime(stop.time).slice(0, -1)}</span>
+      <span className="box-cell">{getTime(stop.time).slice(0, -1)}</span>
     ) : (
       getTime(stop.time)
     );
-  const pk = Math.round(stop.position / 100) / 10;
+  const departureTime =
+    getTime(stop.time + stop.duration).at(-1) === '+' ? (
+      <span className="box-cell">{getTime(stop.time + stop.duration).slice(0, -1)}</span>
+    ) : (
+      getTime(stop.time + stop.duration)
+    );
   return (
-    <tr key={nextId()} className={`${stop.duration > 0 ? 'drivertrainschedule-stop' : ''}`}>
+    <tr
+      key={nextId()}
+      className={`${
+        stop.duration > 0 || idx === 0 || idx === data.base.stops.length - 1
+          ? 'drivertrainschedule-stop'
+          : ''
+      }`}
+    >
       <td className="text-center">
         <small>{idx + 1}</small>
       </td>
@@ -151,15 +164,22 @@ export default function formatStops(stop, idx, data) {
         <div className="drivertrainschedule-pk">{Number.isInteger(pk) ? `${pk}.0` : pk}</div>
       </td>
       <td>{stop.name || 'Unknown'}</td>
-      <td className="text-center drivertrainschedule-stop-time">
-        {stop.duration > 0 ? (
-          <>
-            <span>{stopTime}</span>
-            <span className="ml-2">{stop.duration > 0 && getTime(stop.time + stop.duration)}</span>
-          </>
-        ) : (
-          stopTime
-        )}
+      <td className="stoptime-container">
+        <div className="box">
+          <div className="box-row">
+            <div className="box-cell">
+              {stop.duration > 0 || idx === data.base.stops.length - 1 ? stopTime : ''}
+            </div>
+            <div className="box-cell px-2 px-md-0">
+              {stop.duration > 0 || idx === 0 || idx === data.base.stops.length - 1 ? '' : stopTime}
+            </div>
+            <div className="box-cell">
+              {(stop.duration > 0 && idx < data.base.stops.length - 1) || idx === 0
+                ? departureTime
+                : ''}
+            </div>
+          </div>
+        </div>
       </td>
       <td>
         <div

front/src/applications/osrd/views/OSRDSimulation/OSRDSimulation.scss

@@ -123,54 +123,6 @@ select.sm {
   overflow: auto;
 }
 
-// Driver Train Schedule
-
-.container-drivertrainschedule {
-  max-height: 30rem;
-}
-
-.modal-drivertrainschedule {
-  height: 50%;
-}
-
-
-
-.simulation-drivertrainschedule {
-  max-height: 15rem;
-  overflow: auto;
-}
-
-.table-drivertrainschedule, .table-drivertrainschedule th, .table-drivertrainschedule td {
-  border : none !important;
-  padding-right: 10px;
-
-  .drivertrainschedule-pk {
-    text-align: right;
-    width: 2rem;
-  }
-  
-  .drivertrainschedule-stop {
-    font-weight: bold;
-    small {
-      font-weight: bold;
-    }
-    .timeWithPlus::after {
-      content: '+';
-    }
-  }
-  .drivertrainschedule-stop-time{
-    position: relative;
-
-    .timeWithPlus::after :not(.drivertrainschedule-stop) {
-      content: '+';
-      display: inline;
-      position: absolute;
-      bottom: 0;
-    }
-  }
-  
-}
-
 .table-drivertrainschedule th, thead {
   position: sticky;
   top: 0;

front/src/applications/osrd/views/OSRDSimulation/OSRDSimulation.tsx

@@ -1,4 +1,5 @@
 import './OSRDSimulation.scss';
+import 'applications/osrd/components/DriverTrainSchedule/DriverTrainSchedule.scss';
 
 import React, { useEffect, useState, useRef } from 'react';
 import {