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
parent
030ebe9fd6
commit
b012a26c47
|
|
@ -12,3 +12,8 @@ button:focus {
|
||||||
overflow-y: hidden !important;
|
overflow-y: hidden !important;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terminal_scroll > .xterm > .xterm-viewport {
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -170,7 +170,7 @@ function App() {
|
||||||
socket.on("line_connected", (data) =>
|
socket.on("line_connected", (data) =>
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ status: data.status },
|
{ status: data.status, connecting: false },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -178,7 +178,7 @@ function App() {
|
||||||
socket.on("line_disconnected", (data) =>
|
socket.on("line_disconnected", (data) =>
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ status: data.status },
|
{ status: data.status, connecting: false },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -203,7 +203,7 @@ function App() {
|
||||||
socket?.on("line_error", (data) => {
|
socket?.on("line_error", (data) => {
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ netOutput: data.error },
|
{ netOutput: data.error, connecting: false },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
@ -336,6 +336,16 @@ function App() {
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
socket?.on("line_connecting", (data) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updateValueLineStation(
|
||||||
|
data?.lineId,
|
||||||
|
{ connecting: true },
|
||||||
|
data?.stationId
|
||||||
|
);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
|
||||||
// ✅ cleanup on unmount or when socket changes
|
// ✅ cleanup on unmount or when socket changes
|
||||||
return () => {
|
return () => {
|
||||||
socket.off("init");
|
socket.off("init");
|
||||||
|
|
@ -577,7 +587,9 @@ function App() {
|
||||||
<Grid gutter="md">
|
<Grid gutter="md">
|
||||||
{leftRow.map((line, i) => (
|
{leftRow.map((line, i) => (
|
||||||
<Grid.Col
|
<Grid.Col
|
||||||
key={line.id ?? `L-${rowIndex}-${i}`}
|
key={
|
||||||
|
line.id ?? `L-${rowIndex}-${i}`
|
||||||
|
}
|
||||||
span={6}
|
span={6}
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -612,7 +624,9 @@ function App() {
|
||||||
<Grid gutter="md">
|
<Grid gutter="md">
|
||||||
{rightRow.map((line, i) => (
|
{rightRow.map((line, i) => (
|
||||||
<Grid.Col
|
<Grid.Col
|
||||||
key={line.id ?? `R-${rowIndex}-${i}`}
|
key={
|
||||||
|
line.id ?? `R-${rowIndex}-${i}`
|
||||||
|
}
|
||||||
span={6}
|
span={6}
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
|
||||||
|
|
@ -402,27 +402,46 @@ function ModalHistory({
|
||||||
>
|
>
|
||||||
<Text
|
<Text
|
||||||
size="sm"
|
size="sm"
|
||||||
style={{ fontFamily: "monospace" }}
|
style={{
|
||||||
|
fontFamily: "monospace",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{item.pid} {item.vid} SN: {item.sn}
|
<span style={{ display: "flex" }}>
|
||||||
<span
|
<Text
|
||||||
style={{
|
style={{
|
||||||
marginLeft: "20px",
|
width: "150px",
|
||||||
color: "#868e96",
|
fontWeight: "bold",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
| {item.scenario}
|
{item.pid}
|
||||||
|
</Text>{" "}
|
||||||
|
| {item.vid} SN:{" "}
|
||||||
|
<b style={{ paddingLeft: "4px" }}>
|
||||||
|
{item.sn}
|
||||||
|
</b>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span>
|
||||||
style={{
|
<span
|
||||||
marginLeft: "10px",
|
style={{
|
||||||
color: "#adb5bd",
|
marginLeft: "20px",
|
||||||
fontSize: "11px",
|
color: "#7c7c7c",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{new Date(
|
{item.scenario} |
|
||||||
item.timestamp
|
</span>
|
||||||
).toLocaleString()}
|
<span
|
||||||
|
style={{
|
||||||
|
marginLeft: "10px",
|
||||||
|
color: "#7c7c7c",
|
||||||
|
fontSize: "11px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{new Date(
|
||||||
|
item.timestamp
|
||||||
|
).toLocaleString()}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -214,6 +214,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
|
||||||
if (onBlur) onBlur();
|
if (onBlur) onBlur();
|
||||||
}}
|
}}
|
||||||
ref={xtermRef}
|
ref={xtermRef}
|
||||||
|
className={miniSize ? "" : "terminal_scroll"}
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
paddingLeft: customStyle.paddingLeft ?? "10px",
|
paddingLeft: customStyle.paddingLeft ?? "10px",
|
||||||
|
|
@ -222,6 +223,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
|
||||||
maxHeight: customStyle.maxHeight ?? "70vh",
|
maxHeight: customStyle.maxHeight ?? "70vh",
|
||||||
height: customStyle.height ?? "70vh",
|
height: customStyle.height ?? "70vh",
|
||||||
padding: customStyle.padding ?? "4px",
|
padding: customStyle.padding ?? "4px",
|
||||||
|
paddingRight: 0,
|
||||||
}}
|
}}
|
||||||
onDoubleClick={(event) => {
|
onDoubleClick={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue