From 7e436bf6cde9540d33dd0f29e62bb7cc3be153f5 Mon Sep 17 00:00:00 2001 From: Aquaticholic Date: Fri, 24 Sep 2021 23:08:58 -0600 Subject: [PATCH] Input Form Done --- client/package-lock.json | 63 ++++++++ client/package.json | 3 + client/public/manifest.json | 4 +- client/src/App.js | 2 +- client/src/Pages/DashboardPage.js | 11 -- .../src/Pages/DashboardPage/DashboardPage.js | 35 +++++ client/src/Pages/InputPage.js | 141 ++++++++++++++++-- client/src/Pages/LoginPage.js | 12 +- package-lock.json | 6 + package.json | 1 + 10 files changed, 245 insertions(+), 33 deletions(-) delete mode 100644 client/src/Pages/DashboardPage.js create mode 100644 client/src/Pages/DashboardPage/DashboardPage.js create mode 100644 package-lock.json create mode 100644 package.json diff --git a/client/package-lock.json b/client/package-lock.json index c9abbb2..0ba5eff 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index f6c4416..951adce 100644 --- a/client/package.json +++ b/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", diff --git a/client/public/manifest.json b/client/public/manifest.json index 478bf8e..45a44c4 100644 --- a/client/public/manifest.json +++ b/client/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Scouting", + "name": "Ridgebotics Scouting", "icons": [ { "src": "favicon.ico", diff --git a/client/src/App.js b/client/src/App.js index 057dcc2..9aa24b4 100644 --- a/client/src/App.js +++ b/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() { diff --git a/client/src/Pages/DashboardPage.js b/client/src/Pages/DashboardPage.js deleted file mode 100644 index 295f63b..0000000 --- a/client/src/Pages/DashboardPage.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -const DashboardPage = () => { - return ( -
- -
- ) -} - -export default DashboardPage diff --git a/client/src/Pages/DashboardPage/DashboardPage.js b/client/src/Pages/DashboardPage/DashboardPage.js new file mode 100644 index 0000000..a6d10c6 --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default DashboardPage diff --git a/client/src/Pages/InputPage.js b/client/src/Pages/InputPage.js index 22b7940..4507b00 100644 --- a/client/src/Pages/InputPage.js +++ b/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, @@ -49,22 +62,119 @@ const InputPage = () => { isSubmitting, }) => (
- - - + + + + + + + Alliance + + } label="Red" /> + } label="Blue" /> + + + + +
- - - - + + {setValues({...values, inner_port: Math.max(parseInt(values.inner_port) - 1, 0)});}}> + + + + ), + endAdornment: ( + + {setValues({...values, inner_port: (parseInt(values.inner_port) + 1)});}}> + + + + ) + }} + /> + + {setValues({...values, outer_port: Math.max(parseInt(values.outer_port) - 1, 0)});}}> + + + + ), + endAdornment: ( + + {setValues({...values, outer_port: parseInt(values.outer_port) + 1});}}> + + + + ) + }} + /> + + {setValues({...values, lower_port: Math.max(parseInt(values.lower_port) - 1, 0)});}}> + + + + ), + endAdornment: ( + + {setValues({...values, lower_port: parseInt(values.lower_port) + 1});}}> + + + + ) + }} + /> + - - + + {setValues({...values, fouls: Math.max(parseInt(values.fouls) - 1, 0)});}}> + + + + ), + endAdornment: ( + + {setValues({...values, fouls: parseInt(values.fouls) + 1});}}> + + + + ) + }} + /> + + {setValues({...values, fouls_tech: Math.max(parseInt(values.fouls_tech) - 1, 0)});}}> + + + + ), + endAdornment: ( + + {setValues({...values, fouls_tech: parseInt(values.fouls_tech) + 1});}}> + + + + ) + }} + />
@@ -73,6 +183,11 @@ const InputPage = () => { + + } label="Climb" labelPlacement="start"/> + } label="Leveled Climb" labelPlacement="start"/> + +
diff --git a/client/src/Pages/LoginPage.js b/client/src/Pages/LoginPage.js index d277903..cdda632 100644 --- a/client/src/Pages/LoginPage.js +++ b/client/src/Pages/LoginPage.js @@ -21,12 +21,12 @@ const LoginPage = () => {
diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5731dd2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "scouting-2021", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/package.json @@ -0,0 +1 @@ +{}