586 lines
18 KiB
JavaScript
586 lines
18 KiB
JavaScript
import { Modal } from "@mantine/core";
|
|
import {
|
|
Button,
|
|
FormControl,
|
|
IconButton,
|
|
Input,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
Switch,
|
|
TextField,
|
|
Tooltip,
|
|
} from "@mui/material";
|
|
import { IconCirclePlus } from "@tabler/icons-react";
|
|
import axios from "axios";
|
|
import React, { useEffect, useReducer, useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
import {
|
|
addLineForStation,
|
|
editLine,
|
|
editStationInfo,
|
|
enableLine,
|
|
getAllLineOfStation,
|
|
getAllStation,
|
|
} from "../../api/DeviceAPI";
|
|
import "./NetworkSetting.css";
|
|
|
|
const NetworkSetting = () => {
|
|
const [isloading, setIsLoading] = useReducer((x) => x + 1, 0);
|
|
const [openedEdit, setOpenedEdit] = useState(false);
|
|
const [editStation, setEditStation] = useState(true);
|
|
const [allStation, setAllStation] = useState([]);
|
|
const [allLine, setAllLine] = useState([]);
|
|
const [station, setStation] = useState(0);
|
|
const [infoStation, setInfoStation] = useState({});
|
|
const [line, setLine] = useState({});
|
|
const [selectStation, setSelectStation] = useState(2);
|
|
const [infoLine, setInfoLine] = useState({
|
|
line: "",
|
|
port: "",
|
|
clear: "",
|
|
ip: "",
|
|
});
|
|
|
|
const getAllSta = async () => {
|
|
try {
|
|
const res = await axios.post(getAllStation);
|
|
setAllStation(
|
|
res.data.pData.sort(function (a, b) {
|
|
if (a.sta_name < b.sta_name) {
|
|
return -1;
|
|
}
|
|
if (a.sta_name > b.sta_name) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
})
|
|
);
|
|
setInfoStation(res.data.pData[station]);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const getAllLineOfSta = async (id) => {
|
|
try {
|
|
const res = await axios.post(getAllLineOfStation, { id: id });
|
|
setAllLine(res.data.pData);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const addLine = async (id) => {
|
|
try {
|
|
if(infoLine.line===""||infoLine.port===""||infoLine.clear===""||infoLine.ip===""){
|
|
toast.error("Error. Please check the infomation of the line")
|
|
}else{
|
|
const res = await axios.post(addLineForStation, {
|
|
number: infoLine.line,
|
|
port: infoLine.port,
|
|
clear: infoLine.clear,
|
|
ip: infoLine.ip,
|
|
station: selectStation,
|
|
});
|
|
setAllLine(res.data);
|
|
setIsLoading();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const editInfoLine = async () => {
|
|
try {
|
|
const res = await axios.post(editLine, {
|
|
id_line: line.id_line,
|
|
line_number: line.line_number,
|
|
line_port: line.line_port,
|
|
line_clear: line.line_clear,
|
|
line_ip: line.line_ip,
|
|
});
|
|
setOpenedEdit(false);
|
|
setIsLoading();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const editInfoStation = async () => {
|
|
try {
|
|
const res = await axios.post(editStationInfo, {
|
|
id: infoStation.id_station,
|
|
ip: infoStation.sta_ip,
|
|
tftp: infoStation.sta_tftp,
|
|
network: infoStation.sta_network,
|
|
netmask: infoStation.sta_netmask,
|
|
gateway: infoStation.sta_gateway,
|
|
gateway_line: infoStation.gateway_line,
|
|
netmask_line: infoStation.netmask_line,
|
|
APC1: infoStation.sta_APC1,
|
|
APC2: infoStation.sta_APC2,
|
|
portTelnet: infoStation.sta_port_telnet,
|
|
APC1_port: infoStation.APC1_port,
|
|
APC2_port: infoStation.APC2_port,
|
|
});
|
|
if (res.data.pCode === 1) {
|
|
setEditStation(true);
|
|
toast.success("Edit station success!");
|
|
setIsLoading();
|
|
} else {
|
|
toast.error("Edit station fail");
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getAllSta();
|
|
if (selectStation !== undefined) {
|
|
getAllLineOfSta(selectStation);
|
|
}
|
|
}, [isloading]);
|
|
|
|
return (
|
|
<div className="viewHome">
|
|
{/* <div className="titleContent">
|
|
<span>NETWORK SETTING</span>
|
|
</div> */}
|
|
|
|
<div className="divStation">
|
|
<FormControl sx={{ minWidth: 170}}>
|
|
<InputLabel id="demo-simple-select-autowidth-label">
|
|
Station
|
|
</InputLabel>
|
|
<Select
|
|
labelId="demo-simple-select-autowidth-label"
|
|
id="demo-simple-select-autowidth"
|
|
style={{fontSize:"0.8rem"}}
|
|
value={station}
|
|
onChange={(e) => {
|
|
setStation(e.target.value);
|
|
setInfoStation(allStation[e.target.value]);
|
|
}}
|
|
size="small"
|
|
autoWidth
|
|
label="Station"
|
|
>
|
|
{allStation.length > 0 &&
|
|
allStation.map((u, index) => (
|
|
<MenuItem
|
|
key={index}
|
|
sx={{ m: 1, minWidth: 200 }}
|
|
value={index}
|
|
onClick={() => {
|
|
getAllLineOfSta(u.id_station);
|
|
setSelectStation(u.id_station);
|
|
}}
|
|
>
|
|
{u.sta_name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
<Button
|
|
style={{ marginLeft: "2%" }}
|
|
variant={editStation ? "outlined" : "contained"}
|
|
onClick={() => {
|
|
setEditStation(!editStation);
|
|
if (editStation === false) {
|
|
editInfoStation();
|
|
}
|
|
}}
|
|
size="small"
|
|
>
|
|
{editStation ? "Setting station" : "Save"}
|
|
|
|
</Button>
|
|
</div>
|
|
<div className="info">
|
|
<div className="divInfoStation">
|
|
{infoStation !== undefined && allStation.length > 0 ? (
|
|
<>
|
|
{" "}
|
|
<div className="divInfo">
|
|
{" "}
|
|
<div className="spanInfo">
|
|
<span>Host IP Address: </span>
|
|
</div>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_ip}
|
|
onChange={(e) => {
|
|
setInfoStation({ ...infoStation, sta_ip: e.target.value });
|
|
}}
|
|
disabled={editStation}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<div className="spanInfo">
|
|
<span>Port telnet: </span>
|
|
</div>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_port_telnet}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_port_telnet: e.target.value,
|
|
});
|
|
}}
|
|
disabled={editStation}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">TFTP Server: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_tftp}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_tftp: e.target.value,
|
|
});
|
|
}}
|
|
disabled={editStation}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">Netmask: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_netmask}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_netmask: e.target.value,
|
|
});
|
|
}}
|
|
disabled={editStation}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">Default-gateway: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_gateway}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_gateway: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">APC1: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_APC1}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_APC1: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">APC1 Port: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.APC1_port}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
APC1_port: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">APC2: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.sta_APC2}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
sta_APC2: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">APC2 Port: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.APC2_port}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
APC2_port: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">Netmask line: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.netmask_line}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
netmask_line: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
<div className="divInfo">
|
|
{" "}
|
|
<span className="spanInfo">Default-gateway line: </span>
|
|
<Input
|
|
id="inputStation"
|
|
value={infoStation.gateway_line}
|
|
disabled={editStation}
|
|
onChange={(e) => {
|
|
setInfoStation({
|
|
...infoStation,
|
|
gateway_line: e.target.value,
|
|
});
|
|
}}
|
|
size="small"
|
|
></Input>
|
|
</div>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
<div className="divAddLine">
|
|
{station !== undefined && allLine.length < 16 ? (
|
|
<>
|
|
<IconButton className="" onClick={addLine}>
|
|
<IconCirclePlus color="green" />
|
|
</IconButton>
|
|
<div className="">
|
|
<TextField
|
|
size="small"
|
|
variant="standard"
|
|
label="Line"
|
|
value={infoLine.line}
|
|
onChange={(e) => {
|
|
setInfoLine({ ...infoLine, line: e.target.value });
|
|
}}
|
|
sx={{ width: "40px", marginRight: "20px" }}
|
|
/>
|
|
</div>
|
|
<div className="">
|
|
<TextField
|
|
id=""
|
|
size="small"
|
|
variant="standard"
|
|
label="Port"
|
|
value={infoLine.port}
|
|
onChange={(e) => {
|
|
setInfoLine({ ...infoLine, port: e.target.value });
|
|
}}
|
|
sx={{ width: "70px", marginRight: "20px" }}
|
|
/>
|
|
</div>
|
|
<div className="">
|
|
<TextField
|
|
size="small"
|
|
variant="standard"
|
|
label="Clear"
|
|
value={infoLine.clear}
|
|
onChange={(e) => {
|
|
setInfoLine({ ...infoLine, clear: e.target.value });
|
|
}}
|
|
sx={{ width: "40px", marginRight: "20px" }}
|
|
/>
|
|
</div>
|
|
<div className="">
|
|
<TextField
|
|
size="small"
|
|
variant="standard"
|
|
label="IP Address"
|
|
value={infoLine.ip}
|
|
onChange={(e) => {
|
|
setInfoLine({ ...infoLine, ip: e.target.value });
|
|
}}
|
|
sx={{ width: "150px", marginRight: "20px" }}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divInfoLine">
|
|
<div className="infoLineTitle">
|
|
<div style={{ position: "absolute", left: -5 }}>Port </div>
|
|
<div style={{ position: "absolute", left: "20%" }}>
|
|
Telnet Port{" "}
|
|
</div>
|
|
<div style={{ position: "absolute", left: "40%" }}>Clear Line</div>
|
|
<div style={{ position: "absolute", left: "60%" }}>IP Address</div>
|
|
<div style={{ position: "absolute", left: "80%" }}>Enable</div>
|
|
<div></div>
|
|
</div>
|
|
{allLine.length > 0
|
|
? allLine.map((u, index) => (
|
|
<Tooltip
|
|
title={"Edit line " + u.line_number}
|
|
placement="right-end"
|
|
>
|
|
<div key={index} style={{ display: "flex" }}>
|
|
<div
|
|
className="infoLine"
|
|
onClick={() => {
|
|
setLine(u);
|
|
setOpenedEdit(true);
|
|
}}
|
|
>
|
|
<div className="lineName">Line {u.line_number}: </div>
|
|
<div> {u.line_port} </div>
|
|
<div>{u.line_clear} </div>
|
|
<div>{u.line_ip} </div>
|
|
</div>
|
|
<div style={{ width: "25%", textAlign: "center" }}>
|
|
<Switch
|
|
size="small"
|
|
checked={u.enable === 1 ? true : false}
|
|
onChange={async (e) => {
|
|
await axios.post(enableLine, {
|
|
id: u.id_line,
|
|
status: u.enable * -1,
|
|
});
|
|
setIsLoading();
|
|
}}
|
|
></Switch>{" "}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
))
|
|
: ""}
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
opened={openedEdit}
|
|
onClose={() => {
|
|
setOpenedEdit(false);
|
|
}}
|
|
title={
|
|
<div style={{ fontSize: "1.3rem", fontWeight: "700" }}>Edit line</div>
|
|
}
|
|
>
|
|
<span style={{ fontSize: "0.9rem", fontWeight: "600" }}>Line:</span>
|
|
|
|
<>
|
|
<Input
|
|
value={line.line_number}
|
|
onChange={(e) => {
|
|
setLine({ ...line, line_number: e.target.value });
|
|
}}
|
|
/>
|
|
<br></br>
|
|
</>
|
|
|
|
<span style={{ fontSize: "0.9rem", fontWeight: "600" }}>
|
|
Telnet Port
|
|
</span>
|
|
|
|
<>
|
|
<Input
|
|
value={line.line_port}
|
|
onChange={(e) => {
|
|
setLine({ ...line, line_port: e.target.value });
|
|
}}
|
|
/>
|
|
<br></br>
|
|
</>
|
|
<span style={{ fontSize: "0.9rem", fontWeight: "600" }}>
|
|
Clear Line
|
|
</span>
|
|
<>
|
|
<Input
|
|
value={line.line_clear}
|
|
onChange={(e) => {
|
|
setLine({ ...line, line_clear: e.target.value });
|
|
}}
|
|
/>
|
|
<br></br>
|
|
</>
|
|
<span style={{ fontSize: "0.9rem", fontWeight: "600" }}>
|
|
IP Address
|
|
</span>
|
|
<>
|
|
<Input
|
|
value={line.line_ip}
|
|
onChange={(e) => {
|
|
setLine({ ...line, line_ip: e.target.value });
|
|
}}
|
|
/>
|
|
<br></br>
|
|
</>
|
|
{/* <span style={{ fontSize: "0.9rem", fontWeight: "600" }}>
|
|
Default-gateway
|
|
</span>
|
|
<>
|
|
<Input
|
|
value={line.line_gateway}
|
|
onChange={(e) => {
|
|
setLine({ ...line, line_gateway: e.target.value });
|
|
}}
|
|
/>
|
|
<br></br>
|
|
</> */}
|
|
<div
|
|
style={{ width: "100%", textAlign: "center", margin: "2vh 0 0 0" }}
|
|
>
|
|
<Button
|
|
variant="contained"
|
|
sx={{ textTransform: "none", margin: "0 5% 0 0" }}
|
|
onClick={() => editInfoLine()}
|
|
>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NetworkSetting;
|