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

input fixed, started data grid

Browse Source
This commit is contained in:
Evan Lanham
2022-03-13 18:58:26 -06:00
parent bc37e8be54
commit d32bf23dd3
10 changed files with 176 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webserver/src/App.jsx
+14 -16
View File
@@ -1,13 +1,7 @@
import logo from "./logo.svg";
import Navigation from "./components/Navigation/Navigation";
import { DbProvider } from "./DbContext";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Navigate,
} from "react-router-dom";
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from "react-router-dom";
import "./App.css";
// const Cushion = require('cushiondb-client');
@@ -16,23 +10,27 @@ import NotFoundPage from "./Pages/NotFoundPage";
import DashboardPage from "./Pages/DashboardPage/DashboardPage";
import WelcomePage from "./Pages/WelcomePage";
import InputPage from "./Pages/InputPage";
import { createTheme, ThemeProvider } from '@material-ui/core/styles'
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";
import { createTheme, ThemeProvider } from "@mui/material";
import { ProcessedDataBucketProvider } from "./ProcessedDataBucketContext";
function App() {
const darkTheme = createTheme({
// Theme settings
palette: {
type: "dark",
mode: "dark",
background: {
paper: "#101515",
},
text: {
// primary: "#edf8f3",
// secondary: "#acd3bf",
},
red_alliance: "#ec2e63",
blue_alliance: "#2d74eb",
},
typography: {
fontSize: 18
}
fontSize: 18,
},
});
return (
<ThemeProvider theme={darkTheme}>
webserver/src/Pages/DashboardPage/DashboardPage.jsx
+55 -5
View File
@@ -1,8 +1,9 @@
import React from "react";
import "chart.js/auto";
import { useLocalDb } from "../../DbContext";
import { Pie, Bar, Chart } from "react-chartjs-2";
import { useProcessedDataBucket } from "../../ProcessedDataBucketContext";
import Chart from "react-apexcharts";
import { DataGrid } from "@mui/x-data-grid";
import { Box } from "@mui/material";
const DashboardPage = () => {
//https://react-charts.js.org/examples/column
@@ -16,15 +17,64 @@ const DashboardPage = () => {
{
label: "Climbs",
data: pdb.teamData[4388].climb_counts,
backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(150,230,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
},
],
};
};
// console.log(pdb);
console.log(pdb);
//format data for the data grid
let grid_data = [];
//turns the values of the key value pairs in the list into an array
let team_data_array = Object.values(pdb.teamData);
const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d);
team_data_array.forEach((value, index, array) => {
grid_data.push({
id: value.team_number,
average_auto_points: roundPlaces(value.average_auto_points, 2),
average_teleop_hub_points: roundPlaces(value.average_teleop_hub_points, 2),
average_climb_points: roundPlaces(value.average_climb_points, 2),
average_total_match_points: roundPlaces(value.average_total_match_points, 2),
});
});
console.log(grid_data);
return (
<div>
<Pie data={makePieChartData(pdb, 4388)} />
{/* <Pie data={makePieChartData(pdb, 4388)} /> */}
<Box
sx={{
height: "600px",
m: 2,
}}
>
<DataGrid
rows={grid_data}
columns={[
{ field: "id", headerName: "Team", width: 100 },
{ field: "average_total_match_points", headerName: "Avg Total Pts", width: 150 },
{ field: "average_auto_points", headerName: "Avg Auto Pts", width: 150 },
{ field: "average_teleop_hub_points", headerName: "Avg Teleop Hub Pts", width: 190 },
{ field: "average_climb_points", headerName: "Avg Climb Pts", width: 150 },
// { field: "matched_played", headerName: "Matches", width: 100 },
]}
checkboxSelection
rowsPerPageOptions={[15]}
/>
</Box>
{/* <Chart
options={{
chart: {
width: 384,
type: "pie",
},
labels: ["None", "Low", "Mid", "High", "Transversal"],
}}
series={pdb.teamData[4388].climb_counts}
type="pie"
width={380}
/> */}
</div>
);
};
webserver/src/Pages/InputPage.jsx
+62 -94
View File
@@ -1,18 +1,25 @@
import React from "react";
import { useLocalDb } from "../DbContext";
import "./InputPage.css";
// 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, FastField, Form } from "formik";
import InputNumberField from "../components/InputNumberField.jsx";
import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material";
const InputPage = () => {
const localdb = useLocalDb();
let panel_sx = {
display: "flex",
flexDirection: { xs: "column", sm: "row" },
alignItems: { xs: "center", sm: "center" },
justifyContent: { xs: "flex-start", sm: "center" },
bgcolor: "background.paper",
p: 2,
m: 1,
gap: 2,
maxWidth: "fit-content",
borderRadius: "10px",
boxShadow: 7,
};
return (
<div>
<br />
@@ -64,49 +71,31 @@ const InputPage = () => {
>
{({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form>
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
<Box sx={panel_sx}>
<FastField type="input" as={TextField} name="team_number" label="Team #" />
</Grid>
<Grid item>
<FastField 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={<FastField as={Radio} type="radio" name="alliance" value="red" style={{ fontSize: 50 }} />} label="Red" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" />} label="Blue" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="red" sx={{ "&, &.Mui-checked": { color: "red_alliance" } }} />} sx={{ color: "red_alliance" }} label="Red" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" sx={{ "&, &.Mui-checked": { color: "blue_alliance" } }} />} sx={{ color: "blue_alliance" }} label="Blue" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<Grid container direction="column" justifyContent="flex-end" 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" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
</Grid>
<Grid item>
<InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
</Grid>
</Grid>
</Grid>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
</Box>
<Box sx={panel_sx}>
<InputNumberField name="upper_hub_auto" label="Upper Hub Auto" />
<InputNumberField name="lower_hub_auto" label="Lower Hub Auto" />
<FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="taxi_auto" />} label="Auto Taxi" />
</Box>
<Box sx={panel_sx}>
<InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
<InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
</Box>
<Box sx={panel_sx}>
<FormControl component="fieldset">
<FormLabel component="legend">Climbing</FormLabel>
<RadioGroup aria-label="Climbing" name="climb_level" row>
@@ -117,66 +106,45 @@ const InputPage = () => {
<FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="4" />} label="Traversal" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="fouls" label="Fouls" />
</Grid>
<Grid item>
<InputNumberField name="fouls_tech" label="Tech Fouls" />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="red_cards" label="Red Cards" />
</Grid>
<Grid item>
<InputNumberField name="yellow_cards" label="Yellow Cards" />
</Grid>
</Grid>
</Grid>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
</Box>
<Box sx={panel_sx}>
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<InputNumberField name="fouls" label="Fouls" />
<InputNumberField name="fouls_tech" label="Tech Fouls" />
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<InputNumberField name="red_cards" label="Red Cards" />
<InputNumberField name="yellow_cards" label="Yellow Cards" />
</Box>
</Box>
<Box sx={panel_sx}>
<FormControl component="fieldset">
<FormLabel component="legend">Defense</FormLabel>
<RadioGroup aria-label="Defense" name="defence" row>
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="0" />} label="None" />
{/* <Divider orientation="vertical" flexItem middle /> */}
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="1" />} label="Poor" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" /> <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" />
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item>
<FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" />
</Grid>
</Grid>
</Box>
<Box sx={{ ...panel_sx, display: "flex", flexDirection: "column" }}>
<h2>What they _______</h2>
<Box sx={{ display: "flex", flexDirection: "row", gap: 2, p: 0, m: 0 }}>
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="did well" />
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="struggled with" />
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="can't do" />
</Box>
<Button type="submit" disabled={isSubmitting}>
Submit
</Button>
</Box>
</Box>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="What they did Well" />
</Grid>
<Grid item>
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" />
</Grid>
<Grid item>
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="What they can't do" />
</Grid>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Button type="submit" disabled={isSubmitting}>
Submit
</Button>
</Grid>
</Form>
)}
</Formik>
webserver/src/ProcessedDataBucket.jsx
+25 -45
View File
@@ -20,21 +20,22 @@ export class ProcessedDataBucket {
if (typeof this.teamData[doc.team_number] === "undefined") {
this.teamData[doc.team_number] = {
team_number: doc.team_number,
games_played: 0,
matched_played: 0,
data_sets: {
upper_hub_auto: [],
lower_hub_auto: [],
upper_hub_teleop: [],
lower_hub_teleop: [],
match_points: [],
auto_points: [],
teleop_hub_points: [],
climb_points: [],
total_match_points: [],
},
climb_counts: [0, 0, 0, 0, 0],
// climbs_none: 0,
// climbs_low: 0,
// climbs_mid: 0,
// climbs_high: 0,
// climbs_transverse: 0,
points_average: 0,
average_auto_points: 0,
average_teleop_hub_points: 0,
average_climb_points: 0,
average_total_match_points: 0,
num_disables: 0,
num_flips: 0,
fouls: 0,
@@ -46,47 +47,24 @@ export class ProcessedDataBucket {
//add this game's data to the respective team data:
let thisTeamData = this.teamData[doc.team_number];
thisTeamData.games_played++;
thisTeamData.matched_played++;
let match_points =
(parseInt(doc.taxi_auto) ? 2 : 0) +
parseInt(doc.upper_hub_auto) * 4 +
parseInt(doc.lower_hub_auto) * 2 +
parseInt(doc.upper_hub_teleop) * 2 +
parseInt(doc.lower_hub_teleop) * 1 +
(parseInt(doc.climb_level) == 0 ? 4 : 0) +
(parseInt(doc.climb_level) == 1 ? 6 : 0) +
(parseInt(doc.climb_level) == 2 ? 10 : 0) +
(parseInt(doc.climb_level) == 3 ? 15 : 0);
let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0);
let total_match_points = auto_points + teleop_hub_points + climb_points;
//data sets
thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto));
thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop));
thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop));
thisTeamData.data_sets.match_points.push(match_points);
thisTeamData.data_sets.auto_points.push(auto_points);
thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points);
thisTeamData.data_sets.climb_points.push(climb_points);
thisTeamData.data_sets.total_match_points.push(total_match_points);
//climb data
thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
// switch (parseInt(doc.climb_level)) {
// case 0:
// thisTeamData.climbs_none++;
// break;
// case 1:
// thisTeamData.climbs_low++;
// break;
// case 2:
// thisTeamData.climbs_mid++;
// break;
// case 3:
// thisTeamData.climbs_high++;
// break;
// case 4:
// thisTeamData.climbs_transverse++;
// break;
// default:
// console.error("Invalid Climb Level (how did this even happen lol?): " + doc.climb_level);
// break;
// }
//misc data
thisTeamData.num_disables += doc.disabled ? 1 : 0;
@@ -95,13 +73,15 @@ export class ProcessedDataBucket {
thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
thisTeamData.red_cards += parseInt(doc.red_cards);
thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
//sum of all points in the match points data set for this team
let total_points = thisTeamData.data_sets.match_points.reduce(function (accum, current) {
return accum + current;
}, 0);
thisTeamData.points_average = total_points / thisTeamData.games_played;
//function for getting the sum of an array, use in reduce function of array
const sum = (accum, current) => accum + current;
thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played;
});
console.log(this.teamData);
})
.catch((err) => {
console.log("Error while processing data!");
webserver/src/components/InputNumberField.jsx
+5 -19
View File
@@ -1,38 +1,25 @@
import React from "react";
import { Formik, FastField, 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";
import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@mui/material";
import { AddCircleOutline, RemoveCircleOutline } from "@mui/icons-material";
const InputNumberField = (props) => {
const { values, setFieldValue } = useFormikContext();
return (
<FastField
type="number"
//https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
type="tel" //telephone numbers because 'number' creates unwanted arrows
as={TextField}
name={props.name}
label={props.label}
InputProps={{
style: { fontSize: 40, "maxWidth": 300 },
style: { fontSize: 40, maxWidth: 300 },
startAdornment: (
<InputAdornment position="start">
<IconButton
onClick={() => {
setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0));
}}
style={{ width: '96px', height: '96px', padding: '24px' }}
touch="true"
>
<RemoveCircleOutline style={{ fontSize: 50 }} />
@@ -45,7 +32,6 @@ const InputNumberField = (props) => {
onClick={() => {
setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0));
}}
style={{ width: '96px', height: '96px', padding: '0' }}
touch="true"
>
<AddCircleOutline style={{ fontSize: 50 }} />
webserver/src/components/Navigation/Drawer/SideDrawer.css
+8
View File
@@ -1,5 +1,6 @@
.side_drawer {
position: fixed;
top: 56px;
height: 100%;
width: 100%;
background: #009954;
@@ -18,6 +19,7 @@
.side_drawer ul {
/* height: 100%; */
width: 100%;
list-style: none;
display: flex;
flex-direction: column;
@@ -26,6 +28,11 @@
.side_drawer li {
margin: 0.5rem 0;
/* border-top: 1px solid #ddd; */
}
.side_drawer li:first-child {
/* border-top: 0; */
}
.side_drawer a {
@@ -36,6 +43,7 @@
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 1000%;
max-width: 100%;
}
.side_drawer a:hover,
webserver/src/components/Navigation/Navigation.css
+1 -1
View File
@@ -4,5 +4,5 @@
top: 0;
left: 0;
width: 100%;
z-index: 1;
z-index: 2;
}