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

add button tooltip, also export json

Browse Source
This commit is contained in:
proddy
2024-06-24 21:49:06 +02:00
parent 03933edcae
commit 26eb2a3b29
1 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
interface/src/project/Devices.tsx
View File

@@ -36,7 +36,11 @@ import {
List, List,
ListItem, ListItem,
ListItemText, ListItemText,
Typography Tooltip,
type TooltipProps,
Typography,
styled,
tooltipClasses
} from '@mui/material'; } from '@mui/material';
import { useRowSelect } from '@table-library/react-table-library/select'; import { useRowSelect } from '@table-library/react-table-library/select';
@@ -234,6 +238,20 @@ const Devices: FC = () => {
} }
]); ]);
const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} arrow classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.arrow}`]: {
color: theme.palette.success.main
},
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.success.main,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 10
}
}));
const getSortIcon = (state: State, sortKey: unknown) => { const getSortIcon = (state: State, sortKey: unknown) => {
if (state.sortKey === sortKey && state.reverse) { if (state.sortKey === sortKey && state.reverse) {
return <KeyboardArrowDownOutlinedIcon />; return <KeyboardArrowDownOutlinedIcon />;
@@ -399,13 +417,22 @@ const Devices: FC = () => {
'\r\n' '\r\n'
); );
const csvFile = new Blob([csvData], { type: 'text/csv;charset:utf-8' }); const downloadBlob = (blob: Blob) => {
const downloadLink = document.createElement('a'); const downloadLink = document.createElement('a');
downloadLink.download = filename; downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(csvFile); downloadLink.href = window.URL.createObjectURL(blob);
document.body.appendChild(downloadLink); document.body.appendChild(downloadLink);
downloadLink.click(); downloadLink.click();
document.body.removeChild(downloadLink); document.body.removeChild(downloadLink);
};
downloadBlob(
new Blob([JSON.stringify(deviceData, null, 2)], {
type: 'text;charset:utf-8'
})
);
downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
}; };
useEffect(() => { useEffect(() => {
@@ -608,11 +635,11 @@ const Devices: FC = () => {
backgroundColor: 'black', backgroundColor: 'black',
position: 'absolute', position: 'absolute',
left: () => leftOffset(), left: () => leftOffset(),
right: 16, right: 0,
bottom: 0, bottom: 0,
top: 128, top: 64,
zIndex: 'modal', zIndex: 'modal',
maxHeight: () => size[1] - 189, maxHeight: () => size[1] - 126,
border: '1px solid #177ac9' border: '1px solid #177ac9'
}} }}
> >
@@ -631,53 +658,65 @@ const Devices: FC = () => {
coreData.devices[deviceIndex].e + coreData.devices[deviceIndex].e +
' ' + ' ' +
LL.ENTITIES(shown_data.length)} LL.ENTITIES(shown_data.length)}
<IconButton onClick={() => setShowDeviceInfo(true)}> <ButtonTooltip title="Info">
<InfoOutlinedIcon <IconButton onClick={() => setShowDeviceInfo(true)}>
color="primary" <InfoOutlinedIcon
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
{me.admin && (
<IconButton onClick={customize}>
<FormatListNumberedIcon
color="primary" color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }} sx={{ fontSize: 18, verticalAlign: 'middle' }}
/> />
</IconButton> </IconButton>
</ButtonTooltip>
{me.admin && (
<ButtonTooltip title={LL.CUSTOMIZATIONS()}>
<IconButton onClick={customize}>
<FormatListNumberedIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</ButtonTooltip>
)} )}
<IconButton onClick={handleDownloadCsv}> <ButtonTooltip title={LL.EXPORT()}>
<DownloadIcon <IconButton onClick={handleDownloadCsv}>
color="primary" <DownloadIcon
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
<IconButton onClick={() => setOnlyFav(!onlyFav)}>
{onlyFav ? (
<StarIcon
color="primary" color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }} sx={{ fontSize: 18, verticalAlign: 'middle' }}
/> />
) : ( </IconButton>
<StarBorderOutlinedIcon </ButtonTooltip>
<ButtonTooltip title="Favorites">
<IconButton onClick={() => setOnlyFav(!onlyFav)}>
{onlyFav ? (
<StarIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
) : (
<StarBorderOutlinedIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
)}
</IconButton>
</ButtonTooltip>
<ButtonTooltip title={LL.REFRESH()}>
<IconButton onClick={refreshData}>
<RefreshIcon
color="primary" color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }} sx={{ fontSize: 18, verticalAlign: 'middle' }}
/> />
)} </IconButton>
</IconButton> </ButtonTooltip>
<IconButton onClick={refreshData}>
<RefreshIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</Typography> </Typography>
<Grid item zeroMinWidth justifyContent="flex-end"> <Grid item zeroMinWidth justifyContent="flex-end">
<IconButton onClick={resetDeviceSelect}> <ButtonTooltip title={LL.CANCEL()}>
<HighlightOffIcon <IconButton onClick={resetDeviceSelect}>
color="primary" <HighlightOffIcon
sx={{ fontSize: 18, verticalAlign: 'middle' }} color="primary"
/> sx={{ fontSize: 18, verticalAlign: 'middle' }}
</IconButton> />
</IconButton>
</ButtonTooltip>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>