Skip to content

Commit 1d4e49d

Browse files
RandyT97RandyT97
authored
Merge pull request #12 from ucfcs/feature/front-end-overhaul
Feature/front end overhaul
2 parents 040645f + 0cd9d75 commit 1d4e49d

23 files changed

Lines changed: 445 additions & 302 deletions

‎duct-drone-app/.babelrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"]
2+
"presets": ["@babel/preset-env", "@babel/preset-react"],
3+
"plugins": [
4+
"@babel/plugin-proposal-class-properties"
5+
]
36
}

‎duct-drone-app/.eslintrc.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es6: true,
5+
},
6+
extends: [
7+
'airbnb',
8+
],
9+
globals: {
10+
Atomics: 'readonly',
11+
SharedArrayBuffer: 'readonly',
12+
},
13+
parserOptions: {
14+
ecmaFeatures: {
15+
jsx: true,
16+
},
17+
ecmaVersion: 2018,
18+
sourceType: 'module',
19+
},
20+
plugins: [
21+
'react',
22+
],
23+
rules: {
24+
},
25+
};

‎duct-drone-app/launch.sh‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/bash
2+
# Install all required node modules as specified in package.json
3+
npm install
4+
# Compile front end react files
5+
npm run build
6+
#launch node server @ localhost:5000
7+
node ./server/index.js

‎duct-drone-app/package.json‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,49 @@
1-
{
2-
"name": "duct-drone-app",
3-
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
6-
"scripts": {
7-
"start": "webpack-dev-server --mode development --open",
8-
"build": "webpack --mode production"
9-
},
10-
"proxy": "http://localhost:5000",
11-
"author": "",
12-
"license": "ISC",
13-
"devDependencies": {
14-
"@babel/core": "^7.4.0",
15-
"@babel/preset-env": "^7.4.2",
16-
"@babel/preset-react": "^7.0.0",
17-
"babel-loader": "^8.0.5",
18-
"css-loader": "^2.1.1",
19-
"eslint": "^6.1.0",
20-
"eslint-config-amex": "^10.1.0",
21-
"html-webpack-plugin": "^3.2.0",
22-
"style-loader": "^0.23.1",
23-
"webpack": "^4.29.6",
24-
"webpack-cli": "^3.3.0",
25-
"webpack-dev-server": "^3.2.1"
26-
},
27-
"dependencies": {
28-
"express": "^4.16.4",
29-
"mongodb": "^3.2.2",
30-
"mongoose": "^5.4.22",
31-
"path": "^0.12.7",
32-
"prop-types": "^15.7.2",
33-
"react": "^16.8.5",
34-
"react-bootstrap": "^1.0.0-beta.6",
35-
"react-bootstrap-table-next": "^3.1.0",
36-
"react-dom": "^16.8.5",
37-
"react-joystick-component": "^1.4.0",
38-
"react-nipple": "^1.0.1",
39-
"react-router-dom": "^5.0.0"
40-
}
41-
}
1+
{
2+
"name": "duct-drone-app",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --open",
8+
"build": "webpack --mode production"
9+
},
10+
"proxy": "http://localhost:5000",
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"@babel/core": "^7.4.0",
15+
"@babel/plugin-proposal-class-properties": "^7.5.5",
16+
"@babel/preset-env": "^7.4.2",
17+
"@babel/preset-react": "^7.0.0",
18+
"babel-loader": "^8.0.5",
19+
"css-loader": "^2.1.1",
20+
"eslint": "^6.1.0",
21+
"eslint-config-airbnb": "^18.0.0",
22+
"eslint-config-amex": "^10.1.0",
23+
"eslint-plugin-import": "^2.18.2",
24+
"eslint-plugin-jsx-a11y": "^6.2.3",
25+
"eslint-plugin-react": "^7.14.3",
26+
"eslint-plugin-react-hooks": "^1.7.0",
27+
"html-webpack-plugin": "^3.2.0",
28+
"style-loader": "^0.23.1",
29+
"webpack": "^4.29.6",
30+
"webpack-cli": "^3.3.0",
31+
"webpack-dev-server": "^3.2.1"
32+
},
33+
"dependencies": {
34+
"express": "^4.16.4",
35+
"mongodb": "^3.2.2",
36+
"mongoose": "^5.4.22",
37+
"path": "^0.12.7",
38+
"prop-types": "^15.7.2",
39+
"react": "^16.8.5",
40+
"react-bootstrap": "^1.0.0-beta.11",
41+
"react-bootstrap-table-next": "^3.1.8",
42+
"react-dom": "^16.8.5",
43+
"react-joystick-component": "^1.4.0",
44+
"react-nipple": "^1.0.1",
45+
"react-router-bootstrap": "^0.25.0",
46+
"react-router-dom": "^5.0.0",
47+
"react-table": "^6.10.0"
48+
}
49+
}

