ScoutingApp2022/webserver/src/Pages/InputPage.jsx

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";

const InputPage = () => {
  const localdb = useLocalDb();
  return (
    <div>
      <br />
      <Formik
        initialValues={{
          team_number: "",
          match_number: "",
          team_abilities_well: "",
          team_abilities_struggle: "",
          team_abilities_cant: "",
          fouls: "0",
          fouls_tech: "0",
          flipped: false,
          red_cards: "0",
          yellow_cards: "0",
          disabled: false,
          taxi_auto: false,
          upper_hub_auto: "0",
          lower_hub_auto: "0",
          upper_hub_teleop: "0",
          lower_hub_teleop: "0",
          climb_level: "",
          alliance: "",
          defence: "0",
          disabled: false,
        }}
        validateOnChange="false"
        onSubmit={(values, { setSubmitting, resetForm }) => {
          setTimeout(() => {
            localdb
              .put({
                _id: new Date().toISOString(),
                ...values,
              })
              .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(); //Hah tobad
            setSubmitting(false);
          }, 400);
        }}
      >
        {({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
          <Form>
            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
              <Grid item>
                <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" />
                  </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>
                <FormControl component="fieldset">
                  <FormLabel component="legend">Climbing</FormLabel>
                  <RadioGroup aria-label="Climbing" name="climb_level" row>
                    <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="0" />} label="None" />
                    <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="1" />} label="Low" />
                    <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="2" />} label="Mid" />
                    <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="3" />} label="High" />
                    <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>
                <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" />
                  </RadioGroup>
                </FormControl>
              </Grid>
              <Grid item>
                <FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" />
              </Grid>
            </Grid>
            <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>
    </div>
  );
};

export default InputPage;