this code is better than methamphetamines

webserver/src/Pages/DevPage.jsx

@@ -0,0 +1,107 @@
+import React, { useCallback } from "react";
+import { Formik, FastField, Form, useFormikContext } from "formik";
+import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, NotesAdornment, Box } from "@mui/material";
+import { useLocalDb, useRemoteDb } from "../DbContext";
+import { useProcessedDataBucket } from "../ProcessedDataBucketContext";
+import { getProcessedDataBucket, updateProcessedDataBucket } from "../ProcessedDataBucket";
+import Schedule from "../components/Schedule";
+import superagent from "superagent";
+
+const DevPage = () => {
+  let { localdb, setLocaldb } = useLocalDb();
+  const putScheduleDoc = useCallback(
+    (doc) => {
+      localdb.save({
+        $id: "schedule",
+        type: "schedule",
+        matches: doc,
+      });
+    },
+    [localdb]
+  );
+  const putTeamListDoc = useCallback(
+    (doc) => {
+      localdb.save({
+        $id: "team_list",
+        type: "team_list",
+        teams: doc,
+      });
+    },
+    [localdb]
+  );
+  const processScheduleData = (data) => {
+    data.sort((a, b) => a.predicted_time - b.predicted_time);
+    let ret = [];
+    console.log(data);
+    for (let match of data) {
+      // console.log(match);
+      let red = [];
+      let blue = [];
+
+      for (let team_key of match.alliances.red.team_keys) {
+        red.push(team_key.substring(3));
+      }
+      for (let team_key of match.alliances.blue.team_keys) {
+        blue.push(team_key.substring(3));
+      }
+
+      ret.push({
+        match_id: match.key.split("_")[1],
+        // ret[match.key.split("_")[1]] = {
+        // ret["yo"] = {
+        red: red,
+        blue: blue,
+        score_breakdown: match.score_breakdown,
+      });
+      // console.log(match);
+    }
+    // console.log(ret);
+    return ret;
+  };
+
+  const processTeamData = (data) => {
+    data.sort((a, b) => a.key > b.key);
+    let ret = {};
+    for (let team of data) {
+      ret[team.team_number] = {
+        nickname: team.nickname,
+        number: team.team_number,
+        website: team.website,
+      };
+    }
+    return ret;
+  };
+
+  const updateScheduleDoc = useCallback(() => {
+    //gets the matches list from the blue alliance api
+    superagent
+      .get("https://www.thebluealliance.com/api/v3" + "/event/2022code/matches")
+      // .get("https://www.thebluealliance.com/api/v3" + "/event/2022utwv/matches")
+      // .get("https://www.thebluealliance.com/api/v3" + "/event/2022cala/matches")
+      // .get("https://www.thebluealliance.com/api/v3" + "/events/2022/keys")
+      .set("X-TBA-Auth-Key", "6aXgVYCAcyy4O7FwCGLqj5ATcima5k25smssLqUuHAHTCvGtCWXX7aoM9xNWfaSm")
+      .end((err, res) => {
+        //parse the resulting json and send it to the db
+        putScheduleDoc(processScheduleData(JSON.parse(res.text)));
+      });
+    superagent
+      .get("https://www.thebluealliance.com/api/v3" + "/event/2022utwv/teams")
+      .set("X-TBA-Auth-Key", "6aXgVYCAcyy4O7FwCGLqj5ATcima5k25smssLqUuHAHTCvGtCWXX7aoM9xNWfaSm")
+      .end((err, res) => {
+        //parse the resulting json and send it to the db
+        putTeamListDoc(processTeamData(JSON.parse(res.text)));
+      });
+  });
+
+  const cleanDB = useCallback(() => {
+    localdb.cleanup();
+  }, [localdb]);
+  return (
+    <Box>
+      <Button onClick={updateScheduleDoc}>Update Matches Doc</Button>
+      <Button onClick={cleanDB}>Cleanup DB</Button>
+    </Box>
+  );
+};
+
+export default DevPage;

webserver/src/Pages/InputPage.jsx

@@ -33,6 +33,7 @@ const InputPage = () => {
         .put({
           // _id: new Date().toISOString(),
           _id: "match_" + values.match_number + "_team_" + values.team_number,
+          _rev: new Date().toISOString(),
           type: "match",
           ...values,
         })

webserver/src/Pages/SchedulePage.jsx

@@ -0,0 +1,16 @@
+import React, { useCallback } from "react";
+import { Formik, FastField, Form, useFormikContext } from "formik";
+import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, NotesAdornment, Box } from "@mui/material";
+import { useProcessedDataBucket } from "../ProcessedDataBucketContext";
+import { getProcessedDataBucket, updateProcessedDataBucket } from "../ProcessedDataBucket";
+import Schedule from "../components/Schedule";
+
+const SchedulePage = () => {
+  return (
+    <Box>
+      <Schedule />
+    </Box>
+  );
+};
+
+export default SchedulePage;

