andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update gom lại các thư mục, add input history

This commit is contained in:
nguyentrungthat 2025-12-06 10:36:59 +07:00
parent 7e91bc8d85
commit 086c440386
16 changed files with 1250 additions and 968 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
FRONTEND/src/App.tsx
View File

@ -44,7 +44,7 @@ import // ButtonConnect,
import StationSetting from "./components/FormAddEdit";
// import DrawerScenario from "./components/DrawerScenario";
import { Notifications } from "@mantine/notifications";
import ModalTerminal from "./components/ModalTerminal";
import ModalTerminal from "./components/Modal/ModalTerminal";
import PageLogin from "./components/Authentication/LoginPage";
// import DrawerLogs from "./components/DrawerLogs";
import DraggableTabs from "./components/DragTabs";

64
FRONTEND/src/components/BottomToolBar.tsx
View File

@ -5,7 +5,6 @@ import {
CloseButton,
Flex,
Grid,
Input,
ScrollArea,
Tabs,
Text,
@ -17,9 +16,9 @@ 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 "./DrawerLogs";
import { DrawerAPCControl, DrawerSwitchControl } from "./DrawerControl";
import DrawerScenario from "./DrawerScenario";
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 {
@ -28,6 +27,7 @@ import {
IconPlayerPlay,
IconPlus,
} from "@tabler/icons-react";
import InputHistory from "./InputHistory";
interface TabsProps {
selectedLines: TLine[];
@ -339,19 +339,11 @@ const BottomToolBar = ({
? JSON.parse(localStorage.getItem("user") || "")
: null;
}, []);
const [valueInput, setValueInput] = useState<string>("");
const inputRef = useRef<HTMLInputElement>(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);
useEffect(() => {
if (selectedLines?.length > 1 && inputRef?.current) {
inputRef?.current?.focus();
}
}, [selectedLines?.length]);
return (
<>
{/* Modal chọn Scenario - Custom Simple Modal */}
@ -718,50 +710,10 @@ const BottomToolBar = ({
</Button>
</Flex>
<Box>
<Input
ref={inputRef}
style={{
width: "30vw",
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
}}
placeholder={"Send command to port(s)"}
value={valueInput}
onChange={(event) => {
const newValue = event.currentTarget.value;
setValueInput(newValue);
}}
onKeyDown={(event) => {
if (event.key === "Enter") {
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: valueInput + "\r\n",
});
// setTimeout(() => {
// socket?.emit("write_command_line_from_web", {
// lineIds: listLine.map((line) => line.id),
// stationId: station.id,
// command: " \n",
// });
// }, 1000);
}
setValueInput("");
}
}}
rightSectionPointerEvents="all"
rightSection={
<CloseButton
aria-label="Clear input"
onClick={() => setValueInput("")}
style={{
display: valueInput ? undefined : "none",
}}
/>
}
<InputHistory
selectedLines={selectedLines}
socket={socket}
station={station}
/>
</Box>
</Box>

2
FRONTEND/src/components/ButtonAction.tsx
View File

@ -150,7 +150,7 @@ export const ButtonDPELP = ({
id: 0,
is_reboot: 0,
title: "DPELP",
timeout: 300000,
timeout: 360000,
body: JSON.stringify(body),
},
})

661
FRONTEND/src/components/DragTabs.tsx
View File

@ -1,335 +1,402 @@
import { ActionIcon, Avatar, Box, Button, Flex, Group, Menu, Tabs, Text, Tooltip, UnstyledButton } from "@mantine/core";
import { DndContext, useSensor, useSensors, PointerSensor, closestCenter, type DragEndEvent } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable, horizontalListSortingStrategy } from "@dnd-kit/sortable";
import {
ActionIcon,
Avatar,
Box,
Button,
Flex,
Group,
Menu,
Tabs,
Text,
Tooltip,
UnstyledButton,
} from "@mantine/core";
import {
DndContext,
useSensor,
useSensors,
PointerSensor,
closestCenter,
type DragEndEvent,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
useSortable,
horizontalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { useEffect, useMemo, useState, type JSX } from "react";
import { IconChevronRight, IconEdit, IconLogout, IconSettings, IconSettingsPlus, IconListDetails, IconUsersGroup } from "@tabler/icons-react";
import {
IconChevronRight,
IconEdit,
IconLogout,
IconSettings,
IconSettingsPlus,
IconListDetails,
IconUsersGroup,
} from "@tabler/icons-react";
import classes from "./Component.module.css";
import type { IScenario, TStation, TUser } from "../untils/types";
import type { Socket } from "socket.io-client";
import ModalHistory from "./ModalHistory";
import ModalConfig from "./ModalConfig";
import DrawerScenario from "./DrawerScenario";
import ModalHistory from "./Modal/ModalHistory";
import ModalConfig from "./Modal/ModalConfig";
import DrawerScenario from "./Modal/ModalScenario";
interface DraggableTabsProps {
tabsData: TStation[];
panels: JSX.Element[];
storageKey?: string;
onChange: (activeTabId: string | null) => void;
w?: string | number;
isStationSettings?: boolean;
socket: Socket | null;
usersConnecting: TUser[];
setIsEditStation: (value: React.SetStateAction<boolean>) => void;
setIsOpenAddStation: (value: React.SetStateAction<boolean>) => void;
setStationEdit: (value: React.SetStateAction<TStation | undefined>) => void;
active: string;
setActive: (value: React.SetStateAction<string>) => void;
onSendCommand: (value: string) => void;
scenarios: IScenario[];
setScenarios: (value: React.SetStateAction<IScenario[]>) => void;
tabsData: TStation[];
panels: JSX.Element[];
storageKey?: string;
onChange: (activeTabId: string | null) => void;
w?: string | number;
isStationSettings?: boolean;
socket: Socket | null;
usersConnecting: TUser[];
setIsEditStation: (value: React.SetStateAction<boolean>) => void;
setIsOpenAddStation: (value: React.SetStateAction<boolean>) => void;
setStationEdit: (value: React.SetStateAction<TStation | undefined>) => void;
active: string;
setActive: (value: React.SetStateAction<string>) => void;
onSendCommand: (value: string) => void;
scenarios: IScenario[];
setScenarios: (value: React.SetStateAction<IScenario[]>) => void;
}
function SortableTab({
tab,
active,
onChange,
tab,
active,
onChange,
}: {
tab: TStation;
active: string | null;
onChange: (id: string) => void;
isStationSettings?: boolean;
tab: TStation;
active: string | null;
onChange: (id: string) => void;
isStationSettings?: boolean;
}) {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: tab.id.toString() });
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: tab.id.toString() });
return (
<Tabs.Tab
className={classes.tab}
ref={setNodeRef}
{...attributes}
{...listeners}
onPointerDown={(e) => {
listeners?.onPointerDown?.(e);
onChange(tab.id.toString());
}}
value={tab.id.toString()}
style={{
transform: CSS.Transform.toString(transform),
transition,
cursor: "grab",
userSelect: "none",
backgroundColor: active === tab.id.toString() ? "#deffde" : "",
}}
color={active === tab.id.toString() ? "green" : ""}
fw={600}
fz="md"
c="#747474">
<Box className={classes.stationName}>
<Text fw={600} fz="md" className={classes.stationText}>
{tab.name}
</Text>
</Box>
</Tabs.Tab>
);
return (
<Tabs.Tab
className={classes.tab}
ref={setNodeRef}
{...attributes}
{...listeners}
onPointerDown={(e) => {
listeners?.onPointerDown?.(e);
onChange(tab.id.toString());
}}
value={tab.id.toString()}
style={{
transform: CSS.Transform.toString(transform),
transition,
cursor: "grab",
userSelect: "none",
backgroundColor: active === tab.id.toString() ? "#deffde" : "",
}}
color={active === tab.id.toString() ? "green" : ""}
fw={600}
fz="md"
c="#747474"
>
<Box className={classes.stationName}>
<Text fw={600} fz="md" className={classes.stationText}>
{tab.name}
</Text>
</Box>
</Tabs.Tab>
);
}
export default function DraggableTabs({
tabsData,
panels,
storageKey = "draggable-tabs-order",
onChange,
w,
isStationSettings = false,
socket,
usersConnecting,
setIsEditStation,
setIsOpenAddStation,
setStationEdit,
active,
setActive,
scenarios,
setScenarios,
tabsData,
panels,
storageKey = "draggable-tabs-order",
onChange,
w,
isStationSettings = false,
socket,
usersConnecting,
setIsEditStation,
setIsOpenAddStation,
setStationEdit,
active,
setActive,
scenarios,
setScenarios,
}: DraggableTabsProps) {
const user = useMemo(() => {
return localStorage.getItem("user") && typeof localStorage.getItem("user") === "string" ? JSON.parse(localStorage.getItem("user") || "") : null;
}, []);
const [tabs, setTabs] = useState<TStation[]>(tabsData);
const [isChangeTab, setIsChangeTab] = useState<boolean>(false);
const [isSetActive, setIsSetActive] = useState<boolean>(false);
const [isHistoryModalOpen, setIsHistoryModalOpen] = useState<boolean>(false);
const [openConfig, setOpenConfig] = useState<boolean>(false);
const [openDrawerScenario, setOpenDrawerScenario] = useState<boolean>(false);
const user = useMemo(() => {
return localStorage.getItem("user") &&
typeof localStorage.getItem("user") === "string"
? JSON.parse(localStorage.getItem("user") || "")
: null;
}, []);
const [tabs, setTabs] = useState<TStation[]>(tabsData);
const [isChangeTab, setIsChangeTab] = useState<boolean>(false);
const [isSetActive, setIsSetActive] = useState<boolean>(false);
const [isHistoryModalOpen, setIsHistoryModalOpen] = useState<boolean>(false);
const [openConfig, setOpenConfig] = useState<boolean>(false);
const [openDrawerScenario, setOpenDrawerScenario] = useState<boolean>(false);
const sensors = useSensors(useSensor(PointerSensor));
const sensors = useSensors(useSensor(PointerSensor));
// Load saved order from localStorage
useEffect(() => {
if (isChangeTab) {
setTabs((pre) =>
pre
.map((t) => {
const updatedTab = tabsData.find((td) => td.id === t.id);
return updatedTab ? updatedTab : t;
})
.filter((t) => (tabsData.find((td) => td.id === t.id) ? true : false))
);
} else {
const saved = localStorage.getItem(storageKey);
let tabSelected = tabsData?.length > 0 ? tabsData[0]?.id.toString() : null;
if (saved) {
try {
const order = JSON.parse(saved) as { id: string; index: number }[];
// Load saved order from localStorage
useEffect(() => {
if (isChangeTab) {
setTabs((pre) =>
pre
.map((t) => {
const updatedTab = tabsData.find((td) => td.id === t.id);
return updatedTab ? updatedTab : t;
})
.filter((t) => (tabsData.find((td) => td.id === t.id) ? true : false))
);
} else {
const saved = localStorage.getItem(storageKey);
let tabSelected =
tabsData?.length > 0 ? tabsData[0]?.id.toString() : null;
if (saved) {
try {
const order = JSON.parse(saved) as { id: string; index: number }[];
// Find the max index in saved order
const maxIndex = Math.max(...order.map((o) => o.index), 0);
// Find the max index in saved order
const maxIndex = Math.max(...order.map((o) => o.index), 0);
const sorted = [...tabsData].sort((a, b) => {
const aOrder = order.find((o) => o.id.toString() === a.id.toString())?.index;
const bOrder = order.find((o) => o.id.toString() === b.id.toString())?.index;
const sorted = [...tabsData].sort((a, b) => {
const aOrder = order.find(
(o) => o.id.toString() === a.id.toString()
)?.index;
const bOrder = order.find(
(o) => o.id.toString() === b.id.toString()
)?.index;
// If not found, assign index after all existing ones
const aIndex = aOrder !== undefined ? aOrder : maxIndex + 1;
const bIndex = bOrder !== undefined ? bOrder : maxIndex + 1;
// If not found, assign index after all existing ones
const aIndex = aOrder !== undefined ? aOrder : maxIndex + 1;
const bIndex = bOrder !== undefined ? bOrder : maxIndex + 1;
return aIndex - bIndex;
});
return aIndex - bIndex;
});
tabSelected = sorted?.length > 0 ? sorted[0]?.id.toString() : null;
setTabs(sorted);
} catch {
setTabs(tabsData);
}
} else {
setTabs(tabsData);
}
tabSelected = sorted?.length > 0 ? sorted[0]?.id.toString() : null;
setTabs(sorted);
} catch {
setTabs(tabsData);
}
} else {
setTabs(tabsData);
}
if (!isSetActive && tabSelected) {
setActive(tabSelected);
setTimeout(() => {
onChange(tabSelected);
}, 100);
setIsSetActive(true);
}
}
}, [tabsData, storageKey]);
if (!isSetActive && tabSelected) {
setActive(tabSelected);
setTimeout(() => {
onChange(tabSelected);
}, 100);
setIsSetActive(true);
}
}
}, [tabsData, storageKey]);
// Handle reorder
const handleDragEnd = (event: DragEndEvent) => {
const { active: dragActive, over } = event;
if (dragActive.id !== over?.id && over?.id) {
const oldIndex = tabs.findIndex((t) => t.id.toString() === dragActive.id.toString());
const newIndex = tabs.findIndex((t) => t.id.toString() === over?.id.toString());
const newTabs = arrayMove(tabs, oldIndex, newIndex);
setTabs(newTabs);
// Handle reorder
const handleDragEnd = (event: DragEndEvent) => {
const { active: dragActive, over } = event;
if (dragActive.id !== over?.id && over?.id) {
const oldIndex = tabs.findIndex(
(t) => t.id.toString() === dragActive.id.toString()
);
const newIndex = tabs.findIndex(
(t) => t.id.toString() === over?.id.toString()
);
const newTabs = arrayMove(tabs, oldIndex, newIndex);
setTabs(newTabs);
const order = newTabs.map((t, i) => ({ id: t.id, index: i }));
localStorage.setItem(storageKey, JSON.stringify(order));
}
};
const order = newTabs.map((t, i) => ({ id: t.id, index: i }));
localStorage.setItem(storageKey, JSON.stringify(order));
}
};
// Clean up
useEffect(() => {
return () => {
setIsChangeTab(false);
setIsSetActive(false);
setTabs([]);
setActive("0");
};
}, []);
// Clean up
useEffect(() => {
return () => {
setIsChangeTab(false);
setIsSetActive(false);
setTabs([]);
setActive("0");
};
}, []);
return (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<Tabs
value={active}
onChange={(val) => {
setIsChangeTab(true);
onChange(val);
setActive(val || "0");
}}
w={w}>
<Flex justify={"space-between"}>
<Flex style={{ marginTop: "8px" }} gap="xs" align="center">
<ActionIcon title="Setting" variant="outline" onClick={() => setOpenConfig(true)}>
<IconSettings />
</ActionIcon>
<Button
color="yellow"
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<Tabs
value={active}
onChange={(val) => {
setIsChangeTab(true);
onChange(val);
setActive(val || "0");
}}
w={w}
>
<Flex justify={"space-between"}>
<Flex style={{ marginTop: "8px" }} gap="xs" align="center">
<ActionIcon
title="Setting"
variant="outline"
onClick={() => setOpenConfig(true)}
>
<IconSettings />
</ActionIcon>
<Button
color="yellow"
variant="filled"
size="xs"
leftSection={<IconListDetails size={16} />}
onClick={() => setOpenDrawerScenario(true)}>
Scenario
</Button>
</Flex>
<Tabs.List className={classes.list}>
<SortableContext items={tabs} strategy={horizontalListSortingStrategy}>
{tabs.map((tab) => (
<SortableTab
key={tab.id}
tab={tab}
active={active}
onChange={(id) => {
setIsChangeTab(true);
onChange(id);
setActive(id);
}}
isStationSettings={isStationSettings}
/>
))}
</SortableContext>
size="xs"
leftSection={<IconListDetails size={16} />}
onClick={() => setOpenDrawerScenario(true)}
>
Scenario
</Button>
</Flex>
<Tabs.List className={classes.list}>
<SortableContext
items={tabs}
strategy={horizontalListSortingStrategy}
>
{tabs.map((tab) => (
<SortableTab
key={tab.id}
tab={tab}
active={active}
onChange={(id) => {
setIsChangeTab(true);
onChange(id);
setActive(id);
}}
isStationSettings={isStationSettings}
/>
))}
</SortableContext>
<Flex gap={"md"} ms={"xs"} align={"center"}>
{Number(active) ? (
<ActionIcon
title="Edit Station"
variant="outline"
onClick={() => {
setStationEdit(tabsData.find((el) => el.id === Number(active)));
setIsOpenAddStation(true);
setIsEditStation(true);
}}>
<IconEdit />
</ActionIcon>
) : (
""
)}
<ActionIcon
title="Add Station"
variant="outline"
color="green"
onClick={() => {
setIsOpenAddStation(true);
setIsEditStation(false);
setStationEdit(undefined);
}}>
<IconSettingsPlus />
</ActionIcon>
</Flex>
</Tabs.List>
<Flex align={"center"}>
<Button
variant="outline"
style={{ height: "26px", width: "80px", marginRight: "20px" }}
size="xs"
onClick={() => {
setIsHistoryModalOpen(true);
}}>
History
</Button>
<Tooltip
withArrow
label={usersConnecting.map((el) => (
<Text key={el.userId || el.id}>{el.userName}</Text>
))}>
<Avatar radius="xl" me={"sm"}>
<IconUsersGroup color="green" />
</Avatar>
</Tooltip>
<Menu withArrow>
<Menu.Target>
<UnstyledButton
style={{
padding: "var(--mantine-spacing-md)",
color: "var(--mantine-color-text)",
borderRadius: "var(--mantine-radius-sm)",
}}>
<Group>
<div style={{ flex: 1 }}>
<Text size="sm" fw={500}>
{user?.userName || user?.user_name || ""}
</Text>
<Flex gap={"md"} ms={"xs"} align={"center"}>
{Number(active) ? (
<ActionIcon
title="Edit Station"
variant="outline"
onClick={() => {
setStationEdit(
tabsData.find((el) => el.id === Number(active))
);
setIsOpenAddStation(true);
setIsEditStation(true);
}}
>
<IconEdit />
</ActionIcon>
) : (
""
)}
<ActionIcon
title="Add Station"
variant="outline"
color="green"
onClick={() => {
setIsOpenAddStation(true);
setIsEditStation(false);
setStationEdit(undefined);
}}
>
<IconSettingsPlus />
</ActionIcon>
</Flex>
</Tabs.List>
<Flex align={"center"}>
<Button
variant="outline"
style={{ height: "26px", width: "80px", marginRight: "20px" }}
size="xs"
onClick={() => {
setIsHistoryModalOpen(true);
}}
>
History
</Button>
<Tooltip
withArrow
label={usersConnecting.map((el) => (
<Text key={el.userId || el.id}>{el.userName}</Text>
))}
>
<Avatar radius="xl" me={"sm"}>
<IconUsersGroup color="green" />
</Avatar>
</Tooltip>
<Menu withArrow>
<Menu.Target>
<UnstyledButton
style={{
padding: "var(--mantine-spacing-md)",
color: "var(--mantine-color-text)",
borderRadius: "var(--mantine-radius-sm)",
}}
>
<Group>
<div style={{ flex: 1 }}>
<Text size="sm" fw={500}>
{user?.userName || user?.user_name || ""}
</Text>
<Text c="dimmed" size="xs">
{user?.email}
</Text>
</div>
<Text c="dimmed" size="xs">
{user?.email}
</Text>
</div>
<IconChevronRight size={16} />
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
style={{ width: "150px" }}
onClick={() => {
localStorage.removeItem("user");
window.location.href = "/";
socket?.disconnect();
}}
color="red"
leftSection={<IconLogout size={16} stroke={1.5} />}>
Logout
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Flex>
</Flex>
<IconChevronRight size={16} />
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
style={{ width: "150px" }}
onClick={() => {
localStorage.removeItem("user");
window.location.href = "/";
socket?.disconnect();
}}
color="red"
leftSection={<IconLogout size={16} stroke={1.5} />}
>
Logout
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Flex>
</Flex>
{panels}
</Tabs>
{panels}
</Tabs>
<ModalHistory
opened={isHistoryModalOpen}
onClose={() => setIsHistoryModalOpen(false)}
socket={socket}
stationIds={tabs.map((el) => el.id)}
tabs={tabs}
/>
<ModalHistory
opened={isHistoryModalOpen}
onClose={() => setIsHistoryModalOpen(false)}
socket={socket}
stationIds={tabs.map((el) => el.id)}
tabs={tabs}
/>
<ModalConfig
opened={openConfig}
onClose={() => setOpenConfig(false)}
onSave={() => {
onChange(active);
}}
/>
<ModalConfig
opened={openConfig}
onClose={() => setOpenConfig(false)}
onSave={() => {
onChange(active);
}}
/>
<DrawerScenario
scenarios={scenarios}
setScenarios={setScenarios}
externalOpened={openDrawerScenario}
onExternalClose={() => setOpenDrawerScenario(false)}
/>
</DndContext>
);
<DrawerScenario
scenarios={scenarios}
setScenarios={setScenarios}
externalOpened={openDrawerScenario}
onExternalClose={() => setOpenDrawerScenario(false)}
/>
</DndContext>
);
}

