mirror of
https://github.com/Team4388/ScoutingApp2022.git
synced 2026-06-09 00:38:03 -06:00
input fixed, started data grid
This commit is contained in:
Evan Lanham
@@ -9,17 +9,20 @@
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react-apexcharts": "^1.3.9",
|
||||
"formik": "^2.2.9",
|
||||
"pouchdb": "^7.2.2",
|
||||
"react": "^17.0.2",
|
||||
"react-chartjs-2": "^4.0.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router": "^6.2.1",
|
||||
"react-router-dom": "^6.2.1",
|
||||
"react-scripts": "5.0.0",
|
||||
"web-vitals": "^2.1.3",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@mui/material": "^5.5.0",
|
||||
"@mui/icons-material": "^5.5.0",
|
||||
"@emotion/react": "^11.8.2",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/x-data-grid": "^5.6.1",
|
||||
"workbox-background-sync": "^5.1.4",
|
||||
"workbox-broadcast-update": "^5.1.4",
|
||||
"workbox-cacheable-response": "^5.1.4",
|
||||
@@ -32,7 +35,6 @@
|
||||
"workbox-routing": "^5.1.4",
|
||||
"workbox-strategies": "^5.1.4",
|
||||
"workbox-streams": "^5.1.4"
|
||||
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
+14
-16
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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!");
|
||||
|
||||
@@ -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 }} />
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user