Input Form Done

client/package-lock.json

@@ -8,13 +8,16 @@
       "version": "0.1.0",
       "dependencies": {
         "@material-ui/core": "^4.12.3",
+        "@material-ui/icons": "^4.11.2",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
+        "chart.js": "^3.5.1",
         "formik": "^2.2.9",
         "pouchdb": "^7.2.2",
         "pouchdb-browser": "^7.2.2",
         "react": "^16.0.0",
+        "react-chartjs-2": "^3.0.5",
         "react-dom": "^16.0.0",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
@@ -2586,6 +2589,28 @@
         }
       }
     },
+    "node_modules/@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.4"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^4.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
@@ -5633,6 +5658,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.1.tgz",
+      "integrity": "sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ=="
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -17019,6 +17049,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.5.tgz",
+      "integrity": "sha512-fYr4E82agaZi9IFMe5GtOZ6WE/HWdxy/KywLNOzXsqgPkD2oo1IlrQLKMLUki/2UXko3p95TR2L8Q2rEss/opQ==",
+      "dependencies": {
+        "lodash": "^4.17.19"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -25106,6 +25148,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
@@ -27441,6 +27491,11 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.1.tgz",
+      "integrity": "sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ=="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -36461,6 +36516,14 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.5.tgz",
+      "integrity": "sha512-fYr4E82agaZi9IFMe5GtOZ6WE/HWdxy/KywLNOzXsqgPkD2oo1IlrQLKMLUki/2UXko3p95TR2L8Q2rEss/opQ==",
+      "requires": {
+        "lodash": "^4.17.19"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",

client/package.json

@@ -4,13 +4,16 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "chart.js": "^3.5.1",
     "formik": "^2.2.9",
     "pouchdb": "^7.2.2",
     "pouchdb-browser": "^7.2.2",
     "react": "^16.0.0",
+    "react-chartjs-2": "^3.0.5",
     "react-dom": "^16.0.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "Scouting",
-  "name": "Create React App Sample",
+  "name": "Ridgebotics Scouting",
   "icons": [
     {
       "src": "favicon.ico",

client/src/App.js

@@ -8,7 +8,7 @@ import './App.css';
 //Pages
 import LoginPage from './Pages/LoginPage'
 import NotFoundPage from './Pages/NotFoundPage'
-import DashboardPage from './Pages/DashboardPage';
+import DashboardPage from './Pages/DashboardPage/DashboardPage';
 import InputPage from './Pages/InputPage';
 
 function App() {

client/src/Pages/DashboardPage.js

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const DashboardPage = () => {
-    return (
-        <div>
-            
-        </div>
-    )
-}
-
-export default DashboardPage

client/src/Pages/DashboardPage/DashboardPage.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useLocalDb } from '../../DbContext'
+import { Bar } from 'react-chartjs-2'
+
+const DashboardPage = () => {
+    const localdb = useLocalDb();
+    let team_data = {};
+     localdb.allDocs({
+        include_docs: true
+    }).then((result) => {
+        console.log(result);
+        result.rows.forEach((doc) => {
+            console.log(doc);
+        });
+    }).catch((err) => {
+        console.log("Error Fetching Docs from Database!");
+        console.log(err);
+    })
+    //https://react-charts.js.org/examples/column
+    return (
+        <div>
+            <Bar
+                data={{
+                    labels: ['4388', '1619'],
+                    datasets: [
+                        
+                    ]
+                }}
+                // height
+            />
+        </div>
+    )
+}
+
+export default DashboardPage

client/src/Pages/InputPage.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { useLocalDb } from '../DbContext';
 import { Formik, Field, Form } from 'formik';
-import { TextField, Button, Grid, FormRow } from "@material-ui/core";
+import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
+import { AddCircleOutline, RemoveCircleOutline} from "@material-ui/icons";
 
 const InputPage = () => {
     const localdb = useLocalDb();
@@ -22,7 +23,6 @@ const InputPage = () => {
                 lower_port: '0',
                 control_panel: '0',
                 disabled: false,
-                assisted_climb: false,
                 climb: false,
                 leveling_climb: false,
                 trench_run: false,
@@ -30,17 +30,30 @@ const InputPage = () => {
                 flipped_over: false,
                 center_climb: false,
                 red_card: false,
+                alliance: "",
 
             }}
-            onSubmit={(values, {setSubmitting}) => {
+            onSubmit={(values, {setSubmitting, resetForm}) => {
                 setTimeout(() => {
-                alert(JSON.stringify(values, null, 2));
+                localdb.put({
+                    _id: new Date().toISOString(),
+                    ...values
+                }).then((result) => {
+                    alert("Input Saved Successfully!");
+                    console.log(result);
+                }).catch((err) => {
+                    console.log("Failed To Save Input!");
+                    alert(err);
+                })
+                // alert(JSON.stringify(values, null, 2));
+                resetForm();
                 setSubmitting(false);
                 }, 400);
             }}
             >
             {({
                 values,
+                setValues,
                 errors,
                 touched,
                 handleChange,
@@ -53,18 +66,115 @@ const InputPage = () => {
                 <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>
+            <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+              <Grid item>
+                <FormControl component="fieldset">
+                  <FormLabel component="legend">Alliance</FormLabel>
+                  <RadioGroup aria-label="Alliance" name="alliance">
+                    <FormControlLabel control={<Field as={Radio} type="radio" name="alliance" value="red"/>} label="Red" />
+                    <FormControlLabel control={<Field as={Radio} type="radio" name="alliance" value="blue"/>} label="Blue" />
+                  </RadioGroup>
+                </FormControl>
+              </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="inner_port" label="Inner Port" variant="filled"
-                    <Grid item> <Field type="number" as={TextField} name="outer_port" label="Outer Port" variant="filled"/> </Grid>
+                                                                      InputProps={{
-                    <Grid item> <Field type="number" as={TextField} name="lower_port" label="Lower Port" variant="filled"/> </Grid>
+                                                    startAdornment: (
-                    <Grid item> <Field type="number" as={TextField} name="control_panel" label="Control Panel"/> </Grid>
+                                                      <InputAdornment position="start">
+                                                        <IconButton onClick={() => {setValues({...values, inner_port: Math.max(parseInt(values.inner_port) - 1, 0)});}}>
+                                                          <RemoveCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    ),
+                                                    endAdornment: (
+                                                      <InputAdornment position="end">
+                                                        <IconButton onClick={() => {setValues({...values, inner_port: (parseInt(values.inner_port) + 1)});}}>
+                                                          <AddCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    )
+                                                  }}
+                    /> </Grid>
+                    <Grid item> <Field type="number" as={TextField} name="outer_port" label="Outer Port" variant="filled"
+                                                                      InputProps={{
+                                                    startAdornment: (
+                                                      <InputAdornment position="start">
+                                                        <IconButton onClick={() => {setValues({...values, outer_port: Math.max(parseInt(values.outer_port) - 1, 0)});}}>
+                                                          <RemoveCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    ),
+                                                    endAdornment: (
+                                                      <InputAdornment position="end">
+                                                        <IconButton onClick={() => {setValues({...values, outer_port: parseInt(values.outer_port) + 1});}}>
+                                                          <AddCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    )
+                                                  }}
+                    /> </Grid>
+                    <Grid item> <Field type="number" as={TextField} name="lower_port" label="Lower Port" variant="filled"
+                                                                      InputProps={{
+                                                    startAdornment: (
+                                                      <InputAdornment position="start">
+                                                        <IconButton onClick={() => {setValues({...values, lower_port: Math.max(parseInt(values.lower_port) - 1, 0)});}}>
+                                                          <RemoveCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    ),
+                                                    endAdornment: (
+                                                      <InputAdornment position="end">
+                                                        <IconButton onClick={() => {setValues({...values, lower_port: parseInt(values.lower_port) + 1});}}>
+                                                          <AddCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    )
+                                                  }}
+                    /> </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" label="Fouls"
-                        <Grid item> <Field type="number" as={TextField} name="fouls_tech" label="Tech Fouls"/> </Grid>
+                                                                      InputProps={{
+                                                    startAdornment: (
+                                                      <InputAdornment position="start">
+                                                        <IconButton onClick={() => {setValues({...values, fouls: Math.max(parseInt(values.fouls) - 1, 0)});}}>
+                                                          <RemoveCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    ),
+                                                    endAdornment: (
+                                                      <InputAdornment position="end">
+                                                        <IconButton onClick={() => {setValues({...values, fouls: parseInt(values.fouls) + 1});}}>
+                                                          <AddCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    )
+                                                  }}
+                        /> </Grid>
+                        <Grid item> <Field type="number" as={TextField} name="fouls_tech" label="Tech Fouls"
+                                                                      InputProps={{
+                                                    startAdornment: (
+                                                      <InputAdornment position="start">
+                                                        <IconButton onClick={() => {setValues({...values, fouls_tech: Math.max(parseInt(values.fouls_tech) - 1, 0)});}}>
+                                                          <RemoveCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    ),
+                                                    endAdornment: (
+                                                      <InputAdornment position="end">
+                                                        <IconButton onClick={() => {setValues({...values, fouls_tech: parseInt(values.fouls_tech) + 1});}}>
+                                                          <AddCircleOutline />
+                                                        </IconButton>
+                                                      </InputAdornment>
+                                                    )
+                                                  }}
+                        /> </Grid>
                 </Grid> </Grid>
             </Grid>
             <div/>
@@ -73,6 +183,11 @@ const InputPage = () => {
                 <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>
+            <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
+              <Grid item> <FormControlLabel control={<Field as={Checkbox} type="checkbox" name="climb" />} label="Climb" labelPlacement="start"/> </Grid>
+              <Grid item> <FormControlLabel control={<Field as={Checkbox} type="checkbox" name="leveling_climb" />} label="Leveled Climb" labelPlacement="start"/> </Grid>
+            </Grid>
+
             <div/>
             <Grid container direction="row" justify="center" alignItems="flex-start" spacing = {3}>
                 <Button type="submit" disabled={isSubmitting}> Submit </Button>

client/src/Pages/LoginPage.js

@@ -21,12 +21,12 @@ const LoginPage = () => {
         <div>
             <button onClick={() => {
                 console.log(remotedb);
-                remotedb.logIn('2021', 'Ridgebotics').then(function () {
+            //     remotedb.logIn('2021', 'Ridgebotics').then(function () {
-                    console.log("CouchDb Login Successful!");
+            //         console.log("CouchDb Login Successful!");
-                }).catch(function (err) {
+            //     }).catch(function (err) {
-                    console.log("Unable to login to CouchDb!"); 
+            //         console.log("Unable to login to CouchDb!"); 
-                    console.log(err);
+            //         console.log(err);
-                });
+            //     });
             }}>
                 Sign In 2021
             </button>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "scouting-2021",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

package.json

@@ -0,0 +1 @@
+{}