274 lines
8.8 KiB
TypeScript
274 lines
8.8 KiB
TypeScript
import { Autocomplete, Box, FormControl, FormLabel, InputAdornment, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
|
|
import { Create, NumberField, useAutocomplete } from "@refinedev/mui";
|
|
import { useForm } from "@refinedev/react-hook-form";
|
|
import { Controller } from "react-hook-form";
|
|
import { IMonitoring } from "./monitorings.types";
|
|
import { Group } from "@mui/icons-material";
|
|
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
|
|
import { MonitoringStatusChip } from "./status/monitoringstatuschip";
|
|
|
|
|
|
export const MonitoringCreate = () => {
|
|
const {
|
|
saveButtonProps,
|
|
refineCore: { formLoading },
|
|
setValue,
|
|
register,
|
|
control,
|
|
formState: { errors },
|
|
} = useForm<IMonitoring>({});
|
|
|
|
// const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
|
|
// resource: "categories",
|
|
// });
|
|
|
|
return (
|
|
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
|
|
<Box
|
|
component="form"
|
|
sx={{ display: "flex", flexDirection: "column" }}
|
|
gap={2}
|
|
autoComplete="off"
|
|
>
|
|
<TextField
|
|
{...register("name", {
|
|
required: "The name is required",
|
|
})}
|
|
error={!!(errors as any)?.name}
|
|
helperText={(errors as any)?.name?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
type="text"
|
|
label={"Name"}
|
|
name="name"
|
|
/>
|
|
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
|
|
<TextField
|
|
{...register("samplerate", {
|
|
required: "The samplerate is required",
|
|
})}
|
|
error={!!(errors as any)?.samplerate}
|
|
helperText={(errors as any)?.samplerate?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
type="number"
|
|
label={"Samplerate"}
|
|
name="samplerate"
|
|
InputProps={{
|
|
endAdornment:
|
|
<InputAdornment position="end">hz</InputAdornment>
|
|
}}
|
|
/>
|
|
<TextField
|
|
{...register("sampleperiod", {
|
|
required: "The sampleperiod is required",
|
|
})}
|
|
error={!!(errors as any)?.sampleperiod}
|
|
helperText={(errors as any)?.sampleperiod?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
type="number"
|
|
label={"Sampleperiod"}
|
|
name="sampleperiod"
|
|
InputProps={{
|
|
endAdornment:
|
|
<InputAdornment position="end">s</InputAdornment>
|
|
}}
|
|
/>
|
|
<TextField
|
|
{...register("downtime", {
|
|
required: "The downtime is required",
|
|
})}
|
|
error={!!(errors as any)?.downtime}
|
|
helperText={(errors as any)?.downtime?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
type="number"
|
|
label={"Downtime"}
|
|
name="downtime"
|
|
InputProps={{
|
|
endAdornment:
|
|
<InputAdornment position="end">s</InputAdornment>
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<FormControl>
|
|
<Controller
|
|
control={control}
|
|
name="status"
|
|
defaultValue="off"
|
|
render={({ field }) => (
|
|
<ToggleButtonGroup
|
|
id="Status"
|
|
{...field}
|
|
exclusive
|
|
color="primary"
|
|
onChange={(_, newValue) => {
|
|
setValue("status", newValue, {
|
|
shouldValidate: true,
|
|
});
|
|
|
|
return newValue;
|
|
}}
|
|
>
|
|
<ToggleButton value={"started"}>
|
|
{"Started"}
|
|
</ToggleButton>
|
|
<ToggleButton value={"stopped"}>
|
|
{"Stopped"}
|
|
</ToggleButton>
|
|
<ToggleButton value={"off"}>
|
|
{"Deactivated"}
|
|
</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
<TextField
|
|
{...register("owner", {
|
|
required: "The downtime is required",
|
|
})}
|
|
error={!!(errors as any)?.downtime}
|
|
helperText={(errors as any)?.downtime?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
multiline
|
|
label={"Owner"}
|
|
name="owner"
|
|
/>
|
|
</Box>
|
|
</Create>
|
|
);
|
|
};
|
|
|
|
//----------- new
|
|
|
|
// <Controller
|
|
// control={control}
|
|
// name="category"
|
|
// rules={{ required: "This field is required" }}
|
|
// // eslint-disable-next-line
|
|
// defaultValue={null as any}
|
|
// render={({ field }) => (
|
|
// <Autocomplete
|
|
// {...categoryAutocompleteProps}
|
|
// {...field}
|
|
// onChange={(_, value) => {
|
|
// field.onChange(value);
|
|
// }}
|
|
// getOptionLabel={(item) => {
|
|
// return (
|
|
// categoryAutocompleteProps?.options?.find(
|
|
// (p) =>
|
|
// p?.id?.toString() ===
|
|
// item?.id?.toString(),
|
|
// )?.title ?? ""
|
|
// );
|
|
// }}
|
|
// isOptionEqualToValue={(option, value) =>
|
|
// value === undefined ||
|
|
// option?.id?.toString() === value?.id?.toString()
|
|
// }
|
|
// renderInput={(params) => (
|
|
// <TextField
|
|
// {...params}
|
|
// label="Category"
|
|
// margin="normal"
|
|
// variant="outlined"
|
|
// error={!!(errors as any)?.category?.id}
|
|
// helperText={
|
|
// (errors as any)?.category?.id?.message
|
|
// }
|
|
// required
|
|
// />
|
|
// )}
|
|
// />
|
|
// )}
|
|
// />
|
|
|
|
|
|
//---------------
|
|
|
|
|
|
// <Controller
|
|
// name="status"
|
|
// control={control}
|
|
// rules={{ required: true }}
|
|
// render={({ field }) => <MonitoringStatusChip value={field.value} />}
|
|
// />
|
|
|
|
|
|
|
|
// <Controller
|
|
// name="status"
|
|
// control={control}
|
|
// render={({ field }) => {
|
|
// return (
|
|
// <Select
|
|
// {...field}
|
|
// value={field?.value || "stopped"}
|
|
// label={"Status"}
|
|
// >
|
|
// <MenuItem value="started">Draft</MenuItem>
|
|
// <MenuItem value="stoppedd">Published</MenuItem>
|
|
// </Select>
|
|
// );
|
|
// }}
|
|
// />
|
|
|
|
|
|
|
|
|
|
// <Controller
|
|
// control={control}
|
|
// name={"category.id"}
|
|
// rules={{ required: "This field is required" }}
|
|
// // eslint-disable-next-line
|
|
// defaultValue={null as any}
|
|
// render={({ field }) => (
|
|
// <Autocomplete
|
|
// {...categoryAutocompleteProps}
|
|
// {...field}
|
|
// onChange={(_, value) => {
|
|
// field.onChange(value.id);
|
|
// }}
|
|
// getOptionLabel={(item) => {
|
|
// return (
|
|
// categoryAutocompleteProps?.options?.find((p) => {
|
|
// const itemId =
|
|
// typeof item === "object"
|
|
// ? item?.id?.toString()
|
|
// : item?.toString();
|
|
// const pId = p?.id?.toString();
|
|
// return itemId === pId;
|
|
// })?.title ?? ""
|
|
// );
|
|
// }}
|
|
// isOptionEqualToValue={(option, value) => {
|
|
// const optionId = option?.id?.toString();
|
|
// const valueId =
|
|
// typeof value === "object"
|
|
// ? value?.id?.toString()
|
|
// : value?.toString();
|
|
// return value === undefined || optionId === valueId;
|
|
// }}
|
|
// renderInput={(params) => (
|
|
// <TextField
|
|
// {...params}
|
|
// label={"Category"}
|
|
// margin="normal"
|
|
// variant="outlined"
|
|
// error={!!(errors as any)?.category?.id}
|
|
// helperText={(errors as any)?.category?.id?.message}
|
|
// required
|
|
// />
|
|
// )}
|
|
// />
|
|
// )}
|
|
// />
|