diff --git a/src/App.css b/src/App.css index 97a59363958f9df934fbdadde5d50273cb6c7da7..fd24e69dbf2683ee3d49839bca0b8ebe0fed78f5 100644 --- a/src/App.css +++ b/src/App.css @@ -7,6 +7,8 @@ body, html{ padding:0; } +/* Layout: App -> html -> body -> main container -> row -> graph column & data column*/ + .App-main-container { background-color: white; min-height: 70vh; diff --git a/src/App.js b/src/App.js index cc8e9103c32dbee9e1db273ca85e77828eb3cee4..00e7d2537249f29466fb6ea0ade4805a917e7637 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,10 @@ import Controller3 from './pages/controller3'; import Controller4 from './pages/controller4'; import Controller5 from './pages/controller5'; import Controller6 from './pages/controller6'; - +/** + * Entry point for the dashboard page, handles all six routes to controllers + * + */ function App() { return ( diff --git a/src/components/Navbar/NavbarElements.js b/src/components/Navbar/NavbarElements.js index e1b6be14b1df0b962c9cef75f091e03d2480b805..9869eda2aea277b60a374aedabe36cfdbdc4a69e 100644 --- a/src/components/Navbar/NavbarElements.js +++ b/src/components/Navbar/NavbarElements.js @@ -1,7 +1,11 @@ import { FaBars } from "react-icons/fa"; import { NavLink as Link } from "react-router-dom"; import styled from "styled-components"; - + +/** + * This file contians imported styling for the imported navbar component present on each controller page + */ + export const Nav = styled.nav` background: #214184; height: 100px; diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index a68138d10c5969f2c6c795e9edf701d2d9bd0832..5e262ed4b33826f6023036fa6c9258e2b3239e88 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,7 +1,11 @@ import React from "react"; import { Nav, NavLink, NavMenu } from "./NavbarElements"; - + +/** + * Imported navbar element that contains routes to each of the six controllers + * + */ const Navbar = () => { return ( <> diff --git a/src/index.js b/src/index.js index 47081a6772137337feb267206dc8c7ab445f2414..284c6caadd53fbf3dfd344b0037d38f7c17e44bd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; - + +/** + * Default index for App.js + */ ReactDOM.render( <React.StrictMode> <App /> diff --git a/src/pages/controller1.js b/src/pages/controller1.js index 56c8cb5a97a9bf4c23411606d3fb625985b88b37..61f5376091fa1eb4efcfdc89f9e71cdee1462155 100644 --- a/src/pages/controller1.js +++ b/src/pages/controller1.js @@ -3,6 +3,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ { Temp: 240, @@ -27,6 +28,10 @@ const data = [ }, ]; +/** + * React and HTML for main container for this controller + * Styled by App.css + */ const controller1 = () => { return ( <html> diff --git a/src/pages/controller2.js b/src/pages/controller2.js index 2fae98682160f8d66e22ec11a136ab7312aac633..a54484c30300f4a670fb5b1893519456ff732b39 100644 --- a/src/pages/controller2.js +++ b/src/pages/controller2.js @@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ - { - Temp: 240, - }, - { - Temp: 139, - }, - { - Temp: 980, - }, - { - Temp: 390, - }, - { - Temp: 480, - }, - { - Temp: 380, - }, - { - Temp: 322, - }, + { + Temp: 240, + }, + { + Temp: 139, + }, + { + Temp: 980, + }, + { + Temp: 390, + }, + { + Temp: 480, + }, + { + Temp: 380, + }, + { + Temp: 322, + }, ]; +/** +* React and HTML for main container for this controller +* Styled by App.css +*/ const controller2 = () => { return ( <html> diff --git a/src/pages/controller3.js b/src/pages/controller3.js index a43bc62dfbb8e675c3cfa502b272fc67a8725581..ee6de73013d058e3675eb229878f2359e8c8aab3 100644 --- a/src/pages/controller3.js +++ b/src/pages/controller3.js @@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ - { - Temp: 240, - }, - { - Temp: 139, - }, - { - Temp: 980, - }, - { - Temp: 390, - }, - { - Temp: 480, - }, - { - Temp: 380, - }, - { - Temp: 322, - }, + { + Temp: 240, + }, + { + Temp: 139, + }, + { + Temp: 980, + }, + { + Temp: 390, + }, + { + Temp: 480, + }, + { + Temp: 380, + }, + { + Temp: 322, + }, ]; +/** +* React and HTML for main container for this controller +* Styled by App.css +*/ const controller3 = () => { return ( <html> diff --git a/src/pages/controller4.js b/src/pages/controller4.js index 1482cd8a59d06cc38e7d2f5678c2ae5ccc73dd06..b1700696d713a5a7715cb4ad8d12086680979fc8 100644 --- a/src/pages/controller4.js +++ b/src/pages/controller4.js @@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ - { - Temp: 240, - }, - { - Temp: 139, - }, - { - Temp: 980, - }, - { - Temp: 390, - }, - { - Temp: 480, - }, - { - Temp: 380, - }, - { - Temp: 322, - }, + { + Temp: 240, + }, + { + Temp: 139, + }, + { + Temp: 980, + }, + { + Temp: 390, + }, + { + Temp: 480, + }, + { + Temp: 380, + }, + { + Temp: 322, + }, ]; +/** +* React and HTML for main container for this controller +* Styled by App.css +*/ const controller4 = () => { return ( <html> diff --git a/src/pages/controller5.js b/src/pages/controller5.js index afd5abc576f72e71005aee4d09d102296ca9574f..ecee776a6ff6d087bbf60ed59c3cae85ced4a4a5 100644 --- a/src/pages/controller5.js +++ b/src/pages/controller5.js @@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ - { - Temp: 240, - }, - { - Temp: 139, - }, - { - Temp: 980, - }, - { - Temp: 390, - }, - { - Temp: 480, - }, - { - Temp: 380, - }, - { - Temp: 322, - }, + { + Temp: 240, + }, + { + Temp: 139, + }, + { + Temp: 980, + }, + { + Temp: 390, + }, + { + Temp: 480, + }, + { + Temp: 380, + }, + { + Temp: 322, + }, ]; +/** +* React and HTML for main container for this controller +* Styled by App.css +*/ const controller5 = () => { return ( <html> diff --git a/src/pages/controller6.js b/src/pages/controller6.js index 5b195ec11f54dedce99212f98fe755ffc66b2d4e..ee3198998f45fac4eae145c54caf0c5e1b5630de 100644 --- a/src/pages/controller6.js +++ b/src/pages/controller6.js @@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi import ssec from '../config/ssec-logo.png'; import '../App.css'; +// Static data for testing, use msgpack and create vars here const data = [ - { - Temp: 240, - }, - { - Temp: 139, - }, - { - Temp: 980, - }, - { - Temp: 390, - }, - { - Temp: 480, - }, - { - Temp: 380, - }, - { - Temp: 322, - }, + { + Temp: 240, + }, + { + Temp: 139, + }, + { + Temp: 980, + }, + { + Temp: 390, + }, + { + Temp: 480, + }, + { + Temp: 380, + }, + { + Temp: 322, + }, ]; +/** +* React and HTML for main container for this controller +* Styled by App.css +*/ const controller6 = () => { return ( <html>