added Battery Number and Battery Pack SN to Information page on frontend

typescript/frontend-marios2/src/content/dashboards/Information/InformationSodistoreHome.tsx

@@ -7,6 +7,7 @@ import {
   FormControl,
   Grid,
   IconButton,
+  InputAdornment,
   InputLabel,
   MenuItem,
   Modal,
@@ -18,7 +19,7 @@ import {
 import { FormattedMessage } from 'react-intl';
 import Button from '@mui/material/Button';
 import { Close as CloseIcon } from '@mui/icons-material';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
 import { I_Installation } from '../../../interfaces/InstallationTypes';
 import { InstallationsContext } from '../../../contexts/InstallationsContextProvider';
@@ -46,12 +47,38 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
   const [openModalDeleteInstallation, setOpenModalDeleteInstallation] =
     useState(false);
   const navigate = useNavigate();
+  const [batteryNumber, setBatteryNumber] = useState(0);
+  const [batterySerialNumbers, setBatterySerialNumbers] = useState<string[]>(
+    []
+  );
 
   const DeviceTypes = [
     { id: 3, name: 'Growatt' },
     { id: 4, name: 'Sinexcel' }
   ];
 
+  const BATTERY_SN_PREFIX = 'PNR020125101';
+  const BATTERY_SN_SUFFIX_LENGTH = 4;
+
+  // Initialize battery data from props
+  useEffect(() => {
+    if (props.values.batteryNumber) {
+      setBatteryNumber(props.values.batteryNumber);
+    }
+    if (props.values.batterySerialNumbers) {
+      const serialNumbers = props.values.batterySerialNumbers
+        .split(',')
+        .filter((sn) => sn.trim() !== '')
+        .map((sn) => {
+          // If it has the prefix, extract only the suffix
+          if (sn.startsWith(BATTERY_SN_PREFIX)) {
+            return sn.substring(BATTERY_SN_PREFIX.length);
+          }
+          return sn;
+        });
+      setBatterySerialNumbers(serialNumbers);
+    }
+  }, []);
 
   const installationContext = useContext(InstallationsContext);
   const {
@@ -72,6 +99,49 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
       [name]: value
     });
   };
+
+  const handleBatteryNumberChange = (e) => {
+    const inputValue = e.target.value;
+    // Only allow numeric input
+    if (inputValue === '' || /^\d+$/.test(inputValue)) {
+      const value = inputValue === '' ? 0 : parseInt(inputValue);
+      setBatteryNumber(value);
+
+      // Preserve existing serial numbers and adjust array size
+      const newSerialNumbers = Array.from({ length: value }, (_, index) => {
+        // Keep existing serial number if it exists, otherwise use empty string
+        return batterySerialNumbers[index] || '';
+      });
+      setBatterySerialNumbers(newSerialNumbers);
+
+      // Update formValues with preserved serial numbers
+      const fullSerialNumbers = newSerialNumbers
+        .map((suffix) => (suffix ? BATTERY_SN_PREFIX + suffix : ''))
+        .filter((sn) => sn !== '');
+
+      setFormValues({
+        ...formValues,
+        batteryNumber: value,
+        batterySerialNumbers: fullSerialNumbers.join(',')
+      });
+    }
+  };
+
+  const handleBatterySerialNumberChange = (index: number, value: string) => {
+    // Only allow digits and limit to 3 characters
+    const sanitizedValue = value.replace(/\D/g, '').substring(0, BATTERY_SN_SUFFIX_LENGTH);
+    const updatedSerialNumbers = [...batterySerialNumbers];
+    updatedSerialNumbers[index] = sanitizedValue;
+    setBatterySerialNumbers(updatedSerialNumbers);
+    // Update formValues for persistence with full serial numbers (prefix + suffix)
+    const fullSerialNumbers = updatedSerialNumbers
+      .map((suffix) => (suffix ? BATTERY_SN_PREFIX + suffix : ''))
+      .filter((sn) => sn !== '');
+    setFormValues({
+      ...formValues,
+      batterySerialNumbers: fullSerialNumbers.join(',')
+    });
+  };
   const handleSubmit = () => {
     setLoading(true);
     setError(false);
@@ -186,7 +256,7 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
           alignItems="stretch"
           spacing={3}
         >
-          <Grid item xs={12} md={12}>
+          <Grid item xs={13} md={13}>
             <CardContent>
               <Box
                 component="form"
@@ -353,6 +423,52 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
                   />
                 </div>
 
+                <div>
+                  <TextField
+                    label={
+                      <FormattedMessage
+                        id="batteryNumber"
+                        defaultMessage="Battery Number"
+                      />
+                    }
+                    name="batteryNumber"
+                    type="text"
+                    value={batteryNumber === 0 ? '' : batteryNumber}
+                    onChange={handleBatteryNumberChange}
+                    variant="outlined"
+                    fullWidth
+                    placeholder="Enter number of batteries"
+                  />
+                </div>
+
+                {batteryNumber > 0 &&
+                  batterySerialNumbers.map((serialNumber, index) => (
+                    <div key={index}>
+                      <TextField
+                        label={`Battery Pack ${index + 1}`}
+                        name={`batterySN${index + 1}`}
+                        value={serialNumber}
+                        onChange={(e) =>
+                          handleBatterySerialNumberChange(index, e.target.value)
+                        }
+                        variant="outlined"
+                        fullWidth
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              {BATTERY_SN_PREFIX}
+                            </InputAdornment>
+                          )
+                        }}
+                        inputProps={{
+                          maxLength: BATTERY_SN_SUFFIX_LENGTH,
+                          placeholder: '0000'
+                        }}
+                        helperText={`Enter ${BATTERY_SN_SUFFIX_LENGTH} digits`}
+                      />
+                    </div>
+                  ))}
+
                 <div>
                   <TextField
                     label={

typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx

@@ -16,6 +16,8 @@ export interface I_Installation extends I_S3Credentials {
   inverterSN: string;
   dataloggerSN: string;
   batteryClusterNumber: number;
+  batteryNumber: number;
+  batterySerialNumbers: string;
   parentId: number;
   s3WriteKey: string;
   s3WriteSecret: string;