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

Upgrade UI Modal Terminal

This commit is contained in:
andrew.ng 2026-06-04 11:03:10 +07:00
parent c66877e413
commit 81596ddbea
3 changed files with 97 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
FRONTEND/src/App.css
View File

@ -17,3 +17,7 @@ button:focus {
overflow-y: scroll !important; overflow-y: scroll !important;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
.modalNoScroll > .mantine-Modal-inner > .mantine-Modal-content {
overflow-y: hidden !important;
}

14
FRONTEND/src/components/Component.module.css
View File

@ -159,7 +159,8 @@
.scenarioCard { .scenarioCard {
border: 2px solid transparent; border: 2px solid transparent;
background: linear-gradient(white, white) padding-box, background:
linear-gradient(white, white) padding-box,
linear-gradient(145deg, #e0e0e0, #f5f5f5) border-box; linear-gradient(145deg, #e0e0e0, #f5f5f5) border-box;
} }
@ -168,3 +169,14 @@
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.specRow {
padding: 9px 0;
border-bottom: 1px dashed #e9ecef;
}
.connStatus {
padding: 8px 0;
border-radius: 8px;
width: 300px;
}

126
FRONTEND/src/components/Modal/ModalTerminal.tsx
View File

@ -1,5 +1,6 @@
import { import {
ActionIcon, ActionIcon,
Badge,
Box, Box,
Button, Button,
Card, Card,
@ -88,7 +89,12 @@ const SwitchConnectionStatus = ({
const portName = line?.interface ? normalizePortName(line.interface) : ""; const portName = line?.interface ? normalizePortName(line.interface) : "";
return ( return (
<Flex justify="center" mb="sm"> <Flex
justify="center"
mb="sm"
className={classes.connStatus}
style={{ backgroundColor: isConnected ? "#e6f4ea" : "#ffe6e6" }}
>
<IconCircleDot size={18} color={isConnected ? "green" : "red"} /> <IconCircleDot size={18} color={isConnected ? "green" : "red"} />
<Flex ml="xs" gap="xs"> <Flex ml="xs" gap="xs">
<Text size="sm">Internet</Text> <Text size="sm">Internet</Text>
@ -652,6 +658,7 @@ const ModalTerminal = ({
}} }}
size={"100%"} size={"100%"}
style={{ position: "absolute", left: 0 }} style={{ position: "absolute", left: 0 }}
className={"modalNoScroll"}
title={ title={
<Flex justify={"space-between"} align={"center"} w={"100%"}> <Flex justify={"space-between"} align={"center"} w={"100%"}>
<Flex w={"30vw"}> <Flex w={"30vw"}>
@ -881,7 +888,7 @@ const ModalTerminal = ({
</Tabs.Tab> </Tabs.Tab>
</Tabs.List> </Tabs.List>
<Flex direction={"column"} h={"95%"}> <Flex direction={"column"} h={"75%"}>
<Box> <Box>
<Flex gap={"sm"} justify={"center"} align={"center"}> <Flex gap={"sm"} justify={"center"} align={"center"}>
<Text size="xl"> <Text size="xl">
@ -910,11 +917,11 @@ const ModalTerminal = ({
style={{ width: "100%" }} style={{ width: "100%" }}
> >
<Flex align="center" gap="xs"> <Flex align="center" gap="xs">
<Text size="md" mr="6px"> <Text w={50} size="md">
BAUD: BAUD:
</Text> </Text>
<Text size="md"> <Text size="md" fw={600}>
<strong>{line?.baud || ""}</strong> {line?.baud || ""}
</Text> </Text>
</Flex> </Flex>
<Menu <Menu
@ -996,10 +1003,11 @@ const ModalTerminal = ({
</Menu> </Menu>
</Flex> </Flex>
<Flex mt="4px" align="center"> <Flex mt="4px" align="center">
<Text size="md" mr="6px"> <Text w={50} size="md" mr="6px">
PID: PID:
</Text> </Text>
<Text <Text
fw={600}
size="md" size="md"
style={{ style={{
opacity: line?.inventory?.pid ? 1 : 0.5, opacity: line?.inventory?.pid ? 1 : 0.5,
@ -1017,7 +1025,7 @@ const ModalTerminal = ({
{line?.inventory?.pid || ""} {line?.inventory?.pid || ""}
</Text> </Text>
{line?.inventory?.vid ? ( {line?.inventory?.vid ? (
<Text size="md" ml={"sm"}> <Text fw={600} size="md" ml={"sm"}>
{line?.inventory?.vid} {line?.inventory?.vid}
</Text> </Text>
) : ( ) : (
@ -1031,10 +1039,11 @@ const ModalTerminal = ({
/> />
</Flex> </Flex>
<Flex mt="4px" align="center"> <Flex mt="4px" align="center">
<Text size="md" mr="6px"> <Text w={50} size="md" mr="6px">
SN: SN:
</Text> </Text>
<Text <Text
fw={600}
size="md" size="md"
style={{ style={{
opacity: line?.inventory?.sn ? 1 : 0.5, opacity: line?.inventory?.sn ? 1 : 0.5,
@ -1082,7 +1091,7 @@ const ModalTerminal = ({
<Flex <Flex
justify={"space-between"} justify={"space-between"}
direction={"column"} direction={"column"}
h={"95%"} h={"90%"}
> >
<ScrollArea h={"95%"}> <ScrollArea h={"95%"}>
<Card <Card
@ -1093,7 +1102,7 @@ const ModalTerminal = ({
h={"fit-content"} h={"fit-content"}
mt={"4px"} mt={"4px"}
> >
<Flex> <Flex className={classes.specRow}>
<Text size="md" mr={"6px"} fw={"bold"}> <Text size="md" mr={"6px"} fw={"bold"}>
IOS: IOS:
</Text> </Text>
@ -1107,7 +1116,7 @@ const ModalTerminal = ({
: ""} : ""}
</Text> </Text>
</Flex> </Flex>
<Flex> <Flex className={classes.specRow}>
<Text size="md" mr={"sm"} fw={"bold"}> <Text size="md" mr={"sm"} fw={"bold"}>
MAC: MAC:
</Text> </Text>
@ -1117,7 +1126,7 @@ const ModalTerminal = ({
: ""} : ""}
</Text> </Text>
</Flex> </Flex>
<Flex> <Flex className={classes.specRow}>
<Text size="md" mr={"sm"} fw={"bold"}> <Text size="md" mr={"sm"} fw={"bold"}>
License: License:
</Text> </Text>
@ -1134,12 +1143,10 @@ const ModalTerminal = ({
: ""} : ""}
</Text> </Text>
</Flex> </Flex>
<Box> <Box className={classes.specRow}>
<Box> <Text size="md" mr={"sm"} fw={"bold"}>
<Text size="md" mr={"sm"} fw={"bold"}> Sh env/module:
Sh env/module: </Text>
</Text>
</Box>
<Box> <Box>
{findDataShowEnv() {findDataShowEnv()
? findDataShowEnv()?.map( ? findDataShowEnv()?.map(
@ -1153,7 +1160,7 @@ const ModalTerminal = ({
</Box> </Box>
</Box> </Box>
<Flex direction={"column"}> <Flex direction={"column"}>
<Flex> <Flex className={classes.specRow}>
<Text size="md" mr={"sm"} fw={"bold"}> <Text size="md" mr={"sm"} fw={"bold"}>
Memory: Memory:
</Text> </Text>
@ -1166,7 +1173,7 @@ const ModalTerminal = ({
: ""} : ""}
</Text> </Text>
</Flex> </Flex>
<Flex> <Flex className={classes.specRow}>
<Text size="md" mr={"sm"} fw={"bold"}> <Text size="md" mr={"sm"} fw={"bold"}>
Flash: Flash:
</Text> </Text>
@ -1249,11 +1256,7 @@ const ModalTerminal = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Box <Box>
component="fieldset"
w={280}
style={{ border: "none", padding: 0 }}
>
<SwitchConnectionStatus <SwitchConnectionStatus
line={line} line={line}
findSwitchPort={findSwitchPort} findSwitchPort={findSwitchPort}
@ -1317,56 +1320,87 @@ const ModalTerminal = ({
ms={10000} ms={10000}
style={{ marginTop: "8px" }} style={{ marginTop: "8px" }}
/> />
<fieldset> <Card
<legend> shadow="sm"
<Flex> p="sm"
<Text> radius="md"
List ports{" "} withBorder
h={"fit-content"}
mt={"4px"}
style={{ marginBottom: "14px" }}
>
<Flex justify={"space-between"} align={"center"} mb={"sm"}>
<Text fw={600} fz={"14px"}>
List ports{" "}
<Text component="span" c="var(--green-7)" fw={600}>
{isPhysicalTest {isPhysicalTest
? `(${line?.listPortsPhysical?.length || 0}/${ ? `(${line?.listPortsPhysical?.length || 0}/${
line?.ports?.length || 0 line?.ports?.length || 0
})` })`
: ""} : ""}
</Text> </Text>
</Flex> </Text>
</legend> {isPhysicalTest && (
<ScrollArea h={"45vh"} p={"4px"}> <Badge
size="sm"
color="blue"
leftSection={
<Box component="span" className="blink" />
}
>
Running
</Badge>
)}
</Flex>
<ScrollArea h={"42vh"} p={0} pb={"xs"}>
<SimpleGrid cols={5} spacing={"xs"}> <SimpleGrid cols={5} spacing={"xs"}>
{isPhysicalTest && line?.ports {isPhysicalTest && line?.ports
? line.ports.map((port, i) => ( ? line.ports.map((port, i) => (
<Box key={i}> <Box
key={i}
p={"8px 10px"}
style={{
border: "1px solid #e9ecef",
borderRadius: "9px",
background: line?.listPortsPhysical?.includes(
port,
)
? "#ebfbee"
: "#fff",
textAlign: "center",
}}
>
<Text <Text
fz={"15px"} fz={"12.5px"}
fw={600}
c={ c={
line?.listPortsPhysical?.includes(port) line?.listPortsPhysical?.includes(port)
? "#014a1a" ? "#2b8a3e"
: "#dedede" : "#ced4da"
} }
style={{ fontFamily: "monospace" }}
> >
{normalizePortName(port)} {normalizePortName(port)}
</Text> </Text>
{port?.includes("SFP") ? ( {port?.includes("SFP") ? (
<Text <Text
mt={-4} mt={2}
fz={"11px"} fz={"9px"}
key={i}
c={ c={
line?.listPortsPhysical?.includes(port) line?.listPortsPhysical?.includes(port)
? "#014a1a" ? "#2f9e44"
: "#dedede" : "#ced4da"
} }
> >
SFP SFP
</Text> </Text>
) : ( ) : null}
""
)}
</Box> </Box>
)) ))
: null} : null}
</SimpleGrid> </SimpleGrid>
</ScrollArea> </ScrollArea>
</fieldset> </Card>
<Flex justify={"space-between"}> <Flex justify={"space-between"}>
<Button <Button
fw={400} fw={400}