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

Update ModalHistory.tsx

This commit is contained in:
nguyentrungthat 2025-11-28 15:57:12 +07:00
parent 2ba35743fd
commit 78f9ca1aa1
1 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,6 +91,13 @@ function ModalHistory({
}
}, [opened]);
// Change station or filter will reset scroll
useEffect(() => {
if (scrollViewportRef?.current) {
scrollViewportRef.current.scrollTop = 0;
}
}, [activeStation, activeTimePeriod]);
// Utility function to format timestamp (can be used later if needed)
// const formatTimestamp = (timestamp: number) => {
// const date = new Date(timestamp);
@ -373,46 +380,54 @@ function ModalHistory({
</Box>
{/* Các items trong nhóm */}
{items.map((item, itemIndex) => (
<Box
key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
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",
}}
>
<Text
size="sm"
style={{ fontFamily: "monospace" }}
{items
?.filter((el, i) =>
activeTimePeriod === "current"
? i === 0
: true
)
.map((item, itemIndex) => (
<Box
key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
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",
}}
>
{item.pid} {item.vid} SN: {item.sn}
<span
style={{
marginLeft: "20px",
color: "#868e96",
}}
<Text
size="sm"
style={{ fontFamily: "monospace" }}
>
| {item.scenario}
</span>
<span
style={{
marginLeft: "10px",
color: "#adb5bd",
fontSize: "11px",
}}
>
{new Date(
item.timestamp
).toLocaleString()}
</span>
</Text>
</Box>
))}
{item.pid} {item.vid} SN: {item.sn}
<span
style={{
marginLeft: "20px",
color: "#868e96",
}}
>
| {item.scenario}
</span>
<span
style={{
marginLeft: "10px",
color: "#adb5bd",
fontSize: "11px",
}}
>
{new Date(
item.timestamp
).toLocaleString()}
</span>
</Text>
</Box>
))}
</Box>
))}