diff --git a/typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx b/typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx index bc77973c4..4e1deb7bd 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx @@ -286,7 +286,7 @@ function InformationSalidomo(props: InformationSalidomoProps) { marginLeft: 1, marginTop: 1, marginBottom: 1, - width: 390 + width: 440 }} > { + const { name, value } = e.target; + setFormValues({ + ...formValues, + [name]: value + }); + }; + const handleSubmit = () => { + setLoading(true); + setError(false); + updateInstallation(formValues, props.type); + }; + + const handleDelete = () => { + setLoading(true); + setError(false); + setOpenModalDeleteInstallation(true); + }; + + const deleteInstallationModalHandle = () => { + setOpenModalDeleteInstallation(false); + deleteInstallation(formValues, props.type); + setLoading(false); + + navigate(routes.salidomo_installations + routes.list, { + replace: true + }); + }; + + const deleteInstallationModalHandleCancel = () => { + setOpenModalDeleteInstallation(false); + setLoading(false); + }; + + const areRequiredFieldsFilled = () => { + for (const field of requiredFields) { + if (!formValues[field]) { + return false; + } + } + return true; + }; + + return ( + <> + {openModalDeleteInstallation && ( + + + + Do you want to delete this installation? + + +
+ + +
+
+
+ )} + + + + + + +
+ + } + name="name" + value={formValues.name} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+
+ + } + name="region" + value={formValues.region} + onChange={handleChange} + variant="outlined" + fullWidth + required + error={formValues.region === ''} + /> +
+
+ + } + name="location" + value={formValues.location} + onChange={handleChange} + variant="outlined" + fullWidth + required + error={formValues.location === ''} + /> +
+
+ + } + name="country" + value={formValues.country} + onChange={handleChange} + variant="outlined" + fullWidth + required + error={formValues.country === ''} + /> +
+ +
+ + } + name="vpnIp" + value={formValues.vpnIp} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ +
+ + + + + + +
+ +
+ + } + name="inverterSN" + value={formValues.inverterSN} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ +
+ + } + name="dataloggerSN" + value={formValues.dataloggerSN} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ +
+ + } + name="information" + value={formValues.information} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ + {currentUser.userType == UserType.admin && ( + <> +
+ +
+ +
+ +
+ +
+ +
+ + )} + +
+ + + {currentUser.userType == UserType.admin && ( + + )} + + {loading && ( + + )} + {error && ( + + + setError(false)} + sx={{ marginLeft: '4px' }} + > + + + + )} + {updated && ( + + + + setUpdated(false)} // Set error state to false on click + sx={{ marginLeft: '4px' }} + > + + + + )} +
+
+
+
+
+
+ + ); +} + +export default InformationSodistorehome; diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx index 5202d5e7b..ae74f26f5 100644 --- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx @@ -19,7 +19,7 @@ import HistoryOfActions from '../History/History'; import BuildIcon from '@mui/icons-material/Build'; import AccessContextProvider from '../../../contexts/AccessContextProvider'; import Access from '../ManageAccess/Access'; -import Information from '../Information/Information'; +import InformationSodistorehome from '../Information/InformationSodistoreHome'; import { TimeSpan, UnixTime } from '../../../dataCache/time'; import { fetchDataJson } from '../Installations/fetchData'; import { FetchResult } from '../../../dataCache/dataCache'; @@ -413,11 +413,11 @@ function SodioHomeInstallation(props: singleInstallationProps) { + > } /> diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodistorehomeInstallationForm.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodistorehomeInstallationForm.tsx new file mode 100644 index 000000000..587cb0d88 --- /dev/null +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodistorehomeInstallationForm.tsx @@ -0,0 +1,321 @@ +import React, { useContext, useState } from 'react'; +import { + Alert, + Box, + CircularProgress, + FormControl, + IconButton, + InputLabel, + MenuItem, + Modal, + Select, + TextField, + useTheme +} from '@mui/material'; +import Button from '@mui/material/Button'; +import { Close as CloseIcon } from '@mui/icons-material'; +import { I_Installation } from 'src/interfaces/InstallationTypes'; +import { InstallationsContext } from 'src/contexts/InstallationsContextProvider'; +import { FormattedMessage } from 'react-intl'; + +interface SodistorehomeInstallationFormPros { + cancel: () => void; + submit: () => void; + parentid: number; +} + +function SodistorehomeInstallationForm(props: SodistorehomeInstallationFormPros) { + const theme = useTheme(); + const [open, setOpen] = useState(true); + const [formValues, setFormValues] = useState>({ + name: '', + region: '', + location: '', + country: '', + vpnIp: '', + }); + const requiredFields = ['name', 'location', 'country', 'vpnIp']; + + const DeviceTypes = [ + { id: 3, name: 'Growatt' }, + { id: 4, name: 'Sinexcel' } + ]; + const installationContext = useContext(InstallationsContext); + const { createInstallation, loading, setLoading, error, setError } = + installationContext; + + const handleChange = (e) => { + const { name, value } = e.target; + + setFormValues({ + ...formValues, + [name]: value + }); + }; + const handleSubmit = async (e) => { + setLoading(true); + formValues.parentId = props.parentid; + formValues.product = 2; + const responseData = await createInstallation(formValues); + props.submit(); + }; + const handleCancelSubmit = (e) => { + props.cancel(); + }; + + const areRequiredFieldsFilled = () => { + for (const field of requiredFields) { + if (!formValues[field]) { + return false; + } + } + return true; + }; + + const isMobile = window.innerWidth <= 1490; + + return ( + <> + {}} + aria-labelledby="error-modal" + aria-describedby="error-modal-description" + > + + +
+ + } + name="name" + value={formValues.name} + onChange={handleChange} + required + error={formValues.name === ''} + /> +
+
+ } + name="region" + value={formValues.region} + onChange={handleChange} + required + error={formValues.region === ''} + /> +
+
+ + } + name="location" + value={formValues.location} + onChange={handleChange} + required + error={formValues.location === ''} + /> +
+ +
+ + } + name="country" + value={formValues.country} + onChange={handleChange} + required + error={formValues.country === ''} + /> +
+ +
+ } + name="vpnIp" + value={formValues.vpnIp} + onChange={handleChange} + required + error={formValues.vpnIp === ''} + /> +
+ +
+ + + + + + +
+ +
+ + } + name="inverterSN" + value={formValues.inverterSN} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ +
+ + } + name="dataloggerSN" + value={formValues.dataloggerSN} + onChange={handleChange} + variant="outlined" + fullWidth + /> +
+ +
+ + } + name="information" + value={formValues.information} + onChange={handleChange} + /> +
+
+
+ + + + + {loading && ( + + )} + + {error && ( + + + setError(false)} + sx={{ marginLeft: '4px' }} + > + + + + )} +
+
+
+ + ); +} + +export default SodistorehomeInstallationForm; diff --git a/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx b/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx index 15f90c68b..f5601597e 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx @@ -26,6 +26,7 @@ import { InstallationsContext } from '../../../contexts/InstallationsContextProv import { UserType } from '../../../interfaces/UserTypes'; import InstallationForm from '../Installations/installationForm'; import SalidomoInstallationForm from '../SalidomoInstallations/SalidomoInstallationForm'; +import SodiostorehomeInstallationForm from '../SodiohomeInstallations/SodistorehomeInstallationForm'; interface TreeInformationProps { folder: I_Folder; @@ -322,7 +323,6 @@ function TreeInformation(props: TreeInformationProps) { )} {openModalInstallation && (product == 'Salimax' || - product == 'SodistoreHome' || product == 'SodistoreMax') && ( )} + {openModalInstallation && product == 'SodistoreHome' && ( + + )} +