diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodiohomeInstallationForm.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodiohomeInstallationForm.tsx new file mode 100644 index 000000000..5b9c55f88 --- /dev/null +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodiohomeInstallationForm.tsx @@ -0,0 +1,253 @@ +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 SodiohomeInstallationFormProps { + cancel: () => void; + submit: () => void; + parentid: number; +} + +function SodiohomeInstallationForm(props: SodiohomeInstallationFormProps) { + const theme = useTheme(); + const [open, setOpen] = useState(true); + const [formValues, setFormValues] = useState>({ + name: '', + region: '', + location: '', + country: '', + serialNumber: '' + }); + const requiredFields = ['name', 'location', 'country', 'serialNumber']; + + 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="serialNumber" + value={formValues.serialNumber} + onChange={handleChange} + required + error={formValues.serialNumber === ''} + /> +
+ +
+ + } + name="information" + value={formValues.information} + onChange={handleChange} + /> +
+
+
+ + + + + {loading && ( + + )} + + {error && ( + + + setError(false)} + sx={{ marginLeft: '4px' }} + > + + + + )} +
+
+
+ + ); +} + +export default SodiohomeInstallationForm; diff --git a/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx b/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx index 4855a049f..0f698d296 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Tree/Information.tsx @@ -23,6 +23,7 @@ import { InstallationsContext } from '../../../contexts/InstallationsContextProv import { UserType } from '../../../interfaces/UserTypes'; import SalidomoInstallationForm from '../SalidomoInstallations/SalidomoInstallationForm'; import { ProductIdContext } from '../../../contexts/ProductIdContextProvider'; +import SodiohomeInstallationForm from '../SodiohomeInstallations/SodiohomeInstallationForm'; interface TreeInformationProps { folder: I_Folder; @@ -213,6 +214,14 @@ function TreeInformation(props: TreeInformationProps) { parentid={props.folder.id} /> )} + {openModalInstallation && product == 2 && ( + + )} + ( ); // Define the product mapping for dynamic assignment -const productMapping: { [key: string]: number } = { - salimax: 0, - salidomo: 1, - sodiohome: 2, - // Additional mappings can be added here -}; +// const productMapping: { [key: string]: number } = { +// salimax: 0, +// salidomo: 1, +// sodiohome: 2, +// // Additional mappings can be added here +// }; // Create a UserContextProvider component export const ProductIdContextProvider = ({ @@ -46,9 +46,19 @@ export const ProductIdContextProvider = ({ return storedValue === 'true'; }); // const [product, setProduct] = useState(location.includes('salidomo') ? 1 : 0); - const [product, setProduct] = useState( - productMapping[Object.keys(productMapping).find((key) => location.includes(key)) || ''] || -1 - ); + // const [product, setProduct] = useState( + // productMapping[Object.keys(productMapping).find((key) => location.includes(key)) || ''] || -1 + // ); + const [product, setProduct] = useState(() => { + if (location.includes('salidomo')) { + return 1; + } else if (location.includes('sodiohome')) { + return 2; + } else { + return 0; + } + }); + const changeProductId = (new_product: number) => { setProduct(new_product); }; diff --git a/typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx b/typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx index 21518e004..967751843 100644 --- a/typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx +++ b/typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx @@ -20,6 +20,7 @@ export interface I_Installation extends I_S3Credentials { device: number; testingMode?: boolean; status?: number; + serialNumber?: string; } export interface I_Folder {