Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akctarus
Akctarus committed Jun 21, 2024
1 parent 81a179f commit 906b058
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 72 deletions.
75 changes: 50 additions & 25 deletions front/src/applications/stdcmV2/components/StdcmTableResults.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -29,10 +29,16 @@ const StcdmTableResults = ({

const opList = getOperationalPointsWithTimes(simulationReport);

const [showAllPR, setShowAllPR] = useState(false);

const handleShowAllClick = () => {
setShowAllPR((prevState) => !prevState);
};

return (
<div className="table-container">
<table className="table-results">
<thead className="thead">
<thead>
<th aria-label="line-count" />
<th>{t('operationalPoint')}</th>
<th>{t('code')}</th>
Expand All @@ -42,34 +48,53 @@ const StcdmTableResults = ({
<th>{t('weight')}</th>
<th>{t('refEngine')}</th>
</thead>
<tbody>
<tbody className="table-results">
{opList.map((step, index) => {
const isFirstStep = index === 0;
const isLastStep = index === opList.length - 1;
const prevStep = opList[index - 1];
return (
<tr key={index} className="tbody">
<td className="index">{index + 1}</td>
<td className="op">
{' '}
{!isFirstStep && !isLastStep && step.name === prevStep.name
? '='
: step.name || 'Unknown'}
</td>
<td className="ch">{step.ch}</td>
<td className="td">{isLastStep ? step.time : ''}</td>
<td className="">{isFirstStep || isLastStep ? '' : step.time}</td>
<td className="start">{isFirstStep ? step.departureTime : ''}</td>
<td className="td">{isFirstStep || isLastStep ? t('serviceStop') : ''}</td>
<td className="td">
{!isFirstStep ? '=' : `${Math.floor(rollingStockData.mass / 1000)} t`}
</td>
<td className="td"> {!isFirstStep ? '=' : rollingStockData.metadata?.reference}</td>
</tr>
);
const shouldRenderRow = isFirstStep || /* step.stop > '0' || */ isLastStep;
if (showAllPR || shouldRenderRow) {
return (
<tr key={index}>
<td>{index + 1}</td>
<td>
{!isFirstStep && !isLastStep && step.name === prevStep.name
? '='
: step.name || 'Unknown'}
</td>
<td>{step.ch}</td>
<td className="stop">{isLastStep ? step.time : ''}</td>
<td className="stop">{isFirstStep || isLastStep ? '' : step.time}</td>
<td className="stop">{isFirstStep ? step.departureTime : ''}</td>
<td>
{!isFirstStep && !isLastStep
? '='
: `${Math.floor(rollingStockData.mass / 1000)} t`}
</td>
<td>
{' '}
{!isFirstStep && !isLastStep ? '=' : rollingStockData.metadata?.reference}
</td>
</tr>
);
}
return null;
})}
</tbody>
</table>
<div className="display-all">
<div className="button-display-all-PR">
<Button
variant="Normal"
label={showAllPR ? 'Afficher les jalons principaux' : 'Afficher tous les jalons'}
onClick={handleShowAllClick}
/>
</div>
<div className="button-get-simulation">
<Button label="Retenir cette simulation" />
</div>
</div>
</div>
);
};
Expand Down
84 changes: 37 additions & 47 deletions front/src/styles/scss/applications/stdcmV2/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 906b058

Please sign in to comment.