created app skeleton

webserver/src/App.css

@@ -1,38 +1,3 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+    /* height: 100%; */
+}

webserver/src/App.js

@@ -1,23 +1,36 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import Navigation from "./components/Navigation/Navigation";
+import { DbProvider } from "./DbContext";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+} from "react-router-dom";
+import "./App.css";
+// const Cushion = require('cushiondb-client');
+
+//Pages
+import NotFoundPage from "./Pages/NotFoundPage";
+import DashboardPage from "./Pages/DashboardPage/DashboardPage";
+import InputPage from "./Pages/InputPage";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <DbProvider>
+        <Router>
+          <Navigation />
+          <Routes>
+            <Route path="/" element={<DashboardPage />} />
+            <Route path="/Dashboard" element={<DashboardPage />} />
+            <Route path="/Input" element={<InputPage />} />
+            <Route path="/404" element={<NotFoundPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </Router>
+      </DbProvider>
     </div>
   );
 }

webserver/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

webserver/src/DbContext.js

@@ -0,0 +1,55 @@
+import PouchDB from "pouchdb";
+import React, { useContext, useState } from "react";
+
+const LocalDbContext = React.createContext();
+const RemoteDbContext = React.createContext();
+
+export function useLocalDb() {
+  return useContext(LocalDbContext);
+}
+
+export function useRemoteDb() {
+  return useContext(RemoteDbContext);
+}
+
+export function DbProvider({ children }) {
+  const [localdb, setLocaldb] = useState(new PouchDB("testdata"));
+  //used in development server
+  const [remotedb, setRemotedb] = useState(
+    new PouchDB(window.location.hostname + ":5984/testdata", {
+      skip_setup: true,
+      auth: {
+        username: "scouting",
+        password: "Ridgebotics",
+      },
+    })
+  );
+  console.log(remotedb);
+  // const [remotedb, setRemotedb] = useState(new PouchDB(window.location.protocol + "//" + window.location.hostname + ":5984/kcmt2021", {skip_setup: true}))
+
+  //Login to the Remote Database
+  // remotedb.logIn('2021', 'Ridgebotics').then(function () {
+  //     console.log("CouchDb Login Successful!");
+  // }).catch(function (err) {
+  //     console.log("Unable to login to CouchDb!");
+  //     console.log(err);
+  // });
+
+  localdb
+    .sync(remotedb, {
+      live: true,
+      retry: true,
+    })
+    .on("change", function (change) {})
+    .on("paused", function (info) {})
+    .on("active", function (info) {})
+    .on("error", function (err) {});
+
+  return (
+    <LocalDbContext.Provider value={localdb}>
+      <RemoteDbContext.Provider value={remotedb}>
+        {children}
+      </RemoteDbContext.Provider>
+    </LocalDbContext.Provider>
+  );
+}

webserver/src/Pages/DashboardPage/DashboardPage.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { useLocalDb } from "../../DbContext";
+import { Bar, Chart } from "react-chartjs-2";
+
+const DashboardPage = () => {
+  const localdb = useLocalDb();
+  let processed_data = {};
+  localdb
+    .allDocs({
+      include_docs: true,
+    })
+    .then((result) => {
+      console.log(result);
+      result.rows.forEach((dbentry) => {
+        let doc = dbentry.doc;
+        console.log(doc);
+        //if there's no processed data on a team yet, create a default data entry
+        if (typeof processed_data[doc.team_name] === "undefined") {
+          processed_data[doc.team_name] = {
+            team_name: doc.team_name,
+            alliance: doc.alliance,
+            games_played: 0,
+            climbs_none: 0,
+            climbs_low: 0,
+            climbs_mid: 0,
+            climbs_high: 0,
+            climbs_transverse: 0,
+            points: 0,
+            point_average: 0,
+            num_disables: 0,
+            disables_average: 0,
+            num_flips: 0,
+            flips_average: 0,
+            fouls: 0,
+            fouls_average: 0,
+            fouls_tech: 0,
+            fouls_tech_average: 0,
+          };
+        }
+
+        let team_data = processed_data[doc.team_name];
+        console.log(team_data);
+        let new_team_data = {
+          ...team_data,
+          games_played: team_data.games_played + 1,
+          num_climbs: team_data.num_climbs + (doc.climb == true ? 1 : 0),
+          num_disables: team_data.num_disables + (doc.disabled == true ? 1 : 0),
+          num_flips: team_data.num_flips + (doc.flipped_over == true ? 1 : 0),
+          fouls: team_data.fouls + parseInt(doc.fouls),
+          fouls_tech: team_data.fouls_tech + parseInt(doc.fouls_tech),
+          inner_port: team_data.inner_port + parseInt(doc.inner_port),
+          outer_port: team_data.outer_port + parseInt(doc.outer_port),
+          lower_port: team_data.lower_port + parseInt(doc.lower_port),
+        };
+        console.log(new_team_data);
+      });
+    })
+    .catch((err) => {
+      console.log("Error Fetching Docs from Database!");
+      console.log(err);
+    });
+  let datasets = [
+    {
+      data: [],
+    },
+  ];
+  //https://react-charts.js.org/examples/column
+  return <div></div>;
+};
+
+export default DashboardPage;

