Chỉnh nội dung trong bottom width
This commit is contained in:
Truong Vo
parent
a44161c583
commit
bd2d8d498e
|
|
@ -7,7 +7,6 @@ import {
|
|||
Group,
|
||||
Loader,
|
||||
Radio,
|
||||
ScrollArea,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconRepeat } from "@tabler/icons-react";
|
||||
|
|
@ -15,6 +14,7 @@ import { useEffect, useState } from "react";
|
|||
import classes from "../Component.module.css";
|
||||
import type { APCProps, SwitchPortsProps, TStation } from "../../untils/types";
|
||||
import type { Socket } from "socket.io-client";
|
||||
import { legend } from "motion/react-client";
|
||||
|
||||
interface DrawerProps {
|
||||
stationAPI: TStation;
|
||||
|
|
@ -893,6 +893,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
console.log("listPorts::", listPorts);
|
||||
return loading ? (
|
||||
<Box
|
||||
style={{
|
||||
|
|
@ -1168,20 +1169,29 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
<Grid.Col span={12} pt={"4px"}>
|
||||
{listPorts?.length > 0 && (
|
||||
<Box>
|
||||
<Grid>
|
||||
<Flex gap={"8px"} wrap={"wrap"}>
|
||||
{listPorts?.map((group, key) => {
|
||||
const isMini = group?.length > 0 && group?.length < 4;
|
||||
const isLarge = group?.length > 20;
|
||||
// console.log("isLarge::", isLarge);
|
||||
// console.log("group::", group);
|
||||
// console.log("checkFilterPort::", sortedPorts(group)
|
||||
// .filter((el) =>
|
||||
// checkFilterPort(el.status, el.name)
|
||||
// ));
|
||||
return (
|
||||
<Grid.Col
|
||||
pt={0}
|
||||
<Box
|
||||
key={key}
|
||||
span={isLarge ? 11 : isMini ? 1 : 12}
|
||||
style={{
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
>
|
||||
{isLarge ? (
|
||||
<fieldset
|
||||
style={{
|
||||
padding: "0px 4px",
|
||||
padding: "0px 8px 8px 4px",
|
||||
display: "inline-block",
|
||||
width: "fit-content",
|
||||
minWidth: "fit-content",
|
||||
}}
|
||||
>
|
||||
<legend>
|
||||
|
|
@ -1189,10 +1199,16 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
{group[0]?.name.substring(0, 2) || ""}
|
||||
</Text>
|
||||
</legend>
|
||||
<ScrollArea h={"11vh"} w={"67vw"}>
|
||||
<Box
|
||||
style={{
|
||||
width: "fit-content",
|
||||
minWidth: "50px",
|
||||
minHeight: "88px",
|
||||
}}
|
||||
>
|
||||
<Flex gap={"8px"} wrap={"nowrap"}>
|
||||
{sortedPorts(group)
|
||||
.slice(0, sortedPorts(group).length / 2)
|
||||
.slice(0, Math.ceil(sortedPorts(group).length / 2))
|
||||
.filter((el) =>
|
||||
checkFilterPort(el.status, el.name)
|
||||
)
|
||||
|
|
@ -1261,7 +1277,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
<Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
|
||||
{sortedPorts(group)
|
||||
.slice(
|
||||
sortedPorts(group).length / 2,
|
||||
Math.ceil(sortedPorts(group).length / 2),
|
||||
sortedPorts(group).length
|
||||
)
|
||||
.filter((el) =>
|
||||
|
|
@ -1329,12 +1345,15 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
</Card>
|
||||
))}
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</fieldset>
|
||||
) : (
|
||||
<fieldset
|
||||
style={{
|
||||
padding: "0px 4px",
|
||||
padding: "0px 8px 8px 4px",
|
||||
display: "inline-block",
|
||||
width: "fit-content",
|
||||
minWidth: "fit-content",
|
||||
}}
|
||||
>
|
||||
<legend>
|
||||
|
|
@ -1344,98 +1363,157 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
|
|||
</legend>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
// flexWrap: "wrap",
|
||||
// justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
overflow: "auto",
|
||||
height: "11vh",
|
||||
maxWidth: "70vw",
|
||||
width: "fit-content",
|
||||
minWidth: "50px",
|
||||
minHeight: "88px",
|
||||
}}
|
||||
>
|
||||
{sortedPorts(group)
|
||||
?.filter((el) =>
|
||||
checkFilterPort(el.status, el.name)
|
||||
)
|
||||
?.map((port, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="xs"
|
||||
radius="md"
|
||||
withBorder
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "50px",
|
||||
height: "40px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
: port.status === "ON"
|
||||
? "#d4f1d3"
|
||||
: "#f5f5f5",
|
||||
cursor: "pointer",
|
||||
border: listPortsSelected.find(
|
||||
(el) => el.name === port.name
|
||||
)?.name
|
||||
? "1px solid #0018ff"
|
||||
: "",
|
||||
}}
|
||||
className={`${
|
||||
isSubmit ? classes.isDisabled : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
toggleSelect(port);
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
<Flex gap={"8px"} wrap={"nowrap"}>
|
||||
{sortedPorts(group)
|
||||
.slice(0, Math.ceil(sortedPorts(group).length / 2))
|
||||
.filter((el) =>
|
||||
checkFilterPort(el.status, el.name)
|
||||
)
|
||||
?.map((port, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="xs"
|
||||
radius="md"
|
||||
withBorder
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2px",
|
||||
flexDirection: "column",
|
||||
flexWrap: "wrap",
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
width: "50px",
|
||||
height: "40px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
: port.status === "ON"
|
||||
? "#d4f1d3"
|
||||
: "#f5f5f5",
|
||||
cursor: "pointer",
|
||||
border: listPortsSelected.find(
|
||||
(el) => el.name === port.name
|
||||
)?.name
|
||||
? "1px solid #0018ff"
|
||||
: "",
|
||||
}}
|
||||
className={`${
|
||||
isSubmit ? classes.isDisabled : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
toggleSelect(port);
|
||||
}}
|
||||
>
|
||||
{/* <IconSection
|
||||
size={"12px"}
|
||||
color={
|
||||
port.poe === "ON"
|
||||
? "#b722d4"
|
||||
: port.status === "ON"
|
||||
? "#40c057"
|
||||
: "#b8b8b8"
|
||||
}
|
||||
/> */}
|
||||
<Text fw={500} fz={"11px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2px",
|
||||
flexDirection: "column",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"11px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display:
|
||||
port.poe === "ON" ? "block" : "none",
|
||||
position: "absolute",
|
||||
bottom: "2px",
|
||||
right: "2px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Text size="10px" fs={"italic"}>
|
||||
poe
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex gap={"8px"} wrap={"nowrap"} mt={"8px"}>
|
||||
{sortedPorts(group)
|
||||
.slice(
|
||||
Math.ceil(sortedPorts(group).length / 2),
|
||||
sortedPorts(group).length
|
||||
)
|
||||
.filter((el) =>
|
||||
checkFilterPort(el.status, el.name)
|
||||
)
|
||||
?.map((port, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="xs"
|
||||
radius="md"
|
||||
withBorder
|
||||
style={{
|
||||
display:
|
||||
port.poe === "ON" ? "block" : "none",
|
||||
position: "absolute",
|
||||
bottom: "2px",
|
||||
right: "2px",
|
||||
zIndex: 10,
|
||||
flex: "0 0 auto",
|
||||
position: "relative",
|
||||
width: "50px",
|
||||
height: "40px",
|
||||
backgroundColor:
|
||||
port.poe === "ON"
|
||||
? "#f2dcf8"
|
||||
: port.status === "ON"
|
||||
? "#d4f1d3"
|
||||
: "#f5f5f5",
|
||||
cursor: "pointer",
|
||||
border: listPortsSelected.find(
|
||||
(el) => el.name === port.name
|
||||
)?.name
|
||||
? "1px solid #0018ff"
|
||||
: "",
|
||||
}}
|
||||
className={`${
|
||||
isSubmit ? classes.isDisabled : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
toggleSelect(port);
|
||||
}}
|
||||
>
|
||||
<Text size="10px" fs={"italic"}>
|
||||
poe
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2px",
|
||||
flexDirection: "column",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Text fw={500} fz={"11px"}>
|
||||
{normalizePortName(port.name)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display:
|
||||
port.poe === "ON" ? "block" : "none",
|
||||
position: "absolute",
|
||||
bottom: "2px",
|
||||
right: "2px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Text size="10px" fs={"italic"}>
|
||||
poe
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
</fieldset>
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
</Grid.Col>
|
||||
|
|
|
|||
Loading…
Reference in New Issue