127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
import { Card, Text, Box, Flex } from "@mantine/core";
|
|
import type { 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, useMemo } from "react";
|
|
|
|
const CardLine = ({
|
|
line,
|
|
selectedLines,
|
|
setSelectedLines,
|
|
socket,
|
|
stationItem,
|
|
openTerminal,
|
|
loadTerminal,
|
|
}: {
|
|
line: TLine;
|
|
selectedLines: TLine[];
|
|
setSelectedLines: (lines: React.SetStateAction<TLine[]>) => void;
|
|
socket: Socket | null;
|
|
stationItem: TStation;
|
|
openTerminal: (value: TLine) => void;
|
|
loadTerminal: boolean;
|
|
}) => {
|
|
const user = useMemo(() => {
|
|
return localStorage.getItem("user") &&
|
|
typeof localStorage.getItem("user") === "string"
|
|
? JSON.parse(localStorage.getItem("user") || "")
|
|
: null;
|
|
}, []);
|
|
|
|
return (
|
|
<Card
|
|
key={line.id}
|
|
shadow="sm"
|
|
radius="md"
|
|
withBorder
|
|
className={classes.card_line}
|
|
style={
|
|
selectedLines.find((val) => val.id === line.id)
|
|
? { backgroundColor: "#8bf55940" }
|
|
: {}
|
|
}
|
|
onDoubleClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
openTerminal(line);
|
|
}}
|
|
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"}
|
|
>
|
|
<Flex justify={"space-between"}>
|
|
<Text fw={600} style={{ display: "flex", gap: "4px" }}>
|
|
Line: {line.lineNumber || line.line_number} - {line.port}{" "}
|
|
{line.status === "connected" && (
|
|
<IconCircleCheckFilled color="green" />
|
|
)}
|
|
</Text>
|
|
<div
|
|
style={{
|
|
alignItems: "center",
|
|
marginLeft: "16px",
|
|
fontSize: "12px",
|
|
color: "red",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
{line?.userOpenCLI ? line?.userOpenCLI + " is using" : ""}
|
|
</div>
|
|
</Flex>
|
|
{/* <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={loadTerminal}
|
|
socket={socket}
|
|
content={line?.output ?? ""}
|
|
initContent={line?.netOutput ?? ""}
|
|
loadingContent={line?.loadingOutput}
|
|
line_id={Number(line?.id)}
|
|
station_id={Number(stationItem.id)}
|
|
isDisabled={
|
|
typeof line?.userEmailOpenCLI !== "undefined" &&
|
|
typeof line?.userEmailOpenCLI !== "string" &&
|
|
line?.userEmailOpenCLI !== user?.email
|
|
}
|
|
line_status={line?.status || ""}
|
|
fontSize={11}
|
|
miniSize={true}
|
|
customStyle={{
|
|
maxHeight: "175px",
|
|
height: "175px",
|
|
fontSize: "7px",
|
|
padding: "0px",
|
|
paddingBottom: "0px",
|
|
}}
|
|
onDoubleClick={() => {
|
|
openTerminal(line);
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default memo(CardLine);
|