front: wip: create paced train item

  - create PacedTrainItem component

Co-authored-by: Math_R_ <mathieu.richard747@gmail.com>
Signed-off-by: Uriel-Sautron <uriel.sautron@gmail.com>

Author: Uriel-Sautron

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import { Checkbox } from '@osrd-project/ui-core';
+import { ChevronDown, Manchette } from '@osrd-project/ui-icons';
+import cx from 'classnames';
+
+import type { TrainScheduleWithDetails } from '../types';
+
+export type PacedTrain = TrainScheduleWithDetails & {
+  paced: {
+    duration: string;
+    step: string;
+  };
+};
+
+type PacedTrainItemProps = {
+  isInSelection: boolean;
+  handleSelectPacedTrain: (pacedTrainId: number) => void;
+  pacedTrain: PacedTrain;
+  isOnEdit: boolean;
+  isProjectionPathUsed: boolean;
+};
+
+const PacedTrainItem = ({
+  isInSelection,
+  handleSelectPacedTrain,
+  pacedTrain,
+  isOnEdit,
+  isProjectionPathUsed,
+}: PacedTrainItemProps) => {
+  const [isOpened, setIsOpened] = useState(false);
+
+  const toggle = () => setIsOpened((open) => !open);
+
+  return (
+    <div
+      data-testid="scenario-timetable-train"
+      className={cx('scenario-timetable-train paced-train', {
+        modified: isOnEdit,
+        'in-selection': isInSelection,
+        closed: !isOpened,
+        // invalid: train.invalidReason,
+      })}
+    >
+      <div className="base-info" onClick={toggle} role="button" tabIndex={0}>
+        <div className="checkbox-title">
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+          <div onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              label=""
+              checked={isInSelection}
+              onChange={() => handleSelectPacedTrain(pacedTrain.id)}
+              small
+            />
+          </div>
+          <div className="occurancies-count">1</div>
+          <ChevronDown className="toggle-icon" />
+        </div>
+        <div title={pacedTrain.trainName} className="checkbox-label">
+          <div className="train-info">
+            {isProjectionPathUsed && (
+              <div className="train-projected">
+                <Manchette iconColor="var(--white100)" />
+              </div>
+            )}
+            <span className="train-name">{pacedTrain.trainName}</span>
+          </div>
+        </div>
+      </div>
+      <div className="occurancies" />
+    </div>
+  );
+};
+
+export default PacedTrainItem;

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

@@ -17,6 +17,8 @@ import {
 } from 'reducers/simulationResults/selectors';
 import { useAppDispatch } from 'store';
 
+import fakePacedTrainData from './PacedTrain/fakeData.json';
+import PacedTrainItem, { type PacedTrain } from './PacedTrain/PacedTrainItem';
 import TimetableToolbar from './TimetableToolbar';
 import TimetableTrainCard from './TimetableTrainCard';
 import type { TrainScheduleWithDetails } from './types';
