128 lines
No EOL
4.3 KiB
TypeScript
128 lines
No EOL
4.3 KiB
TypeScript
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 { useGlobalState } from "providers";
|
|
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 [{as}] = useGlobalState();
|
|
const componentAPI = useComponentAPI();
|
|
const snackbar = useSnackbar();
|
|
const [component, setComponent] = useState<pond.ComponentSettings>(pond.ComponentSettings.create())
|
|
|
|
const onSubmit = () => {
|
|
componentAPI.add(device, component, as).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 container direction="row">
|
|
<Grid2 size={{ xs: 6 }}>
|
|
<TextField
|
|
value={component.measurementPeriodMs}
|
|
type="number"
|
|
label="Measurement Perios (ms)"
|
|
fullWidth
|
|
onChange={event => {
|
|
let newSettings = pond.ComponentSettings.create(component)
|
|
newSettings.measurementPeriodMs = or(parseInt(event.currentTarget.value), 0)
|
|
setComponent(newSettings)
|
|
}}
|
|
/>
|
|
</Grid2>
|
|
<Grid2 size={{ xs: 6 }}>
|
|
<TextField
|
|
value={component.reportPeriodMs}
|
|
type="number"
|
|
label="Report Period (ms)"
|
|
fullWidth
|
|
onChange={event => {
|
|
let newSettings = pond.ComponentSettings.create(component)
|
|
newSettings.reportPeriodMs = or(parseInt(event.currentTarget.value), 0)
|
|
setComponent(newSettings)
|
|
}}
|
|
/>
|
|
</Grid2>
|
|
</Grid2>
|
|
</Grid2>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<CancelSubmit onCancel={close} onSubmit={onSubmit} />
|
|
</DialogActions>
|
|
</Dialog>
|
|
)
|
|
} |