Update config in front end

typescript/frontend-marios2/src/content/dashboards/Configuration/Configuration.tsx

@@ -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 forcedCalibrationChargeOptions = [
-
+    'RepetitivelyEvery',
-  const [formValues, setFormValues] = useState<ConfigurationValues>({
+    'AdditionallyOnce',
-    minimumSoC: props.values.minimumSoC[0].value,
+    'ChargePermanently'
-    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 [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