Output CSV and implement packet logger

src/Core/RoveProtocol/Rovecomm.ts

@@ -12,12 +12,12 @@
 /* eslint-disable import/no-cycle */
 import { parseHeader, createHeader, TCPParseWrapper, VersionNumber } from './Rovecomm3';
 
 export let RovecommManifest: any = {};
 export let dataSizes: number[] = [];
 export let DataTypes: any = {};
 export let headerLength = 0;
 export let SystemPackets: any = {};
 export let NetworkDevices: any = {};
 let ethernetUDPPort = 11000;
 let ethernetTCPPort = 12000;
 const filepath = path.join(__dirname, '../assets/RovecommManifest.json');
@@ -46,7 +46,7 @@
 
 interface TCPSocket {
   RCSocket: netSocket;
   RCDeque: Deque<any>;
 }
 
 function decodePacket(dataType: number, dataCount: number, data: Buffer): number[] | string {
@@ -105,7 +105,7 @@
   return retArray;
 }
 
 export async function parse(packet: Buffer, rinfo?: any) {
   /*
    * Parse takes in a packet buffer and will call decodePacket and emit
    *  the rovecomm event with the proper dataId and that typed data
@@ -336,7 +336,7 @@
      * Listens on the class UDP socket, always calling parse if it recieves anything,
      * and properly binding the socket to a port
      */
     this.UDPSocket.on('message', async (msg: Buffer, rinfo: any) => {
       parse(msg, rinfo);
     });
     this.UDPSocket.bind(11000);
@@ -387,7 +387,7 @@
   }
 
   // While most "any" variable types have been removed, data really can be almost any type
   sendCommand(dataIdStr: string, dataIn: any, reliability = false): void {
     /*
      * Takes a dataIdString, data, and optional reliability (to determine)
      * UDP or TCP, properly types the data according to the type in the manifest
@@ -514,6 +514,15 @@
     } else {
       this.sendTCP(packet, destinationIp, port);
     }
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    rovecomm.emit('BasestationCommand', {
+      name: dataIdStr,
+      dataId,
+      time: new Date().toLocaleTimeString(),
+      dataType,
+      dataCount,
+      data,
+    });
   }
 
   async resubscribe() {

src/RON/RON.tsx

@@ -5,6 +5,7 @@ import PingGraph from './components/PingGraph';
 import PingTool from './components/PingTool';
 import PacketLogger from './components/PacketLogger';
 import PingMap from './components/PingMap';
+import SentPacketLogger from './components/SentPacketLogger';
 
 const row: CSS.Properties = {
   display: 'flex',
@@ -44,6 +45,7 @@ class RoverOverviewOfNetwork extends Component<IProps, IState> {
           <div style={column}>
             <PingMap devices={this.state.devices} />
             <PacketLogger />
+            <SentPacketLogger />
           </div>
           <div style={column}>
             <CustomPackets />

src/RON/components/PacketLogger.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import CSS from 'csstype';
 import ReactTable from 'react-table-v6';
+import fs from 'fs';
 // import "../../node_modules/react-table-v6/react-table.css"
 import { rovecomm, RovecommManifest } from '../../Core/RoveProtocol/Rovecomm';
 
@@ -42,6 +43,12 @@ const selector: CSS.Properties = {
   width: '200px',
 };
 
+const buttons: CSS.Properties = {
+  fontFamily: 'arial',
+  lineHeight: '20px',
+  fontSize: '16px',
+};
+
 interface IProps {
   style?: CSS.Properties;
 }
@@ -104,10 +111,29 @@ class PacketLogger extends Component<IProps, IState> {
     this.setState((prevState) => ({ data: [newData].concat(prevState.data) }));
   }
 
+  exportPacket(): void {
+    fs.writeFile(
+      'packetLog.csv',
+      this.state.data
+        .map((temp: any) => {
+          return `${temp.name}, ${temp.dataId}, ${temp.time}, ${temp.dataType}, ${temp.dataCount}, ${temp.data.join(
+            ' '
+          )}`;
+        })
+        .join('\n'),
+      (err) => {
+        if (err) console.log(err);
+        else {
+          console.log('File written successfully\n');
+        }
+      }
+    );
+  }
+
   render(): JSX.Element {
     return (
       <div style={{ ...this.props.style }}>
-        <div style={label}>Packet Logger</div>
+        <div style={label}>Received Packet Logger</div>
         <div style={container}>
           <div style={selectbox}>
             <div style={h1Style}>Board:</div>
@@ -131,6 +157,9 @@ class PacketLogger extends Component<IProps, IState> {
             showPageSizeOptions={false}
             style={{ textAlign: 'center', margin: 'auto' }}
           />
+          <button type="button" style={buttons} onClick={() => this.exportPacket()}>
+            Save Data
+          </button>
         </div>
       </div>
     );

src/RON/components/SentPacketLogger.tsx

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import CSS from 'csstype';
+import ReactTable from 'react-table-v6';
+import fs from 'fs';
+// import "../../node_modules/react-table-v6/react-table.css"
+import { rovecomm, RovecommManifest } from '../../Core/RoveProtocol/Rovecomm';
+
+const h1Style: CSS.Properties = {
+  fontFamily: 'arial',
+  fontSize: '18px',
+  margin: '5px 0px',
+};
+
+const container: CSS.Properties = {
+  display: 'flex',
+  flexDirection: 'column',
+  fontFamily: 'arial',
+  borderTopWidth: '28px',
+  borderColor: '#990000',
+  borderBottomWidth: '2px',
+  borderStyle: 'solid',
+  padding: '5px',
+  alignItems: 'center',
+  overflow: 'auto',
+};
+const label: CSS.Properties = {
+  marginTop: '-10px',
+  position: 'relative',
+  top: '24px',
+  left: '3px',
+  fontFamily: 'arial',
+  fontSize: '16px',
+  zIndex: 1,
+  color: 'white',
+};
+const selectbox: CSS.Properties = {
+  display: 'flex',
+  flexDirection: 'row',
+  width: '75%',
+  margin: '2.5px',
+  justifyContent: 'space-around',
+};
+const selector: CSS.Properties = {
+  width: '200px',
+};
+
+const buttons: CSS.Properties = {
+  fontFamily: 'arial',
+  lineHeight: '20px',
+  fontSize: '16px',
+};
+
+interface IProps {
+  style?: CSS.Properties;
+}
+
+interface IState {
+  data: any;
+  columns: any;
+}
+
+class SentPacketLogger extends Component<IProps, IState> {
+  static defaultProps = {
+    style: {},
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      data: [],
+      columns: [
+        { Header: 'Name', accessor: 'name', width: '100' },
+        { Header: 'Data Id', accessor: 'dataId', width: '75' },
+        { Header: 'Time', accessor: 'time', width: '100' },
+        { Header: 'Type', accessor: 'dataType', width: '50' },
+        { Header: 'Count', accessor: 'dataCount', width: '50' },
+        {
+          Header: 'Data',
+          accessor: 'data',
+          width: 'fill',
+          Cell: (data: any) => (
+            <div
+              style={{
+                overflow: 'none',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {data.value.join(', ')}
+            </div>
+          ),
+        },
+      ],
+    };
+    this.addData = this.addData.bind(this);
+    rovecomm.on('BasestationCommand', (data: any) => this.addData(data));
+  }
+
+  addData(newData: any): void {
+    this.setState((prevState) => ({ data: [newData].concat(prevState.data) }));
+  }
+
+  exportPacket(): void {
+    fs.writeFile(
+      'SentPacket.csv',
+      this.state.data
+        .map((temp: any) => {
+          return `${temp.name}, ${temp.dataId}, ${temp.time}, ${temp.dataType}, ${temp.dataCount}, ${temp.data.join(
+            ' '
+          )}`;
+        })
+        .join('\n'),
+      (err) => {
+        if (err) console.log(err);
+        else {
+          console.log('File written successfully\n');
+        }
+      }
+    );
+  }
+
+  render(): JSX.Element {
+    return (
+      <div style={{ ...this.props.style }}>
+        <div style={label}>Sent Packet Logger</div>
+        <div style={container}>
+          <ReactTable
+            className="-striped"
+            data={this.state.data}
+            columns={this.state.columns}
+            filterable
+            defaultPageSize={10}
+            resizable={false}
+            showPageSizeOptions={false}
+            style={{ textAlign: 'center', margin: 'auto' }} // <button type="button" style={buttons} onClick={() => this.receivePackets()}></button>
+          />
+          <button type="button" style={buttons} onClick={() => this.exportPacket()}>
+            Save Data
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SentPacketLogger;