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

updated inputpage

Browse Source
This commit is contained in:
Aquaticholic
2022-01-29 14:05:28 +00:00
parent 87bebf8ae6
commit 001c0cb1a0
11 changed files with 263 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc.json
+6
View File
@@ -0,0 +1,6 @@
{
"prettier.printWidth": 400,
"prettier.semi": false,
"prettier.singleQuote": true
}
.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"prettier.configPath": "${workspaceFolder}/.prettierrc.json"
}
couchdb/data/_dbs.couch
BIN
View File
Binary file not shown.
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/src/App.jsx
+8
View File
@@ -30,7 +30,15 @@ function App() {
palette: {
type: "dark",
},
typography: {
fontSize: 18
}
});
const styles = {
bigbution: {
}
}
return (
<div className="App">
<ThemeProvider theme={darkTheme}>
webserver/src/DbContext.jsx
+4 -2
View File
@@ -16,7 +16,7 @@ export function DbProvider({ children }) {
const [localdb, setLocaldb] = useState(new PouchDB("testdata"));
//used in development server
const [remotedb, setRemotedb] = useState(
new PouchDB(window.location.hostname + ":5984/testdata", {
new PouchDB("http://" + window.location.hostname + ":5984/testdata", {
skip_setup: true,
auth: {
username: "scouting",
@@ -43,7 +43,9 @@ export function DbProvider({ children }) {
.on("change", function (change) { })
.on("paused", function (info) { })
.on("active", function (info) { })
.on("error", function (err) {});
.on("error", function (err) {
console.error(err);
});
return (
<LocalDbContext.Provider value={localdb}>
webserver/src/Pages/DashboardPage/ProcessedDataContext.jsx
+85
View File
@@ -0,0 +1,85 @@
import React, { useContext, useState } from "react";
import { useLocalDb } from "../../DbContext";
const ProcessedDataContext = React.createContext();
export function useProcessedData() {
return useContext(processedDataContext);
}
export function ProcessedDataProvider({ children }) {
const [processedData, setProcessedData] = useState(
{
teamData: null,
matchData: null,
updateData: function () {
const localdb = useLocalDb();
// let processed_data = {};
localdb
.allDocs({
include_docs: true,
})
.then((result) => {
console.log(result);
result.rows.forEach((dbentry) => {
let doc = dbentry.doc;
console.log(doc);
//if there's no processed data on a team yet, create a default data entry
if (typeof teamData[doc.team_name] === "undefined") {
teamData[doc.team_name] = {
team_name: doc.team_name,
alliance: doc.alliance,
games_played: 0,
climbs_none: 0,
climbs_low: 0,
climbs_mid: 0,
climbs_high: 0,
climbs_transverse: 0,
points: 0,
point_average: 0,
num_disables: 0,
disables_average: 0,
num_flips: 0,
flips_average: 0,
fouls: 0,
fouls_average: 0,
fouls_tech: 0,
fouls_tech_average: 0,
};
}
let thisTeamData = teamData[doc.team_name];
console.log(thisTeamData);
let new_team_data = {
...team_data,
games_played: team_data.games_played + 1,
num_climbs: team_data.num_climbs + (doc.climb == true ? 1 : 0),
num_disables: team_data.num_disables + (doc.disabled == true ? 1 : 0),
num_flips: team_data.num_flips + (doc.flipped_over == true ? 1 : 0),
fouls: team_data.fouls + parseInt(doc.fouls),
fouls_tech: team_data.fouls_tech + parseInt(doc.fouls_tech),
inner_port: team_data.inner_port + parseInt(doc.inner_port),
outer_port: team_data.outer_port + parseInt(doc.outer_port),
lower_port: team_data.lower_port + parseInt(doc.lower_port),
};
console.log(new_team_data);
});
})
.catch((err) => {
console.log("Error Fetching Docs from Database!");
console.log(err);
});
let datasets = [
{
data: [],
},
];
}
}
);
//https://react-charts.js.org/examples/column
return (
<ProcessedDataContext.ProcessedDataProvider value={processedData}>
{children}
</ProcessedDataContext.ProcessedDataProvider>
);
};
webserver/src/Pages/InputPage.css
+13
View File
@@ -0,0 +1,13 @@
.maxwidth {
display: block;
/* margin-left: auto;
margin-right: auto; */
width: 100%;
text-align: center;
margin: auto;
max-width: fit-content;
/* max-width: 100% */
}
.smallfeild {
max-width: 25%;
}
webserver/src/Pages/InputPage.jsx
+98 -28
View File
@@ -1,5 +1,6 @@
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";
@@ -27,7 +28,8 @@ const InputPage = () => {
const localdb = useLocalDb();
console.log(localdb);
return (
<div>
<div class="maxwidth">
<br />
<Formik
initialValues={{
team_number: "",
@@ -47,9 +49,7 @@ const InputPage = () => {
lower_hub: "0",
climb_level: "",
alliance: "",
notes_good: "",
notes_struggle: "",
notes_cant: "",
defence: ""
}}
onSubmit={(values, { setSubmitting, resetForm }) => {
setTimeout(() => {
@@ -61,17 +61,17 @@ const InputPage = () => {
.then((result) => {
alert("Input Saved Successfully!");
console.log(result);
console.log(localdb);
})
.catch((err) => {
console.log("Failed To Save Input!");
alert(err);
});
// alert(JSON.stringify(values, null, 2));
resetForm();
// resetForm(); //Hah tobad
setSubmitting(false);
}, 400);
}}
>
}}>
{({
values,
setValues,
@@ -82,14 +82,14 @@ const InputPage = () => {
handleSubmit,
isSubmitting,
}) => (
<Form >
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Grid item>
{" "}
<Field
@@ -119,9 +119,11 @@ const InputPage = () => {
type="radio"
name="alliance"
value="red"
style={{ fontSize: 50 }}
/>
}
label="Red"
/>
<FormControlLabel
control={
@@ -138,23 +140,21 @@ const InputPage = () => {
</FormControl>
</Grid>
</Grid>
<hr />
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Grid item>
<Grid
container
direction="column"
justify="flex-start"
alignItems="center"
spacing={3}
>
spacing={3}>
<Grid item>
<InputNumberField
name="upper_hub_auto"
@@ -176,11 +176,10 @@ const InputPage = () => {
direction="column"
justify="flex-start"
alignItems="center"
spacing={3}
>
spacing={3}>
<Grid item>
{" "}
<InputNumberField name="upper_hub" label="Lower Hub" />{" "}
<InputNumberField name="upper_hub" label="Upper Hub" />{" "}
</Grid>
<Grid item>
{" "}
@@ -189,15 +188,14 @@ const InputPage = () => {
</Grid>{" "}
</Grid>
</Grid>
<hr />
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Grid item>
<FormControl component="fieldset">
<FormLabel component="legend">Climbing</FormLabel>
@@ -261,16 +259,21 @@ const InputPage = () => {
</FormControl>
</Grid>
</Grid>
<hr />
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Grid item>
<Grid
container
direction="column"
justify="flex-start"
alignItems="center"
spacing={3}>
<Grid item>
<InputNumberField name="fouls" label="Fouls" />{" "}
</Grid>{" "}
@@ -278,7 +281,14 @@ const InputPage = () => {
<InputNumberField name="fouls_tech" label="Tech Fouls" />{" "}
</Grid>{" "}
</Grid>
</Grid>
<Grid item>
<Grid
container
direction="column"
justify="flex-start"
alignItems="center"
spacing={3}>
<Grid item>
<InputNumberField name="red_cards" label="Red Cards" />{" "}
</Grid>{" "}
@@ -290,15 +300,76 @@ const InputPage = () => {
</Grid>{" "}
</Grid>
</Grid>
<hr />
</Grid>
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Grid item>
<FormControl component="fieldset">
<FormLabel component="legend">Defense</FormLabel>
<RadioGroup aria-label="Defense" name="defence" row>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="defence"
value="0"
/>
}
label="N/A"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="defence"
value="1"
/>
}
label="Poor"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="defence"
value="2"
/>
}
label="Good"
/>
<FormControlLabel
control={
<Field
as={Radio}
type="radio"
name="defence"
value="3"
/>
}
label="Exceptional"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
<div />
<Grid
container
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}>
<Grid item>
{" "}
<Field
@@ -346,8 +417,7 @@ const InputPage = () => {
direction="row"
justify="center"
alignItems="flex-start"
spacing={3}
>
spacing={3}>
<Button type="submit" disabled={isSubmitting}>
{" "}
Submit{" "}
webserver/src/components/InputNumberField.jsx
+14 -11
View File
@@ -17,7 +17,7 @@ import {
import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
const InputNumberField = (props) => {
const { values, setValues } = useFormikContext();
const { values, setFieldValue } = useFormikContext();
return (
<Field
type="number"
@@ -25,17 +25,18 @@ const InputNumberField = (props) => {
name={props.name}
label={props.label}
InputProps={{
style: { fontSize: 40, "max-width": 300 },
startAdornment: (
<InputAdornment position="start">
<IconButton
onClick={() => {
setValues({
...values,
[props.name]: Math.max(parseInt(values[props.name]) - 1, 0),
});
setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0));
}}
iconStyle={{ width: '48px', height: '48px' }}
style={{ width: '96px', height: '96px', padding: '24px' }}
touch={true}
>
<RemoveCircleOutline />
<RemoveCircleOutline style={{ fontSize: 50 }} />
</IconButton>
</InputAdornment>
),
@@ -43,13 +44,15 @@ const InputNumberField = (props) => {
<InputAdornment position="end">
<IconButton
onClick={() => {
setValues({
...values,
[props.name]: parseInt(values[props.name]) + 1,
});
setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0));
}}
iconStyle={{ width: '100px', height: '100px' }}
style={{ width: '96px', height: '96px', padding: '0' }}
touch={true}
size="large"
>
<AddCircleOutline />
<AddCircleOutline style={{ fontSize: 50 }} />
</IconButton>
</InputAdornment>
),