front: create stdcm simulation sheet

front/package.json

@@ -72,6 +72,7 @@
     "js-file-download": "^0.4.12",
     "js-sha256": "^0.11.0",
     "json-schema": "^0.4.0",
+    "jspdf": "^2.5.1",
     "jwt-decode": "^4.0.0",
     "license-checker-rseidelsohn": "~4.3.0",
     "localforage": "^1.10.0",

front/public/locales/fr/stdcm-simulation-sheet.json

@@ -0,0 +1,19 @@
+{    
+    "applicationDate": "Date d'application",
+    "code":"CH",
+    "conventionalSign":"signe conv.",
+    "crossedATE":"ATE croisé",
+    "endStop":"arrivée",
+    "operationalPoint":"jalon",
+    "passageStop":"passage",
+    "referenceEngine":"engin de réf.",
+    "referencePath": "Sillon de référence",
+    "simulation": "Simulation",
+    "startStop":"départ",
+    "stdcm":"ST DCM",
+    "stdcmCreation": "Création de sillon de dernière minute",
+    "stdcmSimulationSheet": "Fiche Simulation",
+    "track":"Voie",
+    "warningMessage": "Cette fiche a été générée par un outil de simulation. Elle ne dispense pas l’horairiste des vérifications inhérentes au tracé de SDM.",
+    "weight":"tonnage"
+  }

front/public/locales/fr/stdcm.json

@@ -8,5 +8,6 @@
   "stdcmError": "Erreur de calcul Sillon de dernière minute",
   "stdcmErrorNoPaths": "Incompatibilité avec d'autres sillons.",
   "stdcmNoResults": "Aucun sillon trouvé",
-  "stdcmResults": "Résultats"
+  "stdcmResults": "Résultats",
+  "stdcmSimulationSheet": "Fiche Simulation"
 }

