diff --git a/front/src/applications/stdcmV2/components/StdcmTableResults.tsx b/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
index 047b5a21e0f..c4a33e74f17 100644
--- a/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Button } from '@osrd-project/ui-core';
import { useTranslation } from 'react-i18next';
import type { ManageTrainSchedulePathProperties } from 'applications/operationalStudies/types';
@@ -18,8 +19,7 @@ const StcdmTableResults = ({
pathProperties,
rollingStockData,
}: SimulationTableProps) => {
- const { t } = useTranslation('stdcm');
- let renderedIndex = 0;
+ const { t } = useTranslation('stdcm-simulation-report-sheet');
const simulationReport: SimulationReportSheetProps = {
stdcmData,
@@ -29,10 +29,16 @@ const StcdmTableResults = ({
const opList = getOperationalPointsWithTimes(simulationReport);
+ const [showAllPR, setShowAllPR] = useState(false);
+
+ const handleShowAllClick = () => {
+ setShowAllPR((prevState) => !prevState);
+ };
+
return (
-
+
|
{t('operationalPoint')} |
{t('code')} |
@@ -42,34 +48,53 @@ const StcdmTableResults = ({
{t('weight')} |
{t('refEngine')} |
-
+
{opList.map((step, index) => {
const isFirstStep = index === 0;
const isLastStep = index === opList.length - 1;
const prevStep = opList[index - 1];
- return (
-
- {index + 1} |
-
- {' '}
- {!isFirstStep && !isLastStep && step.name === prevStep.name
- ? '='
- : step.name || 'Unknown'}
- |
- {step.ch} |
- {isLastStep ? step.time : ''} |
- {isFirstStep || isLastStep ? '' : step.time} |
- {isFirstStep ? step.departureTime : ''} |
- {isFirstStep || isLastStep ? t('serviceStop') : ''} |
-
- {!isFirstStep ? '=' : `${Math.floor(rollingStockData.mass / 1000)} t`}
- |
- {!isFirstStep ? '=' : rollingStockData.metadata?.reference} |
-
- );
+ const shouldRenderRow = isFirstStep || /* step.stop > '0' || */ isLastStep;
+ if (showAllPR || shouldRenderRow) {
+ return (
+
+ {index + 1} |
+
+ {!isFirstStep && !isLastStep && step.name === prevStep.name
+ ? '='
+ : step.name || 'Unknown'}
+ |
+ {step.ch} |
+ {isLastStep ? step.time : ''} |
+ {isFirstStep || isLastStep ? '' : step.time} |
+ {isFirstStep ? step.departureTime : ''} |
+
+ {!isFirstStep && !isLastStep
+ ? '='
+ : `${Math.floor(rollingStockData.mass / 1000)} t`}
+ |
+
+ {' '}
+ {!isFirstStep && !isLastStep ? '=' : rollingStockData.metadata?.reference}
+ |
+
+ );
+ }
+ return null;
})}
+
);
};
diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss
index 2cfc206e4c2..67276f336bb 100644
--- a/front/src/styles/scss/applications/stdcmV2/_home.scss
+++ b/front/src/styles/scss/applications/stdcmV2/_home.scss
@@ -63,69 +63,59 @@
.simuation-results {
display: flex;
justify-content: space-between;
+
.table-container {
margin-top: 2.125rem;
margin-left: 2rem;
width: 50.25rem;
- border-radius: 0.375rem;
}
.table-results {
- border: none;
- }
- .thead {
- font-size: 0.875rem;
- font-weight: 400;
- color: rgb(121, 118, 113);
+ border-radius: 0.375rem;
background-color: rgba(0, 0, 0, 0.05);
}
- .index {
+ th {
+ height: 2rem;
+ font-size: 0.875rem;
+ font-weight: 400;
+ text-transform: capitalize;
+ color: rgb(121, 118, 113);
+ padding-top: 0.313rem;
+ padding-bottom: 0.313rem;
+ }
+ tbody tr:nth-child(odd) {
+ background-color: rgb(239, 243, 245);
+ }
+ tbody tr:nth-child(even) {
+ background-color: rgb(246, 248, 249);
+ }
+ td {
+ height: 2rem;
font-size: 0.875;
font-weight: 400;
- color: rgb(121, 118, 113);
- line-height: 1.25rem;
- padding-left: 1.938rem;
- };
- .op {
- font-size: 0.875rem;
- font-weight: 400;
- color: rgb(49, 46, 43);
- line-height: 1.25rem;
- padding-left: 1.438rem;
- }
- .ch {
- font-size: 0.875rem;
- font-weight: 400;
color: rgb(49, 46, 43);
line-height: 1.25rem;
- padding-left: 1.438rem;
}
- .start {
- font-size: 16;
- font-weight: 400;
- color: #000000;
- letter-spacing: -0.2;
- }
- .td {
+ .stop {
font-size: 14;
- padding: 6;
- }
- .weight {
- font-size: 0.875rem;
- font-weight: 400;
- color: rgb(49, 46, 43);
+ font-weight: 600;
+ color: rgb(0, 0, 0);
line-height: 1.25rem;
- padding-left: 1.438rem;
}
- .ref-engine {
- font-size: 0.875rem;
- font-weight: 400;
- color: rgb(49, 46, 43);
- line-height: 1.25rem;
- padding-left: 1.438rem;
- }
- .tbody {
- height: 40;
- border-top: 1.6 solid #D3D1CF;
+ .display-all {
+ height: 6.5rem;
+ background-color: rgba(0, 0, 0, 0.05);
+ display: flex;
+ justify-content: space-between;
+ border-bottom-left-radius: 0.375rem;
+ border-bottom-right-radius: 0.375rem;
+ .button-display-all-PR {
+ padding-top: 2rem;
+ padding-left: 2.25rem;
+ }
+ .button-get-simulation {
+ padding-top: 2rem;
+ padding-right: 2.25rem;
+ }
}
}
.map-results {