markus.lehr/vrpmdv-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2nd Version with the complete UI and the first Version of cc+ .so

Browse Source
This commit is contained in:
Markus Lehr
2024-03-31 21:12:43 +02:00
parent 3fe818e144
commit a221b8f046
43 changed files with 2056 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
vrpmdvfrontend/src/pages/monitorings/create.tsx
View File

@@ -1,14 +1,18 @@
import { Autocomplete, Box, InputAdornment, MenuItem, Select, TextField } from "@mui/material";
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 },
@@ -23,6 +27,7 @@ export const MonitoringCreate = () => {
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
gap={2}
autoComplete="off"
>
<TextField
@@ -38,57 +43,91 @@ export const MonitoringCreate = () => {
label={"Name"}
name="name"
/>
<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 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",
@@ -107,6 +146,61 @@ export const MonitoringCreate = () => {
);
};
//----------- 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} />}
// />