Fix giao diện tollbar
This commit is contained in:
Truong Vo
parent
a37e647674
commit
ae09fe1917
|
|
@ -458,7 +458,8 @@ function App() {
|
|||
borderRadius: 8,
|
||||
}}>
|
||||
<ScrollArea
|
||||
h={expandedBottomBar ? "80vh" : "85vh"}
|
||||
// h={expandedBottomBar ? "80vh" : "85vh"}
|
||||
h={expandedBottomBar ? "73vh" : "83vh"}
|
||||
type="scroll"
|
||||
scrollbars="y"
|
||||
style={{ overflowX: "hidden" }}
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ const BottomToolBar = ({
|
|||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
height: isExpand ? "150px" : 0,
|
||||
height: isExpand ? "150px" : "60px",
|
||||
y: 0,
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 180, damping: 20 }}
|
||||
|
|
@ -362,34 +362,36 @@ const BottomToolBar = ({
|
|||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1,
|
||||
overflow: "hidden",
|
||||
overflow: "visible",
|
||||
}}
|
||||
>
|
||||
<Box style={{ position: "relative", height: isExpand ? "150px" : "0px" }}>
|
||||
<ActionIcon
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: isExpand ? -4 : -24,
|
||||
left: "50%",
|
||||
translate: "-19px 0",
|
||||
backgroundColor: "#e3e0e0",
|
||||
width: "55px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{isExpand ? (
|
||||
<IconCaretDown color="green" />
|
||||
) : (
|
||||
<IconCaretUp color="green" />
|
||||
)}
|
||||
</ActionIcon>
|
||||
{/* ActionIcon đặt bên ngoài Box để không bị overflow: hidden cắt */}
|
||||
<ActionIcon
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: isExpand ? "-4px" : "-30px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
backgroundColor: "#e3e0e0",
|
||||
width: "55px",
|
||||
height: "30px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{isExpand ? (
|
||||
<IconCaretDown color="green" size={20} />
|
||||
) : (
|
||||
<IconCaretUp color="green" size={20} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
<Box style={{ position: "relative", height: isExpand ? "150px" : "60px", overflow: "hidden" }}>
|
||||
<Grid style={{ height: "100%" }}>
|
||||
<Grid.Col span={isExpand ? 1 : 3.5}></Grid.Col>
|
||||
<Grid.Col span={isExpand ? 10 : 5}>
|
||||
<Grid.Col span={isExpand ? 1 : 2}></Grid.Col>
|
||||
<Grid.Col span={isExpand ? 10 : 8 }>
|
||||
{isExpand ? (
|
||||
<Tabs
|
||||
defaultValue="command"
|
||||
|
|
@ -399,7 +401,7 @@ const BottomToolBar = ({
|
|||
setActiveTabBottom(val || "command");
|
||||
}}
|
||||
className={classes.containerBottom}
|
||||
style={{ height: "100%" }}
|
||||
style={{ height: "100%",backgroundColor: "white", }}
|
||||
>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab
|
||||
|
|
@ -443,11 +445,11 @@ const BottomToolBar = ({
|
|||
<Tabs.Panel
|
||||
value="command"
|
||||
p={4}
|
||||
style={{ height: "100%", overflow: "auto" }}
|
||||
style={{ height: "200px", overflow: "auto" }}
|
||||
>
|
||||
<Flex justify={"space-between"} align="flex-start">
|
||||
<Box>
|
||||
<ScrollArea h={"8vh"}>
|
||||
<ScrollArea h={"11vh"}>
|
||||
<Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
|
||||
{selectedLines.map((el) => (
|
||||
<Box
|
||||
|
|
@ -691,10 +693,18 @@ const BottomToolBar = ({
|
|||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
) : (
|
||||
<Box p={3}>
|
||||
<Flex direction="column" gap="xs">
|
||||
<Flex justify={"space-between"} align={"center"} wrap="wrap" gap="xs">
|
||||
<Flex wrap={"wrap"} gap={"6px"} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Box p={3} >
|
||||
<Flex direction="row" align="center" gap="xs" wrap="nowrap" style={{ height: "100%" }}>
|
||||
{/* Danh sách Line - chiếm 1 phần, cố định width và height, hiển thị 2 hàng */}
|
||||
<Box
|
||||
style={{
|
||||
flex: "1 1 0",
|
||||
width: "100%",
|
||||
height: "50px",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<Flex wrap={"wrap"} gap={"6px"} style={{ height: "100%" }}>
|
||||
{selectedLines.map((el) => (
|
||||
<Box
|
||||
key={el.id}
|
||||
|
|
@ -705,6 +715,7 @@ const BottomToolBar = ({
|
|||
width: "55px",
|
||||
backgroundColor: "#d4e3ff",
|
||||
borderRadius: "6px",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<CloseButton
|
||||
|
|
@ -749,6 +760,7 @@ const BottomToolBar = ({
|
|||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onClick={() => {
|
||||
selectedLines.forEach((line) => {
|
||||
|
|
@ -767,11 +779,39 @@ const BottomToolBar = ({
|
|||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex align={"center"} gap="xs">
|
||||
<Text fz={"10px"} c="dark" fw={600}>
|
||||
Selected: {selectedLines.length} /{" "}
|
||||
{station.lines.length}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Selected count - ở giữa */}
|
||||
<Flex align={"center"} style={{ flex: "0 0 auto", flexShrink: 0 }}>
|
||||
<Text fz={"10px"} c="dark" fw={600}>
|
||||
Selected: {selectedLines.length} /{" "}
|
||||
{station.lines.length}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{/* Input + Select All - chiếm 1 phần */}
|
||||
<Flex
|
||||
direction="row"
|
||||
align="center"
|
||||
gap="xs"
|
||||
style={{
|
||||
flex: "1 1 0",
|
||||
minWidth: "200px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Input */}
|
||||
<Box style={{ flexGrow: 1.5, flexShrink: 1, flexBasis: "auto", maxWidth: "100%", overflow: "hidden" }}>
|
||||
<InputHistory
|
||||
selectedLines={selectedLines}
|
||||
socket={socket}
|
||||
station={station}
|
||||
inputStyle={{ width: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Select All */}
|
||||
<Flex align={"center"} style={{ flex: "0 0 auto", flexShrink: 0 }}>
|
||||
<ButtonSelect
|
||||
selectedLines={selectedLines}
|
||||
setSelectedLines={setSelectedLines}
|
||||
|
|
@ -806,13 +846,6 @@ const BottomToolBar = ({
|
|||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box style={{ width: "100%" }}>
|
||||
<InputHistory
|
||||
selectedLines={selectedLines}
|
||||
socket={socket}
|
||||
station={station}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
|
|
@ -822,6 +855,129 @@ const BottomToolBar = ({
|
|||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{openScenarioModal && (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
zIndex: 99998,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backdropFilter: "blur(3px)",
|
||||
}}
|
||||
onClick={() => setOpenScenarioModal(false)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "white",
|
||||
borderRadius: "12px",
|
||||
maxWidth: "90vw",
|
||||
width: "90%",
|
||||
height: "85vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
|
||||
overflowY: "auto",
|
||||
overflowX: "visible",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p="lg"
|
||||
style={{
|
||||
borderBottom: "1px solid #e9ecef",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Text fw={700} size="xl">
|
||||
🎯 Select Scenario to Run
|
||||
</Text>
|
||||
<Flex gap="md" align="center">
|
||||
<Button
|
||||
leftSection={<IconPlus size={16} />}
|
||||
variant="light"
|
||||
color="green"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenDrawerScenario(true);
|
||||
}}
|
||||
>
|
||||
Add/Edit Scenario
|
||||
</Button>
|
||||
<CloseButton
|
||||
size="lg"
|
||||
onClick={() => setOpenScenarioModal(false)}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
style={{
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
overflowX: "visible",
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
}}
|
||||
className={classes.hideScrollBar}
|
||||
>
|
||||
{scenarios.length > 0 ? (
|
||||
<Grid
|
||||
gutter="md"
|
||||
style={{
|
||||
margin: 0,
|
||||
overflow: "visible",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{scenarios.map((scenario, index) => (
|
||||
<ScenarioCard
|
||||
key={scenario.id}
|
||||
scenario={scenario}
|
||||
index={index}
|
||||
isDisable={isDisable}
|
||||
selectedLines={selectedLines}
|
||||
user={user}
|
||||
socket={socket}
|
||||
setOpenScenarioModal={setOpenScenarioModal}
|
||||
setIsDisable={setIsDisable}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
) : (
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{ minHeight: "300px" }}
|
||||
gap="md"
|
||||
>
|
||||
<Text size="xl" c="dimmed">
|
||||
📋
|
||||
</Text>
|
||||
<Text ta="center" c="dimmed" size="lg">
|
||||
No scenarios available
|
||||
</Text>
|
||||
<Text ta="center" c="dimmed" size="sm">
|
||||
Please create a new scenario to get started
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Drawer Scenario để Add/Edit */}
|
||||
<DrawerScenario
|
||||
scenarios={scenarios}
|
||||
|
|
|
|||
|
|
@ -1164,7 +1164,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Grid.Col span={12} pt={"4px"}>
|
||||
<Grid.Col span={12} pt={"0px"}>
|
||||
{listPorts?.length > 0 && (
|
||||
<Box>
|
||||
<Flex gap={"8px"} wrap={"wrap"}>
|
||||
|
|
@ -1217,6 +1217,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
style={{
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
justifyContent: "center",
|
||||
width: "34px",
|
||||
height: "28px",
|
||||
backgroundColor:
|
||||
|
|
@ -1248,7 +1249,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"9px"}>
|
||||
<Text fw={600} fz={"10px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
|
@ -1288,8 +1289,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
style={{
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
width: "40px",
|
||||
height: "32px",
|
||||
justifyContent: "center",
|
||||
width: "34px",
|
||||
height: "28px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
|
|
@ -1319,7 +1321,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"11px"}>
|
||||
<Text fw={600} fz={"10px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
|
@ -1359,11 +1361,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
<Box
|
||||
style={{
|
||||
width: "fit-content",
|
||||
minWidth: "40px",
|
||||
minWidth: "32px",
|
||||
minHeight: "56px",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"6px"} wrap={"nowrap"}>
|
||||
<Flex gap={"4px"} wrap={"nowrap"}>
|
||||
{sortedPorts(group)
|
||||
.slice(
|
||||
0,
|
||||
|
|
@ -1382,8 +1384,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
style={{
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
width: "40px",
|
||||
height: "32px",
|
||||
justifyContent: "center",
|
||||
width: "34px",
|
||||
height: "28px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
|
|
@ -1413,7 +1416,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"10px"}>
|
||||
<Text fw={600} fz={"10px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
|
@ -1434,7 +1437,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
</Card>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex gap={"6px"} wrap={"nowrap"} mt={"6px"}>
|
||||
<Flex gap={"4px"} wrap={"nowrap"} mt={"4px"}>
|
||||
{sortedPorts(group)
|
||||
.slice(
|
||||
Math.ceil(sortedPorts(group).length / 2),
|
||||
|
|
@ -1453,8 +1456,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
style={{
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
width: "50px",
|
||||
height: "40px",
|
||||
justifyContent: "center",
|
||||
width: "34px",
|
||||
height: "28px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
|
|
@ -1484,7 +1488,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"11px"}>
|
||||
<Text fw={600} fz={"10px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ export default function InputHistory({
|
|||
selectedLines,
|
||||
socket,
|
||||
station,
|
||||
inputStyle,
|
||||
}: {
|
||||
selectedLines: TLine[];
|
||||
socket: Socket | null;
|
||||
station: TStation;
|
||||
inputStyle?: React.CSSProperties;
|
||||
}) {
|
||||
const [value, setValue] = useState("");
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
|
|
@ -115,6 +117,7 @@ export default function InputHistory({
|
|||
style={{
|
||||
width: "30vw",
|
||||
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
|
||||
...inputStyle,
|
||||
}}
|
||||
placeholder={"Send command to port(s)"}
|
||||
value={value}
|
||||
|
|
|
|||
Loading…
Reference in New Issue