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 5d9f413 commit 2d17bc2
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 86 deletions.
86 changes: 56 additions & 30 deletions front/src/applications/stdcmV2/components/StdcmTableResults.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
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';
import type { SimulationReportSheetProps, StdcmV2SuccessResponse } from 'applications/stdcm/types';
import { getOperationalPointsWithTimes } from 'applications/stdcm/utils';
import type { RollingStockWithLiveries } from 'common/api/osrdEditoastApi';
import { size } from 'lodash';

type SimulationTableProps = {
stdcmData: StdcmV2SuccessResponse;
Expand All @@ -28,48 +30,72 @@ 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>
<tr>
<th aria-label="line-count" />
<th>{t('operationalPoint')}</th>
<th>{t('code')}</th>
<th>{t('endStop')}</th>
<th>{t('passageStop')}</th>
<th>{t('startStop')}</th>
<th>{t('weight')}</th>
<th>{t('refEngine')}</th>
</tr>
<th aria-label="line-count" />
<th>{t('operationalPoint')}</th>
<th>{t('code')}</th>
<th>{t('endStop')}</th>
<th>{t('passageStop')}</th>
<th>{t('startStop')}</th>
<th>{t('weight')}</th>
<th>{t('refEngine')}</th>
</thead>
<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 ? '=' : `${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
93 changes: 37 additions & 56 deletions front/src/styles/scss/applications/stdcmV2/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,78 +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);
padding-top: 0.313rem;
padding-bottom: 0.313rem;
}
tbody tr:nth-child(odd) {
background-color: rgb(239, 243, 245); /* Couleur de fond pour les lignes impaires */
}

tbody tr:nth-child(even) {
background-color: rgb(246, 248, 249); /* Couleur de fond pour les lignes paires */
}
.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 2d17bc2

Please sign in to comment.