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

replace MUI Slider, saves 5KB

Browse Source
This commit is contained in:
Proddy
2023-04-23 11:02:10 +02:00
parent 300fe721a1
commit 71e7887da3
1 changed files with 34 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
interface/src/framework/system/SystemLog.tsx
View File

@@ -1,5 +1,6 @@
import DownloadIcon from '@mui/icons-material/GetApp'; import DownloadIcon from '@mui/icons-material/GetApp';
import { Box, styled, Button, Checkbox, MenuItem, Grid, Slider, FormLabel } from '@mui/material'; import WarningIcon from '@mui/icons-material/Warning';
import { Box, styled, Button, Checkbox, MenuItem, Grid } from '@mui/material';
import { useState, useEffect, useCallback, useLayoutEffect } from 'react'; import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import type { FC } from 'react'; import type { FC } from 'react';
@@ -9,7 +10,7 @@ import { addAccessTokenParameter } from 'api/authentication';
import { EVENT_SOURCE_ROOT } from 'api/endpoints'; import { EVENT_SOURCE_ROOT } from 'api/endpoints';
import * as SystemApi from 'api/system'; import * as SystemApi from 'api/system';
import { SectionContent, FormLoader, BlockFormControlLabel, ValidatedTextField } from 'components'; import { SectionContent, FormLoader, BlockFormControlLabel, ValidatedTextField, ButtonRow } from 'components';
import { useI18nContext } from 'i18n/i18n-react'; import { useI18nContext } from 'i18n/i18n-react';
import { LogLevel } from 'types'; import { LogLevel } from 'types';
@@ -90,16 +91,12 @@ const SystemLog: FC = () => {
const updateFormValue = updateValue(setData); const updateFormValue = updateValue(setData);
const reloadPage = () => { const sendSettings = async () => {
window.location.reload();
};
const sendSettings = async (new_max_messages: number, new_level: number) => {
if (data) { if (data) {
try { try {
const response = await SystemApi.updateLogSettings({ const response = await SystemApi.updateLogSettings({
level: new_level, level: data.level,
max_messages: new_max_messages, max_messages: data.max_messages,
compact: data.compact compact: data.compact
}); });
if (response.status !== 200) { if (response.status !== 200) {
@@ -111,25 +108,6 @@ const SystemLog: FC = () => {
} }
}; };
const changeLevel = (event: React.ChangeEvent<HTMLInputElement>) => {
if (data) {
setData({
...data,
level: parseInt(event.target.value)
});
void sendSettings(data.max_messages, parseInt(event.target.value));
}
};
const changeMaxMessages = (event: Event, value: number | number[]) => {
if (data) {
setData({
...data,
max_messages: value as number
});
}
};
const onDownload = () => { const onDownload = () => {
let result = ''; let result = '';
for (const i of logEntries.events) { for (const i of logEntries.events) {
@@ -171,7 +149,7 @@ const SystemLog: FC = () => {
es.onmessage = onMessage; es.onmessage = onMessage;
es.onerror = () => { es.onerror = () => {
es.close(); es.close();
reloadPage(); window.location.reload();
}; };
return () => { return () => {
@@ -188,14 +166,14 @@ const SystemLog: FC = () => {
return ( return (
<> <>
<Grid container spacing={3} direction="row" justifyContent="flex-start" alignItems="center"> <Grid container spacing={3} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item xs={4}> <Grid item xs={2}>
<ValidatedTextField <ValidatedTextField
name="level" name="level"
label={LL.LOG_LEVEL()} label={LL.LOG_LEVEL()}
value={data.level} value={data.level}
fullWidth fullWidth
variant="outlined" variant="outlined"
onChange={changeLevel} onChange={updateFormValue}
margin="normal" margin="normal"
select select
> >
@@ -208,24 +186,22 @@ const SystemLog: FC = () => {
<MenuItem value={9}>ALL</MenuItem> <MenuItem value={9}>ALL</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={2}>
<FormLabel>{LL.BUFFER_SIZE()}</FormLabel> <ValidatedTextField
<Slider
value={data.max_messages}
valueLabelDisplay="auto"
name="max_messages" name="max_messages"
marks={[ label={LL.BUFFER_SIZE()}
{ value: 25, label: '25' }, value={data.max_messages}
{ value: 50, label: '50' }, fullWidth
{ value: 75, label: '75' }, variant="outlined"
{ value: 100, label: '100' } onChange={updateFormValue}
]} margin="normal"
step={25} select
min={25} >
max={100} <MenuItem value={25}>25</MenuItem>
onChange={changeMaxMessages} <MenuItem value={50}>50</MenuItem>
onChangeCommitted={() => sendSettings(data.max_messages, data.level)} <MenuItem value={75}>75</MenuItem>
/> <MenuItem value={100}>100</MenuItem>
</ValidatedTextField>
</Grid> </Grid>
<Grid item> <Grid item>
<BlockFormControlLabel <BlockFormControlLabel
@@ -233,11 +209,19 @@ const SystemLog: FC = () => {
label={LL.COMPACT()} label={LL.COMPACT()}
/> />
</Grid> </Grid>
<Grid item> <ButtonRow>
<Button startIcon={<DownloadIcon />} variant="outlined" color="secondary" onClick={onDownload}> <Button startIcon={<DownloadIcon />} variant="outlined" color="secondary" onClick={onDownload}>
{LL.EXPORT()} {LL.EXPORT()}
</Button> </Button>
</Grid> <Button
startIcon={<WarningIcon color="warning" />}
variant="contained"
color="info"
onClick={() => sendSettings()}
>
{LL.UPDATE()}
</Button>
</ButtonRow>
</Grid> </Grid>
<Box <Box
sx={{ sx={{