@@ -150,30 +152,45 @@ const Timetable = ({
           isInSelection={selectedTrainIds.length > 0}
         />
         <Virtualizer overscan={15}>
-          {displayedTrainSchedules.map((train: TrainScheduleWithDetails, index) => (
-            <div key={`timetable-train-card-${train.id}`}>
-              {showDepartureDates[index] && (
-                <div className="scenario-timetable-departure-date">
-                  {currentDepartureDates[index]}
-                </div>
-              )}
-              <TimetableTrainCard
-                isInSelection={selectedTrainIds.includes(train.id)}
-                handleSelectTrain={handleSelectTrain}
-                train={train}
-                isSelected={infraState === 'CACHED' && selectedTrainId === train.id}
-                isModified={train.id === trainIdToEdit}
-                setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                upsertTrainSchedules={upsertTrainSchedules}
-                setTrainIdToEdit={setTrainIdToEdit}
-                removeTrains={removeAndUnselectTrains}
-                projectionPathIsUsed={
-                  infraState === 'CACHED' && trainIdUsedForProjection === train.id
-                }
-                dtoImport={dtoImport}
-              />
-            </div>
-          ))}
+        {displayedTrainSchedules.map((train: TrainScheduleWithDetails, index) => (
+          <div key={`timetable-train-card-${train.id}`}>
+            {showDepartureDates[index] && (
+              <div className="scenario-timetable-departure-date">
+                {currentDepartureDates[index]}
+              </div>
+            )}
+            <TimetableTrainCard
+              isInSelection={selectedTrainIds.includes(train.id)}
+              handleSelectTrain={handleSelectTrain}
+              train={train}
+              isSelected={infraState === 'CACHED' && selectedTrainId === train.id}
+              isModified={train.id === trainIdToEdit}
+              setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+              upsertTrainSchedules={upsertTrainSchedules}
+              setTrainIdToEdit={setTrainIdToEdit}
+              removeTrains={removeAndUnselectTrains}
+              projectionPathIsUsed={
+                infraState === 'CACHED' && trainIdUsedForProjection === train.id
+              }
+              dtoImport={dtoImport}
+            />
+          </div>
+        ))}
+        <PacedTrainItem
+          pacedTrain={
+            {
+              ...fakePacedTrainData,
+              startTime: new Date(fakePacedTrainData.startTime),
+              arrivalTime: fakePacedTrainData.arrivalTime
+                ? new Date(fakePacedTrainData.arrivalTime)
+                : null,
+            } as PacedTrain
+          }
+          isInSelection={selectedTrainIds.includes(fakePacedTrainData.id)}
+          handleSelectPacedTrain={handleSelectTrain}
+          isOnEdit={false}
+          isProjectionPathUsed={false}
+        />
         </Virtualizer>
         <div
           className={cx('bottom-timetables-trains', {

front/src/styles/scss/_variables.scss

@@ -54,6 +54,7 @@ $colors: (
   'grey40': #94918e,
   'grey50': #797671,
   'grey60': #5c5955,
+  'grey70': #494641,
   'grey80': #312e2b,
   'grey90': #1f1b17,
   'info5': #e6f7ff,

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

@@ -341,7 +341,7 @@
         }
 
         .checkbox-label {
-          margin: 0 8px;
+          margin-right: 8px;
           font-size: 1rem;
           font-weight: 600;
           max-width: 160px;
@@ -473,6 +473,54 @@
           background-color: var(--ambiantB10);
           box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
 
+          &.paced-train {
+            display: flex;
+            align-items: center;
+
+            .custom-checkbox.small {
+              margin-bottom: 0;
+            }
+
+            .toggle-icon{
+              transition: all 0.3s;
+            }
+
+            .base-info{
+              height: 48px;
+    align-items: center;
+            }
+
+
+
+            .occurancies-count{
+              height: 20px;
+              border: 0.5px solid var(--grey90);
+              font-size: 14px;
+              padding: 3px 4px;
+              background-color: var(--grey70);
+              color: var(--white100);
+              font-weight: 600;
+              border-radius: 3px;
+              display: flex;
+              align-items: center;
+              align-self: center;
+              margin-right: 8px;
+            }
+            .occurancies{
+              width: 100%;
+              height: 20px;
+            }
+
+            &.closed {
+              .toggle-icon{
+                transform: rotate(-90deg);
+                transition: all 0.3s;
+              }
+              .occurancies{
+                height: 0;
+            }
+          }}
+
           .clickable-button {
             width: 100%;
             padding: 12px 0;

front/src/styles/scss/applications/stdcm/_home.scss

@@ -174,7 +174,7 @@
                 rgba(226, 226, 222, 1) 0%,
                 rgba(211, 209, 207, 1) 100%
               );
-              color: #494641;
+              color: var(--grey70);
               padding: 4px 12px 8px 12px;
               max-width: fit-content;
             }