Team4388/scouting-2021
1
0
Fork 0
mirror of https://github.com/Team4388/scouting-2021.git synced 2026-06-09 00:38:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Input Form Done

Browse Source
This commit is contained in:
Aquaticholic
2021-09-24 23:08:58 -06:00
parent 9c02213656
commit 7e436bf6cd
10 changed files with 245 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.js
+1 -1
View File
@@ -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
-11
View File
@@ -1,11 +0,0 @@
import React from 'react'
const DashboardPage = () => {
return (
<div>
</div>
)
}
export default DashboardPage
client/src/Pages/DashboardPage/DashboardPage.js
+35
View File
@@ -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
+128 -13
View File
@@ -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>
client/src/Pages/LoginPage.js
+6 -6
View File
@@ -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>