4
FRONTEND/src/components/DrawerControl.tsx → FRONTEND/src/components/Drawer/DrawerControl.tsx
View File

@ -12,8 +12,8 @@ import {
} from "@mantine/core";
import { IconRepeat } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import classes from "./Component.module.css";
import type { APCProps, SwitchPortsProps, TStation } from "../untils/types";
import classes from "../Component.module.css";
import type { APCProps, SwitchPortsProps, TStation } from "../../untils/types";
import type { Socket } from "socket.io-client";
interface DrawerProps {

314
FRONTEND/src/components/Drawer/DrawerLogs.tsx Normal file
View File

@ -0,0 +1,314 @@
import { useDisclosure } from "@mantine/hooks";
import {
Button,
Box,
Drawer,
Grid,
Table,
Text,
ScrollArea,
Tooltip,
TextInput,
} from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useEffect, useState } from "react";
import type { ISystemLog } from "../../untils/types";
import {
IconDownload,
IconEye,
IconInfoCircle,
IconX,
} from "@tabler/icons-react";
import classes from "../Component.module.css";
import moment from "moment";
import type { Socket } from "socket.io-client";
import ModalLog from "../Modal/ModalLog";
function DrawerLogs({
socket,
isLogModalOpen,
setIsLogModalOpen,
testLogContent,
setTestLogContent,
}: {
socket: Socket | null;
isLogModalOpen: boolean;
setIsLogModalOpen: (value: React.SetStateAction<boolean>) => void;
testLogContent: string;
setTestLogContent: (value: React.SetStateAction<string>) => void;
}) {
const [opened, { open, close }] = useDisclosure(false);
const [systemLogs, setSystemLogs] = useState<ISystemLog[]>([]);
const [isDownloadLog, setIsDownloadLog] = useState(false);
// const [testLogContent, setTestLogContent] = useState("");
// const [isLogModalOpen, setIsLogModalOpen] = useState(false);
const [downloadName, setDownloadName] = useState("");
const [searchFileName, setSearchFileName] = useState("");
const [fromDate, setFromDate] = useState<Date | null>(null);
const [toDate, setToDate] = useState<Date | null>(null);
const [filteredLogs, setFilteredLogs] = useState<ISystemLog[]>([]);
useEffect(() => {
if (opened) {
socket?.emit("get_list_logs");
}
}, [opened]);
useEffect(() => {
socket?.on("list_logs", (files: string[]) => {
const list: ISystemLog[] = files.map((file) => {
const filename = file.replace(/^.*[\\/]/, "");
const createAt = filename.match(/\d{8}/);
return {
fileName:
file.split("/")[3] || file.split("/")[2] || file.split("/")[1],
createdAt: createAt ? createAt[0] : "N/A",
path: file,
};
});
setSystemLogs(
list.sort(
(a: ISystemLog, b: ISystemLog) =>
parseInt(b.createdAt) - parseInt(a.createdAt)
)
);
});
}, [socket]);
useEffect(() => {
if (isDownloadLog && testLogContent && downloadName) {
const blob = new Blob([testLogContent], { type: "text/plain" });
// Create a temporary link element
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = downloadName;
// Trigger the download by clicking the link
link.click();
// Clean up
URL.revokeObjectURL(link.href);
setIsDownloadLog(false);
setTestLogContent("");
setDownloadName("");
}
}, [testLogContent]);
useEffect(() => {
// Chuẩn bị trước các giá trị search/date để tránh tính lại trong filter cho từng phần tử
const trimmedSearch = searchFileName.trim().toLowerCase();
const hasSearch = trimmedSearch.length > 0;
const fromMoment = fromDate ? moment(fromDate).startOf("day") : null;
const toMoment = toDate ? moment(toDate).endOf("day") : null;
const delayDebounceFn = setTimeout(() => {
// Nếu không có filter nào, tránh filter tốn công, gán thẳng
if (!hasSearch && !fromMoment && !toMoment) {
setFilteredLogs(systemLogs);
return;
}
const next = systemLogs.filter((log) => {
if (hasSearch && !log.fileName.toLowerCase().includes(trimmedSearch)) {
return false;
}
const logDate = moment(log.createdAt, "YYYYMMDD");
if (fromMoment && !logDate.isSameOrAfter(fromMoment)) {
return false;
}
if (toMoment && !logDate.isSameOrBefore(toMoment)) {
return false;
}
return true;
});
setFilteredLogs(next);
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [searchFileName, fromDate, toDate, systemLogs]);
return (
<>
<Drawer
size={"50%"}
position="right"
style={{ position: "absolute", left: 0 }}
offset={8}
radius="md"
opened={opened}
onClose={close}
title={
<div>
<Tooltip
label={
<div>
Format:
<i style={{ marginLeft: "4px" }}>
YYYYMMDD-AUTO-Session.{`{Station name}`}-{`{Station ID}`}-
{`{Station IP}`}-{`{Line number}`}
.log
</i>
</div>
}
position="right"
>
<Text
fw={700}
style={{ display: "flex", alignItems: "center", gap: "6px" }}
>
List Logs <IconInfoCircle color="#3bb7e9" fontSize={"12px"} />
</Text>
</Tooltip>
</div>
}
>
<Grid>
<Grid.Col span={12}>
<Box mb="xs">
<Grid gutter="xs">
<Grid.Col span={6}>
<TextInput
placeholder="Search file name"
value={searchFileName}
onChange={(event) =>
setSearchFileName(event.currentTarget.value)
}
rightSection={
searchFileName ? (
<IconX
size={14}
style={{ cursor: "pointer" }}
onClick={() => setSearchFileName("")}
/>
) : null
}
rightSectionPointerEvents="auto"
size="xs"
/>
</Grid.Col>
<Grid.Col span={3}>
<DateInput
value={fromDate}
onChange={(value) => setFromDate(value as Date | null)}
placeholder="From date"
valueFormat="DD/MM/YYYY"
size="xs"
clearable
/>
</Grid.Col>
<Grid.Col span={3}>
<DateInput
value={toDate}
onChange={(value) => setToDate(value as Date | null)}
placeholder="To date"
valueFormat="DD/MM/YYYY"
size="xs"
clearable
/>
</Grid.Col>
</Grid>
</Box>
<ScrollArea h={"85vh"} style={{ marginTop: "15px" }}>
<Table
stickyHeader
striped
highlightOnHover
withRowBorders={true}
withTableBorder={true}
withColumnBorders={true}
>
<Table.Thead
style={{
top: 1,
}}
>
<Table.Tr>
<Table.Th style={{ width: "50%" }}>File name</Table.Th>
<Table.Th style={{ width: "30%" }}>Created at</Table.Th>
<Table.Th style={{ width: "10%" }}></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{filteredLogs.map((element) => (
<Table.Tr key={element.path}>
<Table.Td>{element.fileName}</Table.Td>
<Table.Td>
<Text>
{moment(element.createdAt).format("DD/MM/YYYY")}
</Text>
</Table.Td>
<Table.Td>
<Box
key={"action-" + element.fileName}
className={classes.optionIcon}
>
<IconEye
className={classes.viewIcon}
onClick={() => {
setTestLogContent("");
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsLogModalOpen(true);
}}
width={20}
/>
<IconDownload
className={[
classes.downloadIcon,
isDownloadLog ? classes.isDisabled : "",
].join(" ")}
onClick={() => {
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsDownloadLog(true);
setTestLogContent("");
setDownloadName(
element.path.split("/")[3] ||
element.path.split("/")[2] ||
element.path.split("/")[1]
);
}}
width={20}
/>
</Box>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</ScrollArea>
</Grid.Col>
</Grid>
{isLogModalOpen && (
<ModalLog
opened={isLogModalOpen}
onClose={() => {
setIsLogModalOpen(false);
}}
testLogContent={testLogContent}
/>
)}
</Drawer>
<Button
fw={400}
style={{ height: "30px", width: "100px" }}
title="Add Scenario"
variant="outline"
// color="green"
onClick={() => {
open();
}}
>
List logs{" "}
</Button>
</>
);
}
export default DrawerLogs;

264
FRONTEND/src/components/DrawerLogs.tsx
View File

@ -1,264 +0,0 @@
import { useDisclosure } from "@mantine/hooks";
import { Button, Box, Drawer, Grid, Table, Text, ScrollArea, Tooltip, TextInput } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useEffect, useState } from "react";
import type { ISystemLog } from "../untils/types";
import { IconDownload, IconEye, IconInfoCircle, IconX } from "@tabler/icons-react";
import classes from "./Component.module.css";
import moment from "moment";
import type { Socket } from "socket.io-client";
import ModalLog from "./ModalLog";
function DrawerLogs({
socket,
isLogModalOpen,
setIsLogModalOpen,
testLogContent,
setTestLogContent,
}: {
socket: Socket | null;
isLogModalOpen: boolean;
setIsLogModalOpen: (value: React.SetStateAction<boolean>) => void;
testLogContent: string;
setTestLogContent: (value: React.SetStateAction<string>) => void;
}) {
const [opened, { open, close }] = useDisclosure(false);
const [systemLogs, setSystemLogs] = useState<ISystemLog[]>([]);
const [isDownloadLog, setIsDownloadLog] = useState(false);
// const [testLogContent, setTestLogContent] = useState("");
// const [isLogModalOpen, setIsLogModalOpen] = useState(false);
const [downloadName, setDownloadName] = useState("");
const [searchFileName, setSearchFileName] = useState("");
const [fromDate, setFromDate] = useState<Date | null>(null);
const [toDate, setToDate] = useState<Date | null>(null);
const [filteredLogs, setFilteredLogs] = useState<ISystemLog[]>([]);
useEffect(() => {
if (opened) {
socket?.emit("get_list_logs");
}
}, [opened]);
useEffect(() => {
socket?.on("list_logs", (files: string[]) => {
const list: ISystemLog[] = files.map((file) => {
const filename = file.replace(/^.*[\\/]/, "");
const createAt = filename.match(/\d{8}/);
return {
fileName: file.split("/")[3] || file.split("/")[2] || file.split("/")[1],
createdAt: createAt ? createAt[0] : "N/A",
path: file,
};
});
setSystemLogs(list.sort((a: ISystemLog, b: ISystemLog) => parseInt(b.createdAt) - parseInt(a.createdAt)));
});
}, [socket]);
useEffect(() => {
if (isDownloadLog && testLogContent && downloadName) {
const blob = new Blob([testLogContent], { type: "text/plain" });
// Create a temporary link element
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = downloadName;
// Trigger the download by clicking the link
link.click();
// Clean up
URL.revokeObjectURL(link.href);
setIsDownloadLog(false);
setTestLogContent("");
setDownloadName("");
}
}, [testLogContent]);
useEffect(() => {
// Chuẩn bị trước các giá trị search/date để tránh tính lại trong filter cho từng phần tử
const trimmedSearch = searchFileName.trim().toLowerCase();
const hasSearch = trimmedSearch.length > 0;
const fromMoment = fromDate ? moment(fromDate).startOf("day") : null;
const toMoment = toDate ? moment(toDate).endOf("day") : null;
const delayDebounceFn = setTimeout(() => {
// Nếu không có filter nào, tránh filter tốn công, gán thẳng
if (!hasSearch && !fromMoment && !toMoment) {
setFilteredLogs(systemLogs);
return;
}
const next = systemLogs.filter((log) => {
if (hasSearch && !log.fileName.toLowerCase().includes(trimmedSearch)) {
return false;
}
const logDate = moment(log.createdAt, "YYYYMMDD");
if (fromMoment && !logDate.isSameOrAfter(fromMoment)) {
return false;
}
if (toMoment && !logDate.isSameOrBefore(toMoment)) {
return false;
}
return true;
});
setFilteredLogs(next);
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [searchFileName, fromDate, toDate, systemLogs]);
return (
<>
<Drawer
size={"50%"}
position="right"
style={{ position: "absolute", left: 0 }}
offset={8}
radius="md"
opened={opened}
onClose={close}
title={
<div>
<Tooltip
label={
<div>
Format:
<i style={{ marginLeft: "4px" }}>
YYYYMMDD-AUTO-Session.{`{Station name}`}-{`{Station ID}`}-{`{Station IP}`}-{`{Line number}`}
.log
</i>
</div>
}
position="right">
<Text fw={700} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
List Logs <IconInfoCircle color="#3bb7e9" fontSize={"12px"} />
</Text>
</Tooltip>
</div>
}>
<Grid>
<Grid.Col span={12}>
<Box mb="xs">
<Grid gutter="xs">
<Grid.Col span={6}>
<TextInput
placeholder="Search file name"
value={searchFileName}
onChange={(event) => setSearchFileName(event.currentTarget.value)}
rightSection={
searchFileName ? (
<IconX
size={14}
style={{ cursor: "pointer" }}
onClick={() => setSearchFileName("")}
/>
) : null
}
rightSectionPointerEvents="auto"
size="xs"
/>
</Grid.Col>
<Grid.Col span={3}>
<DateInput
value={fromDate}
onChange={(value) => setFromDate(value as Date | null)}
placeholder="From date"
valueFormat="DD/MM/YYYY"
size="xs"
clearable
/>
</Grid.Col>
<Grid.Col span={3}>
<DateInput
value={toDate}
onChange={(value) => setToDate(value as Date | null)}
placeholder="To date"
valueFormat="DD/MM/YYYY"
size="xs"
clearable
/>
</Grid.Col>
</Grid>
</Box>
<ScrollArea h={"85vh"} style={{ marginTop: "15px" }}>
<Table stickyHeader striped highlightOnHover withRowBorders={true} withTableBorder={true} withColumnBorders={true}>
<Table.Thead
style={{
top: 1,
}}>
<Table.Tr>
<Table.Th style={{ width: "50%" }}>File name</Table.Th>
<Table.Th style={{ width: "30%" }}>Created at</Table.Th>
<Table.Th style={{ width: "10%" }}></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{filteredLogs.map((element) => (
<Table.Tr key={element.path}>
<Table.Td>{element.fileName}</Table.Td>
<Table.Td>
<Text>{moment(element.createdAt).format("DD/MM/YYYY")}</Text>
</Table.Td>
<Table.Td>
<Box key={"action-" + element.fileName} className={classes.optionIcon}>
<IconEye
className={classes.viewIcon}
onClick={() => {
setTestLogContent("");
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsLogModalOpen(true);
}}
width={20}
/>
<IconDownload
className={[classes.downloadIcon, isDownloadLog ? classes.isDisabled : ""].join(" ")}
onClick={() => {
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsDownloadLog(true);
setTestLogContent("");
setDownloadName(element.path.split("/")[3] || element.path.split("/")[2] || element.path.split("/")[1]);
}}
width={20}
/>
</Box>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</ScrollArea>
</Grid.Col>
</Grid>
{isLogModalOpen && (
<ModalLog
opened={isLogModalOpen}
onClose={() => {
setIsLogModalOpen(false);
}}
testLogContent={testLogContent}
/>
)}
</Drawer>
<Button
fw={400}
style={{ height: "30px", width: "100px" }}
title="Add Scenario"
variant="outline"
// color="green"
onClick={() => {
open();
}}>
List logs{" "}
</Button>
</>
);
}
export default DrawerLogs;

135
FRONTEND/src/components/InputHistory.tsx Normal file
View File

@ -0,0 +1,135 @@
import { useEffect, useState, useCallback, useRef } from "react";
import { CloseButton, TextInput } from "@mantine/core";
import type { TLine, TStation } from "../untils/types";
import type { Socket } from "socket.io-client";
const HISTORY_KEY = "command_history";
const MAX_HISTORY = 20;
export default function InputHistory({
selectedLines,
socket,
station,
}: {
selectedLines: TLine[];
socket: Socket | null;
station: TStation;
}) {
const [value, setValue] = useState("");
const [history, setHistory] = useState<string[]>([]);
const [historyIndex, setHistoryIndex] = useState<number>(-1);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (selectedLines?.length > 1 && inputRef?.current) {
inputRef?.current?.focus();
}
}, [selectedLines?.length]);
// Load history từ localStorage
useEffect(() => {
try {
const saved = JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]");
if (Array.isArray(saved)) setHistory(saved);
} catch (error) {
console.error("Failed to load command history:", error);
}
}, []);
// Lưu history khi thay đổi
const saveHistory = (list: string[]) => {
localStorage.setItem(HISTORY_KEY, JSON.stringify(list));
};
// Xử lý Enter
const handleEnter = useCallback(() => {
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: value + "\r\n",
});
}
// Reset
setHistoryIndex(-1);
setValue("");
if (!value.trim()) return;
let newHistory = [...history];
// Không thêm nếu giống command cuối cùng
if (newHistory[newHistory.length - 1] !== value.trim()) {
newHistory.push(value.trim());
}
// Giới hạn 10 lệnh
if (newHistory.length > MAX_HISTORY) {
newHistory = newHistory.slice(newHistory.length - MAX_HISTORY);
}
setHistory(newHistory);
saveHistory(newHistory);
// Reset
// setHistoryIndex(-1);
// setValue("");
// console.log("Command:", value);
}, [value, history, selectedLines, socket, station]);
// Xử lý phím
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
handleEnter();
}
if (e.key === "ArrowUp") {
e.preventDefault();
if (history.length === 0) return;
const newIndex =
historyIndex < 0 ? history.length - 1 : Math.max(0, historyIndex - 1);
setHistoryIndex(newIndex);
setValue(history[newIndex]);
}
if (e.key === "ArrowDown") {
e.preventDefault();
if (history.length === 0) return;
if (historyIndex === -1) return;
const newIndex =
historyIndex >= history.length - 1 ? -1 : historyIndex + 1;
setHistoryIndex(newIndex);
setValue(newIndex === -1 ? "" : history[newIndex]);
}
};
return (
<TextInput
style={{
width: "30vw",
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
}}
placeholder={"Send command to port(s)"}
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
radius="md"
rightSectionPointerEvents="all"
rightSection={
<CloseButton
aria-label="Clear input"
onClick={() => setValue("")}
style={{
display: value ? undefined : "none",
}}
/>
}
/>
);
}

0
FRONTEND/src/components/ModalConfig.tsx → FRONTEND/src/components/Modal/ModalConfig.tsx
View File

312
FRONTEND/src/components/ModalHistory.tsx → FRONTEND/src/components/Modal/ModalHistory.tsx
View File

@ -7,9 +7,9 @@ import {
CloseButton,
Button,
} from "@mantine/core";
import classes from "./Component.module.css";
import classes from "../Component.module.css";
import type { Socket } from "socket.io-client";
import type { TStation } from "../untils/types";
import type { TStation } from "../../untils/types";
interface HistoryItem {
id: number;
@ -153,7 +153,8 @@ function ModalHistory({
const clientHeight = scrollContainer.clientHeight;
const currentScrollTop = scrollContainer.scrollTop;
const maxScrollTop = scrollHeight - clientHeight;
const isAtBottom = Math.abs(currentScrollTop + clientHeight - scrollHeight) < 20;
const isAtBottom =
Math.abs(currentScrollTop + clientHeight - scrollHeight) < 20;
// If at bottom and trying to scroll down, prevent it
if (isAtBottom && e.deltaY > 0) {
@ -192,7 +193,6 @@ function ModalHistory({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeStation]);
// Utility function to format timestamp (can be used later if needed)
// const formatTimestamp = (timestamp: number) => {
// const date = new Date(timestamp);
@ -266,9 +266,7 @@ function ModalHistory({
if (tabs.length > 0) {
tabs.forEach((tab) => {
const existingIndex = result.findIndex(
(h) => h.stationId === tab.id
);
const existingIndex = result.findIndex((h) => h.stationId === tab.id);
if (existingIndex === -1) {
// Station from tabs not found in historyData, add it with empty history
result.push({
@ -317,9 +315,10 @@ function ModalHistory({
const tabLines = tabStation?.lines || [];
// Group filtered history by line number
const groupedHistory = station.filteredHistory.length > 0
? groupHistoryByLine(station.filteredHistory)
: new Map<number, HistoryItem[]>();
const groupedHistory =
station.filteredHistory.length > 0
? groupHistoryByLine(station.filteredHistory)
: new Map<number, HistoryItem[]>();
// Ensure all lines from tabs are included in groupedHistory (even if empty)
tabLines.forEach((line) => {
@ -355,7 +354,8 @@ function ModalHistory({
// Scroll đến vị trí sao cho content nằm ngay dưới sticky header
// contentRect.top - containerRect.top là khoảng cách từ content đến top của container
// Trừ đi headerHeight để content nằm ngay dưới header
const targetScrollTop = currentScrollTop + (contentRect.top - containerRect.top) - headerHeight;
const targetScrollTop =
currentScrollTop + (contentRect.top - containerRect.top) - headerHeight;
scrollContainer.scrollTo({
top: Math.max(0, targetScrollTop),
@ -511,7 +511,8 @@ function ModalHistory({
h="calc(75vh - 80px)"
viewportRef={scrollViewportRef}
onScrollPositionChange={() => {
if (isManualScrollRef.current || !scrollViewportRef.current) return;
if (isManualScrollRef.current || !scrollViewportRef.current)
return;
// Debounce để scroll mượt hơn
if (scrollTimeoutRef.current) {
@ -522,19 +523,25 @@ function ModalHistory({
if (!scrollViewportRef.current) return;
const scrollContainer = scrollViewportRef.current;
const containerRect = scrollContainer.getBoundingClientRect();
const containerRect =
scrollContainer.getBoundingClientRect();
const topThreshold = containerRect.top + 10; // Sát top với threshold 10px
// Check if scrolled to bottom
const scrollHeight = scrollContainer.scrollHeight;
const clientHeight = scrollContainer.clientHeight;
const currentScrollTop = scrollContainer.scrollTop;
const isAtBottom = Math.abs(currentScrollTop + clientHeight - scrollHeight) < 20;
const isAtBottom =
Math.abs(
currentScrollTop + clientHeight - scrollHeight
) < 20;
// Check if currently at last station with no data - prevent scrolling
if (allGroupedStations.length > 0) {
const lastStation = allGroupedStations[allGroupedStations.length - 1];
const lastStationHasNoData = lastStation.groupedHistory.size === 0;
const lastStation =
allGroupedStations[allGroupedStations.length - 1];
const lastStationHasNoData =
lastStation.groupedHistory.size === 0;
const lastStationIdStr = String(lastStation.stationId);
// If at bottom and last station has no data, prevent scrolling
@ -548,7 +555,10 @@ function ModalHistory({
const maxScrollTop = scrollHeight - clientHeight;
// If trying to scroll down (scrollTop increased), reset to bottom
if (currentScrollTop > lastScrollTopRef.current && currentScrollTop < maxScrollTop - 5) {
if (
currentScrollTop > lastScrollTopRef.current &&
currentScrollTop < maxScrollTop - 5
) {
scrollContainer.scrollTo({
top: maxScrollTop,
behavior: "auto", // Use auto for instant reset
@ -566,15 +576,20 @@ function ModalHistory({
const currentStation = allGroupedStations.find(
(s) => s.stationId.toString() === activeStation
);
const isLastStation = currentStation?.stationId === lastStation.stationId;
const hasNoData = currentStation?.groupedHistory.size === 0;
const isLastStation =
currentStation?.stationId === lastStation.stationId;
const hasNoData =
currentStation?.groupedHistory.size === 0;
if (isLastStation && hasNoData) {
isBlockingScrollRef.current = true;
const maxScrollTop = scrollHeight - clientHeight;
// If trying to scroll down past bottom, reset to bottom
if (currentScrollTop > lastScrollTopRef.current && currentScrollTop < maxScrollTop - 5) {
if (
currentScrollTop > lastScrollTopRef.current &&
currentScrollTop < maxScrollTop - 5
) {
scrollContainer.scrollTo({
top: maxScrollTop,
behavior: "auto",
@ -600,7 +615,8 @@ function ModalHistory({
// If at bottom, select the last station
if (isAtBottom && allGroupedStations.length > 0) {
const lastStation = allGroupedStations[allGroupedStations.length - 1];
const lastStation =
allGroupedStations[allGroupedStations.length - 1];
const lastStationIdStr = String(lastStation.stationId);
if (lastStationIdStr !== activeStation) {
setActiveStation(lastStationIdStr);
@ -609,34 +625,53 @@ function ModalHistory({
// Find which station header is closest to top
// Ưu tiên: header đã vượt qua top threshold (ở trên) > header chưa đến (ở dưới)
type StationInfo = { id: number; distance: number; isAbove: boolean };
type StationInfo = {
id: number;
distance: number;
isAbove: boolean;
};
let bestStation: StationInfo | null = null;
Array.from(stationRefs.current.entries()).forEach(([stationId, element]) => {
const elementRect = element.getBoundingClientRect();
const elementTop = elementRect.top;
const elementBottom = elementRect.bottom;
Array.from(stationRefs.current.entries()).forEach(
([stationId, element]) => {
const elementRect = element.getBoundingClientRect();
const elementTop = elementRect.top;
const elementBottom = elementRect.bottom;
// Check if station header is visible (có phần nào đó trong viewport)
const isVisible = elementBottom >= containerRect.top && elementTop <= containerRect.bottom;
// Check if station header is visible (có phần nào đó trong viewport)
const isVisible =
elementBottom >= containerRect.top &&
elementTop <= containerRect.bottom;
if (isVisible) {
const isAbove = elementTop <= topThreshold; // Header đã vượt qua top
const distance = Math.abs(elementTop - topThreshold);
const stationIdNum = Number(stationId);
if (isVisible) {
const isAbove = elementTop <= topThreshold; // Header đã vượt qua top
const distance = Math.abs(
elementTop - topThreshold
);
const stationIdNum = Number(stationId);
// Ưu tiên header đã vượt qua top (isAbove = true)
if (!bestStation ||
// Ưu tiên header đã vượt qua top (isAbove = true)
if (
!bestStation ||
(isAbove && !bestStation.isAbove) ||
(isAbove === bestStation.isAbove && distance < bestStation.distance)) {
bestStation = { id: stationIdNum, distance, isAbove };
(isAbove === bestStation.isAbove &&
distance < bestStation.distance)
) {
bestStation = {
id: stationIdNum,
distance,
isAbove,
};
}
}
}
});
);
// Update active station if found
if (bestStation) {
const stationIdStr = String((bestStation as StationInfo).id);
const stationIdStr = String(
(bestStation as StationInfo).id
);
if (stationIdStr !== activeStation) {
setActiveStation(stationIdStr);
}
@ -652,14 +687,20 @@ function ModalHistory({
key={`station-${station.stationId}`}
style={{
marginBottom: "24px",
minHeight: station.groupedHistory.size === 0 ? "200px" : "auto" // Đảm bảo station không có content vẫn có height
minHeight:
station.groupedHistory.size === 0
? "200px"
: "auto", // Đảm bảo station không có content vẫn có height
}}
>
{/* Station Title */}
<Box
ref={(el) => {
if (el) {
stationRefs.current.set(station.stationId, el);
stationRefs.current.set(
station.stationId,
el
);
}
}}
style={{
@ -684,110 +725,116 @@ function ModalHistory({
Array.from(station.groupedHistory.entries())
.sort(([lineA], [lineB]) => lineA - lineB)
.map(([lineNumber, items], lineIndex) => (
<Box
key={`station-${station.stationId}-line-${lineNumber}`}
ref={(el) => {
// Set ref cho line group đầu tiên (nội dung đầu tiên của station)
if (el && lineIndex === 0) {
stationContentRefs.current.set(station.stationId, el);
}
}}
style={{
marginBottom: "8px",
border: "1px solid #dee2e6",
borderRadius: "4px",
overflow: "hidden",
}}
>
{/* Header của nhóm - hiển thị line number */}
<Box
style={{
padding: "8px 16px",
backgroundColor: "#e9ecef",
fontWeight: 600,
}}
>
<Text size="sm" fw={600}>
Line {lineNumber}
</Text>
</Box>
{/* Các items trong nhóm */}
{items
?.filter((_, i) =>
activeTimePeriod === "current"
? i === 0
: true
)
.map((item, itemIndex) => (
<Box
key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
key={`station-${station.stationId}-line-${lineNumber}`}
ref={(el) => {
// Set ref cho line group đầu tiên (nội dung đầu tiên của station)
if (el && lineIndex === 0) {
stationContentRefs.current.set(
station.stationId,
el
);
}
}}
style={{
padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px
borderTop:
itemIndex > 0
? "1px solid #f1f3f5"
: "none",
backgroundColor:
itemIndex % 2 === 0
? "white"
: "#f8f9fa",
marginBottom: "8px",
border: "1px solid #dee2e6",
borderRadius: "4px",
overflow: "hidden",
}}
>
<Text
size="sm"
{/* Header của nhóm - hiển thị line number */}
<Box
style={{
fontFamily: "monospace",
display: "flex",
justifyContent: "space-between",
padding: "8px 16px",
backgroundColor: "#e9ecef",
fontWeight: 600,
}}
>
<span style={{ display: "flex" }}>
<Text
<Text size="sm" fw={600}>
Line {lineNumber}
</Text>
</Box>
{/* Các items trong nhóm */}
{items
?.filter((_, i) =>
activeTimePeriod === "current"
? i === 0
: true
)
.map((item, itemIndex) => (
<Box
key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
style={{
width: "150px",
fontWeight: "bold",
padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px
borderTop:
itemIndex > 0
? "1px solid #f1f3f5"
: "none",
backgroundColor:
itemIndex % 2 === 0
? "white"
: "#f8f9fa",
}}
>
{item.pid}
</Text>{" "}
| {item.vid} SN:{" "}
<b style={{ paddingLeft: "4px" }}>
{item.sn}
</b>
</span>
<span>
<span
style={{
marginLeft: "20px",
color: "#7c7c7c",
}}
>
{item.scenario} |
</span>
<span
style={{
marginLeft: "10px",
color: "#7c7c7c",
fontSize: "11px",
}}
>
{new Date(
item.timestamp
).toLocaleString()}
</span>
</span>
</Text>
<Text
size="sm"
style={{
fontFamily: "monospace",
display: "flex",
justifyContent: "space-between",
}}
>
<span style={{ display: "flex" }}>
<Text
style={{
width: "150px",
fontWeight: "bold",
}}
>
{item.pid}
</Text>{" "}
| {item.vid} SN:{" "}
<b style={{ paddingLeft: "4px" }}>
{item.sn}
</b>
</span>
<span>
<span
style={{
marginLeft: "20px",
color: "#7c7c7c",
}}
>
{item.scenario} |
</span>
<span
style={{
marginLeft: "10px",
color: "#7c7c7c",
fontSize: "11px",
}}
>
{new Date(
item.timestamp
).toLocaleString()}
</span>
</span>
</Text>
</Box>
))}
</Box>
))}
</Box>
))
))
) : (
<Box
ref={(el) => {
// Set ref cho message "No history" (nội dung đầu tiên của station)
if (el) {
stationContentRefs.current.set(station.stationId, el);
stationContentRefs.current.set(
station.stationId,
el
);
}
}}
style={{
@ -797,9 +844,12 @@ function ModalHistory({
}}
>
<Text size="sm" c="dimmed">
No history data available for {TIME_PERIODS.find(
(p) => p.value === activeTimePeriod
)?.label}
No history data available for{" "}
{
TIME_PERIODS.find(
(p) => p.value === activeTimePeriod
)?.label
}
</Text>
</Box>
)}

4
FRONTEND/src/components/ModalLog.tsx → FRONTEND/src/components/Modal/ModalLog.tsx
View File

@ -1,6 +1,6 @@
import { Modal, Text } from "@mantine/core";
import classes from "./Component.module.css";
import { convertTimestampToDate } from "../untils/helper";
import classes from "../Component.module.css";
import { convertTimestampToDate } from "../../untils/helper";
const ModalLog = ({
opened,

345
FRONTEND/src/components/DrawerScenario.tsx → FRONTEND/src/components/Modal/ModalScenario.tsx
View File

@ -10,17 +10,17 @@ import {
Flex,
CloseButton,
} from "@mantine/core";
import classes from "./Component.module.css";
import classes from "../Component.module.css";
import TableRows from "./Scenario/TableRows";
import { useEffect, useState } from "react";
import { useForm } from "@mantine/form";
import DialogConfirm from "./DialogConfirm";
import type { IBodyScenario, IScenario } from "../untils/types";
import DialogConfirm from "../DialogConfirm";
import type { IBodyScenario, IScenario } from "../../untils/types";
import axios from "axios";
import { notifications } from "@mantine/notifications";
const apiUrl = import.meta.env.VITE_BACKEND_URL;
function DrawerScenario({
function ModalScenario({
scenarios,
setScenarios,
externalOpened,
@ -267,92 +267,95 @@ function DrawerScenario({
}}
className={classes.hideScrollBar}
>
<Flex gap="md" style={{ height: "75vh" }}>
{/* Sidebar - List Scenarios */}
<Box
style={{
width: "200px",
borderRight: "1px solid #e9ecef",
paddingRight: "10px",
flexShrink: 0,
}}
>
<ScrollArea h="100%">
<Flex direction="column" gap="xs">
{scenarios.map((scenario) => (
<Button
disabled={isSubmit}
className={classes.buttonScenario}
key={scenario.id}
fullWidth
style={{ minHeight: "36px" }}
variant={
dataScenario && dataScenario?.id === scenario.id
? "filled"
: "outline"
}
onClick={async () => {
if (dataScenario?.id === scenario.id) {
setIsEdit(false);
setDataScenario(undefined);
form.reset();
} else {
setIsEdit(true);
setDataScenario(scenario);
form.setFieldValue("title", scenario.title);
form.setFieldValue(
"timeout",
scenario.timeout.toString()
);
form.setFieldValue("body", JSON.parse(scenario.body));
form.setFieldValue("isReboot", scenario.isReboot);
}
}}
>
{scenario.title}
</Button>
))}
</Flex>
</ScrollArea>
</Box>
{/* Main Content */}
<Box style={{ flex: 1, overflow: "hidden" }}>
<Box>
<Grid>
<Grid.Col span={4}>
<TextInput
label="Title"
placeholder="Scenario title"
value={form.values.title}
error={form.errors.title}
onChange={(e) =>
form.setFieldValue("title", e.target.value)
}
required
/>
</Grid.Col>
<Grid.Col span={2}>
<TextInput
label="Timeout (ms)"
placeholder="Timeout (ms)"
value={form.values.timeout}
error={form.errors.timeout}
onChange={(e) =>
form.setFieldValue("timeout", e.target.value)
}
required
/>
</Grid.Col>
<Grid.Col
span={3}
<Flex gap="md" style={{ height: "75vh" }}>
{/* Sidebar - List Scenarios */}
<Box
style={{
display: "flex",
alignItems: "end",
marginBottom: "8px",
width: "200px",
borderRight: "1px solid #e9ecef",
paddingRight: "10px",
flexShrink: 0,
}}
>
{/* <Checkbox
<ScrollArea h="100%">
<Flex direction="column" gap="xs">
{scenarios.map((scenario) => (
<Button
disabled={isSubmit}
className={classes.buttonScenario}
key={scenario.id}
fullWidth
style={{ minHeight: "36px" }}
variant={
dataScenario && dataScenario?.id === scenario.id
? "filled"
: "outline"
}
onClick={async () => {
if (dataScenario?.id === scenario.id) {
setIsEdit(false);
setDataScenario(undefined);
form.reset();
} else {
setIsEdit(true);
setDataScenario(scenario);
form.setFieldValue("title", scenario.title);
form.setFieldValue(
"timeout",
scenario.timeout.toString()
);
form.setFieldValue(
"body",
JSON.parse(scenario.body)
);
form.setFieldValue("isReboot", scenario.isReboot);
}
}}
>
{scenario.title}
</Button>
))}
</Flex>
</ScrollArea>
</Box>
{/* Main Content */}
<Box style={{ flex: 1, overflow: "hidden" }}>
<Box>
<Grid>
<Grid.Col span={4}>
<TextInput
label="Title"
placeholder="Scenario title"
value={form.values.title}
error={form.errors.title}
onChange={(e) =>
form.setFieldValue("title", e.target.value)
}
required
/>
</Grid.Col>
<Grid.Col span={2}>
<TextInput
label="Timeout (ms)"
placeholder="Timeout (ms)"
value={form.values.timeout}
error={form.errors.timeout}
onChange={(e) =>
form.setFieldValue("timeout", e.target.value)
}
required
/>
</Grid.Col>
<Grid.Col
span={3}
style={{
display: "flex",
alignItems: "end",
marginBottom: "8px",
}}
>
{/* <Checkbox
label="Reboot"
style={{ color: "red" }}
checked={form.values.isReboot}
@ -363,90 +366,90 @@ function DrawerScenario({
)
}
/> */}
</Grid.Col>
<Grid.Col span={3}>
<div
style={{
display: "flex",
alignItems: "end",
gap: "10px",
justifyContent: "flex-end",
height: "100%",
}}
>
{isEdit && (
<Button
disabled={isSubmit}
style={{ height: "30px" }}
color="red"
onClick={() => {
setOpenConfirm(true);
}}
>
Delete
</Button>
)}
<Button
disabled={isSubmit}
style={{ height: "30px" }}
color="green"
onClick={() => {
handleSave();
}}
</Grid.Col>
<Grid.Col span={3}>
<div
style={{
display: "flex",
alignItems: "end",
gap: "10px",
justifyContent: "flex-end",
height: "100%",
}}
>
{isEdit && (
<Button
disabled={isSubmit}
style={{ height: "30px" }}
color="red"
onClick={() => {
setOpenConfirm(true);
}}
>
Delete
</Button>
)}
<Button
disabled={isSubmit}
style={{ height: "30px" }}
color="green"
onClick={() => {
handleSave();
}}
>
Save
</Button>
</div>
</Grid.Col>
</Grid>
</Box>
<hr style={{ width: "100%" }} />
<Box>
<ScrollArea
h={"calc(75vh - 150px)"}
style={{ marginBottom: "20px" }}
>
Save
</Button>
</div>
</Grid.Col>
</Grid>
</Box>
<hr style={{ width: "100%" }} />
<Box>
<ScrollArea
h={"calc(75vh - 150px)"}
style={{ marginBottom: "20px" }}
>
<Table
stickyHeader
stickyHeaderOffset={-1}
striped
highlightOnHover
withRowBorders={true}
withTableBorder={true}
withColumnBorders={true}
>
<Table.Thead style={{ zIndex: 100 }}>
<Table.Tr>
<Table.Th>#</Table.Th>
<Table.Th>
{/* <span style={{ marginLeft: '30px' }}>Expect</span> */}
Expect
</Table.Th>
<Table.Th>Send</Table.Th>
<Table.Th w={130}>Delay(ms)</Table.Th>
<Table.Th w={100}>Repeat</Table.Th>
<Table.Th></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody id="tbody-table">
{form.values.body.map(
(element: IBodyScenario, i: number) => (
<TableRows
key={i}
addRowUnder={addRowUnder}
deleteRow={deleteRow}
element={element}
form={form}
i={i}
/>
)
)}
</Table.Tbody>
</Table>
</ScrollArea>
</Box>
</Box>
</Flex>
<Table
stickyHeader
stickyHeaderOffset={-1}
striped
highlightOnHover
withRowBorders={true}
withTableBorder={true}
withColumnBorders={true}
>
<Table.Thead style={{ zIndex: 100 }}>
<Table.Tr>
<Table.Th>#</Table.Th>
<Table.Th>
{/* <span style={{ marginLeft: '30px' }}>Expect</span> */}
Expect
</Table.Th>
<Table.Th>Send</Table.Th>
<Table.Th w={130}>Delay(ms)</Table.Th>
<Table.Th w={100}>Repeat</Table.Th>
<Table.Th></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody id="tbody-table">
{form.values.body.map(
(element: IBodyScenario, i: number) => (
<TableRows
key={i}
addRowUnder={addRowUnder}
deleteRow={deleteRow}
element={element}
form={form}
i={i}
/>
)
)}
</Table.Tbody>
</Table>
</ScrollArea>
</Box>
</Box>
</Flex>
</div>
</div>
</div>
@ -468,4 +471,4 @@ function DrawerScenario({
);
}
export default DrawerScenario;
export default ModalScenario;

12
FRONTEND/src/components/ModalTerminal.tsx → FRONTEND/src/components/Modal/ModalTerminal.tsx
View File

@ -21,8 +21,8 @@ import type {
THistoryTicket,
TLine,
TStation,
} from "../untils/types";
import TerminalCLI from "./TerminalXTerm";
} from "../../untils/types";
import TerminalCLI from "../TerminalXTerm";
import type { Socket } from "socket.io-client";
import { useEffect, useMemo, useState } from "react";
import {
@ -30,13 +30,13 @@ import {
IconCircleDot,
IconInfoCircle,
} from "@tabler/icons-react";
import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
import CopyIcon from "./CopyIcon";
import { ButtonDPELP, ButtonScenario } from "../ButtonAction";
import CopyIcon from "../CopyIcon";
import moment from "moment";
import axios from "axios";
import { notifications } from "@mantine/notifications";
import classes from "./Component.module.css";
import { listBaudDefault } from "../untils/constanst";
import classes from "../Component.module.css";
import { listBaudDefault } from "../../untils/constanst";
import { motion } from "motion/react";
const apiUrl = import.meta.env.VITE_BACKEND_URL;

0
FRONTEND/src/components/Scenario/Scenario.module.css → FRONTEND/src/components/Modal/Scenario/Scenario.module.css
View File

2
FRONTEND/src/components/Scenario/TableRows.tsx → FRONTEND/src/components/Modal/Scenario/TableRows.tsx
View File

@ -1,7 +1,7 @@
import { Table, TextInput } from "@mantine/core";
import { IconRowInsertTop, IconX } from "@tabler/icons-react";
import classes from "./Scenario.module.css";
import { numberOnly } from "../../untils/helper";
import { numberOnly } from "../../../untils/helper";
interface IPayload {
element: any;

25
README.md Normal file
View File

@ -0,0 +1,25 @@
# BACKEND
### 1. Copy .env.example -> .env
### 2. npm install
### 3. node ace migration:run
### 4. npm run dev
# FRONTEND
### 1. Copy .env.example -> .env
### 2. npm install
### 3. npm run dev
# Server Redis
### 1. sudo apt install redis-server
### 2. sudo systemctl enable redis-server
### 3. sudo systemctl start redis-server