Update config in front end
This commit is contained in:
Noe
parent
c0bc1d601a
commit
0428770b48
|
|
@ -9,16 +9,22 @@ import {
|
|||
Grid,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
Modal,
|
||||
Select,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Button from '@mui/material/Button';
|
||||
import { DateField } from '@mui/x-date-pickers/DateField';
|
||||
import axiosConfig from '../../../Resources/axiosConfig';
|
||||
import { Close as CloseIcon } from '@mui/icons-material';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface ConfigurationProps {
|
||||
values: TopologyValues;
|
||||
|
|
@ -30,32 +36,11 @@ function Configuration(props: ConfigurationProps) {
|
|||
return null;
|
||||
}
|
||||
|
||||
const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
|
||||
|
||||
const [formValues, setFormValues] = useState<ConfigurationValues>({
|
||||
minimumSoC: props.values.minimumSoC[0].value,
|
||||
gridSetPoint: (props.values.gridSetPoint[0].value as number) / 1000,
|
||||
forceCalibrationCharge: forcedCalibrationChargeOptions.indexOf(
|
||||
props.values.calibrationChargeForced[0].value.toString()
|
||||
)
|
||||
});
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
setLoading(true);
|
||||
const res = await axiosConfig
|
||||
.post(`/EditInstallationConfig?installationId=${props.id}`, formValues)
|
||||
.catch((err) => {
|
||||
if (err.response) {
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
if (res) {
|
||||
setUpdated(true);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const forcedCalibrationChargeOptions = [
|
||||
'RepetitivelyEvery',
|
||||
'AdditionallyOnce',
|
||||
'ChargePermanently'
|
||||
];
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
minimumSoC: false,
|
||||
|
|
@ -80,9 +65,62 @@ function Configuration(props: ConfigurationProps) {
|
|||
] = useState<string>(
|
||||
props.values.calibrationChargeForced[0].value.toString()
|
||||
);
|
||||
//const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
|
||||
const [isDateModalOpen, setIsDateModalOpen] = useState(false);
|
||||
const [calibrationChargeDate, setCalibrationChargeDate] = useState();
|
||||
const [isErrorDateModalOpen, setErrorDateModalOpen] = useState(false);
|
||||
const [dateSelectionError, setDateSelectionError] = useState('');
|
||||
const [dateFieldOpen, setDateFieldOpen] = useState(false);
|
||||
|
||||
const [formValues, setFormValues] = useState<ConfigurationValues>({
|
||||
minimumSoC: props.values.minimumSoC[0].value,
|
||||
gridSetPoint: (props.values.gridSetPoint[0].value as number) / 1000,
|
||||
forceCalibrationCharge: forcedCalibrationChargeOptions.indexOf(
|
||||
props.values.calibrationChargeForced[0].value.toString()
|
||||
),
|
||||
calibrationChargeDate: Date(props.values.calibrationChargeDate[0].value)
|
||||
});
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
setLoading(true);
|
||||
const res = await axiosConfig
|
||||
.post(`/EditInstallationConfig?installationId=${props.id}`, formValues)
|
||||
.catch((err) => {
|
||||
if (err.response) {
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
if (res) {
|
||||
setUpdated(true);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsDateModalOpen(false);
|
||||
};
|
||||
const handleOkOnErrorDateModal = () => {
|
||||
setErrorDateModalOpen(false);
|
||||
setIsDateModalOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
setIsDateModalOpen(false);
|
||||
|
||||
if (calibrationChargeDate.isBefore(dayjs())) {
|
||||
setDateSelectionError('You must use a future date');
|
||||
setErrorDateModalOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setDateFieldOpen(true);
|
||||
};
|
||||
|
||||
const handleSelectedCalibrationChargeChange = (event) => {
|
||||
if (event.target.value != 'ChargePermanently') {
|
||||
setIsDateModalOpen(true);
|
||||
}
|
||||
setSelectedForcedCalibrationChargeOption(event.target.value);
|
||||
|
||||
setFormValues({
|
||||
|
|
@ -199,7 +237,6 @@ function Configuration(props: ConfigurationProps) {
|
|||
open={openForcedCalibrationCharge}
|
||||
onClose={handleCloseForcedCalibrationCharge}
|
||||
onOpen={handleOpenForcedCalibrationCharge}
|
||||
//renderValue={selectedForcedCalibrationChargeOption}
|
||||
>
|
||||
{forcedCalibrationChargeOptions.map((option) => (
|
||||
<MenuItem key={option} value={option}>
|
||||
|
|
@ -209,6 +246,127 @@ function Configuration(props: ConfigurationProps) {
|
|||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
{(dateFieldOpen || formValues.forceCalibrationCharge != 2) && (
|
||||
<div>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DateField
|
||||
label="Calibration Charge Date"
|
||||
value={calibrationChargeDate}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isErrorDateModalOpen && (
|
||||
<Modal open={isErrorDateModalOpen} onClose={() => {}}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 450,
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 4,
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body1"
|
||||
gutterBottom
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
{dateSelectionError}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
marginTop: 2,
|
||||
textTransform: 'none',
|
||||
bgcolor: '#ffc04d',
|
||||
color: '#111111',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
onClick={handleOkOnErrorDateModal}
|
||||
>
|
||||
Ok
|
||||
</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{isDateModalOpen && (
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<Modal open={isDateModalOpen} onClose={() => {}}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 450,
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 4,
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<DateTimePicker
|
||||
label="Select Calibration Charge Date"
|
||||
value={calibrationChargeDate}
|
||||
onChange={(newDate) =>
|
||||
setCalibrationChargeDate(newDate)
|
||||
}
|
||||
sx={{
|
||||
marginTop: 2
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: 10
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
marginTop: 2,
|
||||
textTransform: 'none',
|
||||
bgcolor: '#ffc04d',
|
||||
color: '#111111',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
onClick={handleConfirm}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
marginTop: 2,
|
||||
marginLeft: 2,
|
||||
textTransform: 'none',
|
||||
bgcolor: '#ffc04d',
|
||||
color: '#111111',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</LocalizationProvider>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '5px' }}>
|
||||
<TextField
|
||||
|
|
|
|||
Loading…
Reference in New Issue