1108 lines
36 KiB
TypeScript
1108 lines
36 KiB
TypeScript
import "@mantine/core/styles.css";
|
|
import "@mantine/dates/styles.css";
|
|
import "@mantine/notifications/styles.css";
|
|
import "./App.css";
|
|
import classes from "./App.module.css";
|
|
import componentClasses from "./components/Component.module.css";
|
|
|
|
import {
|
|
Suspense,
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import {
|
|
Tabs,
|
|
Text,
|
|
Container,
|
|
Flex,
|
|
MantineProvider,
|
|
Grid,
|
|
ScrollArea,
|
|
LoadingOverlay,
|
|
Loader,
|
|
Box,
|
|
} from "@mantine/core";
|
|
import type {
|
|
DataSummaryTested,
|
|
FileInfo,
|
|
IScenario,
|
|
ReceivedFile,
|
|
ResponseData,
|
|
TBrands,
|
|
TCategories,
|
|
TLine,
|
|
TStation,
|
|
TUser,
|
|
} from "./untils/types";
|
|
import axios from "axios";
|
|
import CardLine from "./components/CardLine";
|
|
import { SocketProvider, useSocket } from "./context/SocketContext";
|
|
import // ButtonConnect,
|
|
// ButtonControlApc,
|
|
// ButtonCopy,
|
|
// ButtonDPELP,
|
|
// ButtonScenario,
|
|
// ButtonSelect,
|
|
"./components/ButtonAction";
|
|
import StationSetting from "./components/FormAddEdit";
|
|
// import DrawerScenario from "./components/DrawerScenario";
|
|
import { Notifications } from "@mantine/notifications";
|
|
import ModalTerminal from "./components/Modal/ModalTerminal";
|
|
import PageLogin from "./components/Authentication/LoginPage";
|
|
// import DrawerLogs from "./components/DrawerLogs";
|
|
import DraggableTabs from "./components/DragTabs";
|
|
import { isJsonString } from "./untils/helper";
|
|
import BottomToolBar from "./components/BottomToolBar";
|
|
import ModalConfirmSkipTestPort from "./components/Modal/ModalConfirmSkipTestPort";
|
|
import ModalConfirmRunPhysical from "./components/Modal/ModalConfirmRunPhysicalTest";
|
|
import ModalSummaryTested from "./components/Modal/ModalSummaryTested";
|
|
// import ModalConfirmRunScenario from "./components/Modal/ModalConfirmRunScenario";
|
|
|
|
const apiUrl = import.meta.env.VITE_BACKEND_URL;
|
|
|
|
// Helper: chia mảng thành các chunk theo size
|
|
const chunkArray = <T,>(array: T[], size: number): T[][] => {
|
|
const result: T[][] = [];
|
|
for (let i = 0; i < array.length; i += size) {
|
|
result.push(array.slice(i, i + size));
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Main Component
|
|
*/
|
|
function App() {
|
|
const user = useMemo(() => {
|
|
return localStorage.getItem("user") &&
|
|
isJsonString(localStorage.getItem("user"))
|
|
? JSON.parse(localStorage.getItem("user") || "")
|
|
: null;
|
|
}, []);
|
|
|
|
if (!user) {
|
|
localStorage.removeItem("user");
|
|
window.location.href = "/";
|
|
}
|
|
|
|
document.title = "Automation Test";
|
|
const { socket } = useSocket();
|
|
const [stations, setStations] = useState<TStation[]>([]);
|
|
const [selectedLines, setSelectedLines] = useState<TLine[]>([]);
|
|
const [activeTab, setActiveTab] = useState("0");
|
|
const [isDisable, setIsDisable] = useState(false);
|
|
const [isOpenAddStation, setIsOpenAddStation] = useState(false);
|
|
const [isEditStation, setIsEditStation] = useState(false);
|
|
const [stationEdit, setStationEdit] = useState<TStation | undefined>();
|
|
const [scenarios, setScenarios] = useState<IScenario[]>([]);
|
|
const [openModalTerminal, setOpenModalTerminal] = useState(false);
|
|
const [selectedLine, setSelectedLine] = useState<TLine | undefined>();
|
|
const [loadingTerminal, setLoadingTerminal] = useState(false);
|
|
const [usersConnecting, setUsersConnecting] = useState<TUser[]>([]);
|
|
const [testLogContent, setTestLogContent] = useState("");
|
|
const [isLogModalOpen, setIsLogModalOpen] = useState(false);
|
|
const [expandedBottomBar, setExpandedBottomBar] = useState(true);
|
|
const [activeTabBottom, setActiveTabBottom] = useState<string>("command");
|
|
const lineBuffersRef = useRef(new Map<number, string>());
|
|
const flushScheduledRef = useRef(false);
|
|
const [listBrands, setListBrands] = useState<TBrands[]>([]);
|
|
const [listCategories, setListCategories] = useState<TCategories[]>([]);
|
|
const [listIos, setListIos] = useState<FileInfo[]>([]);
|
|
const [listLicense, setListLicense] = useState<FileInfo[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [linesConfirmSkipPort, setLinesConfirmSkipPort] = useState<TLine[]>([]);
|
|
const [linesConfirmRunPhysical, setLinesConfirmRunPhysical] = useState<
|
|
TLine[]
|
|
>([]);
|
|
const [dataSummaryTested, setDataSummaryTested] =
|
|
useState<DataSummaryTested | null>(null);
|
|
|
|
const connectApcSwitch = (station: TStation) => {
|
|
if (!station?.is_active) return;
|
|
if (station?.apc_1_ip && station?.apc_1_port) {
|
|
socket?.emit("connect_apc", {
|
|
station: station,
|
|
apcIp: station?.apc_1_ip,
|
|
apcName: "apc_1",
|
|
});
|
|
}
|
|
if (station?.apc_2_ip && station?.apc_2_port) {
|
|
socket?.emit("connect_apc", {
|
|
station: station,
|
|
apcIp: station?.apc_2_ip,
|
|
apcName: "apc_2",
|
|
});
|
|
}
|
|
if (station?.switch_control_ip && station?.switch_control_port) {
|
|
socket?.emit("connect_switch", {
|
|
station: station,
|
|
ip: station?.switch_control_ip,
|
|
});
|
|
}
|
|
};
|
|
|
|
// function get list station
|
|
const getStation = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/stations");
|
|
if (response.status) {
|
|
if (Array.isArray(response.data)) {
|
|
setStations(
|
|
response.data.map((station) => {
|
|
connectApcSwitch(station);
|
|
const lines = (station?.lines || []).sort(
|
|
(a: TLine, b: TLine) => a?.lineNumber - b?.lineNumber,
|
|
);
|
|
return { ...station, lines };
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get station", error);
|
|
}
|
|
};
|
|
|
|
// function get list station
|
|
const getScenarios = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/scenarios");
|
|
if (response.data.status) {
|
|
if (Array.isArray(response.data.data.data)) {
|
|
setScenarios(response.data.data.data);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get station", error);
|
|
}
|
|
};
|
|
|
|
// function get list brand
|
|
const getBrands = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/brands");
|
|
if (response.data) {
|
|
if (response.data && Array.isArray(response.data)) {
|
|
setListBrands(response.data);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get brand", error);
|
|
}
|
|
};
|
|
|
|
// function get list brand
|
|
const getCategories = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/categories");
|
|
if (response.data && Array.isArray(response.data)) {
|
|
setListCategories(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get brand", error);
|
|
}
|
|
};
|
|
|
|
// function get list ios
|
|
const getListIos = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/ios");
|
|
if (response.data && Array.isArray(response.data)) {
|
|
setListIos(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get ios", error);
|
|
}
|
|
};
|
|
|
|
// function get list license
|
|
const getListLicense = async () => {
|
|
try {
|
|
const response = await axios.get(apiUrl + "api/license");
|
|
if (response.data && Array.isArray(response.data)) {
|
|
setListLicense(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error get ios", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
getStation();
|
|
getScenarios();
|
|
getBrands();
|
|
getCategories();
|
|
getListIos();
|
|
getListLicense();
|
|
}, [socket]);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!socket || !stations?.length) return;
|
|
|
|
socket.on("line_connected", (data) =>
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ status: data.status, connecting: false },
|
|
data?.stationId,
|
|
),
|
|
);
|
|
|
|
socket.on("line_disconnected", (data) =>
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{
|
|
status: data.status,
|
|
connecting: false,
|
|
netOutput: "[CLEAR_TERMINAL_SCROLL_BACK]",
|
|
output: "[CLEAR_TERMINAL_SCROLL_BACK]",
|
|
listFeatureTested: [],
|
|
latestScenario: undefined,
|
|
isReady: false,
|
|
},
|
|
data?.stationId,
|
|
),
|
|
);
|
|
|
|
socket?.on("line_output", (data) => {
|
|
const { lineId, data: text } = data;
|
|
// updateValueLineStation(
|
|
// data?.lineId,
|
|
// { isReady: data.isReady },
|
|
// data?.stationId
|
|
// );
|
|
|
|
const buf = lineBuffersRef.current.get(lineId) || "";
|
|
lineBuffersRef.current.set(lineId, buf + text);
|
|
|
|
if (!flushScheduledRef.current) {
|
|
flushScheduledRef.current = true;
|
|
setTimeout(() => flushBuffers(), 50);
|
|
}
|
|
});
|
|
|
|
socket?.on("update_status_ready", (data) => {
|
|
const { isReady } = data;
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ isReady: isReady },
|
|
data?.stationId,
|
|
);
|
|
});
|
|
|
|
socket?.on("line_error", (data) => {
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ netOutput: data.error, connecting: false },
|
|
data?.stationId,
|
|
);
|
|
});
|
|
|
|
socket?.on("init", (data) => {
|
|
if (Array.isArray(data)) {
|
|
// console.log(data);
|
|
setLoadingTerminal(true);
|
|
data.forEach((value) => {
|
|
updateValueLineStation(
|
|
value?.id,
|
|
{ ...value, netOutput: value.output },
|
|
value?.stationId,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
|
|
socket?.on("user_connecting", (data) => {
|
|
if (Array.isArray(data)) {
|
|
setUsersConnecting(data);
|
|
}
|
|
});
|
|
|
|
socket?.on("user_open_cli", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data.lineId,
|
|
{
|
|
cliOpened: true,
|
|
userEmailOpenCLI: data.userEmailOpenCLI,
|
|
userOpenCLI: data.userOpenCLI,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("user_close_cli", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data.lineId,
|
|
{
|
|
cliOpened: false,
|
|
userEmailOpenCLI: undefined,
|
|
userOpenCLI: undefined,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
const receivedFiles: Record<string, ReceivedFile> = {};
|
|
socket?.on("response_content_log", (data: ResponseData) => {
|
|
if (!data.chunk) {
|
|
const decoder = new TextDecoder("utf-8");
|
|
const str = decoder.decode(data as unknown as ArrayBuffer);
|
|
setTestLogContent(str);
|
|
return;
|
|
}
|
|
|
|
const { fileId, chunkIndex, totalChunks, chunk } = data.chunk;
|
|
|
|
if (!receivedFiles[fileId]) {
|
|
receivedFiles[fileId] = {
|
|
chunks: [],
|
|
receivedChunks: 0,
|
|
totalChunks,
|
|
};
|
|
}
|
|
|
|
let bufferChunk: Buffer;
|
|
|
|
if (chunk instanceof ArrayBuffer) {
|
|
bufferChunk = Buffer.from(new Uint8Array(chunk)); // ✅ convert properly
|
|
} else if (chunk instanceof Uint8Array) {
|
|
bufferChunk = Buffer.from(chunk); // ✅ direct support
|
|
} else {
|
|
bufferChunk = chunk as Buffer; // fallback if server sends Buffer
|
|
}
|
|
|
|
receivedFiles[fileId].chunks[chunkIndex] = bufferChunk;
|
|
receivedFiles[fileId].receivedChunks++;
|
|
|
|
if (receivedFiles[fileId].receivedChunks === totalChunks) {
|
|
const fileBuffer = Buffer.concat(receivedFiles[fileId].chunks);
|
|
const decoder = new TextDecoder("utf-8");
|
|
const str = decoder.decode(fileBuffer);
|
|
|
|
setTestLogContent(str);
|
|
delete receivedFiles[fileId]; // cleanup ✅
|
|
}
|
|
});
|
|
|
|
socket?.on("data_textfsm", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data.lineId,
|
|
{
|
|
data: data.data,
|
|
inventory: data.inventory,
|
|
latestScenario: data.latestScenario,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("update_ticket", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data.lineId,
|
|
{
|
|
tickets: data.data,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("update_baud", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data.lineId,
|
|
{
|
|
baud: data.data,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("line_connecting", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ connecting: true },
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("running_scenario", (data) => {
|
|
setTimeout(() => {
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{
|
|
runningScenario: data?.title || "",
|
|
runningPhysical: data?.physical || false,
|
|
ports: data?.ports || [],
|
|
listPortsPhysical: [],
|
|
},
|
|
data?.stationId,
|
|
);
|
|
}, 100);
|
|
});
|
|
|
|
socket?.on("user_clear_terminal", (data) => {
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ netOutput: "", output: "", loadingClearTerminal: true },
|
|
data?.stationId,
|
|
);
|
|
});
|
|
|
|
socket?.on("test_port_physical", (data) => {
|
|
if (data?.data && data?.data.length > 0)
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{ listPortsPhysical: data?.data },
|
|
data?.stationId,
|
|
);
|
|
});
|
|
|
|
socket?.on("feature_tested", (data) => {
|
|
if (data?.listFeatureTested) {
|
|
updateValueLineStation(
|
|
data?.lineId,
|
|
{
|
|
listFeatureTested: data?.listFeatureTested,
|
|
isSkipPhysical: data?.isSkipPhysical,
|
|
reasonSkipPhysical: data?.reasonSkipPhysical,
|
|
},
|
|
data?.stationId,
|
|
);
|
|
if (data?.isSkipPhysical && !data?.reasonSkipPhysical) {
|
|
const valueLine = findLineByLineId(data?.lineId, data?.stationId);
|
|
if (
|
|
valueLine &&
|
|
openModalTerminal &&
|
|
selectedLine?.id === valueLine?.id &&
|
|
(!valueLine?.listPortsPhysical ||
|
|
valueLine?.listPortsPhysical?.length === 0)
|
|
)
|
|
setLinesConfirmSkipPort((pre) => [
|
|
...pre,
|
|
{
|
|
...valueLine,
|
|
inventory: {
|
|
...valueLine.inventory,
|
|
pid: data?.pid,
|
|
sn: data?.sn,
|
|
vid: data?.vid,
|
|
},
|
|
},
|
|
]);
|
|
}
|
|
if (
|
|
!data?.listFeatureTested?.includes("PHYSICAL") &&
|
|
data?.listFeatureTested?.includes("DPELP")
|
|
) {
|
|
const valueLine = findLineByLineId(data?.lineId, data?.stationId);
|
|
if (
|
|
valueLine &&
|
|
openModalTerminal &&
|
|
selectedLine?.id === valueLine?.id
|
|
)
|
|
setLinesConfirmRunPhysical((pre) => [
|
|
...pre,
|
|
{
|
|
...valueLine,
|
|
inventory: {
|
|
...valueLine.inventory,
|
|
pid: data?.pid,
|
|
sn: data?.sn,
|
|
vid: data?.vid,
|
|
},
|
|
},
|
|
]);
|
|
}
|
|
}
|
|
});
|
|
|
|
socket?.on("summary_tested", (data) => {
|
|
if (
|
|
data?.body &&
|
|
openModalTerminal &&
|
|
selectedLine?.id === data?.lineId
|
|
) {
|
|
setDataSummaryTested({
|
|
body: data?.body || "",
|
|
title: data?.title || "",
|
|
});
|
|
}
|
|
});
|
|
|
|
// ✅ cleanup on unmount or when socket changes
|
|
return () => {
|
|
socket.off("init");
|
|
socket.off("line_output");
|
|
socket.off("line_error");
|
|
socket.off("line_connected");
|
|
socket.off("line_disconnected");
|
|
socket.off("user_connecting");
|
|
socket.off("user_open_cli");
|
|
socket.off("user_close_cli");
|
|
socket.off("response_content_log");
|
|
socket.off("data_textfsm");
|
|
socket.off("update_ticket");
|
|
socket.off("update_baud");
|
|
socket.off("line_connecting");
|
|
socket.off("running_scenario");
|
|
socket.off("user_clear_terminal");
|
|
socket.off("test_port_physical");
|
|
socket.off("feature_tested");
|
|
socket.off("summary_tested");
|
|
};
|
|
}, [socket, stations, selectedLine]);
|
|
|
|
const flushBuffers = useCallback(() => {
|
|
setStations((prev) =>
|
|
prev.map((station) => ({
|
|
...station,
|
|
lines: station.lines.map((line) => {
|
|
const buffered = lineBuffersRef.current.get(line.id || 0);
|
|
if (!buffered) return line; // không có update
|
|
const data = {
|
|
...line,
|
|
netOutput: (line.netOutput || "") + buffered,
|
|
output: buffered,
|
|
loadingOutput: line.loadingOutput ? false : true,
|
|
loadingClearTerminal: false,
|
|
};
|
|
updateValueSelectedLine(line?.id || 0, data);
|
|
return data;
|
|
}),
|
|
})),
|
|
);
|
|
// clear
|
|
lineBuffersRef.current.clear();
|
|
flushScheduledRef.current = false;
|
|
}, []);
|
|
|
|
const updateValueLineStation = useCallback(
|
|
(lineId: number, updates: Partial<TLine>, stationId?: number) => {
|
|
setStations((prevStations) =>
|
|
prevStations?.map((station: TStation) =>
|
|
station.id === stationId
|
|
? {
|
|
...station,
|
|
lines: station.lines?.map((lineItem: TLine) => {
|
|
if (lineItem.id !== lineId) return lineItem;
|
|
|
|
const isNetOutput = typeof updates?.netOutput !== "undefined";
|
|
|
|
return {
|
|
...lineItem,
|
|
...updates,
|
|
lineNumber: lineItem.lineNumber,
|
|
line_number: lineItem.line_number,
|
|
ports:
|
|
updates?.ports && updates?.ports?.length > 0
|
|
? updates?.ports
|
|
: lineItem.ports || [],
|
|
...(isNetOutput && {
|
|
netOutput: updates?.loadingClearTerminal
|
|
? ""
|
|
: (lineItem.netOutput || "") +
|
|
(updates.netOutput || ""),
|
|
output: updates.netOutput, // Nếu netOutput thì update luôn output
|
|
loadingOutput: lineItem.loadingOutput ? false : true,
|
|
loadingClearTerminal: updates?.loadingClearTerminal
|
|
? updates?.loadingClearTerminal
|
|
: false,
|
|
}),
|
|
};
|
|
}),
|
|
}
|
|
: station,
|
|
),
|
|
);
|
|
|
|
// Update selectedLine nếu nó đang được chọn
|
|
setSelectedLine((prevSelected) => {
|
|
if (!prevSelected || prevSelected.id !== lineId) return prevSelected;
|
|
|
|
const isNetOutput = typeof updates?.netOutput !== "undefined";
|
|
|
|
return {
|
|
...prevSelected,
|
|
...updates,
|
|
ports:
|
|
updates?.ports && updates?.ports?.length > 0
|
|
? updates?.ports
|
|
: prevSelected.ports || [],
|
|
...(isNetOutput && {
|
|
netOutput: updates?.loadingClearTerminal
|
|
? ""
|
|
: (prevSelected.netOutput || "") + (updates.netOutput || ""),
|
|
output: updates.netOutput,
|
|
loadingOutput: prevSelected.loadingOutput ? false : true,
|
|
loadingClearTerminal: updates?.loadingClearTerminal
|
|
? updates?.loadingClearTerminal
|
|
: false,
|
|
}),
|
|
};
|
|
});
|
|
|
|
updateValueSelectedLines(lineId, updates);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const updateValueSelectedLines = (
|
|
lineId: number,
|
|
updates: Partial<TLine>,
|
|
) => {
|
|
// Update selectedLine nếu nó đang được chọn
|
|
setSelectedLines((prevSelected) =>
|
|
prevSelected?.map((line) => {
|
|
if (line.id === lineId) {
|
|
return { ...line, ...updates };
|
|
}
|
|
return line;
|
|
}),
|
|
);
|
|
};
|
|
|
|
const updateValueSelectedLine = (lineId: number, updates: Partial<TLine>) => {
|
|
// Update selectedLine nếu nó đang được chọn
|
|
setSelectedLine((prevSelected) => {
|
|
if (!prevSelected || prevSelected.id !== lineId) return prevSelected;
|
|
return {
|
|
...prevSelected,
|
|
...updates,
|
|
};
|
|
});
|
|
};
|
|
|
|
// const getLine = (lineId: number, stationId: number) => {
|
|
// const station = stations?.find((sta) => sta.id === stationId);
|
|
// if (station) {
|
|
// const line = station.lines?.find((li) => li.id === lineId);
|
|
// return line;
|
|
// } else return null;
|
|
// };
|
|
|
|
const openTerminal = (line: TLine) => {
|
|
setOpenModalTerminal(true);
|
|
const data = { ...line };
|
|
if (!line.userOpenCLI) {
|
|
data.cliOpened = true;
|
|
data.userEmailOpenCLI = user?.email;
|
|
data.userOpenCLI = user?.userName;
|
|
socket?.emit("open_cli", {
|
|
lineId: line.id,
|
|
stationId: line.stationId || line.station_id,
|
|
userEmail: user?.email,
|
|
userName: user?.userName,
|
|
});
|
|
}
|
|
setSelectedLine(data);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!expandedBottomBar) {
|
|
setActiveTabBottom("command");
|
|
}
|
|
}, [expandedBottomBar]);
|
|
|
|
const findLineByLineId = (lineId: number, stationId?: number) => {
|
|
const valueStation = stations.find((el) => el.id === stationId);
|
|
if (!valueStation || !stationId) return null;
|
|
const valueLine = valueStation?.lines?.find((el) => el.id === lineId);
|
|
return valueLine;
|
|
};
|
|
|
|
return (
|
|
<Container w={"100%"} style={{ maxWidth: "100%" }}>
|
|
<DraggableTabs
|
|
socket={socket}
|
|
usersConnecting={usersConnecting}
|
|
setIsEditStation={setIsEditStation}
|
|
setIsOpenAddStation={setIsOpenAddStation}
|
|
setStationEdit={setStationEdit}
|
|
tabsData={stations}
|
|
scenarios={scenarios}
|
|
setScenarios={setScenarios}
|
|
panels={stations.map((station) => (
|
|
<Tabs.Panel
|
|
className={classes.content}
|
|
key={station.id}
|
|
value={station.id.toString()}
|
|
pt="md"
|
|
>
|
|
<Flex className={classes.containerMain}>
|
|
<Grid>
|
|
<Grid.Col
|
|
span={12}
|
|
style={{
|
|
borderRadius: 8,
|
|
}}
|
|
>
|
|
<ScrollArea
|
|
// h={expandedBottomBar ? "80vh" : "85vh"}
|
|
h={expandedBottomBar ? "73vh" : "83vh"}
|
|
type="scroll"
|
|
scrollbars="y"
|
|
style={{ overflowX: "hidden" }}
|
|
className={componentClasses.hideScrollBar}
|
|
>
|
|
{isLoading ? (
|
|
<Box
|
|
style={{
|
|
height: "15vh",
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Loader color="blue" />
|
|
</Box>
|
|
) : station.lines.length > 0 ? (
|
|
station.lines.length < 9 ? (
|
|
<Grid
|
|
gutter="md"
|
|
style={{
|
|
margin: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{station.lines.map((line, i) => (
|
|
<Grid.Col
|
|
key={line.id ?? i}
|
|
span={3}
|
|
style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
maxWidth: "100%",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<CardLine
|
|
socket={socket}
|
|
stationItem={station}
|
|
line={line}
|
|
selectedLines={selectedLines}
|
|
setSelectedLines={setSelectedLines}
|
|
openTerminal={openTerminal}
|
|
loadTerminal={
|
|
loadingTerminal &&
|
|
Number(station.id) === Number(activeTab)
|
|
}
|
|
scenarios={scenarios}
|
|
/>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
// >= 9 lines: chia làm 2 cột, mỗi cột chứa 1/2 số line,
|
|
// mỗi cột hiển thị 2 item trên một "hàng" như ví dụ yêu cầu
|
|
(() => {
|
|
// const total = station.lines.length;
|
|
const half = 8;
|
|
const leftLines = station.lines.slice(0, half);
|
|
const rightLines = station.lines.slice(half);
|
|
|
|
const leftChunks = chunkArray(leftLines, 2);
|
|
const rightChunks = chunkArray(rightLines, 2);
|
|
const numRows = Math.max(
|
|
leftChunks.length,
|
|
rightChunks.length,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{Array.from({ length: numRows }).map(
|
|
(_, rowIndex) => {
|
|
const leftRow = leftChunks[rowIndex] || [];
|
|
const rightRow = rightChunks[rowIndex] || [];
|
|
|
|
return (
|
|
<Grid
|
|
key={rowIndex}
|
|
gutter="md"
|
|
style={{
|
|
margin: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{/* Cột A */}
|
|
<Grid.Col span={6}>
|
|
<Grid gutter="md">
|
|
{leftRow.map((line, i) => (
|
|
<Grid.Col
|
|
key={
|
|
line.id ?? `L-${rowIndex}-${i}`
|
|
}
|
|
span={6}
|
|
style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
maxWidth: "100%",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<CardLine
|
|
socket={socket}
|
|
stationItem={station}
|
|
line={line}
|
|
selectedLines={selectedLines}
|
|
setSelectedLines={
|
|
setSelectedLines
|
|
}
|
|
openTerminal={openTerminal}
|
|
loadTerminal={
|
|
loadingTerminal &&
|
|
Number(station.id) ===
|
|
Number(activeTab)
|
|
}
|
|
scenarios={scenarios}
|
|
/>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
</Grid.Col>
|
|
|
|
{/* Cột B */}
|
|
<Grid.Col span={6}>
|
|
<Grid gutter="md">
|
|
{rightRow.map((line, i) => (
|
|
<Grid.Col
|
|
key={
|
|
line.id ?? `R-${rowIndex}-${i}`
|
|
}
|
|
span={6}
|
|
style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
maxWidth: "100%",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<CardLine
|
|
socket={socket}
|
|
stationItem={station}
|
|
line={line}
|
|
selectedLines={selectedLines}
|
|
setSelectedLines={
|
|
setSelectedLines
|
|
}
|
|
openTerminal={openTerminal}
|
|
loadTerminal={
|
|
loadingTerminal &&
|
|
Number(station.id) ===
|
|
Number(activeTab)
|
|
}
|
|
scenarios={scenarios}
|
|
/>
|
|
</Grid.Col>
|
|
))}
|
|
</Grid>
|
|
</Grid.Col>
|
|
</Grid>
|
|
);
|
|
},
|
|
)}
|
|
</>
|
|
);
|
|
})()
|
|
)
|
|
) : (
|
|
<Text ta="center" c="dimmed" mt="lg">
|
|
No lines configured
|
|
</Text>
|
|
)}
|
|
</ScrollArea>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<BottomToolBar
|
|
selectedLines={selectedLines}
|
|
socket={socket}
|
|
setSelectedLines={setSelectedLines}
|
|
isDisable={isDisable}
|
|
setIsDisable={setIsDisable}
|
|
station={station}
|
|
stationId={Number(activeTab)}
|
|
testLogContent={testLogContent}
|
|
isLogModalOpen={isLogModalOpen}
|
|
setIsLogModalOpen={setIsLogModalOpen}
|
|
setTestLogContent={setTestLogContent}
|
|
scenarios={scenarios}
|
|
setScenarios={setScenarios}
|
|
setExpanded={setExpandedBottomBar}
|
|
activeTabBottom={activeTabBottom}
|
|
setActiveTabBottom={setActiveTabBottom}
|
|
isExpand={expandedBottomBar}
|
|
listBrands={listBrands}
|
|
listCategories={listCategories}
|
|
/>
|
|
</Flex>
|
|
</Tabs.Panel>
|
|
))}
|
|
onChange={(id) => {
|
|
const station = stations.find((el) => el.id === Number(activeTab));
|
|
if (station) {
|
|
(station?.lines || [])?.forEach((el) => {
|
|
if (el?.userOpenCLI === user?.userName)
|
|
socket?.emit("close_cli", {
|
|
lineId: el?.id,
|
|
stationId: Number(activeTab),
|
|
});
|
|
});
|
|
}
|
|
setActiveTab(id?.toString() || "0");
|
|
setSelectedLines([]);
|
|
setLoadingTerminal(false);
|
|
setTimeout(() => {
|
|
setLoadingTerminal(true);
|
|
}, 500);
|
|
}}
|
|
setActive={setActiveTab}
|
|
active={activeTab}
|
|
onSendCommand={(value) => {
|
|
const listLine = selectedLines.length
|
|
? selectedLines
|
|
: stations.find((el) => el.id === Number(activeTab))?.lines;
|
|
if (listLine?.length) {
|
|
socket?.emit("write_command_line_from_web", {
|
|
lineIds: listLine.map((line) => line.id),
|
|
stationId: Number(activeTab),
|
|
command: value + "\n",
|
|
});
|
|
setTimeout(() => {
|
|
socket?.emit("write_command_line_from_web", {
|
|
lineIds: listLine.map((line) => line.id),
|
|
stationId: Number(activeTab),
|
|
command: " \n",
|
|
});
|
|
}, 1000);
|
|
}
|
|
}}
|
|
listBrands={listBrands}
|
|
listCategories={listCategories}
|
|
/>
|
|
|
|
<StationSetting
|
|
dataStation={stationEdit}
|
|
isOpen={isOpenAddStation}
|
|
onClose={() => {
|
|
setIsOpenAddStation(false);
|
|
setIsEditStation(false);
|
|
setStationEdit(undefined);
|
|
}}
|
|
isEdit={isEditStation}
|
|
setStations={setStations}
|
|
setActiveTab={(id: string) => {
|
|
setActiveTab(id);
|
|
setLoadingTerminal(false);
|
|
setTimeout(() => {
|
|
setLoadingTerminal(true);
|
|
}, 100);
|
|
}}
|
|
stations={stations}
|
|
socket={socket}
|
|
/>
|
|
|
|
<ModalTerminal
|
|
selectedLines={selectedLines}
|
|
opened={openModalTerminal}
|
|
onClose={() => {
|
|
setOpenModalTerminal(false);
|
|
setSelectedLine(undefined);
|
|
}}
|
|
line={selectedLine}
|
|
socket={socket}
|
|
stationItem={stations.find((el) => el.id === Number(activeTab))}
|
|
scenarios={scenarios}
|
|
listIos={listIos}
|
|
listLicense={listLicense}
|
|
getListIos={getListIos}
|
|
getListLicense={getListLicense}
|
|
setScenarios={setScenarios}
|
|
listBrands={listBrands}
|
|
listCategories={listCategories}
|
|
setLinesConfirmSkipPort={setLinesConfirmSkipPort}
|
|
linesConfirmSkipPort={linesConfirmSkipPort}
|
|
dataSummaryTested={dataSummaryTested}
|
|
/>
|
|
|
|
{/* <ModalConfirmRunScenario
|
|
socket={socket}
|
|
station={stations.find((el) => el.id === Number(activeTab))}
|
|
scenarios={scenarios}
|
|
/> */}
|
|
|
|
<ModalConfirmSkipTestPort
|
|
listLines={linesConfirmSkipPort}
|
|
setListLines={setLinesConfirmSkipPort}
|
|
socket={socket}
|
|
station={stations.find((el) => el.id === Number(activeTab))}
|
|
/>
|
|
|
|
<ModalConfirmRunPhysical
|
|
listLines={linesConfirmRunPhysical}
|
|
setListLines={setLinesConfirmRunPhysical}
|
|
socket={socket}
|
|
station={stations.find((el) => el.id === Number(activeTab))}
|
|
/>
|
|
|
|
<ModalSummaryTested
|
|
data={dataSummaryTested}
|
|
setData={setDataSummaryTested}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default function Main() {
|
|
const user = useMemo(() => {
|
|
return localStorage.getItem("user") &&
|
|
isJsonString(localStorage.getItem("user"))
|
|
? JSON.parse(localStorage.getItem("user") || "")
|
|
: null;
|
|
}, []);
|
|
|
|
return (
|
|
<MantineProvider>
|
|
<SocketProvider>
|
|
<Suspense
|
|
fallback={
|
|
<LoadingOverlay
|
|
visible={true}
|
|
zIndex={1000}
|
|
overlayProps={{ radius: "sm", blur: 1 }}
|
|
/>
|
|
}
|
|
>
|
|
<Notifications position="top-right" autoClose={5000} />
|
|
{user ? (
|
|
<App />
|
|
) : (
|
|
<Container w={"100%"} style={{ maxWidth: "100%", padding: 0 }}>
|
|
<PageLogin />
|
|
</Container>
|
|
)}
|
|
</Suspense>
|
|
</SocketProvider>
|
|
</MantineProvider>
|
|
);
|
|
}
|