837 lines
31 KiB
TypeScript
837 lines
31 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Box,
|
|
Button,
|
|
CloseButton,
|
|
Flex,
|
|
Grid,
|
|
ScrollArea,
|
|
Tabs,
|
|
Text,
|
|
Card,
|
|
Badge,
|
|
} from "@mantine/core";
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import classes from "./Component.module.css";
|
|
import type { IScenario, TLine, TStation, TUser } from "../untils/types";
|
|
import type { Socket } from "socket.io-client";
|
|
import { ButtonDPELP, ButtonSelect } from "./ButtonAction";
|
|
import DrawerLogs from "./Drawer/DrawerLogs";
|
|
import { DrawerAPCControl, DrawerSwitchControl } from "./Drawer/DrawerControl";
|
|
import DrawerScenario from "./Modal/ModalScenario";
|
|
import { isJsonString } from "../untils/helper";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
IconCaretDown,
|
|
IconCaretUp,
|
|
IconPlayerPlay,
|
|
IconPlus,
|
|
} from "@tabler/icons-react";
|
|
import InputHistory from "./InputHistory";
|
|
|
|
interface TabsProps {
|
|
selectedLines: TLine[];
|
|
socket: Socket | null;
|
|
setSelectedLines: (value: React.SetStateAction<TLine[]>) => void;
|
|
isDisable: boolean;
|
|
station: TStation;
|
|
stationId: number;
|
|
setIsDisable: (value: React.SetStateAction<boolean>) => void;
|
|
testLogContent: string;
|
|
isLogModalOpen: boolean;
|
|
setIsLogModalOpen: (value: React.SetStateAction<boolean>) => void;
|
|
setTestLogContent: (value: React.SetStateAction<string>) => void;
|
|
scenarios: IScenario[];
|
|
setScenarios: (value: React.SetStateAction<IScenario[]>) => void;
|
|
setExpanded: (value: React.SetStateAction<boolean>) => void;
|
|
activeTabBottom: string;
|
|
setActiveTabBottom: (value: React.SetStateAction<string>) => void;
|
|
isExpand: boolean;
|
|
}
|
|
|
|
// Component cho từng Scenario Card
|
|
const ScenarioCard = ({
|
|
scenario,
|
|
index,
|
|
isDisable,
|
|
selectedLines,
|
|
user,
|
|
socket,
|
|
setOpenScenarioModal,
|
|
setIsDisable,
|
|
}: {
|
|
scenario: IScenario;
|
|
index: number;
|
|
isDisable: boolean;
|
|
selectedLines: TLine[];
|
|
user: TUser;
|
|
socket: Socket | null;
|
|
setOpenScenarioModal: (value: boolean) => void;
|
|
setIsDisable: (value: boolean) => void;
|
|
}) => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [overlayPosition, setOverlayPosition] = useState({ top: 0, left: 0 });
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
const steps = JSON.parse(scenario.body || "[]");
|
|
|
|
const handleMouseEnter = () => {
|
|
if (cardRef.current) {
|
|
const rect = cardRef.current.getBoundingClientRect();
|
|
const overlayWidth = 400;
|
|
const viewportWidth = window.innerWidth;
|
|
const gap = 10; // Khoảng cách giữa card và overlay
|
|
|
|
// Đặt overlay bên phải card
|
|
let left = rect.right + gap;
|
|
|
|
// Nếu overlay tràn ra ngoài màn hình bên phải → đặt bên trái card
|
|
if (left + overlayWidth > viewportWidth) {
|
|
left = rect.left - overlayWidth - gap;
|
|
|
|
// Nếu vẫn tràn ra ngoài bên trái → đặt ở giữa màn hình
|
|
if (left < 10) {
|
|
left = (viewportWidth - overlayWidth) / 2;
|
|
}
|
|
}
|
|
|
|
setOverlayPosition({
|
|
top: rect.top,
|
|
left: left,
|
|
});
|
|
}
|
|
setIsHovered(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isHovered && cardRef.current) {
|
|
const updatePosition = () => {
|
|
if (cardRef.current) {
|
|
const rect = cardRef.current.getBoundingClientRect();
|
|
const overlayWidth = 400;
|
|
const viewportWidth = window.innerWidth;
|
|
const gap = 10; // Khoảng cách giữa card và overlay
|
|
|
|
// Đặt overlay bên phải card
|
|
let left = rect.right + gap;
|
|
|
|
// Nếu overlay tràn ra ngoài màn hình bên phải → đặt bên trái card
|
|
if (left + overlayWidth > viewportWidth) {
|
|
left = rect.left - overlayWidth - gap;
|
|
|
|
// Nếu vẫn tràn ra ngoài bên trái → đặt ở giữa màn hình
|
|
if (left < 10) {
|
|
left = (viewportWidth - overlayWidth) / 2;
|
|
}
|
|
}
|
|
|
|
setOverlayPosition({
|
|
top: rect.top,
|
|
left: left,
|
|
});
|
|
}
|
|
};
|
|
|
|
// Update position immediately
|
|
updatePosition();
|
|
|
|
// Listen to scroll events (including inside modal)
|
|
const scrollContainers = document.querySelectorAll('[style*="overflow"]');
|
|
scrollContainers.forEach((container) => {
|
|
container.addEventListener("scroll", updatePosition, true);
|
|
});
|
|
|
|
window.addEventListener("scroll", updatePosition, true);
|
|
window.addEventListener("resize", updatePosition);
|
|
|
|
return () => {
|
|
scrollContainers.forEach((container) => {
|
|
container.removeEventListener("scroll", updatePosition, true);
|
|
});
|
|
window.removeEventListener("scroll", updatePosition, true);
|
|
window.removeEventListener("resize", updatePosition);
|
|
};
|
|
}
|
|
}, [isHovered]);
|
|
|
|
return (
|
|
<Grid.Col key={scenario.id} span={3}>
|
|
<div ref={cardRef} style={{ position: "relative" }}>
|
|
<Card
|
|
shadow="sm"
|
|
padding="md"
|
|
radius="md"
|
|
withBorder
|
|
style={{
|
|
transition: "all 0.2s ease",
|
|
height: "auto",
|
|
minHeight: "80px",
|
|
}}
|
|
className={classes.scenarioCard}
|
|
>
|
|
<Flex direction="column" gap="sm" align="center" justify="center">
|
|
<Text
|
|
fw={600}
|
|
size="lg"
|
|
ta="center"
|
|
style={{
|
|
cursor: "pointer",
|
|
}}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
{scenario.title}
|
|
</Text>
|
|
|
|
<Button
|
|
fullWidth
|
|
variant="light"
|
|
color="green"
|
|
size="sm"
|
|
leftSection={<IconPlayerPlay size={16} />}
|
|
disabled={
|
|
isDisable ||
|
|
selectedLines.filter(
|
|
(el) =>
|
|
!el?.userEmailOpenCLI ||
|
|
el?.userEmailOpenCLI === user?.email
|
|
).length === 0
|
|
}
|
|
onClick={() => {
|
|
setOpenScenarioModal(false);
|
|
setIsDisable(true);
|
|
setTimeout(() => {
|
|
setIsDisable(false);
|
|
}, 5000);
|
|
|
|
selectedLines
|
|
.filter(
|
|
(el) =>
|
|
!el?.userEmailOpenCLI ||
|
|
el?.userEmailOpenCLI === user?.email
|
|
)
|
|
.forEach((el) => {
|
|
socket?.emit(
|
|
"run_scenario",
|
|
Object.assign(el, {
|
|
scenario: scenario,
|
|
})
|
|
);
|
|
});
|
|
}}
|
|
>
|
|
Run
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
|
|
{/* Hover overlay - Fixed position để không bị cắt bởi modal */}
|
|
{isHovered && (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: `${overlayPosition.top}px`,
|
|
left: `${overlayPosition.left}px`,
|
|
width: "400px",
|
|
maxWidth: "90vw",
|
|
background: "white",
|
|
border: "2px solid #4dabf7",
|
|
borderRadius: "8px",
|
|
padding: "16px",
|
|
boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
|
|
zIndex: 99999,
|
|
minHeight: "200px",
|
|
maxHeight: "400px",
|
|
overflowY: "auto",
|
|
overflowX: "hidden",
|
|
}}
|
|
className={classes.hideScrollBar}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<Flex direction="column" gap="xs">
|
|
<Flex justify="space-between" align="center">
|
|
<Text fw={700} size="md">
|
|
{scenario.title}
|
|
</Text>
|
|
<Badge color="blue" variant="light">
|
|
#{index + 1}
|
|
</Badge>
|
|
</Flex>
|
|
|
|
<Flex gap="xs" wrap="wrap" mt="xs">
|
|
<Badge size="sm" color="gray" variant="dot">
|
|
Timeout: {scenario.timeout}ms
|
|
</Badge>
|
|
{scenario.isReboot && (
|
|
<Badge size="sm" color="orange" variant="dot">
|
|
Reboot
|
|
</Badge>
|
|
)}
|
|
<Badge size="sm" color="green" variant="dot">
|
|
{steps.length} steps
|
|
</Badge>
|
|
</Flex>
|
|
|
|
<Text size="xs" fw={600} mt="xs" c="dimmed">
|
|
Commands Preview:
|
|
</Text>
|
|
<Box
|
|
style={{
|
|
background: "#f8f9fa",
|
|
padding: "8px",
|
|
borderRadius: "4px",
|
|
maxHeight: "100px",
|
|
overflow: "auto",
|
|
}}
|
|
>
|
|
{steps.slice(0, 5).map((step: { send: string }, i: number) => (
|
|
<Text
|
|
key={i}
|
|
size="xs"
|
|
c="dimmed"
|
|
style={{
|
|
fontFamily: "monospace",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
}}
|
|
>
|
|
{i + 1}. {step.send || "(empty)"}
|
|
</Text>
|
|
))}
|
|
{steps.length > 5 && (
|
|
<Text size="xs" c="dimmed" ta="center" mt="xs">
|
|
... and {steps.length - 5} more
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Flex>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Grid.Col>
|
|
);
|
|
};
|
|
|
|
const BottomToolBar = ({
|
|
selectedLines,
|
|
socket,
|
|
setSelectedLines,
|
|
isDisable,
|
|
station,
|
|
setIsDisable,
|
|
testLogContent,
|
|
isLogModalOpen,
|
|
setIsLogModalOpen,
|
|
setTestLogContent,
|
|
scenarios,
|
|
setScenarios,
|
|
setExpanded,
|
|
setActiveTabBottom,
|
|
activeTabBottom,
|
|
isExpand,
|
|
stationId,
|
|
}: TabsProps) => {
|
|
const user = useMemo(() => {
|
|
return localStorage.getItem("user") &&
|
|
isJsonString(localStorage.getItem("user"))
|
|
? JSON.parse(localStorage.getItem("user") || "")
|
|
: null;
|
|
}, []);
|
|
const [openScenarioModal, setOpenScenarioModal] = useState<boolean>(false);
|
|
const [openDrawerScenario, setOpenDrawerScenario] = useState<boolean>(false);
|
|
// const [activeTabBottom, setActiveTabBottom] = useState<string>("command");
|
|
// const [isExpand, setIsExpand] = useState<boolean>(true);
|
|
|
|
return (
|
|
<>
|
|
{/* Modal chọn Scenario - Custom Simple Modal */}
|
|
|
|
|
|
<motion.div
|
|
initial={false}
|
|
animate={{
|
|
height: isExpand ? "150px" : 0,
|
|
y: 0,
|
|
}}
|
|
transition={{ type: "spring", stiffness: 180, damping: 20 }}
|
|
style={{
|
|
width: "100%",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
zIndex: 1,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Box style={{ position: "relative", height: isExpand ? "150px" : "0px" }}>
|
|
<ActionIcon
|
|
style={{
|
|
position: "absolute",
|
|
top: isExpand ? -4 : -24,
|
|
left: "50%",
|
|
translate: "-19px 0",
|
|
backgroundColor: "#e3e0e0",
|
|
width: "55px",
|
|
zIndex: 10,
|
|
}}
|
|
variant="light"
|
|
onClick={() => {
|
|
setExpanded((prev) => !prev);
|
|
}}
|
|
>
|
|
{isExpand ? (
|
|
<IconCaretDown color="green" />
|
|
) : (
|
|
<IconCaretUp color="green" />
|
|
)}
|
|
</ActionIcon>
|
|
<Grid style={{ height: "100%" }}>
|
|
<Grid.Col span={isExpand ? 1 : 3.5}></Grid.Col>
|
|
<Grid.Col span={isExpand ? 10 : 5}>
|
|
{isExpand ? (
|
|
<Tabs
|
|
defaultValue="command"
|
|
orientation="vertical"
|
|
value={activeTabBottom}
|
|
onChange={(val) => {
|
|
setActiveTabBottom(val || "command");
|
|
}}
|
|
className={classes.containerBottom}
|
|
style={{ height: "100%" }}
|
|
>
|
|
<Tabs.List>
|
|
<Tabs.Tab
|
|
style={{
|
|
backgroundColor:
|
|
activeTabBottom === "command" ? "#c8d9fd" : "",
|
|
fontSize: "13px",
|
|
paddingTop: "8px",
|
|
paddingBottom: "8px",
|
|
}}
|
|
value="command"
|
|
>
|
|
Command Line
|
|
</Tabs.Tab>
|
|
<Tabs.Tab
|
|
style={{
|
|
backgroundColor:
|
|
activeTabBottom === "apc" ? "#c8d9fd" : "",
|
|
fontSize: "13px",
|
|
paddingTop: "8px",
|
|
paddingBottom: "8px",
|
|
}}
|
|
value="apc"
|
|
>
|
|
APC
|
|
</Tabs.Tab>
|
|
<Tabs.Tab
|
|
style={{
|
|
backgroundColor:
|
|
activeTabBottom === "switch" ? "#c8d9fd" : "",
|
|
fontSize: "13px",
|
|
paddingTop: "8px",
|
|
paddingBottom: "8px",
|
|
}}
|
|
value="switch"
|
|
>
|
|
Switch
|
|
</Tabs.Tab>
|
|
</Tabs.List>
|
|
|
|
<Tabs.Panel
|
|
value="command"
|
|
p={4}
|
|
style={{ height: "100%", overflow: "auto" }}
|
|
>
|
|
<Flex justify={"space-between"} align="flex-start">
|
|
<Box>
|
|
<ScrollArea h={"8vh"}>
|
|
<Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
|
|
{selectedLines.map((el) => (
|
|
<Box
|
|
key={el.id}
|
|
style={{
|
|
position: "relative",
|
|
padding: "4px 6px",
|
|
height: "26px",
|
|
width: "60px",
|
|
backgroundColor: "#d4e3ff",
|
|
borderRadius: "8px",
|
|
}}
|
|
>
|
|
{/* Close button góc trên phải */}
|
|
<CloseButton
|
|
size="xs"
|
|
style={{
|
|
position: "absolute",
|
|
top: "-4px",
|
|
right: "-6px",
|
|
minWidth: "18px",
|
|
width: "18px",
|
|
height: "18px",
|
|
zIndex: 10,
|
|
}}
|
|
onClick={() => {
|
|
setSelectedLines(
|
|
selectedLines.filter(
|
|
(line) => line.id !== el.id
|
|
)
|
|
);
|
|
socket?.emit("close_cli", {
|
|
lineId: el?.id,
|
|
stationId: el.stationId || el.station_id,
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<Flex
|
|
align={"center"}
|
|
justify={"center"}
|
|
h="100%"
|
|
>
|
|
<Text fz={"11px"}>Line {el.lineNumber}</Text>
|
|
</Flex>
|
|
</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>
|
|
</ScrollArea>
|
|
<Flex justify={"space-between"} align={"center"} mt={4}>
|
|
<Text fz={"11px"} c="dimmed">
|
|
Selected: {selectedLines.length} /{" "}
|
|
{station.lines.length}
|
|
</Text>
|
|
<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([]);
|
|
}
|
|
}}
|
|
/>
|
|
</Flex>
|
|
</Box>
|
|
<Box pl={"md"} pr={"md"}>
|
|
<Flex justify={"space-between"} mb={"xs"}>
|
|
<Flex></Flex>
|
|
<Button
|
|
fw={400}
|
|
disabled={isDisable || selectedLines.length === 0}
|
|
variant="filled"
|
|
color="orange"
|
|
size="xs"
|
|
radius="md"
|
|
onClick={() => {
|
|
const listLine = selectedLines.length
|
|
? selectedLines
|
|
: station?.lines;
|
|
if (listLine.length) {
|
|
socket?.emit("write_command_line_from_web", {
|
|
lineIds: listLine.map((line) => line.id),
|
|
stationId: station.id,
|
|
command: "spam_break",
|
|
});
|
|
setIsDisable(true);
|
|
setTimeout(() => {
|
|
setIsDisable(false);
|
|
}, 5000);
|
|
}
|
|
}}
|
|
>
|
|
Send Break
|
|
</Button>
|
|
</Flex>
|
|
<Box>
|
|
<InputHistory
|
|
selectedLines={selectedLines}
|
|
socket={socket}
|
|
station={station}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box style={{ width: "260px" }}>
|
|
<Flex
|
|
align={"center"}
|
|
justify={"flex-end"}
|
|
gap={"xs"}
|
|
wrap={"wrap"}
|
|
>
|
|
<ButtonDPELP
|
|
socket={socket}
|
|
selectedLines={selectedLines}
|
|
isDisable={isDisable || selectedLines.length === 0}
|
|
onClick={() => {
|
|
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);
|
|
}}
|
|
/>
|
|
<Button
|
|
fw={400}
|
|
disabled={isDisable || selectedLines.length === 0}
|
|
variant="filled"
|
|
color="yellow"
|
|
style={{ height: "30px", width: "100px" }}
|
|
onClick={() => setOpenScenarioModal(true)}
|
|
>
|
|
Scenario
|
|
</Button>
|
|
<DrawerLogs
|
|
socket={socket}
|
|
isLogModalOpen={isLogModalOpen}
|
|
setIsLogModalOpen={setIsLogModalOpen}
|
|
testLogContent={testLogContent}
|
|
setTestLogContent={setTestLogContent}
|
|
/>
|
|
</Flex>
|
|
</Box>
|
|
</Flex>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel
|
|
value="apc"
|
|
p={0}
|
|
ps={"xs"}
|
|
style={{
|
|
height: "100%",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<Box style={{ overflow: "auto",height: "200px", padding: "4px 8px 0 0" ,}}>
|
|
<DrawerAPCControl
|
|
socket={socket}
|
|
stationAPI={station}
|
|
stationId={stationId}
|
|
/>
|
|
</Box>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel
|
|
value="switch"
|
|
ps={"xs"}
|
|
style={{
|
|
height: "100%",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<Box style={{ height: "200px", overflow: "auto" }}>
|
|
<DrawerSwitchControl
|
|
socket={socket}
|
|
stationAPI={station}
|
|
stationId={stationId}
|
|
/>
|
|
</Box>
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
) : (
|
|
<Box p={3}>
|
|
<Flex direction="column" gap="xs">
|
|
<Flex justify={"space-between"} align={"center"} wrap="wrap" gap="xs">
|
|
<Flex wrap={"wrap"} gap={"6px"} style={{ flex: 1, minWidth: 0 }}>
|
|
{selectedLines.map((el) => (
|
|
<Box
|
|
key={el.id}
|
|
style={{
|
|
position: "relative",
|
|
padding: "3px 5px",
|
|
height: "22px",
|
|
width: "55px",
|
|
backgroundColor: "#d4e3ff",
|
|
borderRadius: "6px",
|
|
}}
|
|
>
|
|
<CloseButton
|
|
size="xs"
|
|
style={{
|
|
position: "absolute",
|
|
top: "-4px",
|
|
right: "-6px",
|
|
minWidth: "16px",
|
|
width: "16px",
|
|
height: "16px",
|
|
zIndex: 10,
|
|
}}
|
|
onClick={() => {
|
|
setSelectedLines(
|
|
selectedLines.filter(
|
|
(line) => line.id !== el.id
|
|
)
|
|
);
|
|
socket?.emit("close_cli", {
|
|
lineId: el?.id,
|
|
stationId: el.stationId || el.station_id,
|
|
});
|
|
}}
|
|
/>
|
|
<Flex
|
|
align={"center"}
|
|
justify={"center"}
|
|
h="100%"
|
|
>
|
|
<Text fz={"10px"}>Line {el.lineNumber}</Text>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
{selectedLines.length > 0 && (
|
|
<Box
|
|
style={{
|
|
padding: "3px 8px",
|
|
height: "22px",
|
|
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={"10px"} c="red">
|
|
Clear
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Flex>
|
|
<Flex align={"center"} gap="xs">
|
|
<Text fz={"10px"} c="dark" fw={600}>
|
|
Selected: {selectedLines.length} /{" "}
|
|
{station.lines.length}
|
|
</Text>
|
|
<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([]);
|
|
}
|
|
}}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
<Box style={{ width: "100%" }}>
|
|
<InputHistory
|
|
selectedLines={selectedLines}
|
|
socket={socket}
|
|
station={station}
|
|
/>
|
|
</Box>
|
|
</Flex>
|
|
</Box>
|
|
)}
|
|
</Grid.Col>
|
|
<Grid.Col span={isExpand ? 1 : 3.5}></Grid.Col>
|
|
</Grid>
|
|
</Box>
|
|
</motion.div>
|
|
|
|
{/* Drawer Scenario để Add/Edit */}
|
|
<DrawerScenario
|
|
scenarios={scenarios}
|
|
setScenarios={setScenarios}
|
|
externalOpened={openDrawerScenario}
|
|
onExternalClose={() => setOpenDrawerScenario(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BottomToolBar;
|