ATC_SIMPLE/FRONTEND/src/components/CardLine.tsx

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";
import { convertTimestampToDate } from "../untils/helper";

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", fontSize: "15px" }}
          >
            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>
        <Flex justify={"space-between"}>
          <div className={classes.info_line}>
            PID: {line?.inventory?.pid || ""}
          </div>
          <div className={classes.info_line}>
            SN: {line?.inventory?.sn || ""}
          </div>
          <div className={classes.info_line} style={{ minWidth: "50px" }}>
            VID: {line?.inventory?.vid || ""}
          </div>
        </Flex>
        <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?.userOpenCLI !== "undefined" &&
              typeof line?.userOpenCLI === "string" &&
              line?.userOpenCLI.length > 0 &&
              line?.userOpenCLI !== user?.userName
            }
            line_status={line?.status || ""}
            fontSize={11}
            miniSize={true}
            customStyle={{
              maxHeight: "175px",
              height: "175px",
              fontSize: "7px",
              padding: "0px",
              paddingBottom: "0px",
            }}
            onDoubleClick={() => {
              openTerminal(line);
            }}
          />
        </Box>
        <Box>
          <div className={classes.info_line}>
            Latest: {line?.latestScenario?.name || ""}
            <Text style={{ fontStyle: "italic", fontSize: "11px" }}>
              {line?.latestScenario?.time
                ? "(" + convertTimestampToDate(line?.latestScenario?.time) + ")"
                : ""}
            </Text>
          </div>
        </Box>
      </Flex>
    </Card>
  );
};

export default memo(CardLine);