Di chuyển button BAUN trong chi tiết line

This commit is contained in:
Truong Vo 2025-12-12 15:13:24 +07:00
parent 8b986232e6
commit ec55c169ba
1 changed files with 70 additions and 80 deletions

View File

@ -525,13 +525,76 @@ const ModalTerminal = ({
<IconCircleCheckFilled color="green" fontSize={"18px"} />
)}
</Flex>
<Flex mt="4px">
<Text size="md" mr="6px">
BAUD:
</Text>
<Text size="md">
<strong>{line?.baud || ""}</strong>
</Text>
<Flex
mt="4px"
align="center"
justify="space-between"
style={{ width: "100%" }}
>
<Flex align="center" gap="xs">
<Text size="md" mr="6px">
BAUD:
</Text>
<Text size="md">
<strong>{line?.baud || ""}</strong>
</Text>
</Flex>
<Menu
closeOnItemClick={false}
closeOnClickOutside={false}
trigger="hover"
shadow="md"
position="right"
>
<Menu.Target>
<Button
fw={400}
disabled={isDisable}
variant="filled"
size="xs"
style={{
height: "26px",
width: "80px",
marginRight: "20px",
}}
onClick={() => {}}
>
BAUD
</Button>
</Menu.Target>
<Menu.Dropdown style={{ width: "110px" }}>
<Flex
justify={"space-between"}
direction={"column"}
style={{
gap: "8px",
}}
>
{listBaudDefault.map((el, i) => (
<Button
key={i}
disabled={isDisable}
variant="outline"
size="xs"
onClick={() => {
if (!line) return;
socket?.emit("change_baud", {
stationId: line?.stationId || line?.station_id,
lineId: line?.id,
baud: el,
});
setIsDisable(true);
setTimeout(() => {
setIsDisable(false);
}, 5000);
}}
>
{el}
</Button>
))}
</Flex>
</Menu.Dropdown>
</Menu>
</Flex>
<Flex mt="4px" align="center">
<Text size="md" mr="6px">
@ -874,79 +937,6 @@ const ModalTerminal = ({
</Box>
</Menu.Dropdown>
</Menu>
<Menu
closeOnItemClick={false}
closeOnClickOutside={false}
trigger="hover"
shadow="md"
position="top"
>
<Menu.Target>
<Button
fw={400}
disabled={isDisable}
variant="filled"
size="xs"
style={{ height: "30px", width: "100px" }}
onClick={() => {}}
>
BAUD
</Button>
</Menu.Target>
<Menu.Dropdown style={{ width: "110px" }}>
<Flex
justify={"space-between"}
direction={"column"}
style={{
gap: "8px",
}}
>
{listBaudDefault.map((el, i) => (
<Button
key={i}
disabled={isDisable}
variant="outline"
size="xs"
fw={400}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
socket?.emit("set_baud", {
lineId: line?.id,
baud: el,
stationId: Number(stationItem?.id),
});
setIsDisable(true);
setTimeout(() => {
setIsDisable(false);
}, 5000);
}}
>
{el}
</Button>
))}
<Input
placeholder="Custom"
value={valueBaud}
onChange={(e) => setValueBaud(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
socket?.emit("set_baud", {
lineId: line?.id,
baud: Number(valueBaud),
stationId: Number(stationItem?.id),
});
setValueBaud("");
setIsDisable(true);
setTimeout(() => {
setIsDisable(false);
}, 5000);
}
}}
/>
</Flex>
</Menu.Dropdown>
</Menu>
<Button
disabled={true}
fw={400}