andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49: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,
ListItem,
ListItemText,
Typography
Tooltip,
type TooltipProps,
Typography,
styled,
tooltipClasses
} from '@mui/material';
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) => {
if (state.sortKey === sortKey && state.reverse) {
return <KeyboardArrowDownOutlinedIcon />;
@@ -399,13 +417,22 @@ const Devices: FC = () => {
'\r\n'
);
const csvFile = new Blob([csvData], { type: 'text/csv;charset:utf-8' });
const downloadLink = document.createElement('a');
downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(csvFile);
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
const downloadBlob = (blob: Blob) => {
const downloadLink = document.createElement('a');
downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(blob);
document.body.appendChild(downloadLink);
downloadLink.click();
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(() => {
@@ -608,11 +635,11 @@ const Devices: FC = () => {
backgroundColor: 'black',
position: 'absolute',
left: () => leftOffset(),
right: 16,
right: 0,
bottom: 0,
top: 128,
top: 64,
zIndex: 'modal',
maxHeight: () => size[1] - 189,
maxHeight: () => size[1] - 126,
border: '1px solid #177ac9'
}}
>
@@ -631,53 +658,65 @@ const Devices: FC = () => {
coreData.devices[deviceIndex].e +
' ' +
LL.ENTITIES(shown_data.length)}
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
{me.admin && (
<IconButton onClick={customize}>
<FormatListNumberedIcon
<ButtonTooltip title="Info">
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</ButtonTooltip>
{me.admin && (
<ButtonTooltip title={LL.CUSTOMIZATIONS()}>
<IconButton onClick={customize}>
<FormatListNumberedIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</ButtonTooltip>
)}
<IconButton onClick={handleDownloadCsv}>
<DownloadIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
<IconButton onClick={() => setOnlyFav(!onlyFav)}>
{onlyFav ? (
<StarIcon
<ButtonTooltip title={LL.EXPORT()}>
<IconButton onClick={handleDownloadCsv}>
<DownloadIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
) : (
<StarBorderOutlinedIcon
</IconButton>
</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"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
)}
</IconButton>
<IconButton onClick={refreshData}>
<RefreshIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</IconButton>
</ButtonTooltip>
</Typography>
<Grid item zeroMinWidth justifyContent="flex-end">
<IconButton onClick={resetDeviceSelect}>
<HighlightOffIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
<ButtonTooltip title={LL.CANCEL()}>
<IconButton onClick={resetDeviceSelect}>
<HighlightOffIcon
color="primary"
sx={{ fontSize: 18, verticalAlign: 'middle' }}
/>
</IconButton>
</ButtonTooltip>
</Grid>
</Grid>
</Box>