- create TimetableItemAction

Author: Uriel-Sautron

front/src/modules/trainschedule/components/Timetable/PacedTrain/PacedTrainItem.tsx

@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { Checkbox } from '@osrd-project/ui-core';
-import { ChevronDown, Manchette } from '@osrd-project/ui-icons';
+import { ChevronDown, Clock, Flame, Manchette, Moon } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 
+import TimetableItemActions from '../TimetableItemActions';
 import type { TrainScheduleWithDetails } from '../types';
+import { Duration } from 'utils/duration';
+import { ms2min } from 'utils/timeManipulation';
 
 export type PacedTrain = TrainScheduleWithDetails & {
   paced: {
@@ -31,6 +34,12 @@ const PacedTrainItem = ({
   const [isOpened, setIsOpened] = useState(false);
 
   const toggle = () => setIsOpened((open) => !open);
+  const selectPathProjection = async () => {};
+  const duplicatePacedTrain = async () => {};
+  const editPacedTrain = () => {};
+  const deletePacedTrain = async () => {};
+
+  const stepDuration = Duration.parse(pacedTrain.paced.step);
 
   return (
     <div
@@ -66,6 +75,33 @@ const PacedTrainItem = ({
             <span className="train-name">{pacedTrain.trainName}</span>
           </div>
         </div>
+        {!pacedTrain.invalidReason && (
+          <div className="train-time">
+            <div className="status-icon after-midnight">{true && <Moon />}</div>
+            {pacedTrain.isValid && (
+              <div className="scenario-timetable-train-departure">
+                {`- ${ms2min(stepDuration.ms)} min`}
+              </div>
+            )}
+            <div className="status-icon not-honored-or-too-fast">
+              {pacedTrain.notHonoredReason &&
+                (pacedTrain.notHonoredReason === 'scheduleNotHonored' ? <Clock /> : <Flame />)}
+            </div>
+            <div
+              className={cx('status-dot', {
+                'not-honored-or-too-fast':
+                  pacedTrain.notHonoredReason === 'scheduleNotHonored' ||
+                  pacedTrain.notHonoredReason === 'trainTooFast',
+              })}
+            />
+          </div>
+        )}
+        <TimetableItemActions
+          selectPathProjection={selectPathProjection}
+          duplicateTimetableItem={duplicatePacedTrain}
+          editTimetableItem={editPacedTrain}
+          deleteTimetableItem={deletePacedTrain}
+        />
       </div>
       <div className="occurancies" />
     </div>

front/src/modules/trainschedule/components/Timetable/TimetableItemActions.tsx

@@ -0,0 +1,60 @@
+// import React from 'react';
+
+import { Duplicate, Pencil, Trash } from '@osrd-project/ui-icons';
+import { useTranslation } from 'react-i18next';
+import { GiPathDistance } from 'react-icons/gi';
+
+type TimetableItemActionsProps = {
+  selectPathProjection: () => Promise<void>;
+  duplicateTimetableItem: () => Promise<void>;
+  editTimetableItem: () => void;
+  deleteTimetableItem: () => Promise<void>;
+};
+
+const TimetableItemActions = ({
+  selectPathProjection,
+  duplicateTimetableItem,
+  editTimetableItem,
+  deleteTimetableItem,
+}: TimetableItemActionsProps) => {
+  const { t } = useTranslation(['operationalStudies/scenario']);
+  return (
+    <div className="action-buttons">
+      <button
+        type="button"
+        aria-label={t('timetable.choosePath')}
+        title={t('timetable.choosePath')}
+        onClick={selectPathProjection}
+      >
+        <GiPathDistance />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.duplicate')}
+        title={t('timetable.duplicate')}
+        onClick={duplicateTimetableItem}
+      >
+        <Duplicate />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.update')}
+        title={t('timetable.update')}
+        onClick={editTimetableItem}
+        data-testid="edit-train"
+      >
+        <Pencil />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.delete')}
+        title={t('timetable.delete')}
+        onClick={deleteTimetableItem}
+      >
+        <Trash />
+      </button>
+    </div>
+  );
+};
+
+export default TimetableItemActions;

front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
 import { Checkbox } from '@osrd-project/ui-core';
-import { Duplicate, Pencil, Trash, Clock, Flame, Moon, Manchette } from '@osrd-project/ui-icons';
+import { Clock, Flame, Moon, Manchette } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import dayjs from 'dayjs';
 import { omit } from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { GiPathDistance } from 'react-icons/gi';
 
 import { MANAGE_TRAIN_SCHEDULE_TYPES } from 'applications/operationalStudies/consts';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
@@ -20,6 +19,7 @@ import { useAppDispatch } from 'store';
 import { formatToIsoDate, isoDateToMs } from 'utils/date';
 import { castErrorToFailure } from 'utils/error';
 
+import TimetableItemActions from './TimetableItemActions';
 import type { TrainScheduleWithDetails } from './types';
 
 type TimetableTrainCardProps = {
@@ -254,41 +254,12 @@ const TimetableTrainCard = ({
           </div>
         )}
       </div>
-      <div className="action-buttons">
-        <button
-          type="button"
-          aria-label={t('timetable.choosePath')}
-          title={t('timetable.choosePath')}
-          onClick={selectPathProjection}
-        >
-          <GiPathDistance />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.duplicate')}
-          title={t('timetable.duplicate')}
-          onClick={duplicateTrain}
-        >
-          <Duplicate />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.update')}
-          title={t('timetable.update')}
-          onClick={editTrainSchedule}
-          data-testid="edit-train"
-        >
-          <Pencil />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.delete')}
-          title={t('timetable.delete')}
-          onClick={deleteTrain}
-        >
-          <Trash />
-        </button>
-      </div>
+      <TimetableItemActions
+        selectPathProjection={selectPathProjection}
+        duplicateTimetableItem={duplicateTrain}
+        editTimetableItem={editTrainSchedule}
+        deleteTimetableItem={deleteTrain}
+      />
     </div>
   );
 };

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -214,6 +214,7 @@
         }
       }
     }
+
     .scenario-details-electrical-profile-set {
       font-size: 0.75rem;
       font-weight: 400;
@@ -334,6 +335,10 @@
           margin-left: 8px;
           position: relative;
           line-height: 24px;
+
+          .custom-checkbox.small {
+            margin-right: 9px;
+          }
         }
 
         .no-train {
@@ -483,11 +488,12 @@
 
             .toggle-icon{
               transition: all 0.3s;
+              margin-right: 7.5px;
             }
 
             .base-info{
               height: 48px;
-    align-items: center;
+              align-items: center;
             }
 
 

front/src/utils/timeManipulation.ts

@@ -16,6 +16,10 @@ export function ms2sec(ms: number) {
   return ms / 1000;
 }
 
+export function ms2min(ms: number) {
+  return ms / 1000 / 60;
+}
+
 export function minToMs(min: number) {
   return min * 60 * 1000;
 }