klemie · klemie · Jun 10, 2024 · Jun 10, 2024 · Jun 10, 2024 · Jun 12, 2024
diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="./src/static/images/PlatformHubLogo.png" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+     crossorigin=""></script>
     <title>Ground Support</title>
   </head>
   <body>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -19,11 +19,14 @@
 		"concurrently": "^7.5.0",
 		"google-map-react": "^2.2.1",
 		"http": "^0.0.1-security",
+		"leaflet": "^1.9.4",
+		"leaflet.offline": "^3.0.0-rc.4",
 		"lodash": "^4.17.21",
 		"mui-datatables": "^4.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-hotkeys-hook": "^4.5.0",
+		"react-leaflet": "^4.2.1",
 		"react-material-file-upload": "^0.0.4",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-use": "^17.5.0",
@@ -61,6 +64,7 @@
 	"devDependencies": {
 		"@types/file-saver": "^2.0.5",
 		"@types/google-map-react": "^2.1.7",
+		"@types/leaflet": "^1.9.12",
 		"@types/lodash": "^4.14.191",
 		"@types/mui-datatables": "^4.3.5",
 		"@types/react-syntax-highlighter": "^15.5.7",

diff --git a/client/src/components/MissionConfig.tsx b/client/src/components/MissionConfig.tsx
@@ -119,7 +119,7 @@ const MissionConfig: React.FC<MissionConfigProps> = (props: MissionConfigProps)
                 Mission Configuration
             </DialogTitle>
             <DialogContent>
-                <Stack direction="column" spacing={3} alignItems="left">
+                <Stack direction="column" spacing={3} alignItems="left" paddingY={1}>
                     <Stack direction="row" spacing={2} alignItems="center">
                         <TextField
                             InputLabelProps={{

diff --git a/client/src/components/logging/TelemetryLog.tsx b/client/src/components/logging/TelemetryLog.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Button, InputAdornment, Stack, TextField, Tooltip } from "@mui/material";
+import { Button, Chip, InputAdornment, Paper, Stack, TextField, TextareaAutosize, Tooltip } from "@mui/material";
 import { Box } from "@mui/material";
 import { Download } from "@mui/icons-material";
 import GpsOffIcon from '@mui/icons-material/GpsOff';
@@ -8,79 +8,71 @@ import TimerIcon from '@mui/icons-material/Timer';
 import { IAprsTelemetryPacket, formatPacket } from "../../utils/TelemetryTypes";
 import { useActiveMission } from "../../utils/ActiveMissionContext";
 import { saveAs } from "file-saver";
+import { Packet, useSocketContext } from "../../utils/socket-context";
+import { useTheme } from "@emotion/react";
 
-interface TelemetryLogProps {
-    packet: any;
-    width: string;
-    maxRows: number;
-    telemetryConnected: boolean;
-}
-
-const TelemetryLog: React.FC<TelemetryLogProps> = (props: TelemetryLogProps) => {
-    const [locked, setLocked] = useState<boolean>(false);
+const TelemetryLog: React.FC = () => {
     const [timeSincePacket, setTimeSincePacket] = useState<number>(0);
-    const [telemetryConnected, setTelemetryConnected] = useState<boolean>(false);
-    const activeContext = useActiveMission();
+    const [logs, setLogs] = useState<string[]>([]);
+    const socketContext = useSocketContext();
+    const theme = useTheme();
 
     const exportLog = () => {
-        const blob = new Blob([JSON.stringify(activeContext.logs)], {type: "text/plain;charset=utf-8"});
+        const blob = new Blob([JSON.stringify(socketContext.logs)], {type: "text/plain;charset=utf-8"});
         saveAs(blob, "packet-log.txt");
     }
 
-    const [log, setLog] = useState<string[]>(activeContext.logs.map((log) => log.Log));
-
     useEffect(() => {
-        if (props.packet) {
-            setLog((prev) => [...prev, JSON.stringify(props.packet)]);
-            setTimeSincePacket(0);
-        }
-    }, [props.packet]);
+        formatLog();
+        setTimeSincePacket(0);
+    }, [socketContext.packet]);
 
     useEffect(() => {
-        setTelemetryConnected(props.telemetryConnected);
-        if (telemetryConnected) {
-            setTimeSincePacket(0);
+        const interval = setInterval(() => {
+            setTimeSincePacket((prev) => prev + 1);
+        }, 1000);
+        return () => {
+            clearInterval(interval);
         }
-    }, [props.telemetryConnected]);
+    }, [timeSincePacket]);
 
-    useEffect(() => {
-        if (telemetryConnected) {        
-            const interval = setInterval(() => {
-                setTimeSincePacket(timeSincePacket + 1);    
-            }, 1000);
-            return () => clearInterval(interval);
-        }
-    }, [timeSincePacket, telemetryConnected]);
+    const formatLog = () => {
+        const newLogs = socketContext.logs.map((packet: Packet) => {
+            if (socketContext.packet.id - packet.id < 2) {
+                return `[${new Date().toLocaleTimeString()}] Id:${packet.id} - Altitude: ${packet.data.altitude}`;
+            }
+            return undefined;
+        }).filter(log => log !== undefined);
+
+        setLogs([...logs, ...newLogs as string[]]);
+    };
 
     return (
-        <Box style={{
-                backgroundColor: "#282C34",
-                borderRadius: 5,
-                width: props.width
+        <Paper 
+            sx={{
+                borderRadius: 2,
+                width: '100%',
+                minWidth: 'fit-content',
+                height: 'fit-content'
             }}
-            boxShadow={3}
         >
-            <Stack direction={"column"}>
-                <TextField 
-                    value={log}
-                    variant={"standard"}
-                    multiline
-                    rows={props.maxRows}
+            <Stack direction={"column"} width={'100%'}>
+                <TextareaAutosize
                     style={{
-                        color: "#CA4D33",
-                        backgroundColor: "#282C34",
-                        borderRadius: 13,
-                        padding: "0px 0px 0px 20px"
-                    }}
-                    InputProps={{
-                        disableUnderline: true,
-                        readOnly: true,
-                        style: {
-                            color: "white",
-                        },
-                        multiline: true,
-                        rows: props.maxRows,
+                        border: "none",
+                        //@ts-ignore
+                        backgroundColor: theme.palette.background.default,
+                        color: "#ffffff",
+                        paddingTop: '20px',
+                        paddingLeft: '20px',
+                        maxWidth: `100%`,
+                        width: '99%',
                     }}
+                    minRows={50}
+                    maxRows={12}
+                    readOnly
+                    placeholder="Telemetry Log"
+                    value={logs.join('\n')}
                 />
                 <Stack direction={'row'} bottom={0}>
                     {[
@@ -92,25 +84,14 @@ const TelemetryLog: React.FC<TelemetryLogProps> = (props: TelemetryLogProps) =>
                 </Stack>
                 <Stack direction='row' padding={2} alignItems={'center'} justifyContent={'space-between'}>
                     <Stack direction='row' gap={2}>
-                        <Tooltip title="GPS lock">
-                            <Button 
-                                disabled
-                                variant={"contained"} 
-                                sx={{ color: 'grey' }}
-                            > {locked ? <GpsFixedIcon color="success"/> : <GpsOffIcon color="error"/>} </Button>
-
-                        </Tooltip>
-                        <Tooltip title="Time since last packet">
-                            <TextField
-                                size="small"
-                                InputProps={{
-                                    startAdornment: <InputAdornment position="start"><TimerIcon/></InputAdornment>,
-                                    endAdornment: <InputAdornment position="end">s</InputAdornment>,
-                                }}
-                                value={timeSincePacket}
-                                sx={{ width: 110 }}
-                            />
-                        </Tooltip>
+                        <Chip
+                            icon={<TimerIcon />}
+                            sx={{ 
+                                borderRadius: 2,
+                                fontWeight: 600 
+                            }}
+                            label={`Time since: ${timeSincePacket} s`}
+                        />
                     </Stack>
                     <Button 
                         variant={"contained"} 
@@ -122,7 +103,7 @@ const TelemetryLog: React.FC<TelemetryLogProps> = (props: TelemetryLogProps) =>
                     </Button>
                 </Stack>
             </Stack>
-        </Box>
+        </Paper>
     );
 }