100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { Card, Text, Box, Flex } from "@mantine/core";
|
|
import type { LineConfig, TLine, TStation } from "../untils/types";
|
|
import classes from "./Component.module.css";
|
|
import TerminalCLI from "./TerminalXTerm";
|
|
import type { Socket } from "socket.io-client";
|
|
import { IconCircleCheckFilled } from "@tabler/icons-react";
|
|
import { memo } from "react";
|
|
|
|
const CardLine = ({
|
|
line,
|
|
selectedLines,
|
|
setSelectedLines,
|
|
socket,
|
|
stationItem,
|
|
updateStatus,
|
|
}: {
|
|
line: TLine;
|
|
selectedLines: TLine[];
|
|
setSelectedLines: (lines: React.SetStateAction<TLine[]>) => void;
|
|
socket: Socket | null;
|
|
stationItem: TStation;
|
|
updateStatus: (value: LineConfig) => void;
|
|
}) => {
|
|
return (
|
|
<Card
|
|
key={line.id}
|
|
shadow="sm"
|
|
radius="md"
|
|
withBorder
|
|
className={classes.card_line}
|
|
style={
|
|
selectedLines.find((val) => val.id === line.id)
|
|
? { backgroundColor: "#8bf55940" }
|
|
: {}
|
|
}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (selectedLines.find((val) => val.id === line.id))
|
|
setSelectedLines(selectedLines.filter((val) => val.id !== line.id));
|
|
else setSelectedLines((pre) => [...pre, line]);
|
|
}}
|
|
>
|
|
<Flex
|
|
justify={"space-between"}
|
|
direction={"column"}
|
|
// gap={"md"}
|
|
align={"center"}
|
|
>
|
|
<div>
|
|
<Text fw={600} style={{ display: "flex", gap: "4px" }}>
|
|
Line: {line.lineNumber || line.line_number} - {line.port}{" "}
|
|
{line.status === "connected" && (
|
|
<IconCircleCheckFilled color="green" />
|
|
)}
|
|
</Text>
|
|
</div>
|
|
{/* <Text className={classes.info_line}>PID: WS-C3560CG-8PC-S</Text>
|
|
<div className={classes.info_line}>SN: FGL2240307M</div>
|
|
<div className={classes.info_line}>VID: V01</div> */}
|
|
<Box
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
style={{ height: "175px", width: "300px" }}
|
|
>
|
|
<TerminalCLI
|
|
cliOpened={true}
|
|
socket={socket}
|
|
content={line.netOutput ?? ""}
|
|
line_id={Number(line?.id)}
|
|
station_id={Number(stationItem.id)}
|
|
isDisabled={false}
|
|
line_status={line?.status || ""}
|
|
fontSize={11}
|
|
miniSize={true}
|
|
customStyle={{
|
|
maxHeight: "175px",
|
|
height: "175px",
|
|
fontSize: "7px",
|
|
padding: "0px",
|
|
paddingBottom: "0px",
|
|
}}
|
|
onDoubleClick={() => {}}
|
|
updateStatus={updateStatus}
|
|
/>
|
|
</Box>
|
|
</Flex>
|
|
{/* <Flex justify={"flex-end"}>
|
|
<Button variant="filled" style={{ height: "30px", width: "70px" }}>
|
|
Take
|
|
</Button>
|
|
</Flex> */}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default memo(CardLine);
|