Merge pull request #16 from ucfcs/feature/dynamic-table

Feature/dynamic table

Author: RandyT97

duct-drone-app/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "mongodb": "^3.2.2",
     "mongoose": "^5.4.22",

duct-drone-app/server/index.js

@@ -2,6 +2,7 @@ const express = require('express');
 const path = require('path');
 const mongoose = require('mongoose');
 const bodyParser = require('body-parser');
+const cors = require('cors');
 const entryRoute = require('./routes/entry');
 const mapRoute = require('./routes/map');
 
@@ -13,7 +14,8 @@ const port = process.env.PORT || 5000;
 
 const bodyParserJSON = bodyParser.json();
 const bodyParserURLEncoded = bodyParser.urlencoded({ extended: true });
-// respond with "hello world" when a GET request is made to the homepage
+
+app.use(cors());
 app.use(express.static(path.join(__dirname, '../build')));
 
 // create a GET route

duct-drone-app/src/App.jsx

@@ -19,90 +19,103 @@ import './App.css';
 class App extends Component {
   constructor(props){
     super(props);
-    this.escFunction = this.escFunction.bind(this);
+    this.state = {
+      logData: [],
+    };
+    this.keyRecord = this.keyRecord.bind(this);
   }
-  escFunction = (event) => {
-    console.log(event.key);
+  keyRecord = (event) => {
+    // console.log(event.key);
   }
   componentDidMount(){
-    document.addEventListener("keydown", this.escFunction, false);
+    document.addEventListener("keydown", this.keyRecord, false);
+    fetch('http://localhost:5000/api/get/maps',
+    {
+      method: 'GET',
+    })
+    .then(response => response.json())
+    .then(data => {
+      this.setState({logData: data});
+    });
   }
   componentWillUnmount(){
-    document.removeEventListener("keydown", this.escFunction, false);
+    document.removeEventListener("keydown", this.keyRecord, false);
   }
   render() {
-    const currentDataCols = [
-      {
-        Header: 'Temperature',
-        accessor: 'currentTemp',
-      },
-      {
-        Header: 'Air Velocity',
-        accessor: 'currentAirVelocity',
-      },
-    ];
-    const currentData = [{
-      id: 23,
-      currentTemp: '90 F',
-      currentAirVelocity: '30 m/s',
-    }];
+    Number.prototype.pad = function(size) {
+      var s = String(this);
+      while (s.length < (size || 2)) {s = "0" + s;}
+      return s;
+    }
+    const { logData } = this.state;
     const logCols = [
-      {
-        Header: 'Date',
-        accessor: 'date',
-      },
       {
         Header: 'Time',
         accessor: 'time',
+        Cell: row=> {
+          const date = new Date(row.row.time);
+          return(
+            <div>
+              <span>{date.getHours().pad(2)}:{date.getMinutes().pad(2)}</span>
+            </div>
+          );
+          
+        }
       },
       {
         Header: 'Temperature',
-        accessor: 'logTemp',
+        accessor: 'temperature.$numberDecimal',
       },
       {
         Header: 'Air Velocity',
-        accessor: 'airVelocity',
+        accessor: 'air_velocity.$numberDecimal',
       },
       {
-        Header: 'Location',
-        accessor: 'location',
+        Header: 'X',
+        accessor: 'coordinateX',
+        Cell: row => {
+          return(
+            <div>
+              <span>{row.row._original.coordinates.x}</span>
+            </div>
+          );
+        }
       },
-      {
-        Header: 'Battery',
-        accessor: 'batteryLevel',
-      },
-
+        {
+          Header: 'Y',
+          accessor: 'coordinateY',
+          Cell: row => {
+            return(
+              <div>
+                <span>{row.row._original.coordinates.y}</span>
+              </div>
+            );
+          },
+        },
+          {
+            Header: 'Z',
+            accessor: 'coordinateZ',
+            Cell: row => {
+              return(
+                <div>
+                  <span>{row.row._original.coordinates.z}</span>
+                </div>
+              );
+            }
+          }
     ];
-    const logData = [
-      {
-        id: 3535,
-        date: '8/13/19',
-        time: '3:00 PM',
-        logTemp: '93 F',
-        airVelocity: '30 m/s',
-        location: '90 N 35 E',
-        batteryLevel: '30%',
-      },
+    const currentCols = [
       {
-        id: 3535,
-        date: '8/13/19',
-        time: '3:00 PM',
-        logTemp: '93 F',
-        airVelocity: '30 m/s',
-        location: '90 N 35 E',
-        batteryLevel: '30%',
+        Header: 'Temperature',
+        accessor: 'temperature',
       },
       {
-        id: 3535,
-        date: '8/13/19',
-        time: '3:00 PM',
-        logTemp: '93 F',
-        airVelocity: '30 m/s',
-        location: '90 N 35 E',
-        batteryLevel: '30%',
-      },
-    ];
+        Header: 'Air Velocity',
+        accessor: 'air_velocity',
+      }
+    ]
     return (
+      
       <div onKeyPress={(e) => console.log(e.key)}>
         <Router>
           <Container>
@@ -112,9 +125,13 @@ class App extends Component {
                 <div id="feed" />
                 <div id="action-bar">
                   <Switch>
-                    <Route path="/" exact component={Control} />
-                    <Route path="/data/" component={() => <DataTable columns={currentDataCols} data={currentData} />} />
-                    <Route path="/logs/" component={() => <DataTable columns={logCols} data={logData} />} />
+                  <Route path="/" exact component={Control} />
+                  <Route path="/logs/" render={() => 
+                      <DataTable columns={logCols} data={logData.length != 0 ? logData[0].sensorData : [] } pageSize={15} />
+                    } />
+                  <Route path="/data/" render={() => 
+                    <DataTable columns={logCols} data={[]}/>
+                  } />
                   </Switch>
                   <Navigation />
                 </div>

duct-drone-app/src/DataTable.jsx

@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
 import './DataTable.css';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 
 /* eslint-disable react/prefer-stateless-function */
 class DataTable extends Component {
   render() {
-    const { data, columns } = this.props;
+    const { data, columns, pageSize } = this.props;
     return (
       <ReactTable
         className="-striped"
         data={data}
         columns={columns}
-        defaultPageSize={15}
+        defaultPageSize={pageSize}
         showPaginationBottom={false}
         showPageSizeOptions={false}
         style={{