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

Improve terminal scroll and connection status handling 

Added custom scroll styling for the terminal viewport and improved connection status management by introducing a 'connecting' state in socket event handlers. Enhanced ModalHistory layout for better readability and adjusted key generation in App.tsx for grid columns.
This commit is contained in:
nguyentrungthat 2025-12-01 10:06:38 +07:00
parent 030ebe9fd6
commit b012a26c47
4 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
FRONTEND/src/App.css
View File

@ -12,3 +12,8 @@ button:focus {
overflow-y: hidden !important;
overscroll-behavior: contain;
}
.terminal_scroll > .xterm > .xterm-viewport {
overflow-y: scroll !important;
overscroll-behavior: contain;
}

24
FRONTEND/src/App.tsx
View File

@ -170,7 +170,7 @@ function App() {
socket.on("line_connected", (data) =>
updateValueLineStation(
data?.lineId,
{ status: data.status },
{ status: data.status, connecting: false },
data?.stationId
)
);
@ -178,7 +178,7 @@ function App() {
socket.on("line_disconnected", (data) =>
updateValueLineStation(
data?.lineId,
{ status: data.status },
{ status: data.status, connecting: false },
data?.stationId
)
);
@ -203,7 +203,7 @@ function App() {
socket?.on("line_error", (data) => {
updateValueLineStation(
data?.lineId,
{ netOutput: data.error },
{ netOutput: data.error, connecting: false },
data?.stationId
);
});
@ -336,6 +336,16 @@ function App() {
}, 100);
});
socket?.on("line_connecting", (data) => {
setTimeout(() => {
updateValueLineStation(
data?.lineId,
{ connecting: true },
data?.stationId
);
}, 100);
});
// ✅ cleanup on unmount or when socket changes
return () => {
socket.off("init");
@ -577,7 +587,9 @@ function App() {
<Grid gutter="md">
{leftRow.map((line, i) => (
<Grid.Col
key={line.id ?? `L-${rowIndex}-${i}`}
key={
line.id ?? `L-${rowIndex}-${i}`
}
span={6}
style={{
display: "flex",
@ -612,7 +624,9 @@ function App() {
<Grid gutter="md">
{rightRow.map((line, i) => (
<Grid.Col
key={line.id ?? `R-${rowIndex}-${i}`}
key={
line.id ?? `R-${rowIndex}-${i}`
}
span={6}
style={{
display: "flex",

57
FRONTEND/src/components/ModalHistory.tsx
View File

@ -402,27 +402,46 @@ function ModalHistory({
>
<Text
size="sm"
style={{ fontFamily: "monospace" }}
style={{
fontFamily: "monospace",
display: "flex",
justifyContent: "space-between",
}}
>
{item.pid} {item.vid} SN: {item.sn}
<span
style={{
marginLeft: "20px",
color: "#868e96",
}}
>
| {item.scenario}
<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
style={{
marginLeft: "10px",
color: "#adb5bd",
fontSize: "11px",
}}
>
{new Date(
item.timestamp
).toLocaleString()}
<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>

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

@ -214,6 +214,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
if (onBlur) onBlur();
}}
ref={xtermRef}
className={miniSize ? "" : "terminal_scroll"}
style={{
width: "100%",
paddingLeft: customStyle.paddingLeft ?? "10px",
@ -222,6 +223,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
maxHeight: customStyle.maxHeight ?? "70vh",
height: customStyle.height ?? "70vh",
padding: customStyle.padding ?? "4px",
paddingRight: 0,
}}
onDoubleClick={(event) => {
event.preventDefault();