webserver/src/Pages/TeamListPage.jsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useState, useEffect } from "react";
+import { Formik, FastField, Form, useFormikContext } from "formik";
+import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, NotesAdornment, Box } from "@mui/material";
+import { useProcessedDataBucket } from "../ProcessedDataBucketContext";
+import { getProcessedDataBucket, updateProcessedDataBucket } from "../ProcessedDataBucket";
+import { useLocalDb } from "../DbContext";
+import { Link } from "react-router-dom";
+
+const TeamListPage = () => {
+  let { localdb, setLocaldb } = useLocalDb();
+  //   let
+
+  let panel_sx = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    bgcolor: "background.paper",
+    p: 2,
+    m: 1,
+    gap: 2,
+    maxWidth: "fit-content",
+    borderRadius: "10px",
+    boxShadow: 7,
+  };
+  const [teamList, setTeamList] = useState(null);
+
+  useEffect(() => {
+    localdb.all().then((res) => {
+      // console.log(res["schedule"]);
+      setTeamList(res["team_list"]);
+    });
+  }, [setTeamList]);
+  if (teamList == null) return <div />;
+  console.log("test");
+  console.log(teamList);
+
+  const TeamNumberComponent = (props) => {
+    return (
+      <Link to="/Team" state={{ team: props.number }} style={{ color: "inherit" }}>
+        <h3>{props.number}</h3>
+      </Link>
+    );
+  };
+
+  const teamsListComponents = Object.keys(teamList.teams).map((item, index) => {
+    return (
+      <Box key={index}>
+        <TeamNumberComponent number={item} />
+      </Box>
+    );
+  });
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+      <Box sx={panel_sx}>{teamsListComponents}</Box>
+    </Box>
+  );
+};
+export default TeamListPage;

webserver/src/Pages/TeamPage.jsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useLocalDb, useRemoteDb } from "../DbContext";
+import { Formik, FastField, Form, useFormikContext } from "formik";
+import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, NotesAdornment, Box } from "@mui/material";
+import { useProcessedDataBucket } from "../ProcessedDataBucketContext";
+import { getProcessedDataBucket, updateProcessedDataBucket } from "../ProcessedDataBucket";
+import { useLocation } from "react-router-dom";
+
+const TeamPage = () => {
+  let { localdb, setLocaldb } = useLocalDb();
+  let { remotedb } = useRemoteDb();
+  const location = useLocation();
+  const { team } = location.state;
+  console.log(team);
+
+  let panel_sx = {
+    display: "flex",
+    flexDirection: { xs: "column", md: "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,
+  };
+
+  const [oldDoc, setOldDoc] = useState(null);
+  const onSubmit = useCallback(
+    // (old_doc, new_doc) => {
+    (values, { setSubmitting, resetForm }) => {
+      localdb.on("update", console.log);
+      localdb
+        .saveChanges(oldDoc, values)
+        .then((result) => {
+          alert("Saved Successfully!");
+          setSubmitting(false);
+        })
+        .then(localdb.sync(remotedb))
+        .catch(console.log);
+    },
+    [localdb, oldDoc]
+  );
+
+  useEffect(() => {
+    localdb.all().then((res) => {
+      let old_doc = {
+        $id: team,
+        weight: "",
+        drive_train: "",
+        drive_motors: "",
+        wheels: "",
+        climb_level: "",
+        misc_design: "",
+      };
+      if (typeof res[team] !== "undefined") {
+        old_doc = { ...res[team] };
+      }
+      setOldDoc(old_doc);
+    });
+  }, [setOldDoc]);
+
+  if (oldDoc == null) return null;
+  console.log(oldDoc);
+  return (
+    <div>
+      <Formik initialValues={oldDoc} onSubmit={onSubmit}>
+        {({ isSubmitting }) => (
+          <Form>
+            <Box sx={panel_sx}>
+              <FastField type="input" as={TextField} name="weight" label="Weight" />
+              <FastField type="input" as={TextField} name="drive_train" label="Drive Train Type" />
+              <FastField type="input" as={TextField} name="drive_motors" label="# of Drive Motors" />
+              <FastField type="input" as={TextField} name="wheels" label="Wheels" />
+              <FastField type="input" as={TextField} name="climb_level" label="Climb Level" />
+              <FastField type="input" as={TextField} name="misc_design" label="Misc" />
+            </Box>
+            <Box sx={{ ...panel_sx, display: "flex", flexDirection: "column" }}>
+              <Button type="submit" disabled={isSubmitting}>
+                Save
+              </Button>
+            </Box>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+export default TeamPage;