webserver/src/Pages/InputPage.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useLocalDb } from '../DbContext';
+// import { Button, Intent, Spinner } from "@blueprintjs/core";
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
+import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
+import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
+
+const schema = {
+  fields: [{
+    component: componentTypes.TEXT_FIELD,
+    name: 'name',
+    label: 'Your name',
+    isRequired: true,
+    // validate: [{type: validatorTypes.REQUIRED}],
+    default: 'test'
+  }]
+}
+
+const InputPage = () => {
+    const localdb = useLocalDb();
+    console.log(localdb);
+    return (
+        <div>
+          <FormRenderer
+          schema={schema}
+          componentMapper={componentMapper}
+          FormTemplate={FormTemplate}
+          />
+        </div>
+    )
+}
+
+export default InputPage

webserver/src/Pages/NotFoundPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NotFoundPage = () => {
+    return (
+        <div>
+            <h3>404 Page Not Found!</h3>
+        </div>
+    )
+}
+
+export default NotFoundPage

webserver/src/components/Header.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Header = ({ title }) => {
+    return (
+        <header>
+            <h1> {title} </h1>
+        </header>
+    )   
+}
+
+Header.defaultProps = {
+    title: 'Ridgebotics Scouting',
+}
+
+export default Header

webserver/src/components/Navbar.js

@@ -0,0 +1,32 @@
+import React from 'react'
+// import {Navigation} from 'react-minimal-side-navigation';
+// import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';
+
+const Navbar = () => {
+    return (
+        <div>
+            {/* <Navigation 
+            activeItemId="/dashboard"
+            onSelect={({itemId}) => {
+
+            }}
+            items={[
+                {
+                    title: 'Dashboard',
+                    itemID: '/dashboard'
+                },
+                {
+                    title: 'Team Comparison',
+                    itemID: '/TeamComparison'
+                },
+                {
+                    title: 'Input',
+                    itemID: '/Input'
+                }
+            ]}
+            />             */}
+        </div>
+    )
+}
+
+export default Navbar;

webserver/src/components/Navigation/Drawer/DrawerButton.css

