added previous input form

client/package.json

@@ -3,17 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "formik": "^2.2.9",
     "pouchdb": "^7.2.2",
     "pouchdb-browser": "^7.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2",
-    "serve": "^12.0.1"
+    "serve": "^12.0.1",
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/DbContext.js

@@ -1,5 +1,5 @@
+import PouchDB from 'pouchdb';
 import React, {useContext, useState} from 'react';
-import PouchDb from 'pouchdb-browser';
 
 const LocalDbContext = React.createContext();
 const RemoteDbContext = React.createContext();
@@ -13,17 +13,36 @@ export function useRemoteDb() {
 }
 
 export function DbProvider({ children }) {
-    const localdb = useState(new PouchDb('localdb'));
-    const remotedb = useState(new PouchDb('http://localhost:5984/'));
+    const [localdb, setLocaldb] = useState(new PouchDB('kcmt2021'));
+    //used in development server
+    const [remotedb, setRemotedb] = useState(new PouchDB('http://192.168.7.190:5984/kcmt2021', {
+        skip_setup: true,
+        auth: {
+            username: '2021',
+            password: 'Ridgebotics'
+        }
+    }));
+    // const [remotedb, setRemotedb] = useState(new PouchDB(window.location.protocol + "//" + window.location.hostname + ":5984/kcmt2021", {skip_setup: true}))
 
-    // function signIn()
-    // {
-    // // cushion.account.signOut();
-    // cushion.account.signIn({
-    //     username: "2021",
-    //     password: "Ridgebotics",
+    //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}> 

client/src/Pages/InputPage.js

@@ -1,12 +1,113 @@
 import React from 'react'
 import { useLocalDb } from '../DbContext';
+import { Formik, Field, Form } from 'formik';
+import { TextField, Button, Grid, FormRow } from "@material-ui/core";
 
 const InputPage = () => {
     const localdb = useLocalDb();
     console.log(localdb);
     return (
         <div>
-            
+            <Formik
+            initialValues={{
+                team_number: '',
+                match_number: '',
+                team_abilities_well: '',
+                team_abilities_struggle: '',
+                team_abilities_cant: '',
+                fouls: '0',
+                fouls_tech: '0',
+                inner_port: '0',
+                outer_port: '0',
+                lower_port: '0',
+                control_panel: '0',
+                disabled: false,
+                assisted_climb: false,
+                climb: false,
+                leveling_climb: false,
+                trench_run: false,
+                yellow_card: false,
+                flipped_over: false,
+                center_climb: false,
+                red_card: false,
+
+            }}
+            onSubmit={(values, {setSubmitting}) => {
+                setTimeout(() => {
+                alert(JSON.stringify(values, null, 2));
+                setSubmitting(false);
+                }, 400);
+            }}
+            >
+            {({
+                values,
+                errors,
+                touched,
+                handleChange,
+                handleBlur,
+                handleSubmit,
+                isSubmitting,
+            }) => (
+            <Form>
+                <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+                    <Grid item> <Field type="input" as={TextField} name="team_number" label="Team #"/> </Grid>
+                    <Grid item> <Field type="input" as={TextField} name="match_number" label="Match Number"/> </Grid>
+            </Grid>
+            <hr/>
+            <div/>
+            <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+                <Grid item> <Grid container direction="column" justify="flex-start" alignItems="center" spacing = {3}>
+                    <Grid item> <Field type="number" as={TextField} name="inner_port" label="Inner Port" variant="filled"/> </Grid>
+                    <Grid item> <Field type="number" as={TextField} name="outer_port" label="Outer Port" variant="filled"/> </Grid>
+                    <Grid item> <Field type="number" as={TextField} name="lower_port" label="Lower Port" variant="filled"/> </Grid>
+                    <Grid item> <Field type="number" as={TextField} name="control_panel" label="Control Panel"/> </Grid>
+                </Grid> </Grid>
+                <Grid item> <Grid container direction="column" justify="flex-start" alignItems="center" spacing = {3}>
+                        <Grid item> <Field type="number" as={TextField} name="fouls" label="Fouls"/> </Grid>
+                        <Grid item> <Field type="number" as={TextField} name="fouls_tech" label="Tech Fouls"/> </Grid>
+                </Grid> </Grid>
+            </Grid>
+            <div/>
+            <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+                <Grid item> <Field type="input" as={TextField} multiline rows={3} rowsMax={7} labelWidth={60} name="team_abilities_well" label="What they did Well"/> </Grid>
+                <Grid item> <Field type="input" as={TextField} multiline rows={3} rowsMax={7} labelWidth={60} name="team_abilities_struggle" label="What they struggled with"/> </Grid>
+                <Grid item> <Field type="input" as={TextField} multiline rows={3} rowsMax={7} labelWidth={60} name="team_abilities_cant" label="What they can't do"/> </Grid>
+            </Grid>
+            <div/>
+            <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+                <Button type="submit" disabled={isSubmitting}> Submit </Button>
+            </Grid>
+            </Form>
+            )}
+            </Formik>
+            <button onClick={() => {
+                localdb.put({
+                    //creates a uuid for pouchdb to index documents, doing it this way will make the db sort them by date when viewed
+                  _id: "4388:" + new Date().toISOString(),
+                  inner_port: 0,
+                  outer_port: 0,
+                  lower_port: 0,
+                  control_panel: 0,
+                  disabled: false,
+                  assisted_climb: false,
+                  climb: false,
+                  leveling_climb: false,
+                  trench_run: false,
+                  yellow_card: false,
+                  red_card: false,
+                  flipped_over: false,
+                  center_climb: false
+                }).then((result) => {
+                    console.log("Input Saved Successfully!");
+                    console.log(result);
+                }).catch((err) => {
+                    console.log("Failed To Save Input!");
+                    console.log(err);
+                })
+                localdb.allDocs().then(console.log);
+            }}>
+                Test Save Button
+            </button>
         </div>
     )
 }

client/src/Pages/LoginPage.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { useRemoteDb } from '../DbContext';
 
 const LoginPage = () => {
-    // const localdb = useLocalDb();
+    const remotedb = useRemoteDb();
     return (
         // <div className = "form_inner">
         //     <form>
@@ -18,7 +19,17 @@ const LoginPage = () => {
         //     </form>
         // </div>
         <div>
-            {/* <button onClick={() => Login2021()}>Sign In 2021</button> */}
+            <button onClick={() => {
+                console.log(remotedb);
+                remotedb.logIn('2021', 'Ridgebotics').then(function () {
+                    console.log("CouchDb Login Successful!");
+                }).catch(function (err) {
+                    console.log("Unable to login to CouchDb!"); 
+                    console.log(err);
+                });
+            }}>
+                Sign In 2021
+            </button>
         </div>
     )
 }