‎duct-drone-app/src/App.css‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
.container {
2-
position: relative;
3-
}
4-
.Sidebar {
5-
margin-top:150px;
6-
margin-left: -40px;
7-
margin-right: -50px;
8-
}
9-
#feed {
10-
11-
border-width: 2px;
12-
height:70%;
13-
width:100%;
14-
margin-top: 10px;
15-
border-style: solid;
16-
color:#007bff;
17-
border-radius: 20px;
18-
}
19-
.BottomGrid {
20-
bottom: 0;
1+
.container {
2+
position: relative;
3+
height: 100%;
4+
width: 100%;
5+
}
6+
.Sidebar {
7+
margin-top:150px;
8+
}
9+
#action-bar{
10+
height: 30%;
11+
}
12+
#feed {
13+
display: block;
14+
border-width: 2px;
15+
height:500px;
16+
width:100%;
17+
margin-top: 10px;
18+
border-style: solid;
19+
color:#007bff;
20+
border-radius: 10px;
21+
}
22+
.BottomGrid {
23+
bottom: 0;
24+
}
25+
.swap-area {
26+
width: 100%;
27+
height: 300px;
28+
text-align: center;
2129
}

‎duct-drone-app/src/App.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎duct-drone-app/src/App.jsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React, { Component } from 'react';
2+
import Container from 'react-bootstrap/Container';
3+
import Row from 'react-bootstrap/Row';
4+
import Col from 'react-bootstrap/Col';
5+
import {
6+
BrowserRouter as Router, Redirect, Route, Link, Switch, IndexRedirect,
7+
} from 'react-router-dom';
8+
import {
9+
Navbar,
10+
} from 'react-bootstrap';
11+
import Navigation from './Navigation';
12+
import DataTable from './DataTable';
13+
import Control from './Control';
14+
import Login from './Login';
15+
import Sidebar from './Sidebar';
16+
import './App.css';
17+
18+
/* eslint-disable react/prefer-stateless-function */
19+
class App extends Component {
20+
render() {
21+
const currentDataCols = [
22+
{
23+
Header: 'Temperature',
24+
accessor: 'currentTemp',
25+
},
26+
{
27+
Header: 'Air Velocity',
28+
accessor: 'currentAirVelocity',
29+
},
30+
];
31+
const currentData = [{
32+
id: 23,
33+
currentTemp: '90 F',
34+
currentAirVelocity: '30 m/s',
35+
}];
36+
const logCols = [
37+
{
38+
Header: 'Date',
39+
accessor: 'date',
40+
},
41+
{
42+
Header: 'Time',
43+
accessor: 'time',
44+
},
45+
{
46+
Header: 'Temperature',
47+
accessor: 'logTemp',
48+
},
49+
{
50+
Header: 'Air Velocity',
51+
accessor: 'airVelocity',
52+
},
53+
{
54+
Header: 'Location',
55+
accessor: 'location',
56+
},
57+
{
58+
Header: 'Battery',
59+
accessor: 'batteryLevel',
60+
},
61+
62+
];
63+
const logData = [
64+
{
65+
id: 3535,
66+
date: '8/13/19',
67+
time: '3:00 PM',
68+
logTemp: '93 F',
69+
airVelocity: '30 m/s',
70+
location: '90 N 35 E',
71+
batteryLevel: '30%',
72+
},
73+
{
74+
id: 3535,
75+
date: '8/13/19',
76+
time: '3:00 PM',
77+
logTemp: '93 F',
78+
airVelocity: '30 m/s',
79+
location: '90 N 35 E',
80+
batteryLevel: '30%',
81+
},
82+
{
83+
id: 3535,
84+
date: '8/13/19',
85+
time: '3:00 PM',
86+
logTemp: '93 F',
87+
airVelocity: '30 m/s',
88+
location: '90 N 35 E',
89+
batteryLevel: '30%',
90+
},
91+
];
92+
return (
93+
<Router>
94+
<Container>
95+
<Row style={{ height: '100%', width: '100%', border: 'black' }}>
96+
<Col><div className="Sidebar"><Sidebar /></div></Col>
97+
<Col xs={9}>
98+
<div id="feed" />
99+
<div id="action-bar">
100+
<Switch>
101+
<Route path="/" exact component={Control} />
102+
<Route path="/data/" component={() => <DataTable columns={currentDataCols} data={currentData} />} />
103+
<Route path="/logs/" component={() => <DataTable columns={logCols} data={logData} />} />
104+
</Switch>
105+
<Navigation />
106+
</div>
107+
108+
</Col>
109+
<Col />
110+
</Row>
111+
112+
</Container>
113+
</Router>
114+
);
115+
}
116+
}
117+
export default App;

‎duct-drone-app/src/Control.css‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
.ReactNipple {
2-
width: 100%;
3-
height: 25%;
4-
position: 'relative';
5-
}
6-
@media only screen and (max-device-width : 812px) {
7-
.ReactNipple {
8-
9-
}
10-
1+
#analog-wrapper{
2+
position: relative;
3+
padding-top: 25%;
4+
padding-bottom: 25%;
115
}

0 commit comments

Comments
 (0)