@@ -0,0 +1,28 @@
+.drawer_button {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 30px;
+    width: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.drawer_button:focus {
+    outline:none;
+}
+
+.drawer_button_line {
+    width: 100%;
+    height: 2px;
+    background: white;
+}
+
+@media (min-width: 769px) {
+    .drawer_button {
+        display: none;
+    }
+}

webserver/src/components/Navigation/Drawer/DrawerButton.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import './DrawerButton.css'
+
+const DrawerButton = props => {
+    return (
+        <button className="drawer_button" onClick={props.click}>
+            <div className="drawer_button_line" />
+            <div className="drawer_button_line" />
+            <div className="drawer_button_line" />    
+        </button>
+    )
+}
+
+export default DrawerButton

webserver/src/components/Navigation/Drawer/SideDrawer.css

@@ -0,0 +1,55 @@
+.side_drawer {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: #009954;
+    opacity: 0;
+    transition:opacity 0.3s;
+    pointer-events: none;
+}
+
+.side_drawer.open {
+    opacity: 1;
+    transition:opacity 0.3s; 
+    display: flex;
+    pointer-events: all;
+    /* animation: fadeInOpacity 0.5s linear; */
+}
+
+.side_drawer ul {
+    /* height: 100%; */
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: top;
+}
+
+.side_drawer li {
+    margin: 0.5rem 0;
+}
+
+.side_drawer a {
+    color: white;
+    text-decoration: none;
+    font-size: 2rem;
+}
+
+.side_drawer a:hover,
+.side_drawer a:active {
+    color: #ff3b76;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+/* @media (max-width: 769px) {
+    .side_drawer {
+        display: none;
+    }
+} */

webserver/src/components/Navigation/Drawer/SideDrawer.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PagesList from '../PagesList';
+
+import './SideDrawer.css'
+
+const SideDrawer = props => {
+    let drawerClasses = 'side_drawer';
+    if (props.show) {
+        drawerClasses = 'side_drawer open';
+    }
+    return (
+        <nav className={drawerClasses}>
+            <PagesList click={props.drawerClickHandler}/>
+        </nav>
+    )
+}
+
+export default SideDrawer

webserver/src/components/Navigation/Navigation.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react'
+import Toolbar from './Toolbar/Toolbar'
+import SideDrawer from './Drawer/SideDrawer'
+
+class Navigation extends Component {   
+    state = {
+        sideDrawerOpen: false
+    };
+    
+    drawerToggleClickHandler = () => {
+        this.setState((prevState) => {
+            return {sideDrawerOpen: !prevState.sideDrawerOpen};
+        });
+    };
+
+    render() {
+        return (
+        <div>
+            <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
+            <SideDrawer show={this.state.sideDrawerOpen} drawerClickHandler={this.drawerToggleClickHandler}/>
+        </div>
+        )
+    }
+}
+
+export default Navigation

webserver/src/components/Navigation/PagesList.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+
+const PagesList = props => {
+    return (
+        <ul>
+            <li><Link onClick={props.click} to="/Dashboard">Dashboard</Link></li>
+            <li><Link onClick={props.click} to="/Input">Input</Link></li>
+        </ul>
+    )
+}
+
+export default PagesList

webserver/src/components/Navigation/Toolbar/Toolbar.css

@@ -0,0 +1,56 @@
+.toolbar {
+    position: sticky;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    background: #00a65a;
+    height: 56px
+}
+
+.toolbar_navigation {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.toolbar_logo {
+    margin-left: 0.5rem;
+}
+
+.toolbar_logo a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+
+.toolbar_spacer {
+    flex: 1;
+}
+
+.toolbar_items ul {
+    list-style: none;
+    margin: 0;
+    padding: 0 0;
+    display: flex;
+}
+
+.toolbar_items li {
+    padding: 0 0.6rem;
+}
+
+.toolbar_items a {
+    color: white;
+    text-decoration: none;
+}
+
+.toolbar_items a:hover,
+.toolbar_items a:active {
+    color: #ff3b76;
+}
+
+@media (max-width: 768px) {
+    .toolbar_items {
+        display: none;
+    }
+}

webserver/src/components/Navigation/Toolbar/Toolbar.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import DrawerButton from '../Drawer/DrawerButton';
+import PagesList from '../PagesList';
+import './Toolbar.css';
+import { Link } from 'react-router-dom';
+
+const Toolbar = props => {
+    return (
+            <header className="toolbar">
+                <nav className="toolbar_navigation">
+                    <DrawerButton click={props.drawerClickHandler} />
+                    <div className = "toolbar_logo"><Link to="/">Ridgebotics Scouting</Link></div>
+                    <div className = "toolbar_spacer" />
+                    <div className = "toolbar_items">
+                        <PagesList />
+                    </div>
+                </nav>
+            </header>
+    )
+}
+
+export default Toolbar

webserver/src/index.css

@@ -1,13 +1,12 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    background-color: rgb(20, 26, 24);
+    color: white;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}

webserver/src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function