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
couchdb/data/shards/00000000-7fffffff/testdata.1643440069.couch
BIN
View File
Binary file not shown.
couchdb/data/shards/80000000-ffffffff/testdata.1643440069.couch
BIN
View File
Binary file not shown.
webserver/package.json
+6 -4
View File
@@ -9,17 +9,20 @@
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react-apexcharts": "^1.3.9",
"formik": "^2.2.9", "formik": "^2.2.9",
"pouchdb": "^7.2.2", "pouchdb": "^7.2.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"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", "@mui/material": "^5.5.0",
"@material-ui/icons": "^4.11.2", "@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-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4", "workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4", "workbox-cacheable-response": "^5.1.4",
@@ -32,7 +35,6 @@
"workbox-routing": "^5.1.4", "workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4", "workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4" "workbox-streams": "^5.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
webserver/src/App.jsx
+14 -16
View File
@@ -1,13 +1,7 @@
import logo from "./logo.svg"; import logo from "./logo.svg";
import Navigation from "./components/Navigation/Navigation"; import Navigation from "./components/Navigation/Navigation";
import { DbProvider } from "./DbContext"; import { DbProvider } from "./DbContext";
import { import { BrowserRouter as Router, Routes, Route, Link, Navigate } from "react-router-dom";
BrowserRouter as Router,
Routes,
Route,
Link,
Navigate,
} from "react-router-dom";
import "./App.css"; import "./App.css";
// const Cushion = require('cushiondb-client'); // const Cushion = require('cushiondb-client');
@@ -16,23 +10,27 @@ 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 { createTheme, ThemeProvider } from '@material-ui/core/styles' import { createTheme, ThemeProvider } from "@mui/material";
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 { ProcessedDataBucketProvider } from "./ProcessedDataBucketContext"; import { ProcessedDataBucketProvider } from "./ProcessedDataBucketContext";
function App() { function App() {
const darkTheme = createTheme({ const darkTheme = createTheme({
// Theme settings // Theme settings
palette: { palette: {
type: "dark", mode: "dark",
background: {
paper: "#101515",
},
text: {
// primary: "#edf8f3",
// secondary: "#acd3bf",
},
red_alliance: "#ec2e63",
blue_alliance: "#2d74eb",
}, },
typography: { typography: {
fontSize: 18 fontSize: 18,
} },
}); });
return ( return (
<ThemeProvider theme={darkTheme}> <ThemeProvider theme={darkTheme}>
webserver/src/Pages/DashboardPage/DashboardPage.jsx
+55 -5
View File
@@ -1,8 +1,9 @@
import React from "react"; import React from "react";
import "chart.js/auto";
import { useLocalDb } from "../../DbContext"; import { useLocalDb } from "../../DbContext";
import { Pie, Bar, Chart } from "react-chartjs-2";
import { useProcessedDataBucket } from "../../ProcessedDataBucketContext"; import { useProcessedDataBucket } from "../../ProcessedDataBucketContext";
import Chart from "react-apexcharts";
import { DataGrid } from "@mui/x-data-grid";
import { Box } from "@mui/material";
const DashboardPage = () => { const DashboardPage = () => {
//https://react-charts.js.org/examples/column //https://react-charts.js.org/examples/column
@@ -16,15 +17,64 @@ const DashboardPage = () => {
{ {
label: "Climbs", label: "Climbs",
data: pdb.teamData[4388].climb_counts, 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 ( return (
<div> <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> </div>
); );
}; };
webserver/src/Pages/InputPage.jsx
+52 -84
View File
@@ -1,18 +1,25 @@
import React from "react"; import React from "react";
import { useLocalDb } from "../DbContext"; import { useLocalDb } from "../DbContext";
import "./InputPage.css"; 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 { Formik, FastField, Form } from "formik";
import InputNumberField from "../components/InputNumberField.jsx"; 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 { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material";
import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
const InputPage = () => { const InputPage = () => {
const localdb = useLocalDb(); 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 ( return (
<div> <div>
<br /> <br />
@@ -64,49 +71,31 @@ const InputPage = () => {
> >
{({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( {({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form> <Form>
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}> <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
<Grid item> <Box sx={panel_sx}>
<FastField type="input" as={TextField} name="team_number" label="Team #" /> <FastField type="input" as={TextField} name="team_number" label="Team #" />
</Grid>
<Grid item>
<FastField type="input" as={TextField} name="match_number" label="Match Number" /> <FastField type="input" as={TextField} name="match_number" label="Match Number" />
</Grid>
<Grid item>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormLabel component="legend">Alliance</FormLabel> <FormLabel component="legend">Alliance</FormLabel>
<RadioGroup aria-label="Alliance" name="alliance" row> <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="red" sx={{ "&, &.Mui-checked": { color: "red_alliance" } }} />} sx={{ color: "red_alliance" }} 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="blue" sx={{ "&, &.Mui-checked": { color: "blue_alliance" } }} />} sx={{ color: "blue_alliance" }} label="Blue" />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Box>
</Grid>
<div /> <Box sx={panel_sx}>
<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" /> <InputNumberField name="upper_hub_auto" label="Upper Hub Auto" />
</Grid>
<Grid item>
<InputNumberField name="lower_hub_auto" label="Lower Hub Auto" /> <InputNumberField name="lower_hub_auto" label="Lower Hub Auto" />
</Grid> <FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="taxi_auto" />} label="Auto Taxi" />
</Grid> </Box>
</Grid>
<Grid item> <Box sx={panel_sx}>
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" /> <InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
</Grid>
<Grid item>
<InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" /> <InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
</Grid> </Box>
</Grid>
</Grid> <Box sx={panel_sx}>
</Grid>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormLabel component="legend">Climbing</FormLabel> <FormLabel component="legend">Climbing</FormLabel>
<RadioGroup aria-label="Climbing" name="climb_level" row> <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" /> <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="4" />} label="Traversal" />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Box>
</Grid>
<div /> <Box sx={panel_sx}>
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}> <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<Grid item>
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="fouls" label="Fouls" /> <InputNumberField name="fouls" label="Fouls" />
</Grid>
<Grid item>
<InputNumberField name="fouls_tech" label="Tech Fouls" /> <InputNumberField name="fouls_tech" label="Tech Fouls" />
</Grid> </Box>
</Grid> <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
</Grid>
<Grid item>
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
<Grid item>
<InputNumberField name="red_cards" label="Red Cards" /> <InputNumberField name="red_cards" label="Red Cards" />
</Grid>
<Grid item>
<InputNumberField name="yellow_cards" label="Yellow Cards" /> <InputNumberField name="yellow_cards" label="Yellow Cards" />
</Grid> </Box>
</Grid> </Box>
</Grid>
</Grid> <Box sx={panel_sx}>
<div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormLabel component="legend">Defense</FormLabel> <FormLabel component="legend">Defense</FormLabel>
<RadioGroup aria-label="Defense" name="defence" row> <RadioGroup aria-label="Defense" name="defence" row>
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="0" />} label="None" /> <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="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> </RadioGroup>
</FormControl> </FormControl>
</Grid>
<Grid item>
<FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" /> <FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" />
</Grid> </Box>
</Grid>
<div /> <Box sx={{ ...panel_sx, display: "flex", flexDirection: "column" }}>
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}> <h2>What they _______</h2>
<Grid item> <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="What they did Well" /> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="did well" />
</Grid> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="struggled with" />
<Grid item> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="can't do" />
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" /> </Box>
</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}> <Button type="submit" disabled={isSubmitting}>
Submit Submit
</Button> </Button>
</Grid> </Box>
</Box>
<div />
</Form> </Form>
)} )}
</Formik> </Formik>
webserver/src/ProcessedDataBucket.jsx
+25 -45
View File
@@ -20,21 +20,22 @@ export class ProcessedDataBucket {
if (typeof this.teamData[doc.team_number] === "undefined") { if (typeof this.teamData[doc.team_number] === "undefined") {
this.teamData[doc.team_number] = { this.teamData[doc.team_number] = {
team_number: doc.team_number, team_number: doc.team_number,
games_played: 0, matched_played: 0,
data_sets: { data_sets: {
upper_hub_auto: [], upper_hub_auto: [],
lower_hub_auto: [], lower_hub_auto: [],
upper_hub_teleop: [], upper_hub_teleop: [],
lower_hub_teleop: [], lower_hub_teleop: [],
match_points: [], auto_points: [],
teleop_hub_points: [],
climb_points: [],
total_match_points: [],
}, },
climb_counts: [0, 0, 0, 0, 0], climb_counts: [0, 0, 0, 0, 0],
// climbs_none: 0, average_auto_points: 0,
// climbs_low: 0, average_teleop_hub_points: 0,
// climbs_mid: 0, average_climb_points: 0,
// climbs_high: 0, average_total_match_points: 0,
// climbs_transverse: 0,
points_average: 0,
num_disables: 0, num_disables: 0,
num_flips: 0, num_flips: 0,
fouls: 0, fouls: 0,
@@ -46,47 +47,24 @@ export class ProcessedDataBucket {
//add this game's data to the respective team data: //add this game's data to the respective team data:
let thisTeamData = this.teamData[doc.team_number]; let thisTeamData = this.teamData[doc.team_number];
thisTeamData.games_played++; thisTeamData.matched_played++;
let match_points = let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
(parseInt(doc.taxi_auto) ? 2 : 0) + let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
parseInt(doc.upper_hub_auto) * 4 + 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);
parseInt(doc.lower_hub_auto) * 2 + let total_match_points = auto_points + teleop_hub_points + climb_points;
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);
//data sets //data sets
thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto)); 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.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop)); 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.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 //climb data
thisTeamData.climb_counts[parseInt(doc.climb_level)]++; 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 //misc data
thisTeamData.num_disables += doc.disabled ? 1 : 0; thisTeamData.num_disables += doc.disabled ? 1 : 0;
@@ -95,13 +73,15 @@ export class ProcessedDataBucket {
thisTeamData.fouls_tech += parseInt(doc.fouls_tech); thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
thisTeamData.red_cards += parseInt(doc.red_cards); thisTeamData.red_cards += parseInt(doc.red_cards);
thisTeamData.yellow_cards += parseInt(doc.yellow_cards); thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
//sum of all points in the match points data set for this team //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) { //function for getting the sum of an array, use in reduce function of array
return accum + current; const sum = (accum, current) => accum + current;
}, 0); thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.points_average = total_points / thisTeamData.games_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) => { .catch((err) => {
console.log("Error while processing data!"); console.log("Error while processing data!");
webserver/src/components/InputNumberField.jsx
+5 -19
View File
@@ -1,38 +1,25 @@
import React from "react"; import React from "react";
import { Formik, FastField, Form, useFormikContext } from "formik"; import { Formik, FastField, Form, useFormikContext } from "formik";
import { import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@mui/material";
TextField, import { AddCircleOutline, RemoveCircleOutline } from "@mui/icons-material";
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 InputNumberField = (props) => {
const { values, setFieldValue } = useFormikContext(); const { values, setFieldValue } = useFormikContext();
return ( return (
<FastField <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} as={TextField}
name={props.name} name={props.name}
label={props.label} label={props.label}
InputProps={{ InputProps={{
style: { fontSize: 40, "maxWidth": 300 }, style: { fontSize: 40, maxWidth: 300 },
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<IconButton <IconButton
onClick={() => { onClick={() => {
setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0)); setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0));
}} }}
style={{ width: '96px', height: '96px', padding: '24px' }}
touch="true" touch="true"
> >
<RemoveCircleOutline style={{ fontSize: 50 }} /> <RemoveCircleOutline style={{ fontSize: 50 }} />
@@ -45,7 +32,6 @@ const InputNumberField = (props) => {
onClick={() => { onClick={() => {
setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0)); setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0));
}} }}
style={{ width: '96px', height: '96px', padding: '0' }}
touch="true" touch="true"
> >
<AddCircleOutline style={{ fontSize: 50 }} /> <AddCircleOutline style={{ fontSize: 50 }} />
webserver/src/components/Navigation/Drawer/SideDrawer.css
+8
View File
@@ -1,5 +1,6 @@
.side_drawer { .side_drawer {
position: fixed; position: fixed;
top: 56px;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #009954; background: #009954;
@@ -18,6 +19,7 @@
.side_drawer ul { .side_drawer ul {
/* height: 100%; */ /* height: 100%; */
width: 100%;
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -26,6 +28,11 @@
.side_drawer li { .side_drawer li {
margin: 0.5rem 0; margin: 0.5rem 0;
/* border-top: 1px solid #ddd; */
}
.side_drawer li:first-child {
/* border-top: 0; */
} }
.side_drawer a { .side_drawer a {
@@ -36,6 +43,7 @@
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-right: 1000%; padding-right: 1000%;
max-width: 100%;
} }
.side_drawer a:hover, .side_drawer a:hover,
webserver/src/components/Navigation/Navigation.css
+1 -1
View File
@@ -4,5 +4,5 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 2;
} }