front: add download button for exporting selected train schedules in …

…json format
OpenRailAssociation · Jun 20, 2024 · 7475cfc · 7475cfc
1 parent 2ec9d63
commit 7475cfc
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/front/src/modules/trainschedule/components/TimetableV2/TimetableToolbar.tsx b/front/src/modules/trainschedule/components/TimetableV2/TimetableToolbar.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 
-import { Filter, Trash } from '@osrd-project/ui-icons';
+import { Filter, Trash, Download } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +58,8 @@ const TimetableToolbar = ({
   const [validityFilter, setValidityFilter] = useState<ValidityFilter>('both');
   const [selectedTags, setSelectedTags] = useState<Set<string | null>>(new Set());
 
+  const [getV2TrainSchedule] = osrdEditoastApi.endpoints.getV2TrainSchedule.useLazyQuery();
+
   const debouncedFilter = useDebounce(filter, 500);
   const debouncedRollingstockFilter = useDebounce(rollingStockFilter, 500);
 
@@ -114,6 +116,31 @@ const TimetableToolbar = ({
       });
   };
 
+  const exportSchedules = async (selectedTrainIdsFromClick: number[]) => {
+    const trainScheduleResults = await getV2TrainSchedule({ ids: selectedTrainIdsFromClick })
+      .unwrap()
+      .then((results) =>
+        results.map((result) => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { id, ...trainSchedule } = result;
+          return trainSchedule;
+        })
+      )
+      .catch((e) => {
+        dispatch(setFailure(castErrorToFailure(e)));
+      });
+
+    if (!trainScheduleResults) return;
+
+    const jsonString = JSON.stringify({ trainScheduleResults });
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'train_schedules.json';
+    a.click();
+  };
+
   return (
     <>
       <div className="scenario-timetable-toolbar justify-content-between">
@@ -143,6 +170,15 @@ const TimetableToolbar = ({
               >
                 <Trash />
               </button>
+              <button
+                aria-label={t('timetable.deleteSelection')}
+                disabled={!selectedTrainIds.length}
+                className={cx('mx-2 multiselect-download', { disabled: !selectedTrainIds.length })}
+                type="button"
+                onClick={() => exportSchedules(selectedTrainIds)}
+              >
+                <Download />
+              </button>
             </>
           )}
         </div>

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -160,6 +160,10 @@
           background-color: rgba(var(--secondary-rgb), 0.5);
         }
       }
+      .multiselect-download {
+        @extend .multiselect-delete;
+        background-color: var(--primary);
+      }
       .scenario-timetable-toolbar {
         display: flex;
         align-items: center;