mirror of
https://github.com/Team4388/scouting-2021.git
synced 2026-06-08 16:28:02 -06:00
Input Form Done
This commit is contained in:
Aquaticholic
Generated
+63
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "Scouting",
|
||||
"name": "Ridgebotics Scouting",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
||||
+1
-1
@@ -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() {
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const DashboardPage = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardPage
|
||||
@@ -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
|
||||
+128
-13
@@ -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,
|
||||
}) => (
|
||||
<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 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>
|
||||
<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="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 item> <Field type="number" as={TextField} name="inner_port" label="Inner Port" variant="filled"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<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_tech" label="Tech Fouls"/> </Grid>
|
||||
<Grid item> <Field type="number" as={TextField} name="fouls" label="Fouls"
|
||||
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>
|
||||
|
||||
@@ -21,12 +21,12 @@ const LoginPage = () => {
|
||||
<div>
|
||||
<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);
|
||||
});
|
||||
// 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>
|
||||
|
||||
Reference in New Issue
Block a user