updated inputpage

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "prettier.printWidth": 400,
+    "prettier.semi": false,
+  "prettier.singleQuote": true
+  }
+  

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "prettier.configPath": "${workspaceFolder}/.prettierrc.json"
+}

webserver/src/App.jsx

@@ -19,7 +19,7 @@ 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";
+import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
 
 
 
@@ -30,22 +30,30 @@ function App() {
     palette: {
       type: "dark",
     },
+    typography: {
+      fontSize: 18
+    }
   });
+  const styles = {
+    bigbution: {
+
+    }
+  }
   return (
     <div className="App">
       <ThemeProvider theme={darkTheme}>
-      <DbProvider>
+        <DbProvider>
-        <Router>
+          <Router>
-          <Navigation />
+            <Navigation />
-          <Routes>
+            <Routes>
-            <Route path="/" element={<WelcomePage />} />
+              <Route path="/" element={<WelcomePage />} />
-            <Route path="/Dashboard" element={<DashboardPage />} />
+              <Route path="/Dashboard" element={<DashboardPage />} />
-            <Route path="/Input" element={<InputPage />} />
+              <Route path="/Input" element={<InputPage />} />
-            <Route path="/404" element={<NotFoundPage />} />
+              <Route path="/404" element={<NotFoundPage />} />
-            <Route path="*" element={<NotFoundPage />} />
+              <Route path="*" element={<NotFoundPage />} />
-          </Routes>
+            </Routes>
-        </Router>
+          </Router>
-      </DbProvider>
+        </DbProvider>
       </ThemeProvider>
     </div>
   );

webserver/src/DbContext.jsx

@@ -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",
@@ -40,10 +40,12 @@ export function DbProvider({ children }) {
       live: true,
       retry: true,
     })
-    .on("change", function (change) {})
+    .on("change", function (change) { })
-    .on("paused", function (info) {})
+    .on("paused", function (info) { })
-    .on("active", 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

@@ -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

@@ -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

@@ -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: "",
+          defence: ""
-          notes_struggle: "",
-          notes_cant: "",
         }}
         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>
+
+          <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,44 +259,117 @@ const InputPage = () => {
                 </FormControl>
               </Grid>
             </Grid>
-            <hr />
+
             <div />
             <Grid
               container
               direction="row"
               justify="center"
               alignItems="flex-start"
-              spacing={3}
+              spacing={3}>
-            >
               <Grid item>
-                <Grid item>
+                <Grid
-                  <InputNumberField name="fouls" label="Fouls" />{" "}
+                  container
-                </Grid>{" "}
+                  direction="column"
-                <Grid item>
+                  justify="flex-start"
-                  <InputNumberField name="fouls_tech" label="Tech Fouls" />{" "}
+                  alignItems="center"
-                </Grid>{" "}
+                  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 item>
+                <Grid
-                  <InputNumberField name="red_cards" label="Red Cards" />{" "}
+                  container
-                </Grid>{" "}
+                  direction="column"
-                <Grid item>
+                  justify="flex-start"
-                  <InputNumberField name="yellow_cards" label="Yellow Cards" />{" "}
+                  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 item>
+                    {/* <InputNumberField name="disables" label="Disables" />{" "} */}
+                  </Grid>{" "}
                 </Grid>
-                <Grid item>
-                  {/* <InputNumberField name="disables" label="Disables" />{" "} */}
-                </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">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

@@ -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({
+                setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0));
-                  ...values,
-                  [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({
+                setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0));
-                  ...values,
-                  [props.name]: parseInt(values[props.name]) + 1,
-                });
               }}
+              iconStyle={{ width: '100px', height: '100px' }}
+              style={{ width: '96px', height: '96px', padding: '0' }}
+              touch={true}
+              size="large"
+
             >
-              <AddCircleOutline />
+              <AddCircleOutline style={{ fontSize: 50 }} />
             </IconButton>
           </InputAdornment>
         ),