andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

layout improvements

Browse Source
This commit is contained in:
Proddy
2023-05-13 16:55:49 +02:00
parent 26f5c9debf
commit c224abfc61
1 changed files with 54 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
interface/src/project/DashboardDevices.tsx
View File

@@ -50,22 +50,8 @@ import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react'; import { useI18nContext } from 'i18n/i18n-react';
import { extractErrorMessage } from 'utils'; import { extractErrorMessage } from 'utils';
const useWindowSize = () => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
};
const DashboardDevices: FC = () => { const DashboardDevices: FC = () => {
useWindowSize(); const [size, setSize] = useState([0, 0]);
const { me } = useContext(AuthenticatedContext); const { me } = useContext(AuthenticatedContext);
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] }); const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] });
@@ -79,6 +65,15 @@ const DashboardDevices: FC = () => {
devices: [] devices: []
}); });
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
const leftOffset = () => { const leftOffset = () => {
const left = document.getElementById('devices-window')?.getBoundingClientRect().left; const left = document.getElementById('devices-window')?.getBoundingClientRect().left;
const right = document.getElementById('devices-window')?.getBoundingClientRect().right; const right = document.getElementById('devices-window')?.getBoundingClientRect().right;
@@ -103,7 +98,7 @@ const DashboardDevices: FC = () => {
} }
`, `,
Row: ` Row: `
background-color: #1e1e1e; background-color: #1E1E1E;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
.td { .td {
@@ -155,16 +150,22 @@ const DashboardDevices: FC = () => {
Table: ` Table: `
--data-table-library_grid-template-columns: minmax(0, 1fr) 150px 40px; --data-table-library_grid-template-columns: minmax(0, 1fr) 150px 40px;
height: auto; height: auto;
max-height: 93%; max-height: 100%;
overflow-y: scroll; overflow-y: scroll;
::-webkit-scrollbar { ::-webkit-scrollbar {
display:none; display:none;
} }
`, `,
BaseCell: ` BaseCell: `
&:nth-of-type(1) {
border-left: 1px solid #177ac9;
},
&:nth-of-type(2) { &:nth-of-type(2) {
text-align: right; text-align: right;
}, },
&:nth-of-type(3) {
border-right: 1px solid #177ac9;
}
`, `,
HeaderRow: ` HeaderRow: `
.th { .th {
@@ -485,46 +486,48 @@ const DashboardDevices: FC = () => {
sx={{ sx={{
backgroundColor: 'black', backgroundColor: 'black',
position: 'absolute', position: 'absolute',
right: 16,
bottom: 16,
top: 128,
left: () => leftOffset(), left: () => leftOffset(),
border: '1px solid #177ac9', right: 16,
bottom: 0,
top: 128,
maxHeight: () => size[1] - 210,
zIndex: 'modal' zIndex: 'modal'
}} }}
> >
<Grid container justifyContent="space-between"> <Box sx={{ border: '1px solid #177ac9' }}>
<Box color="warning.main" ml={1}> <Grid container justifyContent="space-between">
<Typography noWrap variant="h6"> <Box color="warning.main" ml={1}>
{coreData.devices[deviceIndex].n} <Typography noWrap variant="h6">
&nbsp;({shown_data.length}) {coreData.devices[deviceIndex].n}
</Typography> &nbsp;({shown_data.length})
</Box> </Typography>
<Grid item zeroMinWidth justifyContent="flex-end"> </Box>
<IconButton onClick={resetDeviceSelect}> <Grid item zeroMinWidth justifyContent="flex-end">
<CancelIcon color="info" sx={{ fontSize: 18, verticalAlign: 'middle' }} /> <IconButton onClick={resetDeviceSelect}>
<CancelIcon color="info" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
</Grid>
</Grid>
<Grid item xs>
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={handleDownloadCsv}>
<DownloadIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={() => setOnlyFav(!onlyFav)}>
{onlyFav ? (
<StarIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
) : (
<StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
)}
</IconButton>
<IconButton onClick={refreshData}>
<RefreshIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton> </IconButton>
</Grid> </Grid>
</Grid> </Box>
<Grid>
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={handleDownloadCsv}>
<DownloadIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={() => setOnlyFav(!onlyFav)}>
{onlyFav ? (
<StarIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
) : (
<StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
)}
</IconButton>
<IconButton onClick={refreshData}>
<RefreshIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
</Grid>
<Table <Table
data={{ nodes: shown_data }} data={{ nodes: shown_data }}