109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import Box from '@mui/material/Box';
|
|
import Chip from '@mui/material/Chip';
|
|
import FormControl from "@mui/material/FormControl";
|
|
import Grid from "@mui/material/Grid2";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Select from "@mui/material/Select";
|
|
import TextField from "@mui/material/TextField";
|
|
import { useEffect, useState } from 'react';
|
|
import { DeviceStatus } from '../../types/device.types';
|
|
import { useDeviceStore } from '../../stores/deviceStore';
|
|
|
|
export default function Form() {
|
|
const { device, clearDevice } = useDeviceStore();
|
|
const [select, setSelect] = useState<DeviceStatus>('active');
|
|
|
|
const STATUS = ["active", "inactive", "maintenance"];
|
|
|
|
useEffect(() => {
|
|
setSelect(device?.status || 'active');
|
|
|
|
const clear = async () => {
|
|
await clearDevice();
|
|
};
|
|
|
|
return () => {
|
|
clear();
|
|
};
|
|
}, [device]);
|
|
|
|
return (
|
|
<Grid container spacing={2}>
|
|
{/* Device Code */}
|
|
<Grid size={{ md: 4, xs: 12 }}>
|
|
<TextField fullWidth name='device_code' label="Device Code" variant="outlined" value={device?.device_code} />
|
|
</Grid>
|
|
{/* Total Port */}
|
|
<Grid size={{ md: 4, xs: 12 }}>
|
|
<TextField
|
|
fullWidth
|
|
name="port_count"
|
|
label="Total Port"
|
|
variant="outlined"
|
|
type="number"
|
|
value={device?.port_amount}
|
|
/>
|
|
</Grid>
|
|
|
|
{/* Status */}
|
|
<Grid size={{ md: 4, xs: 12 }}>
|
|
<FormControl fullWidth>
|
|
<InputLabel id="status-label">Status</InputLabel>
|
|
<Select
|
|
name="status"
|
|
labelId="status-label"
|
|
label="Status"
|
|
value={select}
|
|
onChange={(e) => setSelect(e.target.value as DeviceStatus)}
|
|
renderValue={(selected: string) => (
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
|
<Chip
|
|
label={selected.toUpperCase()}
|
|
size="medium"
|
|
variant="filled"
|
|
color={
|
|
selected === "active"
|
|
? "success"
|
|
: selected === "inactive"
|
|
? "error"
|
|
: "warning"
|
|
}
|
|
/>
|
|
</Box>
|
|
)}
|
|
>
|
|
{STATUS.map((status) => (
|
|
<MenuItem key={status} value={status}>
|
|
{status.toUpperCase()}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid size={{ md: 6, xs: 12 }}>
|
|
<TextField
|
|
fullWidth
|
|
name="longitude"
|
|
label="Longitude"
|
|
variant="outlined"
|
|
type="number"
|
|
value={device?.longitude}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid size={{ md: 6, xs: 12 }}>
|
|
<TextField
|
|
fullWidth
|
|
name="latitude"
|
|
label="Latitude"
|
|
variant="outlined"
|
|
type="number"
|
|
value={device?.latitude}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|