✨ Reconfig

Honeybrain · Mar 21, 2024 · 9c82408 · 9c82408
1 parent 2acd4f8
commit 9c82408
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 55 deletions.
diff --git a/src/components/dashboard/Others.tsx b/src/components/dashboard/Others.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useState } from 'react';
 import '../../styles.css';
-import { Grid, TextField, Box, Button, Paper, Typography } from '@mui/material';
+import { Grid, TextField, Box, Button, Paper, Typography, Snackbar, Alert } from '@mui/material';
 import HelpModal from '@components/HelpModal';
 import { useTranslation } from 'react-i18next';
 import { NightModeContext } from '@contexts/NightModeContext';
@@ -13,15 +13,14 @@ const getRandomDummyPcIPAddresses = (subnet: string, numServices: number) => {
     const subnetMask = parseInt(subnetParts[1]);
     const maxNumServices = Math.pow(2, 32 - subnetMask) - 2;
     const ipAddresses: string[] = [];
-    const { isNightMode } = useContext(NightModeContext);
 
     if (numServices > maxNumServices)
         numServices = maxNumServices;
     for (let i = 0; i < numServices; i++) {
         const randomIP = generateRandomIP(baseIP, subnetMask);
         ipAddresses.push(randomIP);
     }
-    return ipAddresses;
+    return ipAddresses.join(", ");
 };
 
 const generateRandomIP = (baseIP: string, subnetMask: number) => {
@@ -54,47 +53,33 @@ const getTextFieldStyles = (isNightMode) => ({
 const Others = () => {
     const { reconfigure } = useReconfigRPC();
     const [dummyPcNumServices, setDummyPcNumServices] = useState<number>(2);
-    const [ftpIPAddress, setFtpIPAddress] = useState<string>('192.168.1.10');
     const [ftpPort, setFtpPort] = useState<string>('21');
     const [netinterface, setNetinterface] = useState<string>('eth0');
     const [subnet, setSubnet] = useState<string>('192.168.1.0/24');
+    const [ftpIPAddress, setFtpIPAddress] = useState<string>(generateRandomIP(subnet.split('/')[0], parseInt(subnet.split('/')[1])));
     const [dockerPath, setDockerPath] = useState<string>('/home/shop/Dockerfile');
-    const [dummyPcIPAddresses, setDummyPcIPAddresses] = useState<string[]>(getRandomDummyPcIPAddresses(subnet, 2));
+    const [dummyPcIPAddresses, setDummyPcIPAddresses] = useState<string>(getRandomDummyPcIPAddresses(subnet, dummyPcNumServices));
     const { t } = useTranslation();
     const { isNightMode } = useContext(NightModeContext);
     const paperStyle = isNightMode ? { backgroundColor: '#262626', color: 'white' } : {};
-    const textFieldStyles = getTextFieldStyles(isNightMode);
-    const handleDummyPcNumServicesChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const numServices = parseInt(event.target.value) > 5 ? 5 : parseInt(event.target.value) < 0 ? 0 : parseInt(event.target.value);
-        setDummyPcNumServices(numServices);
-
-        if (numServices === 0) {
-            setDummyPcIPAddresses([]);
-        } else {
-            const randomIPAddresses = getRandomDummyPcIPAddresses(subnet, numServices);
-            setDummyPcIPAddresses(randomIPAddresses);
-        }
-    };
-
-    const handleDummyPcIPAddressChange = (index: number, event: ChangeEvent<HTMLInputElement>) => {
-        const updatedIPAddresses = [...dummyPcIPAddresses];
-        updatedIPAddresses[index] = event.target.value;
-        setDummyPcIPAddresses(updatedIPAddresses);
-    };
+    const [open, setOpen] = React.useState(false);
+    const [alertText, setAlertText] = React.useState("");
+    const [isReconfiguring, setIsReconfiguring] = useState(false);
 
     const handleReconfig = async (e) => {
+        setIsReconfiguring(true);
         const configData = {
             dummy_pc: {
                 num_services: dummyPcNumServices,
-                ip_addresses: dummyPcIPAddresses,
+                ip_addresses: dummyPcIPAddresses.split(',').map(ip => ip.trim()),
             },
             ftp: {
                 ip_address: ftpIPAddress,
                 port: ftpPort,
             },
             interface: netinterface,
             subnet: subnet,
-            docker: dockerPath,
+            dockerfile: dockerPath,
         };
         const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(configData, null, 4));
         /*const downloadAnchorNode = document.createElement('a');
@@ -107,12 +92,26 @@ const Others = () => {
         try {
             console.log(configData)
             await reconfigure(JSON.stringify(configData, null, 4));
+            setAlertText(t("configGenerator.configurationApplied"));
+            setOpen(true);
         } catch (error) {
             console.error("error is : " + error);
         }
-
+        setIsReconfiguring(false);
     };
 
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+      }, []);
+
+    React.useEffect(() => {
+        if (isReconfiguring) {
+            document.body.style.cursor = 'wait';
+        } else {
+            document.body.style.cursor = 'default';
+        }
+    }, [isReconfiguring]);
+
     return (
         <Box flex={1} display="flex" justifyContent="center" alignItems="center">
             <Paper sx={{ ...paperStyle, p: 2, width: '50em' }}>
@@ -129,17 +128,6 @@ const Others = () => {
                     <Grid item xs={6}>
                         <Typography variant="h6" mb={2}>{t('configGenerator.generalConfiguration')}</Typography>
                         <Grid container spacing={2} direction="column" alignItems="stretch">
-                            <Grid item>
-                                <TextField
-                                    type="text"
-                                    variant="outlined"
-                                    label={t('configGenerator.networkInterfaceLabel')}
-                                    value={netinterface}
-                                    onChange={(e) => setNetinterface(e.target.value)}
-                                    fullWidth
-                                    sx={getTextFieldStyles(isNightMode)}
-                                    />
-                            </Grid>
                             <Grid item>
                                 <TextField
                                     type="text"
@@ -174,24 +162,22 @@ const Others = () => {
                                     variant="outlined"
                                     label={t('configGenerator.numberOfDummyPCLabel')}
                                     value={dummyPcNumServices}
-                                    onChange={handleDummyPcNumServicesChange}
                                     fullWidth
                                     sx={getTextFieldStyles(isNightMode)}
                                 />
                             </Grid>
-                            {dummyPcIPAddresses.map((ipAddress, index) => (
-                                <Grid item key={index}>
-                                    <TextField
-                                        type="text"
-                                        variant="outlined"
-                                        label={t('configGenerator.ipAddressForDummyPCLabel') + ' ' + (index + 1)}
-                                        value={ipAddress}
-                                        onChange={(event: any) => handleDummyPcIPAddressChange(index, event)}
-                                        fullWidth
-                                        sx={getTextFieldStyles(isNightMode)}
-                                    />
-                                </Grid>
-                            ))}
+                            <Grid item>
+                                <TextField
+                                    type="text"
+                                    variant="outlined"
+                                    label={t('configGenerator.ipAddressesForDummyPCsLabel')}
+                                    value={dummyPcIPAddresses}
+                                    onChange={(e) => setDummyPcIPAddresses(e.target.value)}
+                                    fullWidth
+                                    sx={getTextFieldStyles(isNightMode)}
+                                    helperText={t('configGenerator.ipAddressesForDummyPCsHelp')}
+                                />
+                            </Grid>
                             <Grid item>
                                 <TextField
                                     type="text"
@@ -224,6 +210,15 @@ const Others = () => {
                         </Button>
                     </Box>
                 </Grid>
+                <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+                    <Alert
+                    onClose={handleClose}
+                    severity="success"
+                    sx={{ width: "100%" }}
+                    >
+                  {alertText}
+                    </Alert>
+                </Snackbar>
             </Paper>
         </Box>
     );

diff --git a/src/locales/ch/translation.json b/src/locales/ch/translation.json
@@ -93,7 +93,8 @@
     "ipAddressForDummyPCLabel": "假 PC 的 IP 地址",
     "ipAddressForFTPLabel": "FTP 的 IP 地址",
     "portForFTPLabel": "FTP 端口",
-    "downloadConfiguration": "下载配置"
+    "downloadConfiguration": "应用配置",
+    "configurationApplied": "已应用的配置"
   },
   "historyPage": {
     "title": "动作历史",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -94,7 +94,8 @@
     "ipAddressForDummyPCLabel": "IP Address for dummy PC",
     "ipAddressForFTPLabel": "IP Address for FTP",
     "portForFTPLabel": "Port for FTP",
-    "downloadConfiguration": "Download Configuration"
+    "downloadConfiguration": "Apply Configuration",
+    "configurationApplied": "Configuration applied"
   },
   "historyPage": {
     "title": "Action History",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -93,7 +93,8 @@
     "ipAddressForDummyPCLabel": "Dirección IP de la PC falsa",
     "ipAddressForFTPLabel": "Dirección IP para FTP",
     "portForFTPLabel": "Puerto para FTP",
-    "downloadConfiguration": "Descargar configuración"
+    "downloadConfiguration": "Aplicar configuración",
+    "configurationApplied": "Configuración aplicada"
   },
   "historyPage": {
     "title": "Historial de acciones",

diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
@@ -94,7 +94,8 @@
     "ipAddressForDummyPCLabel": "Adresse IP pour le faux PC",
     "ipAddressForFTPLabel": "Adresse IP pour le FTP",
     "portForFTPLabel": "Port pour le FTP",
-    "downloadConfiguration": "Télécharger la Configuration"
+    "downloadConfiguration": "Appliquer la Configuration",
+    "configurationApplied": "Configuration appliquée"
   },
   "historyPage": {
     "title": "Historique des actions",