front: stdcm: add available simulation div

OpenRailAssociation · Jul 18, 2024 · 8dea594 · 8dea594
1 parent 7dc8897
commit 8dea594
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 51 deletions.
diff --git a/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx b/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx
@@ -20,9 +20,14 @@ import StcdmResultsTable from './StdcmResultsTable';
 type StcdmResultsV2Props = {
   stdcmData: StdcmV2SuccessResponse;
   pathProperties?: ManageTrainSchedulePathProperties;
+  setInteractedResultsElements: (interactedResultsElements: boolean) => void;
 };
 
-const StcdmResults = ({ stdcmData, pathProperties }: StcdmResultsV2Props) => {
+const StcdmResults = ({
+  stdcmData,
+  pathProperties,
+  setInteractedResultsElements,
+}: StcdmResultsV2Props) => {
   const { t } = useTranslation('stdcm');
   const withoutTime = false;
   const date = dateTimeFormatting(stdcmData.creationDate, withoutTime, 'alternate');
@@ -63,9 +68,10 @@ const StcdmResults = ({ stdcmData, pathProperties }: StcdmResultsV2Props) => {
         <div className="results-and-sheet">
           <StcdmResultsTable
             stdcmData={stdcmData}
-            setIsSimulationSelected={setIsSimulationSelected}
-            isSimulationSelected={isSimulationSelected}
             operationalPointsList={operationalPointsList}
+            isSimulationSelected={isSimulationSelected}
+            setIsSimulationSelected={setIsSimulationSelected}
+            setInteractedResultsElements={setInteractedResultsElements}
           />
           {isSimulationSelected && (
             <div className="get-simulation">

diff --git a/front/src/applications/stdcmV2/components/StdcmResults/StdcmResultsTable.tsx b/front/src/applications/stdcmV2/components/StdcmResults/StdcmResultsTable.tsx
@@ -11,33 +11,37 @@ import { getStopDurationTime } from 'applications/stdcm/utils/formatSimulationRe
 
 type SimulationTableProps = {
   stdcmData: StdcmV2SuccessResponse;
-  setIsSimulationSelected: (simulationSelected: boolean) => void;
-  isSimulationSelected: boolean;
   operationalPointsList: StdcmResultsOperationalPointsList;
+  isSimulationSelected: boolean;
+  setIsSimulationSelected: (simulationSelected: boolean) => void;
+  setInteractedResultsElements: (interactedResultsElements: boolean) => void;
 };
 
 const StcdmResultsTable = ({
   stdcmData,
-  setIsSimulationSelected,
-  isSimulationSelected,
   operationalPointsList,
+  isSimulationSelected,
+  setIsSimulationSelected,
+  setInteractedResultsElements,
 }: SimulationTableProps) => {
   const { t } = useTranslation(['stdcm-simulation-report-sheet', 'stdcm']);
 
   const [showAllOP, setShowAllOP] = useState(false);
 
   const selectSimulation = () => {
     setIsSimulationSelected(true);
+    setInteractedResultsElements(true);
   };
 
-  useEffect(() => {
-    setIsSimulationSelected(false);
-  }, [stdcmData]);
-
   const handleShowAllClick = () => {
     setShowAllOP((prevState) => !prevState);
+    setInteractedResultsElements(true);
   };
 
+  useEffect(() => {
+    setIsSimulationSelected(false);
+  }, [stdcmData]);
+
   return (
     <div className="table-container">
       <table className="table-results">

diff --git a/front/src/applications/stdcmV2/views/StdcmViewV2.tsx b/front/src/applications/stdcmV2/views/StdcmViewV2.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import useStdcm from 'applications/stdcm/hooks/useStdcm';
@@ -11,6 +13,7 @@ import StdcmResults from '../components/StdcmResults';
 import type { StdcmSimulationResult } from '../types';
 
 const StdcmViewV2 = () => {
+  const { t } = useTranslation('stdcm');
   const { launchStdcmRequest, cancelStdcmRequest, isPending, stdcmV2Results, pathProperties } =
     useStdcm();
   const { getScenarioID } = useOsrdConfSelectors();
@@ -20,26 +23,45 @@ const StdcmViewV2 = () => {
     StdcmSimulationResult['input'] | undefined
   >(undefined);
 
+  const [interactedResultsElements, setInteractedResultsElements] = useState(false);
+
+  useEffect(() => {
+    setInteractedResultsElements(false);
+  }, [currentSimulationInputs]);
+
   return (
     <div className="stdcm-v2">
       <StdcmHeader />
-      {scenarioID && (
-        <StdcmConfig
-          currentSimulationInputs={currentSimulationInputs}
-          pathProperties={pathProperties}
-          isPending={isPending}
-          launchStdcmRequest={launchStdcmRequest}
-          cancelStdcmRequest={cancelStdcmRequest}
-          setCurrentSimulationInputs={setCurrentSimulationInputs}
-        />
-      )}
-      {stdcmV2Results?.stdcmResponse && !isPending && (
-        <StdcmResults
-          // TODO: Next step : use currentSimulationInputs instead of stdcmSimulationResults to handle multiples simulations results
-          stdcmData={stdcmV2Results?.stdcmResponse}
-          pathProperties={pathProperties}
-        />
-      )}
+      <div
+        className={cx('stdcm-container', {
+          'simulation-visible':
+            !isPending && !currentSimulationInputs && !interactedResultsElements,
+        })}
+      >
+        {scenarioID && (
+          <StdcmConfig
+            currentSimulationInputs={currentSimulationInputs}
+            pathProperties={pathProperties}
+            isPending={isPending}
+            launchStdcmRequest={launchStdcmRequest}
+            cancelStdcmRequest={cancelStdcmRequest}
+            setCurrentSimulationInputs={setCurrentSimulationInputs}
+          />
+        )}
+        {scenarioID && !isPending && !currentSimulationInputs && !interactedResultsElements && (
+          <div className="simulation-available">
+            <span>{t('simulation.available')}</span>
+          </div>
+        )}
+        {stdcmV2Results?.stdcmResponse && !isPending && (
+          <StdcmResults
+            // TODO: Next step : use currentSimulationInputs instead of stdcmSimulationResults to handle multiple simulation results
+            stdcmData={stdcmV2Results.stdcmResponse}
+            pathProperties={pathProperties}
+            setInteractedResultsElements={setInteractedResultsElements}
+          />
+        )}
+      </div>
     </div>
   );
 };

diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss
@@ -36,28 +36,6 @@
             font-weight: 500;
           }
         }
-        .simulation-availaible {
-          width: 34.125rem;
-          height: 5rem;
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          margin-top: 2.5rem;
-          border-radius: 0.5rem;
-          background-color: rgb(230, 247, 238);
-          box-shadow:
-            0px 0px 0px 4px rgba(255, 255, 255, 1) inset,
-            0px 0px 0px 5px rgb(60, 202, 128) inset,
-            0px 3px 7px -3px rgba(11, 114, 60, 0.4);
-
-          span {
-            color: rgb(11, 114, 60);
-            align-self: center;
-            padding-top: 1.438rem;
-            font-size: 1.5rem;
-            line-height: 2rem;
-          }
-        }
 
         .warning-box {
           border-radius: 0.5rem;
@@ -130,6 +108,40 @@
       height: calc(100vh - 64px);
     }
   }
+  .stdcm-container {
+    position: relative;
+  }
+
+  .simulation-available {
+    position: absolute;
+    z-index: 10;
+    height: 5rem;
+    width: 34.125rem;
+    display: flex;
+    flex-direction: column;
+    margin-top: -2.5rem;
+    margin-left: 21.125rem;
+    border-radius: 0.5rem;
+    background-color: rgb(230, 247, 238);
+    box-shadow:
+      0px 0px 0px 4px rgba(255, 255, 255, 1) inset,
+      0px 0px 0px 5px rgb(60, 202, 128) inset,
+      0px 3px 7px -3px rgba(11, 114, 60, 0.4);
+
+    span {
+      color: rgb(11, 114, 60);
+      align-self: center;
+      padding-top: 1.438rem;
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
+  }
+
+  .stdcm-container.simulation-visible > *:not(.simulation-available) {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
   .stdcm-v2-results {
     background-color: rgb(233, 239, 242);
     .simuation-banner {