andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Refactor BottomToolBar UI and remove debug log' (#12) from that into main 

Reviewed-on: #12
This commit is contained in:
andrew.ng 2025-11-27 12:53:31 +11:00
parent 065900f48b f2a78c76d2
commit 3415af6eb0
2 changed files with 305 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BACKEND/app/services/line_connection.ts
View File

@ -696,8 +696,6 @@ export default class LineConnection {
timestamp: now, timestamp: now,
}) })
console.log(newItem)
// Lấy phần tử cuối // Lấy phần tử cuối
const lastItems = await redis.zrevrange(key, 0, 0) const lastItems = await redis.zrevrange(key, 0, 0)
if (lastItems.length > 0) { if (lastItems.length > 0) {

71
FRONTEND/src/components/BottomToolBar.tsx
View File

@ -22,7 +22,12 @@ import { DrawerAPCControl, DrawerSwitchControl } from "./DrawerControl";
import DrawerScenario from "./DrawerScenario"; import DrawerScenario from "./DrawerScenario";
import { isJsonString } from "../untils/helper"; import { isJsonString } from "../untils/helper";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { IconCaretDown, IconCaretUp, IconPlayerPlay, IconPlus } from "@tabler/icons-react"; import {
IconCaretDown,
IconCaretUp,
IconPlayerPlay,
IconPlus,
} from "@tabler/icons-react";
interface TabsProps { interface TabsProps {
selectedLines: TLine[]; selectedLines: TLine[];
@ -345,7 +350,8 @@ const BottomToolBar = ({
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab <Tabs.Tab
style={{ style={{
backgroundColor: activeTabBottom === "apc" ? "#c8d9fd" : "", backgroundColor:
activeTabBottom === "apc" ? "#c8d9fd" : "",
fontSize: "13px", fontSize: "13px",
paddingTop: "8px", paddingTop: "8px",
paddingBottom: "8px", paddingBottom: "8px",
@ -370,24 +376,33 @@ const BottomToolBar = ({
<Tabs.Panel value="command" p={"xs"}> <Tabs.Panel value="command" p={"xs"}>
<Flex justify={"space-between"}> <Flex justify={"space-between"}>
<ScrollArea h={"15vh"}> <Box>
<Flex wrap={"wrap"} gap={"xs"} w={"400px"}> <ScrollArea h={"12vh"}>
<Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
{selectedLines.map((el) => ( {selectedLines.map((el) => (
<Box <Box
key={el.id} key={el.id}
style={{ style={{
paddingLeft: "4px", position: "relative",
height: "30px", padding: "4px 6px",
width: "80px", height: "26px",
width: "60px",
backgroundColor: "#d4e3ff", backgroundColor: "#d4e3ff",
borderRadius: "8px", borderRadius: "8px",
}} }}
> >
<Flex align={"center"} justify={"center"} gap={"4px"}> {/* Close button góc trên phải */}
<Text fz={"12px"}>Line {el.lineNumber}</Text>
<CloseButton <CloseButton
style={{ minWidth: "24px" }} size="xs"
aria-label="Clear input" style={{
position: "absolute",
top: "-4px",
right: "-6px",
minWidth: "18px",
width: "18px",
height: "18px",
zIndex: 10,
}}
onClick={() => { onClick={() => {
setSelectedLines( setSelectedLines(
selectedLines.filter( selectedLines.filter(
@ -400,11 +415,45 @@ const BottomToolBar = ({
}); });
}} }}
/> />
<Flex
align={"center"}
justify={"center"}
h="100%"
>
<Text fz={"11px"}>Line {el.lineNumber}</Text>
</Flex> </Flex>
</Box> </Box>
))} ))}
</Flex> </Flex>
</ScrollArea> </ScrollArea>
{selectedLines?.length > 0 ? (
<Button
fw={400}
className={classes.buttonControl}
variant="outline"
onClick={() => {
const lines = station.lines.filter(
(line) =>
!line?.userOpenCLI ||
line?.userOpenCLI === user?.userName
);
lines.forEach((line) => {
socket?.emit("close_cli", {
lineId: line?.id,
stationId: line.stationId || line.station_id,
});
});
setSelectedLines([]);
}}
>
Clear
</Button>
) : (
""
)}
</Box>
<Box pl={"md"} pr={"md"}> <Box pl={"md"} pr={"md"}>
<Flex justify={"space-between"} mb={"xs"}> <Flex justify={"space-between"} mb={"xs"}>
<Flex></Flex> <Flex></Flex>