stupid men are the only ones worth knowing, anyways

webserver/src/DbContext.jsx

@@ -36,6 +36,7 @@ export function DbProvider({ children }) {
       },
     })
   );
+  localdb.deltaInit();
   localdb
     // .setMaxListeners(400)
     .sync(remotedb, {

webserver/src/Pages/InputPage.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { useLocalDb, useRemoteDb } from "../DbContext";
 import "./InputPage.css";
 import { Formik, FastField, Form } from "formik";
@@ -6,12 +6,9 @@ import InputNumberField from "../components/InputNumberField.jsx";
 import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material";
 import { useProcessedDataBucket } from "../ProcessedDataBucketContext";
 import { getProcessedDataBucket, updateProcessedDataBucket } from "../ProcessedDataBucket";
+import { useLocation } from "react-router-dom";
 
 const InputPage = () => {
-  let { localdb, setLocaldb } = useLocalDb();
-  let { remotedb, setRemotedb } = useRemoteDb();
-  const { processedDataBucket, setProcessedDataBucket } = useProcessedDataBucket();
-
   let panel_sx = {
     display: "flex",
     flexDirection: { xs: "column", sm: "row" },
@@ -26,47 +23,49 @@ const InputPage = () => {
     boxShadow: 7,
   };
 
+  let { localdb, setLocaldb } = useLocalDb();
+  let { remotedb, setRemotedb } = useRemoteDb();
+  const { processedDataBucket, setProcessedDataBucket } = useProcessedDataBucket();
+  const location = useLocation();
+
+  let id = "";
+  if (location.state != null) {
+    id = location.state.id;
+  }
+  console.log(id);
+
+  const [oldDocExists, setOldDocExists] = useState(false);
+  const [oldDoc, setOldDoc] = useState(null);
   const onSubmit = useCallback(
+    // (old_doc, new_doc) => {
     (values, { setSubmitting, resetForm }) => {
-      // setTimeout(() => {
+      if (oldDocExists && oldDoc.$id == values.$id) {
         localdb
-        .put({
+          .saveChanges(oldDoc, values)
-          // _id: new Date().toISOString(),
-          _id: "match_" + values.match_number + "_team_" + values.team_number,
-          _rev: new Date().toISOString(),
-          type: "match",
-          ...values,
-        })
           .then((result) => {
-          alert("Input Saved Successfully!");
+            alert("Changes Saved Successfully!");
-          console.log(result);
-          console.log(localdb);
-          localdb.replicate.to(remotedb, {
-            retry: true,
-          });
-        })
-        .catch((err) => {
-          console.log("Failed To Save Input!");
-          alert(err);
-        });
-      // alert(JSON.stringify(values, null, 2));
-      resetForm(); //Hah tobad
             setSubmitting(false);
-      // }, 400);
+          })
-      updateProcessedDataBucket(localdb, setProcessedDataBucket);
+          .then(localdb.sync(remotedb))
+          .catch(console.log);
+      } else {
+        localdb
+          .save(values)
+          .then((result) => {
+            alert("Saved Successfully!");
+            setSubmitting(false);
+          })
+          .then(localdb.sync(remotedb))
+          .catch(console.log);
+      }
     },
-    [localdb, remotedb, setProcessedDataBucket, updateProcessedDataBucket]
+    [localdb, oldDoc]
   );
-  return (
+
-    <div>
+  useEffect(() => {
-      <br />
+    localdb.all().then((res) => {
-      <Formik
+      let old_doc = {
-        initialValues={{
+        $id: id,
-          team_number: "",
-          match_number: "",
-          team_abilities_well: "",
-          team_abilities_struggle: "",
-          team_abilities_cant: "",
         fouls: "0",
         fouls_tech: "0",
         flipped: false,
@@ -82,23 +81,57 @@ const InputPage = () => {
         alliance: "",
         defence: "0",
         disabled: false,
-        }}
+      };
-        validateOnChange="false"
+      if (id != null && typeof res[id] !== "undefined") {
-        onSubmit={onSubmit}
+        old_doc = res[id];
-      >
+        setOldDocExists(true);
+      }
+      setOldDoc(old_doc);
+    });
+  }, [setOldDoc]);
+
+  // const onSubmit = useCallback(
+  //   (values, { setSubmitting, resetForm }) => {
+  //     // setTimeout(() => {
+  //     localdb
+  //       .put({
+  //         // _id: new Date().toISOString(),
+  //         _id: "match_" + values.match_number + "_team_" + values.team_number,
+  //         _rev: new Date().toISOString(),
+  //         type: "match",
+  //         ...values,
+  //       })
+  //       .then((result) => {
+  //         alert("Input Saved Successfully!");
+  //         console.log(result);
+  //         console.log(localdb);
+  //         localdb.replicate.to(remotedb, {
+  //           retry: true,
+  //         });
+  //       })
+  //       .catch((err) => {
+  //         console.log("Failed To Save Input!");
+  //         alert(err);
+  //       });
+  //     // alert(JSON.stringify(values, null, 2));
+  //     resetForm(); //Hah tobad
+  //     setSubmitting(false);
+  //     // }, 400);
+  //     updateProcessedDataBucket(localdb, setProcessedDataBucket);
+  //   },
+  //   [localdb, remotedb, setProcessedDataBucket, updateProcessedDataBucket]
+  // );
+  if (oldDoc == null) return null;
+  console.log(oldDoc);
+  return (
+    <div>
+      <br />
+      <Formik initialValues={oldDoc} validateOnChange="false" onSubmit={onSubmit}>
         {({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
           <Form>
             <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
               <Box sx={panel_sx}>
-                <FastField type="input" as={TextField} name="team_number" label="Team #" />
+                <FastField type="input" as={TextField} name="$id" label="Match Key" />
-                <FastField type="input" as={TextField} name="match_number" label="Match Number" />
-                <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" sx={{ "&, &.Mui-checked": { color: "red_alliance" } }} />} sx={{ color: "red_alliance" }} label="Red" />
-                    <FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" sx={{ "&, &.Mui-checked": { color: "blue_alliance" } }} />} sx={{ color: "blue_alliance" }} label="Blue" />
-                  </RadioGroup>
-                </FormControl>
               </Box>
 
               <Box sx={panel_sx}>
@@ -157,7 +190,7 @@ const InputPage = () => {
                   <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="can't do" />
                 </Box> */}
                 <Button type="submit" disabled={isSubmitting}>
-                  Submit
+                  Save
                 </Button>
               </Box>
             </Box>

webserver/src/Pages/TeamPage.jsx

@@ -31,7 +31,6 @@ const TeamPage = () => {
   const onSubmit = useCallback(
     // (old_doc, new_doc) => {
     (values, { setSubmitting, resetForm }) => {
-      localdb.on("update", console.log);
       localdb
         .saveChanges(oldDoc, values)
         .then((result) => {
@@ -56,7 +55,7 @@ const TeamPage = () => {
         misc_design: "",
       };
       if (typeof res[team] !== "undefined") {
-        old_doc = { ...res[team] };
+        old_doc = res[team];
       }
       setOldDoc(old_doc);
     });

webserver/src/Pages/WelcomePage.jsx

@@ -10,7 +10,7 @@ const WelcomePage = () => {
       <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
         <h1>Welcome to Ridgebotics Scouting Web Application 2022</h1>
         {/* <img src="/WelcomePageImage.webp" /> */}
-        {/* <img src="/picgoeshard.jpg" /> */}
+        <img src="/picgoeshard.jpg" />
         <DbChooser />
       </Box>
     </div>

webserver/src/ProcessedDataBucketContext.jsx

@@ -12,7 +12,8 @@ export function ProcessedDataBucketProvider({ children }) {
   //create the processed data bucket object
   const { localdb } = useLocalDb();
   const [processedDataBucket, setProcessedDataBucket] = useState(null);
-  localdb.on("change", (change) => {
+  localdb.delta.on("update", (changes) => {
+    // console.log("CHANGES");
     updateProcessedDataBucket(localdb, setProcessedDataBucket);
   });
   return <ProcessedDataBucketContext.Provider value={{ processedDataBucket, setProcessedDataBucket }}>{children}</ProcessedDataBucketContext.Provider>;

webserver/src/components/Navigation/PagesList.js

@@ -4,11 +4,11 @@ import { Link } from "react-router-dom";
 const PagesList = props => {
     return (
         <ul>
-            <li><Link onClick={props.click} to="/Dashboard">Dashboard</Link></li>
-            <li><Link onClick={props.click} to="/Input">Input</Link></li>
-            {/* <li><Link onClick={props.click} to="/Notes">Notes</Link></li> */}
-            <li><Link onClick={props.click} to="/TeamList">Teams</Link></li>
             <li><Link onClick={props.click} to="/Schedule">Schedule</Link></li>
+            <li><Link onClick={props.click} to="/TeamList">Teams</Link></li>
+            <li><Link onClick={props.click} to="/Dashboard">Dashboard</Link></li>
+            {/* <li><Link onClick={props.click} to="/Input">Input</Link></li> */}
+            {/* <li><Link onClick={props.click} to="/Notes">Notes</Link></li> */}
         </ul>
     )
 }

webserver/src/components/Schedule.jsx

@@ -34,7 +34,7 @@ const Schedule = (props) => {
 
   const TeamNumberComponent = (props) => {
     return (
-      <Link to="/Team" state={{ team: props.number }} style={{ color: "inherit" }}>
+      <Link to="/Input" state={{ id: props.match_id + "_" + props.number }} style={{ color: "inherit" }}>
         <h3>{props.number}</h3>
       </Link>
     );
@@ -46,15 +46,15 @@ const Schedule = (props) => {
       <Box sx={panel_sx} key={index}>
         <h3>{item.match_id}</h3>
         <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" }, gap: { xs: 0, sm: 1.5 }, color: "red_alliance", textDecoration: "none" }}>
-          <TeamNumberComponent number={item.red[0]} />
+          <TeamNumberComponent number={item.red[0]} match_id={item.match_id} />
-          <TeamNumberComponent number={item.red[1]} />
+          <TeamNumberComponent number={item.red[1]} match_id={item.match_id} />
-          <TeamNumberComponent number={item.red[2]} />
+          <TeamNumberComponent number={item.red[2]} match_id={item.match_id} />
         </Box>
         <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" }, gap: { xs: 0, sm: 1.5 }, color: "blue_alliance" }}>
           {/* <li> */}
-          <TeamNumberComponent number={item.blue[0]} />
+          <TeamNumberComponent number={item.blue[0]} match_id={item.match_id} />
-          <TeamNumberComponent number={item.blue[1]} />
+          <TeamNumberComponent number={item.blue[1]} match_id={item.match_id} />
-          <TeamNumberComponent number={item.blue[2]} />
+          <TeamNumberComponent number={item.blue[2]} match_id={item.match_id} />
         </Box>
       </Box>
     );