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]); }, [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) // Utility function to format timestamp (can be used later if needed)
// const formatTimestamp = (timestamp: number) => { // const formatTimestamp = (timestamp: number) => {
// const date = new Date(timestamp); // const date = new Date(timestamp);
@ -373,46 +380,54 @@ function ModalHistory({
</Box> </Box>
{/* Các items trong nhóm */} {/* Các items trong nhóm */}
{items.map((item, itemIndex) => ( {items
<Box ?.filter((el, i) =>
key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`} activeTimePeriod === "current"
style={{ ? i === 0
padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px : true
borderTop: )
itemIndex > 0 .map((item, itemIndex) => (
? "1px solid #f1f3f5" <Box
: "none", key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
backgroundColor: style={{
itemIndex % 2 === 0 ? "white" : "#f8f9fa", padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px
}} borderTop:
> itemIndex > 0
<Text ? "1px solid #f1f3f5"
size="sm" : "none",
style={{ fontFamily: "monospace" }} backgroundColor:
itemIndex % 2 === 0
? "white"
: "#f8f9fa",
}}
> >
{item.pid} {item.vid} SN: {item.sn} <Text
<span size="sm"
style={{ style={{ fontFamily: "monospace" }}
marginLeft: "20px",
color: "#868e96",
}}
> >
| {item.scenario} {item.pid} {item.vid} SN: {item.sn}
</span> <span
<span style={{
style={{ marginLeft: "20px",
marginLeft: "10px", color: "#868e96",
color: "#adb5bd", }}
fontSize: "11px", >
}} | {item.scenario}
> </span>
{new Date( <span
item.timestamp style={{
).toLocaleString()} marginLeft: "10px",
</span> color: "#adb5bd",
</Text> fontSize: "11px",
</Box> }}
))} >
{new Date(
item.timestamp
).toLocaleString()}
</span>
</Text>
</Box>
))}
</Box> </Box>
))} ))}