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

Hiệu chỉnh thanh bottom bar gọn hơn

This commit is contained in:
Truong Vo 2025-12-04 08:26:13 +07:00
parent ef57da0154
commit 4d9c6abc89
2 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -479,7 +479,7 @@ const BottomToolBar = ({
<motion.div <motion.div
initial={false} initial={false}
animate={{ animate={{
height: isExpand ? "20vh" : 0, height: isExpand ? "auto" : 0,
y: 0, // đẩy xuống khi thu nhỏ y: 0, // đẩy xuống khi thu nhỏ
}} }}
transition={{ type: "spring", stiffness: 180, damping: 20 }} transition={{ type: "spring", stiffness: 180, damping: 20 }}
@ -489,6 +489,7 @@ const BottomToolBar = ({
bottom: 0, bottom: 0,
left: 0, left: 0,
zIndex: 1, zIndex: 1,
// overflow: "hidden",
}} }}
> >
<Box style={{ position: "relative" }}> <Box style={{ position: "relative" }}>
@ -523,7 +524,6 @@ const BottomToolBar = ({
setActiveTabBottom(val || "command"); setActiveTabBottom(val || "command");
}} }}
className={classes.containerBottom} className={classes.containerBottom}
style={{ height: "20vh" }}
> >
<Tabs.List> <Tabs.List>
<Tabs.Tab <Tabs.Tab
@ -564,10 +564,10 @@ const BottomToolBar = ({
</Tabs.Tab> </Tabs.Tab>
</Tabs.List> </Tabs.List>
<Tabs.Panel value="command" p={"xs"}> <Tabs.Panel value="command" p={4}>
<Flex justify={"space-between"}> <Flex justify={"space-between"} align="flex-start">
<Box> <Box>
<ScrollArea h={"12vh"}> <ScrollArea h={"8vh"}>
<Flex wrap={"wrap"} gap={"8px"} w={"420px"}> <Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
{selectedLines.map((el) => ( {selectedLines.map((el) => (
<Box <Box
@ -615,28 +615,72 @@ const BottomToolBar = ({
</Flex> </Flex>
</Box> </Box>
))} ))}
{selectedLines.length > 0 && (
<Box
style={{
padding: "4px 10px",
height: "26px",
backgroundColor: "#ffe3e3",
borderRadius: "999px",
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
onClick={() => {
selectedLines.forEach((line) => {
socket?.emit("close_cli", {
lineId: line?.id,
stationId: line.stationId || line.station_id,
});
});
setSelectedLines([]);
}}
>
<Text fz={"11px"} c="red">
Clear
</Text>
</Box>
)}
</Flex> </Flex>
</ScrollArea> </ScrollArea>
{selectedLines?.length > 0 ? ( <Flex justify={"space-between"} align={"center"} mt={4}>
<Button <Text fz={"11px"} c="dimmed">
fw={400} Selected: {selectedLines.length} / {station.lines.length}
className={classes.buttonControl} </Text>
variant="outline" <ButtonSelect
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
station={station}
userName={user?.userName}
onClick={() => { onClick={() => {
selectedLines.forEach((line) => { const lines = station.lines.filter(
socket?.emit("close_cli", { (line) =>
lineId: line?.id, !line?.userOpenCLI ||
stationId: line.stationId || line.station_id, 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 {
setSelectedLines([]); selectedLines.forEach((line) => {
socket?.emit("close_cli", {
lineId: line?.id,
stationId: line.stationId || line.station_id,
});
});
setSelectedLines([]);
}
}} }}
> />
Clear </Flex>
</Button>
) : (
""
)}
</Box> </Box>
<Box pl={"md"} pr={"md"}> <Box pl={"md"} pr={"md"}>
<Flex justify={"space-between"} mb={"xs"}> <Flex justify={"space-between"} mb={"xs"}>
@ -716,46 +760,13 @@ const BottomToolBar = ({
/> />
</Box> </Box>
</Box> </Box>
<Box style={{ width: "220px" }}> <Box style={{ width: "260px" }}>
<Flex align={"center"} wrap={"wrap"} gap={"xs"}> <Flex align={"center"} justify={"flex-end"} gap={"xs"} wrap={"wrap"}>
<ButtonSelect
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
station={station}
userName={user?.userName}
onClick={() => {
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,
});
});
setSelectedLines([]);
}
}}
/>
<ButtonDPELP <ButtonDPELP
socket={socket} socket={socket}
selectedLines={selectedLines} selectedLines={selectedLines}
isDisable={isDisable || selectedLines.length === 0} isDisable={isDisable || selectedLines.length === 0}
onClick={() => { onClick={() => {
// setSelectedLines([]);
if ( if (
selectedLines.length > 0 && selectedLines.length > 0 &&
selectedLines.length === station?.lines?.length selectedLines.length === station?.lines?.length

3
FRONTEND/src/components/Component.module.css
View File

@ -121,7 +121,8 @@
} }
.containerBottom { .containerBottom {
height: 22vh; height: auto;
max-height: 20vh;
padding: 8px; padding: 8px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;