From fe7954972f1476aab689b059bf29c427c12c49cf Mon Sep 17 00:00:00 2001
From: theocrsb <theo_crosbie@yahoo.fr>
Date: Fri, 4 Oct 2024 08:33:34 +0200
Subject: [PATCH] front: add logo when train is projected

Signed-off-by: theocrsb <theo_crosbie@yahoo.fr>
---
 .../components/Timetable/Timetable.tsx           |  6 ++++++
 .../components/Timetable/TimetableTrainCard.tsx  |  9 ++++++++-
 .../operationalStudies/_scenario.scss            | 16 ++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
index 2947ecd7857..d24f4213956 100644
--- a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
+++ b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
@@ -3,11 +3,13 @@ import { useMemo, useState } from 'react';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import { MANAGE_TRAIN_SCHEDULE_TYPES } from 'applications/operationalStudies/consts';
 import type { Conflict, InfraState, TrainScheduleResult } from 'common/api/osrdEditoastApi';
 import ConflictsList from 'modules/conflict/components/ConflictsList';
 import { updateSelectedTrainId } from 'reducers/simulationResults';
+import { getTrainIdUsedForProjection } from 'reducers/simulationResults/selectors';
 import { useAppDispatch } from 'store';
 import { distributedIntervalsFromArrayOfValues } from 'utils/numbers';
 
@@ -48,6 +50,7 @@ const Timetable = ({
   const [conflictsListExpanded, setConflictsListExpanded] = useState(false);
   const [selectedTrainIds, setSelectedTrainIds] = useState<number[]>([]);
   const [showTrainDetails, setShowTrainDetails] = useState(false);
+  const trainIdUsedForProjection = useSelector(getTrainIdUsedForProjection);
   const dispatch = useAppDispatch();
 
   const trainsDurationsIntervals = useMemo(
@@ -143,6 +146,9 @@ const Timetable = ({
               upsertTrainSchedules={upsertTrainSchedules}
               setTrainIdToEdit={setTrainIdToEdit}
               removeTrains={removeAndUnselectTrains}
+              projectionPathIsUsed={
+                infraState === 'CACHED' && trainIdUsedForProjection === train.id
+              }
             />
           ))}
         <div
diff --git a/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx b/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
index ce49388f3f2..1f253ecc81a 100644
--- a/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
+++ b/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Checkbox } from '@osrd-project/ui-core';
-import { Duplicate, Pencil, Trash, Clock, Flame, Moon } from '@osrd-project/ui-icons';
+import { Duplicate, Pencil, Trash, Clock, Flame, Moon, Manchette } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import dayjs from 'dayjs';
 import { omit } from 'lodash';
@@ -31,6 +31,7 @@ type TimetableTrainCardProps = {
   upsertTrainSchedules: (trainSchedules: TrainScheduleResult[]) => void;
   setTrainIdToEdit: (trainIdToEdit?: number) => void;
   removeTrains: (trainIds: number[]) => void;
+  projectionPathIsUsed: boolean;
 };
 
 const TimetableTrainCard = ({
@@ -43,6 +44,7 @@ const TimetableTrainCard = ({
   upsertTrainSchedules,
   setTrainIdToEdit,
   removeTrains,
+  projectionPathIsUsed,
 }: TimetableTrainCardProps) => {
   const { t } = useTranslation(['operationalStudies/scenario']);
   const dispatch = useAppDispatch();
@@ -168,6 +170,11 @@ const TimetableTrainCard = ({
                 />
               </div>
               <div title={train.trainName} className="checkbox-label">
+                {projectionPathIsUsed && (
+                  <div className="train-projected">
+                    <Manchette iconColor="var(--white100)" />
+                  </div>
+                )}
                 {train.trainName}
               </div>
             </div>
diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
index 2df401c488a..82efe5ce89f 100644
--- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -332,6 +332,22 @@
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          display: flex;
+          align-items: center;
+          .train-projected {
+            height: 1.25rem;
+            width: 1.25rem;
+            margin-right: 0.375rem;
+            background-color: var(--info30);
+            border-radius: 0.25rem;
+            position: relative;
+            svg {
+              position: absolute;
+              top: 0;
+              left: 0;
+              transform: translate(0.125rem, 0.125rem);
+            }
+          }
         }
 
         .scenario-timetable-toolbar {