diff --git a/front/public/locales/en/translation.json b/front/public/locales/en/translation.json index 39c61c280a5..715490c34a8 100644 --- a/front/public/locales/en/translation.json +++ b/front/public/locales/en/translation.json @@ -50,6 +50,12 @@ "title": "Failed to save modifications", "text": "Failed to publish your modifications" } + }, + "units": { + "day": "d", + "hour": "h", + "km": "km", + "minute": "min" } }, "Editor": { diff --git a/front/public/locales/fr/translation.json b/front/public/locales/fr/translation.json index 427bb29ece0..0770b2df419 100644 --- a/front/public/locales/fr/translation.json +++ b/front/public/locales/fr/translation.json @@ -50,6 +50,12 @@ "title": "Echec de l'enregistrement des modifications", "text": "Vos modifications n'ont pas été publiées" } + }, + "units": { + "day": "j", + "hour": "h", + "km": "km", + "minute": "min" } }, "Editor": { diff --git a/front/src/applications/stdcm/components/StdcmResults/StdcmSimulationNavigator.tsx b/front/src/applications/stdcm/components/StdcmResults/StdcmSimulationNavigator.tsx index c9b6d6ed9eb..d4c3c6c9bd6 100644 --- a/front/src/applications/stdcm/components/StdcmResults/StdcmSimulationNavigator.tsx +++ b/front/src/applications/stdcm/components/StdcmResults/StdcmSimulationNavigator.tsx @@ -4,8 +4,9 @@ import { useTranslation } from 'react-i18next'; import useHorizontalScroll from 'applications/stdcm/hooks/useHorizontalScroll'; import type { StdcmSimulation } from 'applications/stdcm/types'; -import { hasConflicts } from 'applications/stdcm/utils/simulationOutputUtils'; -import { formatDateToString } from 'utils/date'; +import { hasConflicts, hasResults } from 'applications/stdcm/utils/simulationOutputUtils'; +import { formatDateToString, formatTimeDifference } from 'utils/date'; +import { mmToKm } from 'utils/physics'; export const SIMULATION_ITEM_CLASSNAME = 'simulation-item'; const ITEM_TO_SHOW_COUNT_ON_SCROLL = 3; @@ -27,7 +28,7 @@ const StdcmSimulationNavigator = ({ isCalculationFailed, onSelectSimulation, }: StdcmSimulationNavigatorProps) => { - const { t } = useTranslation('stdcm', { keyPrefix: 'simulation.results' }); + const { t } = useTranslation(); const { scrollableRef, showLeftBtn, showRightBtn, scrollLeft, scrollRight } = useHorizontalScroll( SIMULATION_ITEM_CLASSNAME, @@ -53,40 +54,64 @@ const StdcmSimulationNavigator = ({ )}
- {simulationsList?.map(({ id, creationDate, outputs }, index) => ( -
onSelectSimulation(index)} - > -
-
- {outputs && !hasConflicts(outputs) - ? t('simulationName.withOutputs', { id }) - : t('simulationName.withoutOutputs')} + {simulationsList?.map(({ id, creationDate, outputs }, index) => { + let formatedTotalLength = ''; + let formatedTripDuration = ''; + + if (hasResults(outputs)) { + const { results } = outputs; + const lastPointTime = results.simulation.final_output.times.at(-1)!; + const departureTimeInMs = new Date(results.departure_time).getTime(); + + formatedTotalLength = `${Math.round(mmToKm(results.path.length))} ${t('common.units.km', { ns: 'translation' })} `; + formatedTripDuration = formatTimeDifference( + departureTimeInMs, + lastPointTime + departureTimeInMs + ); + } + + return ( +
onSelectSimulation(index)} + > +
+ + {outputs && !hasConflicts(outputs) + ? t('simulation.results.simulationName.withOutputs', { + id, + ns: 'stdcm', + }) + : t('simulation.results.simulationName.withoutOutputs', { + ns: 'stdcm', + })} + + {retainedSimulationIndex === index && ( + + )}
- {retainedSimulationIndex === index && ( - - +
+ + {t('simulation.results.formatCreationDate', { + ...formatDateToString(creationDate, true), + ns: 'stdcm', + })} + {`${formatedTotalLength}— ${formatedTripDuration}`} +
+ {selectedSimulationIndex === index && ( +
)}
-
- - {t('formatCreationDate', formatDateToString(creationDate, true))} - -
- {selectedSimulationIndex === index && ( -
- )} -
- ))} + ); + })}
{showRightBtn && (
date.toLocaleString().substring( export const isEqualDate = (searchDate: Date, startDate: Date) => formatLocaleDate(searchDate) === formatLocaleDate(startDate); + +/** + * @param start timestamp or Date object + * @param end timestamp or Date object + * @returns string "Xj Yh Zmin" + */ +export const formatTimeDifference = (_start: number | Date, _end: number | Date): string => { + const start = dayjs(_start); + const end = dayjs(_end); + + const diffInDays = end.diff(start, 'day'); + const diffInHours = end.diff(start, 'hour') % 24; + const diffInMinutes = end.diff(start, 'minute') % 60; + + const parts = []; + if (diffInDays > 0) parts.push(`${diffInDays}${i18next.t('common.units.day')}`); + if (diffInHours > 0) parts.push(`${diffInHours}${i18next.t('common.units.hour')}`); + if (diffInMinutes > 0) parts.push(`${diffInMinutes}${i18next.t('common.units.minute')}`); + + return parts.join(' '); +};