added tons of files for component functionality; manual component adding added temporarily

src/component/AddComponentManualDialog.tsx

@@ -0,0 +1,98 @@
+import { Dialog, DialogActions, DialogContent, DialogTitle, Grid2, TextField } from "@mui/material";
+import CancelSubmit from "common/CancelSubmit";
+import { useComponentAPI, useSnackbar } from "hooks";
+import { pond } from "protobuf-ts/pond";
+import { useState } from "react";
+import { or } from "utils";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  device: number;
+}
+
+export default function AddComponentManualDialog (props: Props) {
+  const { open, onClose, device } = props;
+  const componentAPI = useComponentAPI();
+  const snackbar = useSnackbar();
+  const [component, setComponent] = useState<pond.ComponentSettings>(pond.ComponentSettings.create())
+
+  const onSubmit = () => {
+    componentAPI.add(device, component).then(() => {
+      snackbar.success("Component added")
+    })
+  }
+
+  const close = () => {
+    setComponent(pond.ComponentSettings.create())
+    onClose()
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+    >
+      <DialogTitle>
+        Manual Component Entry
+      </DialogTitle>
+      <DialogContent>
+        <Grid2 container direction="column" justifyContent={"center"} spacing={2}>
+          <Grid2>
+            <TextField 
+              value={component.name}
+              fullWidth
+              label="Name"
+              onChange={event => {
+                let newSettings = pond.ComponentSettings.create(component)
+                newSettings.name = event.currentTarget.value
+                setComponent(newSettings)
+              }}
+            />
+          </Grid2>
+          <Grid2 container direction="row">
+            <Grid2 size={{ xs: 4 }}>
+              <TextField 
+                value={component.type}
+                type="number"
+                label="Type"
+                onChange={event => {
+                  let newSettings = pond.ComponentSettings.create(component)
+                  newSettings.type = or(parseInt(event.currentTarget.value), 0)
+                  setComponent(newSettings)
+                }}
+              />
+            </Grid2>
+            <Grid2 size={{ xs: 4 }}>
+              <TextField 
+                value={component.addressType}
+                type="number"
+                label="Address Type"
+                onChange={event => {
+                  let newSettings = pond.ComponentSettings.create(component)
+                  newSettings.addressType = or(parseInt(event.currentTarget.value), 0)
+                  setComponent(newSettings)
+                }}
+              />
+            </Grid2>
+            <Grid2 size={{ xs: 4 }}>
+              <TextField 
+                value={component.address}
+                type="number"
+                label="Address"
+                onChange={event => {
+                  let newSettings = pond.ComponentSettings.create(component)
+                  newSettings.address = or(parseInt(event.currentTarget.value), 0)
+                  setComponent(newSettings)
+                }}
+              />
+            </Grid2>
+          </Grid2>
+        </Grid2>
+      </DialogContent>
+      <DialogActions>
+        <CancelSubmit onCancel={close} onSubmit={onSubmit} />
+      </DialogActions>
+    </Dialog>
+  )
+}