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(' ');
+};