Merge pull request #9 from ucfcs/Frontend

Frontend

Author: RandyT97

duct-drone-app/dist/index.html

@@ -1,10 +1,17 @@
 .container {
 	position: relative;
 } 
+.Sidebar {
+	margin-top:150px;
+	margin-left: -40px;
+	margin-right: -50px;
+}
 #feed {
+
 	border-width: 2px;
 	height:70%;
 	width:100%;
+	margin-top: 10px;
 	border-style: solid;
 	color:#007bff;
     border-radius: 20px;

duct-drone-app/dist/main.js

@@ -6,34 +6,35 @@ import Control from './Control';
 import Login from './Login';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
+import Sidebar from './Sidebar';
+import { BrowserRouter as Router, Redirect, Route, Link, Switch, IndexRedirect} from "react-router-dom";
 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
 import './App.css';
 
 
 class App extends Component {
 	render() {
-		const InApp = () => 
-				<Container>
+		return(
+			<Router>
+					<Container>
 					<Row>
-						<Col><div id="feed"></div></Col>
+						<Col><div className="Sidebar"><Sidebar/></div></Col>
+						<Col xs={10}><div id="feed"></div></Col>
+						<Col></Col>
 					</Row>
 			        <Row>
-			          <Col>
+			          <Col></Col>
+			          <Col xs={10}>
 			          	<Switch>
 				          	<Route path="/app/control/" exact component={Control}/>
-							<Route path="/app/data/" component={DataTable}/>
-						</Switch>
-					  </Col>
+										<Route path="/app/data/" component={DataTable}/>
+										<Route path="/app/logs/" component={DataTable}/>
+									</Switch>
+					  		</Col>
+					  		<Col></Col>
 			        </Row>
 					<Navigation/>
 				</Container>
-		return(
-			<Router>
-				<Switch>
-					<Route path="/app/" component={InApp}/>
-					<Route path="/" component={Login}/>
-				</Switch>
 			</Router>
 		);
 	}

duct-drone-app/src/App.css

@@ -5,6 +5,7 @@
 }
 @media only screen and (max-device-width : 812px) {
 	.ReactNipple {
+
 	}
 
 }

duct-drone-app/src/App.js

@@ -17,7 +17,7 @@ class Control extends React.Component {
                 <ReactNipple
                     // supports all nipplejs options
                     // see https://github.com/yoannmoinet/nipplejs#options
-                    options={{ size: 200, mode: 'static',color: 'blue', position: { top: '50%', left: '50%' } }}
+                    options={{ size: 150, mode: 'static',color: 'blue', position: { top: '50%', left: '50%' } }}
                     // any unknown props will be passed to the container element, e.g. 'title', 'style' etc
                     // all events supported by nipplejs are available as callbacks
                     // see https://github.com/yoannmoinet/nipplejs#start

duct-drone-app/src/Control.css

@@ -6,5 +6,5 @@
 }
 .table {
 	position: relative;
-	height:25%;
+	height:22.5%;
 }

duct-drone-app/src/Control.js

@@ -2,10 +2,13 @@ import React, { Component } from 'react';
 import Table from 'react-bootstrap/Table';
 import './DataTable.css'
 class DataTable extends React.Component {
+	// constructor(props) {
+
+	// }
 	render() {
 		var isActive = false;
 		return (
-			<Table responsive bordered="true"  striped bordered size="md">
+			<Table responsive bordered="true"  striped bordered size="sm">
 			  <thead>
 			    <tr>
 			      <th>#</th>

duct-drone-app/src/DataTable.css

@@ -16,7 +16,7 @@ class Navigation extends React.Component {
             <Link to="/app/data/">Data</Link>
         </Nav.Item> 
         <Nav.Item>
-          Logs
+            <Link to="/app/logs/">Logs</Link>
         </Nav.Item>
         <Nav.Item>
           View Map

duct-drone-app/src/DataTable.js

@@ -0,0 +1,3 @@
+.button {
+	
+}