Team4388/ScoutingApp2022
1
0
Fork 0
mirror of https://github.com/Team4388/ScoutingApp2022.git synced 2026-06-08 16:28:04 -06:00
Code Issues Packages Projects Releases Wiki Activity

INPUT PAGE WIP

Browse Source
This commit is contained in:
Aquaticholic
2022-01-28 13:40:10 +00:00
parent f05d55a14d
commit 87bebf8ae6
16 changed files with 526 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webserver/package.json
+4 -1
View File
@@ -17,7 +17,10 @@
"react-router": "^6.2.1", "react-router": "^6.2.1",
"react-router-dom": "^6.2.1", "react-router-dom": "^6.2.1",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"web-vitals": "^2.1.3" "web-vitals": "^2.1.3",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
webserver/src/App.js → webserver/src/App.jsx
+15
View File
@@ -16,10 +16,24 @@ import NotFoundPage from "./Pages/NotFoundPage";
import DashboardPage from "./Pages/DashboardPage/DashboardPage"; import DashboardPage from "./Pages/DashboardPage/DashboardPage";
import WelcomePage from "./Pages/WelcomePage"; import WelcomePage from "./Pages/WelcomePage";
import InputPage from "./Pages/InputPage"; import InputPage from "./Pages/InputPage";
import { createMuiTheme, ThemeProvider } from '@material-ui/core'
import { Formik, Field, Form } from 'formik';
import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
import { AddCircleOutline, RemoveCircleOutline} from "@material-ui/icons";
function App() { function App() {
const darkTheme = createMuiTheme({
// Theme settings
palette: {
type: "dark",
},
});
return ( return (
<div className="App"> <div className="App">
<ThemeProvider theme={darkTheme}>
<DbProvider> <DbProvider>
<Router> <Router>
<Navigation /> <Navigation />
@@ -32,6 +46,7 @@ function App() {
</Routes> </Routes>
</Router> </Router>
</DbProvider> </DbProvider>
</ThemeProvider>
</div> </div>
); );
} }
webserver/src/DbContext.js → webserver/src/DbContext.jsx
View File
webserver/src/Pages/DashboardPage/DashboardPage.js → webserver/src/Pages/DashboardPage/DashboardPage.jsx
View File
webserver/src/Pages/InputPage.js
-73
View File
@@ -1,73 +0,0 @@
import React from 'react'
import { useLocalDb } from '../DbContext';
// import { Button, Intent, Spinner } from "@blueprintjs/core";
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
const schema = {
fields: [
{
component: componentTypes.TEXT_FIELD,
name: 'name',
label: 'Your name',
isRequired: true,
// validate: [{type: validatorTypes.REQUIRED}],
default: 'Dave doe'
},
{
name: "scoutedteam",
label: "Team Scouted",
component: componentTypes.TEXT_FIELD,
isRequired: true
},
{
name: "shooterpoints",
label: "Shooter Points",
component: componentTypes.TEXT_FIELD,
isRequired: true
},
{
name: "climberpoints",
label: "Climber Points",
component: componentTypes.TEXT_FIELD,
isRequired: true
},
{
name: "amountclimbed",
label: "Amount of rungs Climbed",
component: componentTypes.TEXT_FIELD,
isRequired: true
},
{
name: "amountshot",
label: "Amount of balls shot",
component: componentTypes.TEXT_FIELD,
isRequired: true
},
{
name: "amountclimbed",
label: "Amount of balls in",
component: componentTypes.TEXT_FIELD,
isRequired: true
}
]
}
const InputPage = () => {
const localdb = useLocalDb();
console.log(localdb);
return (
<div>
<FormRenderer
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
/>
</div>
)
}
export default InputPage
webserver/src/Pages/InputPage.jsx
+363
View File
@@ -0,0 +1,363 @@
import React from "react";
import { useLocalDb } from "../DbContext";
// import { Button, Intent, Spinner } from "@blueprintjs/core";
import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper";
import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template";
import { Formik, Field, Form } from "formik";
import InputNumberField from "../components/InputNumberField.jsx";
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();
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",
flips: "0",
red_cards: "0",
yellow_cards: "0",
disabled: false,
upper_hub_auto: "0",
lower_hub_auto: "0",
upper_hub: "0",
lower_hub: "0",
climb_level: "",
alliance: "",
notes_good: "",
notes_struggle: "",
notes_cant: "",
}}
onSubmit={(values, { setSubmitting, resetForm }) => {
setTimeout(() => {
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,
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 item>
<FormControl component="fieldset">
<FormLabel component="legend">Alliance</FormLabel>
<RadioGroup aria-label="Alliance" name="alliance" row>
<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>
<InputNumberField
name="upper_hub_auto"
label="Upper Hub Auto"
/>
</Grid>
<Grid item>
<InputNumberField
name="lower_hub_auto"
label="Lower Hub Auto"
/>
</Grid>
</Grid>
</Grid>
<Grid item>
{" "}
<Grid
container
direction="column"
justify="flex-start"
alignItems="center"
spacing={3}
>
<Grid item>
{" "}
<InputNumberField name="upper_hub" label="Lower Hub" />{" "}
</Grid>
<Grid item>
{" "}
<InputNumberField name="lower_hub" label="Lower Hub" />{" "}
</Grid>
</Grid>{" "}
</Grid>
</Grid>
<hr />
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
<Grid item>
<FormControl component="fieldset">
<FormLabel component="legend">Climbing</FormLabel>
<RadioGroup aria-label="Climbing" name="climb_level" row>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="climb_level"
value="0"
/>
}
label="None"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="climb_level"
value="1"
/>
}
label="Low"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="climb_level"
value="2"
/>
}
label="Mid"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="climb_level"
value="3"
/>
}
label="High"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="climb_level"
value="4"
/>
}
label="Traversal"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
<hr />
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
<Grid item>
<Grid item>
<InputNumberField name="fouls" label="Fouls" />{" "}
</Grid>{" "}
<Grid item>
<InputNumberField name="fouls_tech" label="Tech Fouls" />{" "}
</Grid>{" "}
</Grid>
<Grid item>
<Grid item>
<InputNumberField name="red_cards" label="Red Cards" />{" "}
</Grid>{" "}
<Grid item>
<InputNumberField name="yellow_cards" label="Yellow Cards" />{" "}
</Grid>
<Grid item>
{/* <InputNumberField name="disables" label="Disables" />{" "} */}
</Grid>{" "}
</Grid>
</Grid>
<hr />
<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>
</div>
);
};
export default InputPage;
webserver/src/Pages/NotFoundPage.js → webserver/src/Pages/NotFoundPage.jsx
View File
webserver/src/Pages/WelcomePage.css
+11 -5
View File
@@ -1,6 +1,12 @@
.center { .welcome {
display: block; display: block;
margin-left: auto; /* margin-left: auto;
margin-right: auto; margin-right: auto; */
width: 50%; width: 100%;
} text-align: center;
margin: auto;
}
.welcome img {
max-width: 100%;
}
webserver/src/Pages/WelcomePage.js → webserver/src/Pages/WelcomePage.jsx
+1 -1
View File
@@ -3,7 +3,7 @@ import "./WelcomePage.css";
import "../App.css"; import "../App.css";
const WelcomePage = () => { const WelcomePage = () => {
return ( return (
<div align="center" class = "headerwithfont"> <div class = "welcome">
<h1>Welcome to Ridgebotics Scouting Web Application 2022</h1> <h1>Welcome to Ridgebotics Scouting Web Application 2022</h1>
<img src = "/WelcomePageImage.webp"/> <img src = "/WelcomePageImage.webp"/>
</div> </div>
webserver/src/components/InputNumberField.jsx
+61
View File
@@ -0,0 +1,61 @@
import React from "react";
import { Formik, Field, Form, useFormikContext } from "formik";
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 InputNumberField = (props) => {
const { values, setValues } = useFormikContext();
return (
<Field
type="number"
as={TextField}
name={props.name}
label={props.label}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<IconButton
onClick={() => {
setValues({
...values,
[props.name]: Math.max(parseInt(values[props.name]) - 1, 0),
});
}}
>
<RemoveCircleOutline />
</IconButton>
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
setValues({
...values,
[props.name]: parseInt(values[props.name]) + 1,
});
}}
>
<AddCircleOutline />
</IconButton>
</InputAdornment>
),
}}
/>
);
};
export default InputNumberField;
webserver/src/components/Navigation/Drawer/SideDrawer.css
+4 -1
View File
@@ -31,8 +31,11 @@
.side_drawer a { .side_drawer a {
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 2rem; font-size: 3rem;
z-index: 1; z-index: 1;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 1000%;
} }
.side_drawer a:hover, .side_drawer a:hover,
webserver/src/components/Navigation/PagesList.js
+2 -2
View File
@@ -4,8 +4,8 @@ import { Link } from "react-router-dom";
const PagesList = props => { const PagesList = props => {
return ( return (
<ul> <ul>
<button><Link onClick={props.click} to="/Dashboard">Dashboard</Link></button> <li><Link onClick={props.click} to="/Dashboard">Dashboard</Link></li>
<button><Link onClick={props.click} to="/Input">Input</Link></button> <li><Link onClick={props.click} to="/Input">Input</Link></li>
</ul> </ul>
) )
} }
webserver/src/components/Navigation/Toolbar/Toolbar copy.css
+58
View File
@@ -0,0 +1,58 @@
.toolbar {
position: sticky;
top: 0px;
left: 0;
width: 100%;
background: #00a65a;
height: 56px
}
.toolbar_navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar_logo {
margin-left: 0.5rem;
}
.toolbar_logo a {
color: white;
text-decoration: none;
font-size: 2.0rem;
height: 100%;
}
.toolbar_spacer {
flex: 1;
}
.toolbar_items ul {
list-style: none;
margin: 0;
padding: 0 0;
display: flex;
}
.toolbar_items li {
padding: 0 0.6rem;
}
.toolbar_items button {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.toolbar_items a:hover,
.toolbar_items a:active {
color: #ff3b76;
}
@media (max-width: 768px) {
.toolbar_items {
display: none;
}
}
webserver/src/components/Navigation/Toolbar/Toolbar.css
+7 -3
View File
@@ -22,7 +22,6 @@
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 2.0rem; font-size: 2.0rem;
height: 100%;
} }
.toolbar_spacer { .toolbar_spacer {
@@ -37,14 +36,19 @@
} }
.toolbar_items li { .toolbar_items li {
color: white;
background-color: #00000000;
text-decoration: none;
font-size: 1.5rem;
padding: 0 0.6rem; padding: 0 0.6rem;
} }
.toolbar_items a { .toolbar_items a {
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 1.5rem; padding-top: 0.8rem;
height: 200%; padding-bottom: 0.8rem;
} }
.toolbar_items a:hover, .toolbar_items a:hover,
webserver/src/reportWebVitals.js → webserver/src/reportWebVitals.jsx
View File
webserver/src/setupTests.js → webserver/src/setupTests.jsx
View File