From 8b986232e6f6ee3f04330fdc6dcb6900a6a0bb10 Mon Sep 17 00:00:00 2001 From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com> Date: Fri, 12 Dec 2025 14:27:01 +0700 Subject: [PATCH] update thanh bottom bar --- FRONTEND/src/App.tsx | 8 +- FRONTEND/src/components/BottomToolBar.tsx | 699 +++++++++--------- .../src/components/Drawer/DrawerControl.tsx | 6 - 3 files changed, 359 insertions(+), 354 deletions(-) diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx index 5f25f3f..b869fba 100644 --- a/FRONTEND/src/App.tsx +++ b/FRONTEND/src/App.tsx @@ -496,6 +496,12 @@ function App() { setSelectedLine(data); }; + useEffect(() => { + if(!expandedBottomBar){ + setActiveTabBottom("command"); + } + }, [expandedBottomBar]); + return ( {/* Modal chọn Scenario - Custom Simple Modal */} - {openScenarioModal && ( -
setOpenScenarioModal(false)} - > -
e.stopPropagation()} - > - {/* Header */} - - - 🎯 Select Scenario to Run - - - - setOpenScenarioModal(false)} - /> - - - - {/* Content */} -
- {scenarios.length > 0 ? ( - - {scenarios.map((scenario, index) => ( - - ))} - - ) : ( - - - 📋 - - - No scenarios available - - - Please create a new scenario to get started - - - )} -
-
-
- )} + @@ -509,139 +387,359 @@ const BottomToolBar = ({ )} - - - { - setActiveTabBottom(val || "command"); - }} - className={classes.containerBottom} - > - - - Command Line - - - APC - - - Switch - - + + + {isExpand ? ( + { + setActiveTabBottom(val || "command"); + }} + className={classes.containerBottom} + > + + + Command Line + + + APC + + + Switch + + - - - - - - {selectedLines.map((el) => ( - - {/* Close button góc trên phải */} - + + + + + {selectedLines.map((el) => ( + + {/* Close button góc trên phải */} + { + setSelectedLines( + selectedLines.filter( + (line) => line.id !== el.id + ) + ); + socket?.emit("close_cli", { + lineId: el?.id, + stationId: el.stationId || el.station_id, + }); + }} + /> + + + Line {el.lineNumber} + + + ))} + + {selectedLines.length > 0 && ( + { - setSelectedLines( - selectedLines.filter( - (line) => line.id !== el.id - ) - ); - socket?.emit("close_cli", { - lineId: el?.id, - stationId: el.stationId || el.station_id, + selectedLines.forEach((line) => { + socket?.emit("close_cli", { + lineId: line?.id, + stationId: + line.stationId || line.station_id, + }); }); + setSelectedLines([]); }} - /> - - - Line {el.lineNumber} - - - ))} - - {selectedLines.length > 0 && ( - { + + Clear + + + )} + + + + + Selected: {selectedLines.length} /{" "} + {station.lines.length} + + { + const lines = station.lines.filter( + (line) => + !line?.userOpenCLI || + line?.userOpenCLI === user?.userName + ); + if (selectedLines.length !== lines.length) { + setSelectedLines(lines); + lines.forEach((line) => { + socket?.emit("open_cli", { + lineId: line.id, + stationId: line.stationId || line.station_id, + userEmail: user?.email, + userName: user?.userName, + }); + }); + } else { selectedLines.forEach((line) => { socket?.emit("close_cli", { lineId: line?.id, - stationId: - line.stationId || line.station_id, + stationId: line.stationId || line.station_id, }); }); setSelectedLines([]); - }} - > - - Clear - - - )} + } + }} + /> - - - + + + + + + + + + + + + + { + if ( + selectedLines.length > 0 + // && + // selectedLines.length === station?.lines?.length + ) { + socket?.emit("run_all_dpelp", { + lineIds: selectedLines.map((line) => line.id), + stationName: station.name, + stationId: station.id, + }); + } + setIsDisable(true); + setTimeout(() => { + setIsDisable(false); + }, 5000); + }} + /> + + + + + + + + + + + + + + ) : ( + + + + + {selectedLines.map((el) => ( + + { + setSelectedLines( + selectedLines.filter( + (line) => line.id !== el.id + ) + ); + socket?.emit("close_cli", { + lineId: el?.id, + stationId: el.stationId || el.station_id, + }); + }} + /> + + Line {el.lineNumber} + + + ))} + {selectedLines.length > 0 && ( + { + selectedLines.forEach((line) => { + socket?.emit("close_cli", { + lineId: line?.id, + stationId: + line.stationId || line.station_id, + }); + }); + setSelectedLines([]); + }} + > + + Clear + + + )} + + + Selected: {selectedLines.length} /{" "} {station.lines.length} @@ -678,112 +776,19 @@ const BottomToolBar = ({ }} /> - - - - - - - - - - - - - { - if ( - selectedLines.length > 0 - // && - // selectedLines.length === station?.lines?.length - ) { - socket?.emit("run_all_dpelp", { - lineIds: selectedLines.map((line) => line.id), - stationName: station.name, - stationId: station.id, - }); - } - setIsDisable(true); - setTimeout(() => { - setIsDisable(false); - }, 5000); - }} - /> - - - + + + - - - - - - - - + + )} - + diff --git a/FRONTEND/src/components/Drawer/DrawerControl.tsx b/FRONTEND/src/components/Drawer/DrawerControl.tsx index b1961a4..f4718fa 100644 --- a/FRONTEND/src/components/Drawer/DrawerControl.tsx +++ b/FRONTEND/src/components/Drawer/DrawerControl.tsx @@ -1170,12 +1170,6 @@ export const DrawerSwitchControl: React.FC = ({ {listPorts?.map((group, key) => { const isLarge = group?.length > 20; - // console.log("isLarge::", isLarge); - // console.log("group::", group); - // console.log("checkFilterPort::", sortedPorts(group) - // .filter((el) => - // checkFilterPort(el.status, el.name) - // )); return (