Mission Data export dialog + json/txt supported

client/src/components/rocket-monitoring/ExportMissionDataDialog.tsx

@@ -0,0 +1,80 @@
+import { Download } from '@mui/icons-material';
+import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TextField, Tooltip } from '@mui/material';
+import { saveAs } from 'file-saver';
+import React, { useState } from 'react';
+
+interface IExportMissionDataDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    mission: any;
+}
+
+const ExportMissionDataDialog: React.FC<IExportMissionDataDialogProps> = (props: IExportMissionDataDialogProps) => {
+    const { isOpen, onClose, mission } = props;
+    const [extensionType, setExtensionType] = useState<any>();
+
+    const exportData = () => {
+        const blob = new Blob([JSON.stringify(mission.Data)], { type: extensionType.value });
+        saveAs(blob, `${mission.Name}-data.${extensionType.label}`);
+        console.log('Exporting mission data');
+    }
+
+    return (
+        <Dialog
+            open={isOpen}
+            onClose={() => onClose()}
+        >
+            <DialogTitle
+                sx={{fontWeight: 600 }}
+            >
+                Export Mission 
+            </DialogTitle>
+            <DialogContent>
+                <Stack direction='row' spacing={2} p={1}>
+                    <Autocomplete 
+                        options={[
+                            {
+                                label: 'json',
+                                value: 'application/json'
+                            },
+                            {
+                                label: 'txt',
+                                value: 'text/plain;charset=utf-8'
+                            }
+                        ]}
+                        fullWidth
+                        value={extensionType}
+                        onChange={(_, value) => setExtensionType(value)}
+                        getOptionLabel={(option) => option.label}
+                        renderInput={(params) => <TextField {...params} label='Extension Type' />}
+                    />
+                    <IconButton
+                        onClick={exportData}
+                        disabled={!extensionType}
+                    >
+                        <Download />
+                    </IconButton>
+                </Stack>
+
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant='text'
+                    onClick={() => onClose()}
+                >
+                    Cancel
+                </Button>
+
+                <Button
+                    variant='text'
+                    onClick={() => {}}
+                    disabled
+                >
+                    Go to Mission Replay
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default ExportMissionDataDialog;

client/src/views/tabs/rocket-missions-tab.tsx

@@ -7,6 +7,7 @@ import { Alert, Chip, Icon, IconButton, Snackbar, Stack, Typography } from '@mui
 import { CheckBox, CheckBoxOutlineBlank, ShowChart, Height, HorizontalRule, Edit, DateRange } from '@mui/icons-material';
 import MissionConfig from '../../components/MissionConfig';
 import { saveAs } from 'file-saver';
+import ExportMissionDataDialog from '../../components/rocket-monitoring/ExportMissionDataDialog';
 
 interface FormattedMissionData {
     _id?: string;
@@ -38,17 +39,14 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
     const [ selectedMissionId, setSelectedMissionId ] = useState<string | null>(null);
     const [missionEditDialog, setMissionEditDialog] = useState<boolean>(false);
     const [tableWarning, setTableWarning] = useState<boolean>(true);
-
+    const [exportMissionDataDialog, setExportMissionDataDialog] = useState<boolean>(false);
+    const [selectedMission, setSelectedMission] = useState<FormattedMissionData | null>(null)
     const viewProviderContext = useViewProvider();
     const activeMissionContext = useActiveMission();
 
     const exportMissionData = (mission: FormattedMissionData) => {
-        if (!mission.Data) {
-            return;
-        }
-        if (mission.Published) {
-            const blob = new Blob([JSON.stringify(mission.Data)], { type: 'application/json' });
-            saveAs(blob, `${mission.Name}-data.json`);
+        if (mission.Data && mission.Published) {
+            setExportMissionDataDialog(true);
         }
     }
 
@@ -86,6 +84,7 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
             if (cellMeta.colIndex === 0) {
                 return;
             }
+            setSelectedMission(missions[cellMeta.dataIndex])
             activeMissionContext.updateMission(rocket.Missions[cellMeta.dataIndex]);
             activeMissionContext.updateRocket(rocket);
             if (rocket.Missions[cellMeta.dataIndex].Published) {
@@ -175,10 +174,11 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
                 sort: true,
                 viewColumns: true,
                 customBodyRender(value) {
+                    console.log(value);
                     return (
                         <Chip
-                            label={value === "true" ? "Test" : "Mission"}
-                            color={value === "true" ? "warning" : "primary"}
+                            label={value ? "Test" : "Mission"}
+                            color={value ? "warning" : "primary"}
                             sx={{
                                 borderRadius: 2,
                             }}
@@ -276,6 +276,11 @@ const RocketDetailsTab: React.FC<Props> = (props: Props) => {
                 onClose={() => setMissionEditDialog(false)}
                 onSave={() => {}}
             />
+            <ExportMissionDataDialog 
+                isOpen={exportMissionDataDialog}
+                onClose={() => setExportMissionDataDialog(false)}
+                mission={selectedMission as FormattedMissionData}
+            />
         </>
     );
 };