mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-06 15:59:52 +03:00
refactor web file structure and seperate settings from status
This commit is contained in:
proddy
394
interface/src/app/main/SchedulerDialog.tsx
Normal file
394
interface/src/app/main/SchedulerDialog.tsx
Normal file
@@ -0,0 +1,394 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import DoneIcon from '@mui/icons-material/Done';
|
||||
import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Grid,
|
||||
TextField,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
|
||||
import { dialogStyle } from 'CustomTheme';
|
||||
import type Schema from 'async-validator';
|
||||
import type { ValidateFieldsError } from 'async-validator';
|
||||
import { BlockFormControlLabel, ValidatedTextField } from 'components';
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
import { updateValue } from 'utils';
|
||||
import { validate } from 'validators';
|
||||
|
||||
import { ScheduleFlag } from './types';
|
||||
import type { ScheduleItem } from './types';
|
||||
|
||||
interface SchedulerDialogProps {
|
||||
open: boolean;
|
||||
creating: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (ei: ScheduleItem) => void;
|
||||
selectedItem: ScheduleItem;
|
||||
validator: Schema;
|
||||
dow: string[];
|
||||
}
|
||||
|
||||
const SchedulerDialog = ({
|
||||
open,
|
||||
creating,
|
||||
onClose,
|
||||
onSave,
|
||||
selectedItem,
|
||||
validator,
|
||||
dow
|
||||
}: SchedulerDialogProps) => {
|
||||
const { LL } = useI18nContext();
|
||||
const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
|
||||
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
|
||||
|
||||
const updateFormValue = updateValue(setEditItem);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFieldErrors(undefined);
|
||||
setEditItem(selectedItem);
|
||||
}
|
||||
}, [open, selectedItem]);
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
setFieldErrors(undefined);
|
||||
await validate(validator, editItem);
|
||||
onSave(editItem);
|
||||
} catch (error) {
|
||||
setFieldErrors(error as ValidateFieldsError);
|
||||
}
|
||||
};
|
||||
|
||||
const remove = () => {
|
||||
editItem.deleted = true;
|
||||
onSave(editItem);
|
||||
};
|
||||
|
||||
const getFlagNumber = (newFlag: string[]) => {
|
||||
let new_flag = 0;
|
||||
for (const entry of newFlag) {
|
||||
new_flag |= Number(entry);
|
||||
}
|
||||
return new_flag;
|
||||
};
|
||||
|
||||
const getFlagString = (f: number) => {
|
||||
const new_flags: string[] = [];
|
||||
if ((f & 129) === 1) {
|
||||
new_flags.push('1');
|
||||
}
|
||||
if ((f & 130) === 2) {
|
||||
new_flags.push('2');
|
||||
}
|
||||
if ((f & 4) === 4) {
|
||||
new_flags.push('4');
|
||||
}
|
||||
if ((f & 8) === 8) {
|
||||
new_flags.push('8');
|
||||
}
|
||||
if ((f & 16) === 16) {
|
||||
new_flags.push('16');
|
||||
}
|
||||
if ((f & 32) === 32) {
|
||||
new_flags.push('32');
|
||||
}
|
||||
if ((f & 64) === 64) {
|
||||
new_flags.push('64');
|
||||
}
|
||||
if ((f & 131) === 128) {
|
||||
new_flags.push('128');
|
||||
}
|
||||
if ((f & 131) === 129) {
|
||||
new_flags.push('129');
|
||||
}
|
||||
if ((f & 131) === 130) {
|
||||
new_flags.push('130');
|
||||
}
|
||||
return new_flags;
|
||||
};
|
||||
|
||||
const isTimer = editItem.flags === ScheduleFlag.SCHEDULE_TIMER;
|
||||
const isCondition = editItem.flags === ScheduleFlag.SCHEDULE_CONDITION;
|
||||
const isOnChange = editItem.flags === ScheduleFlag.SCHEDULE_ONCHANGE;
|
||||
|
||||
const showFlag = (si: ScheduleItem, flag: number) => (
|
||||
<Typography
|
||||
variant="button"
|
||||
sx={{ fontSize: 10 }}
|
||||
color={
|
||||
(isOnChange && flag !== ScheduleFlag.SCHEDULE_ONCHANGE) ||
|
||||
(isCondition && flag !== ScheduleFlag.SCHEDULE_CONDITION)
|
||||
? 'grey'
|
||||
: (si.flags & flag) === flag
|
||||
? 'primary'
|
||||
: 'grey'
|
||||
}
|
||||
>
|
||||
{flag === ScheduleFlag.SCHEDULE_TIMER
|
||||
? LL.TIMER(0)
|
||||
: flag === ScheduleFlag.SCHEDULE_ONCHANGE
|
||||
? 'On Change'
|
||||
: flag === ScheduleFlag.SCHEDULE_CONDITION
|
||||
? 'Condition'
|
||||
: dow[Math.log(flag) / Math.log(2)]}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
|
||||
if (reason !== 'backdropClick') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog sx={dialogStyle} open={open} onClose={handleClose}>
|
||||
<DialogTitle>
|
||||
{creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}
|
||||
{LL.SCHEDULE(1)}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Box display="flex" flexWrap="wrap" mb={1}>
|
||||
<Box>
|
||||
<ToggleButtonGroup
|
||||
size="small"
|
||||
color="secondary"
|
||||
value={getFlagString(editItem.flags)}
|
||||
onChange={(_event, flag: string[]) => {
|
||||
setEditItem({ ...editItem, flags: getFlagNumber(flag) & 127 });
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="2">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_MON)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="4">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_TUE)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="8">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_WED)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="16">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_THU)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="32">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_FRI)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="64">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_SAT)}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="1">
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_SUN)}
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
<Box sx={{ '& button, & a, & .MuiCard-root': { ml: 1 } }}>
|
||||
{isTimer ? (
|
||||
<Button
|
||||
size="large"
|
||||
sx={{ bgcolor: '#334f65' }}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setEditItem({ ...editItem, flags: ScheduleFlag.SCHEDULE_TIMER });
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_TIMER)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="large"
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setEditItem({
|
||||
...editItem,
|
||||
flags: ScheduleFlag.SCHEDULE_TIMER
|
||||
});
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_TIMER)}
|
||||
</Button>
|
||||
)}
|
||||
{isOnChange ? (
|
||||
<Button
|
||||
size="large"
|
||||
sx={{ bgcolor: '#334f65' }}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setEditItem({
|
||||
...editItem,
|
||||
flags: ScheduleFlag.SCHEDULE_ONCHANGE
|
||||
});
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_ONCHANGE)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="large"
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setEditItem({
|
||||
...editItem,
|
||||
flags: ScheduleFlag.SCHEDULE_ONCHANGE
|
||||
});
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_ONCHANGE)}
|
||||
</Button>
|
||||
)}
|
||||
{isCondition ? (
|
||||
<Button
|
||||
size="large"
|
||||
sx={{ bgcolor: '#334f65' }}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setEditItem({
|
||||
...editItem,
|
||||
flags: ScheduleFlag.SCHEDULE_CONDITION
|
||||
});
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_CONDITION)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="large"
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setEditItem({
|
||||
...editItem,
|
||||
flags: ScheduleFlag.SCHEDULE_CONDITION
|
||||
});
|
||||
}}
|
||||
>
|
||||
{showFlag(editItem, ScheduleFlag.SCHEDULE_CONDITION)}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{editItem.flags !== 0 && (
|
||||
<>
|
||||
<Grid container>
|
||||
<BlockFormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={editItem.active}
|
||||
onChange={updateFormValue}
|
||||
name="active"
|
||||
/>
|
||||
}
|
||||
label={LL.ACTIVE()}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid container>
|
||||
{isCondition || isOnChange ? (
|
||||
<TextField
|
||||
name="time"
|
||||
label={isCondition ? 'Condition' : 'On Change Value'}
|
||||
multiline
|
||||
fullWidth
|
||||
value={
|
||||
editItem.time == '00:00' ? (editItem.time = '') : editItem.time
|
||||
}
|
||||
margin="normal"
|
||||
onChange={updateFormValue}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<TextField
|
||||
name="time"
|
||||
type="time"
|
||||
label={isTimer ? LL.TIMER(1) : LL.TIME(1)}
|
||||
value={
|
||||
editItem.time == '' ? (editItem.time = '00:00') : editItem.time
|
||||
}
|
||||
margin="normal"
|
||||
onChange={updateFormValue}
|
||||
/>
|
||||
{isTimer && (
|
||||
<Box color="warning.main" ml={2} mt={4}>
|
||||
<Typography variant="body2">
|
||||
{LL.SCHEDULER_HELP_2()}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
<ValidatedTextField
|
||||
fieldErrors={fieldErrors}
|
||||
name="cmd"
|
||||
label={LL.COMMAND(0)}
|
||||
multiline
|
||||
fullWidth
|
||||
value={editItem.cmd}
|
||||
margin="normal"
|
||||
onChange={updateFormValue}
|
||||
/>
|
||||
<TextField
|
||||
name="value"
|
||||
label={LL.VALUE(0)}
|
||||
multiline
|
||||
margin="normal"
|
||||
fullWidth
|
||||
value={editItem.value}
|
||||
onChange={updateFormValue}
|
||||
/>
|
||||
<ValidatedTextField
|
||||
fieldErrors={fieldErrors}
|
||||
name="name"
|
||||
label={LL.NAME(0) + ' (' + LL.OPTIONAL() + ')'}
|
||||
value={editItem.name}
|
||||
fullWidth
|
||||
margin="normal"
|
||||
onChange={updateFormValue}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{!creating && (
|
||||
<Box flexGrow={1}>
|
||||
<Button
|
||||
startIcon={<RemoveIcon />}
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
onClick={remove}
|
||||
>
|
||||
{LL.REMOVE()}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
startIcon={<CancelIcon />}
|
||||
variant="outlined"
|
||||
onClick={onClose}
|
||||
color="secondary"
|
||||
>
|
||||
{LL.CANCEL()}
|
||||
</Button>
|
||||
<Button
|
||||
startIcon={creating ? <AddIcon /> : <DoneIcon />}
|
||||
variant="outlined"
|
||||
onClick={save}
|
||||
color="primary"
|
||||
>
|
||||
{creating ? LL.ADD(0) : LL.UPDATE()}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SchedulerDialog;
|
||||
Reference in New Issue
Block a user