front/src/applications/stdcm/components/SimulationSheet.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { Alert } from '@osrd-project/ui-icons';
+import { useTranslation } from 'react-i18next';
+
+import logoSNCF from 'assets/pictures/misc/sncf.svg';
+import type { ReportTrain } from 'common/api/osrdEditoastApi';
+import type { Regime } from 'reducers/osrdsimulation/types';
+import { formatKmValue } from 'utils/strings';
+
+interface Props {
+  base_data: ReportTrain | Regime | undefined;
+}
+
+const SimulationSheet: React.FC<Props> = ({ base_data }) => {
+  const { t } = useTranslation('stdcm-simulation-sheet');
+
+  function getStopTime(sec: number) {
+    const timeplus = new Date(sec * 1000);
+    const hours = timeplus.getUTCHours().toString().padStart(2, '0');
+    const minutes = timeplus.getUTCMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  }
+
+  return (
+    <div className="simualtion_sheet">
+      <div className="alert-banner">
+        <div className="alert-icon">
+          <Alert variant="fill" />
+        </div>
+        <div className="simulation ml-3">{t('simulation')}</div>
+        <div className="message pl-3">{t('warningMessage')}</div>
+      </div>
+      <div className="number-date-banner">
+        <div className="stdcm">
+          <div className="title">{t('stdcm')}</div>
+          <div className="creation">{t('stdcmCreation')}</div>
+        </div>
+        <div className="numeric-info">
+          <div className="number ml-2 pt-2">n°243-024-004</div>
+          <div className="creation-date ml-2">le 14/03/2024 à 10:04</div>
+        </div>
+        {/* <img src={logoSNCF} alt="SNCF LOGO" className="sncf-logo" /> */}
+      </div>
+      <div className="rc-information">
+        <div>
+          <div className="rc-name">Super Fret</div>
+          <div className="person">Stéphanie Martin-Duclotte</div>
+        </div>
+        <div>
+          <div className="phone-number">04 12 34 56 78</div>
+          <div className="mail">stephanie.martin-duclotte@superfret.fr</div>
+        </div>
+        <div className="stdcm-application">
+          <div className="application-date">{t('applicationDate')}</div>
+          <div className="date mb-3">vendredi 15 mars 2024</div>
+          <div className="reference-path">{t('referencePath')}</div>
+          <div className="path-number">n°123456</div>
+        </div>
+      </div>
+      <div className="simulation m-3">
+        <div className="simulation_uppercase">{t('simulation')}</div>
+        <div className="simulation_length">
+          {base_data?.head_positions && base_data.head_positions.length > 0 && (
+            <>
+              {formatKmValue(
+                base_data.head_positions[base_data.head_positions.length - 1][
+                  base_data.head_positions[base_data.head_positions.length - 1].length - 1
+                ].position / 1000
+              )}
+            </>
+          )}
+        </div>
+      </div>
+      <div className="table-container ml-3 mr-3 pr-3 pb-3">
+        <table className="ml-2">
+          <thead>
+            <tr>
+              <th aria-label="line-count" />
+              <th>{t('operationalPoint')}</th>
+              <th>{t('code')}</th>
+              <th>{t('track')}</th>
+              <th>{t('endStop')}</th>
+              <th>{t('passageStop')}</th>
+              <th>{t('startStop')}</th>
+              <th>{t('weight')}</th>
+              <th>{t('referenceEngine')}</th>
+              <th>{t('conventionalSign')}</th>
+              <th>{t('crossedATE')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {base_data?.stops.map((stop, index) => (
+              <tr key={index}>
+                <td className="index-column">{index + 1}</td>
+                <td>
+                  {index === 0 ||
+                  stop.name !== base_data.stops[index - 1].name ||
+                  index === base_data.stops.length - 1
+                    ? stop.name || 'Unknown'
+                    : '='}
+                </td>
+                <td className="ch-column">{stop.ch}</td>
+                <td>{stop.track_name}</td>
+                <td className="stop-column">
+                  {index === base_data.stops.length - 1 ? getStopTime(stop.time) : ''}
+                </td>
+                <td className="stop-column">
+                  {index !== 0 && index !== base_data.stops.length - 1
+                    ? getStopTime(stop.time)
+                    : ''}
+                </td>
+                <td className="stop-column">{index === 0 ? getStopTime(stop.time) : ''}</td>
+                <td aria-label="weight" />
+                <td aria-label="referenceEngine" />
+                <td aria-label="conventionalSign" />
+                <td aria-label="crossedATE" />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className="horizontal-bar ml-3 mt-3" />
+      </div>
+    </div>
+  );
+};
+
+export default SimulationSheet;

front/src/applications/stdcm/views/OSRDStdcmResults.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import { ChevronDown, ChevronUp } from '@osrd-project/ui-icons';
+import jsPDF from 'jspdf';
 import { useTranslation } from 'react-i18next';
 
 import type { SimulationReport } from 'common/api/osrdEditoastApi';
@@ -9,6 +10,16 @@ import { useStoreDataForSpaceTimeChart } from 'modules/simulationResult/componen
 import SpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChart';
 import type { AllowancesSettings } from 'reducers/osrdsimulation/types';
 
+import {
+  ibmPlexSansRegular,
+  ibmPlexMonoBold,
+  ibmPlexSansBold,
+  ibmPlexMonoRegular,
+  ibmPlexSansSemiBold,
+  ibmPlexSansMedium,
+} from './font';
+import SimulationSheet from '../components/SimulationSheet';
+
 const OSRDStcdmResults = () => {
   const { t } = useTranslation(['translation', 'stdcm']);
 
@@ -47,6 +58,49 @@ const OSRDStcdmResults = () => {
     [simulation.trains]
   );
 
+  const reportTemplateRef = useRef(null);
+
+  const handleGeneratePdf = () => {
+    if (!reportTemplateRef.current) {
+      return;
+    }
+    // eslint-disable-next-line new-cap
+    const document = new jsPDF({
+      format: 'a1',
+      unit: 'px',
+    });
+
+    document.addFileToVFS('IBMPlexSans-Regular.ttf', ibmPlexSansRegular);
+    document.addFileToVFS('IBMPlexSans-Medium.ttf', ibmPlexSansMedium);
+    document.addFileToVFS('IBMPlexSans-SemiBold.ttf', ibmPlexSansSemiBold);
+    document.addFileToVFS('IBMPlexSans-Bold.ttf', ibmPlexSansBold);
+
+    document.addFileToVFS('IBMPlexMono-Regular.ttf', ibmPlexMonoRegular);
+    document.addFileToVFS('IBMPlexMono-Bold.ttf', ibmPlexMonoBold);
+
+    document.addFont('IBMPlexSans-Regular.ttf', 'IBM Plex Sans', 'normal');
+    document.addFont('IBMPlexMono-Medium.ttf', 'IBM Plex Sans Medium', 'normal');
+    document.addFont('IBMPlexSans-SemiBold.ttf', 'IBM Plex Sans Semi Bold', 'normal');
+    document.addFont('IBMPlexSans-Bold.ttf', 'IBM Plex Sans', 'bold');
+
+    document.addFont('IBMPlexMono-Regular.ttf', 'IBM Plex Mono', 'normal');
+    document.addFont('IBMPlexMono-Bold.ttf', 'IBM Plex Mono', 'bold');
+
+    document.setFont('IBM Plex Sans', 'normal');
+    document.setFont('IBM Plex Sans Medium', 'normal');
+    document.setFont('IBM Plex Sans Semi Bold', 'normal');
+    document.setFont('IBM Plex Sans', 'bold');
+
+    document.setFont('IBM Plex Mono', 'normal');
+    document.setFont('IBM Plex Mono', 'bold');
+
+    document.html(reportTemplateRef.current, {
+      async callback(doc) {
+        await doc.save('STDCM-2403-024-003');
+      },
+    });
+  };
+
   return (
     <main className="osrd-config-mastcontainer" style={{ height: '115vh' }}>
       <div className="osrd-simulation-container mb-2 simulation-results">
@@ -93,6 +147,16 @@ const OSRDStcdmResults = () => {
             )}
           </div>
         </div>
+        <div>
+          <button className="btn btn-sm btn-primary" type="button" onClick={handleGeneratePdf}>
+            {t('stdcm:stdcmSimulationSheet')}
+          </button>
+          <div style={{ position: 'absolute', left: '-9999px', top: '-9999px' }}>
+            <div ref={reportTemplateRef}>
+              <SimulationSheet base_data={selectedTrain?.base} />
+            </div>
+          </div>
+        </div>
       </div>
     </main>
   );