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

test

Browse Source
This commit is contained in:
Proddy
2023-03-04 19:14:25 +01:00
parent dd200f6d34
commit a41dc71965
12 changed files with 373 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
interface/src/project/SettingsScheduler.tsx
View File

@@ -5,6 +5,8 @@ import {
Button,
Typography,
Box,
Stack,
Paper,
Dialog,
DialogActions,
DialogContent,
@@ -19,6 +21,11 @@ import {
FormControlLabel
} from '@mui/material';
// import { styled } from '@mui/material/styles';
import styled from 'styled-components';
import { useTheme } from '@table-library/react-table-library/theme';
import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
@@ -52,6 +59,31 @@ import { useI18nContext } from 'i18n/i18n-react';
import * as EMSESP from './api';
interface ItemProps {
enabled: boolean;
}
const Item = styled(Paper)(({ color, theme }) => ({
// backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
textAlign: 'center',
// color: ${({enabled}) => enabled ? 'red' : 'green'};
fontSize: 10,
padding: '6px 12px',
border: '1px solid',
lineHeight: 1.5,
backgroundColor: '#1A2027',
borderColor: '#1A2027',
// color: theme.palette.text.secondary,
}));
const Item2 = styled.paper`
fontSize: 10;
color: ${props => props.enabled ? 'red' : 'green'};
`;
const SettingsScheduler: FC = () => {
const { LL, locale } = useI18nContext();
@@ -68,8 +100,8 @@ const SettingsScheduler: FC = () => {
time: '12:00',
cmd: '',
value: '',
description: '',
o_id: ''
name: '',
o_name: ''
};
const [schedule, setSchedule] = useState<ScheduleItem[]>([emptySchedule]);
const [scheduleItem, setScheduleItem] = useState<ScheduleItem>();
@@ -97,7 +129,7 @@ const SettingsScheduler: FC = () => {
const schedule_theme = useTheme({
Table: `
--data-table-library_grid-template-columns: 152px 36px 324px 72px 240px repeat(1, minmax(100px, 1fr));
--data-table-library_grid-template-columns: 36px 324px 72px 240px repeat(1, minmax(100px, 1fr)) 152px;
`,
BaseRow: `
font-size: 14px;
@@ -106,12 +138,12 @@ const SettingsScheduler: FC = () => {
}
`,
BaseCell: `
&:nth-of-type(1) {
padding: 8px;
}
&:nth-of-type(2) {
text-align: center;
}
&:nth-of-type(1) {
text-align: center;
}
`,
HeaderRow: `
text-transform: uppercase;
@@ -171,7 +203,7 @@ const SettingsScheduler: FC = () => {
o_time: si.time,
o_cmd: si.cmd,
o_value: si.value,
o_description: si.description
o_name: si.name
}))
);
};
@@ -216,7 +248,7 @@ const SettingsScheduler: FC = () => {
function hasScheduleChanged(si: ScheduleItem) {
return (
si.id !== si.o_id ||
(si?.description || '') !== (si?.o_description || '') ||
(si?.name || '') !== (si?.o_name || '') ||
si.active !== si.o_active ||
si.deleted !== si.o_deleted ||
si.flags !== si.o_flags ||
@@ -247,7 +279,7 @@ const SettingsScheduler: FC = () => {
time: condensed_si.time,
cmd: condensed_si.cmd,
value: condensed_si.value,
description: condensed_si.description
name: condensed_si.name
};
})
});
@@ -263,6 +295,35 @@ const SettingsScheduler: FC = () => {
}
};
function getFlagName(si: ScheduleItem, flag: number) {
let text = '';
if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) {
return dow[1];
}
if ((flag & ScheduleFlag.SCHEDULE_TUE) === ScheduleFlag.SCHEDULE_TUE) {
return dow[2];
}
if ((flag & ScheduleFlag.SCHEDULE_WED) === ScheduleFlag.SCHEDULE_WED) {
return dow[3];
}
if ((flag & ScheduleFlag.SCHEDULE_THU) === ScheduleFlag.SCHEDULE_THU) {
return dow[4];
}
if ((flag & ScheduleFlag.SCHEDULE_FRI) === ScheduleFlag.SCHEDULE_FRI) {
return dow[5];
}
if ((flag & ScheduleFlag.SCHEDULE_SAT) === ScheduleFlag.SCHEDULE_SAT) {
return dow[6];
}
if ((flag & ScheduleFlag.SCHEDULE_SUN) === ScheduleFlag.SCHEDULE_SUN) {
return dow[0];
}
if ((flag & ScheduleFlag.SCHEDULE_TIMER) === ScheduleFlag.SCHEDULE_TIMER) {
return LL.TIMER();
}
return "";
}
function showFlag(si: ScheduleItem, flag: number) {
let text = '';
if ((flag & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON) {
@@ -291,15 +352,24 @@ const SettingsScheduler: FC = () => {
}
return (
<>
{/* <Button size="small" disabled variant="outlined" color="success">
{text}
</Button> */}
<Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & flag) === flag ? 'primary' : 'grey'}>
{text}
</Typography>
</>
);
}
const editScheduleItem = (si: ScheduleItem) => {
if (si.description === undefined) {
si.description = '';
if (si.name === undefined) {
si.name = '';
}
setCreating(false);
setScheduleItem(si);
@@ -315,7 +385,7 @@ const SettingsScheduler: FC = () => {
time: '12:00',
cmd: '',
value: '',
description: ''
name: ''
});
};
@@ -339,20 +409,19 @@ const SettingsScheduler: FC = () => {
<>
<Header>
<HeaderRow>
<HeaderCell stiff>{LL.NAME()}</HeaderCell>
<HeaderCell stiff>
<CheckIcon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
</HeaderCell>
<HeaderCell stiff>{LL.SCHEDULE()}</HeaderCell>
<HeaderCell stiff>{LL.TIME()}</HeaderCell>
<HeaderCell stiff>{LL.COMMAND()}</HeaderCell>
<HeaderCell>{LL.VALUE(0)}</HeaderCell>
<HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
<HeaderCell stiff>{LL.NAME()}</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((si: ScheduleItem) => (
<Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
<Cell>{si.id}</Cell>
<Cell stiff>
<Checkbox
size="small"
@@ -364,31 +433,42 @@ const SettingsScheduler: FC = () => {
/>
</Cell>
<Cell stiff>
<ToggleButtonGroup
size="small"
color="secondary"
value={getFlagString(si.flags)}
onChange={(event, flag) => {
si.flags = getFlagNumber(flag);
if (si.flags & ScheduleFlag.SCHEDULE_TIMER) {
si.flags = ScheduleFlag.SCHEDULE_TIMER;
}
setFlags(['']); // forces refresh
}}
>
<ToggleButton value="2">{showFlag(si, ScheduleFlag.SCHEDULE_MON)}</ToggleButton>
<ToggleButton value="4">{showFlag(si, ScheduleFlag.SCHEDULE_TUE)}</ToggleButton>
<ToggleButton value="8">{showFlag(si, ScheduleFlag.SCHEDULE_WED)}</ToggleButton>
<ToggleButton value="16">{showFlag(si, ScheduleFlag.SCHEDULE_THU)}</ToggleButton>
<ToggleButton value="32">{showFlag(si, ScheduleFlag.SCHEDULE_FRI)}</ToggleButton>
<ToggleButton value="64">{showFlag(si, ScheduleFlag.SCHEDULE_SAT)}</ToggleButton>
<ToggleButton value="1">{showFlag(si, ScheduleFlag.SCHEDULE_SUN)}</ToggleButton>
<ToggleButton value="128">{showFlag(si, ScheduleFlag.SCHEDULE_TIMER)}</ToggleButton>
</ToggleButtonGroup>
<Stack spacing={1} direction="row"
>
<Item backgroundColor="#0063cc" variant="outlined"> {getFlagName(si, ScheduleFlag.SCHEDULE_MON)} </Item>
<Item color="secondary">{getFlagName(si, ScheduleFlag.SCHEDULE_TUE)} </Item>
<Button disabled size="small" variant="contained" color="primary">
<Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & ScheduleFlag.SCHEDULE_MON) === ScheduleFlag.SCHEDULE_MON ? 'primary' : 'grey'}>
{getFlagName(si, ScheduleFlag.SCHEDULE_MON)}
</Typography>
</Button>
<Button disabled size="small" variant="outlined" >
<Typography variant="button" sx={{ fontSize: 10 }} color={(si.flags & ScheduleFlag.SCHEDULE_TUE) === ScheduleFlag.SCHEDULE_TUE ? 'primary' : 'grey'}>
{getFlagName(si, ScheduleFlag.SCHEDULE_TUE)}
</Typography>
</Button>
{/* {showFlag(si, ScheduleFlag.SCHEDULE_MON)}
{showFlag(si, ScheduleFlag.SCHEDULE_TUE)}
{showFlag(si, ScheduleFlag.SCHEDULE_WED)}
{showFlag(si, ScheduleFlag.SCHEDULE_THU)}
{showFlag(si, ScheduleFlag.SCHEDULE_FRI)}
{showFlag(si, ScheduleFlag.SCHEDULE_SAT)}
{showFlag(si, ScheduleFlag.SCHEDULE_SUN)}
{showFlag(si, ScheduleFlag.SCHEDULE_TIMER)} */}
</Stack>
</Cell>
<Cell>{si.time}</Cell>
<Cell>{si.cmd}</Cell>
<Cell>{si.value}</Cell>
<Cell>{si.name}</Cell>
</Row>
))}
</Body>
@@ -426,19 +506,38 @@ const SettingsScheduler: FC = () => {
return (
<Dialog open={!!scheduleItem} onClose={() => closeDialog()}>
<DialogTitle>
{creating ? LL.ADD(0) + ' ' + LL.NEW() + ' ' + LL.SCHEDULE() : LL.EDIT() + " '" + scheduleItem.id + "'"}
{creating ? LL.ADD(0) : LL.EDIT()}&nbsp;{LL.SCHEDULE()}
</DialogTitle>
<DialogContent dividers>
<ValidatedTextField
fieldErrors={fieldErrors}
name="id"
label={LL.NAME()}
value={scheduleItem.id}
fullWidth
margin="normal"
sx={{ width: '60ch' }}
onChange={updateValue(setScheduleItem)}
/>
<ToggleButtonGroup
size="small"
color="secondary"
value={getFlagString(scheduleItem.flags)}
onChange={(event, flag) => {
const flags = getFlagNumber(flag);
if (flags & ScheduleFlag.SCHEDULE_TIMER) {
console.log('timer');
scheduleItem.flags = ScheduleFlag.SCHEDULE_TIMER;
} else {
console.log("daily");
scheduleItem.flags = getFlagNumber(flag) & 127;
console.log( scheduleItem.flags);
}
setFlags(['']); // forces refresh
}}
>
<ToggleButton value="2">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_MON)}</ToggleButton>
<ToggleButton value="4">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TUE)}</ToggleButton>
<ToggleButton value="8">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_WED)}</ToggleButton>
<ToggleButton value="16">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_THU)}</ToggleButton>
<ToggleButton value="32">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_FRI)}</ToggleButton>
<ToggleButton value="64">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SAT)}</ToggleButton>
<ToggleButton value="1">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_SUN)}</ToggleButton>
<ToggleButton value="128">{showFlag(scheduleItem, ScheduleFlag.SCHEDULE_TIMER)}</ToggleButton>
</ToggleButtonGroup>
{creating ? (
<RadioGroup
row
@@ -462,10 +561,11 @@ const SettingsScheduler: FC = () => {
{LL.TYPE()}:&nbsp;{scheduleItem.flags & ScheduleFlag.SCHEDULE_TIMER ? LL.TIMER() : LL.WEEKLY()}
</Typography>
)}
<TextField
name="description"
label={LL.ENTITY_NAME()}
value={scheduleItem.description}
<ValidatedTextField
fieldErrors={fieldErrors}
name="name"
label={LL.NAME()}
value={scheduleItem.name}
fullWidth
margin="normal"
sx={{ width: '60ch' }}

8
interface/src/project/types.ts
View File

@@ -305,14 +305,14 @@ export enum DeviceEntityMask {
}
export interface ScheduleItem {
id: string; // unique index which is name
id: string; // unique index
active: boolean;
deleted?: boolean; // optional
flags: number;
time: string;
cmd: string;
value: string;
description?: string; // optional
name?: string; // optional
o_id?: string;
o_active?: boolean;
o_deleted?: boolean;
@@ -320,7 +320,7 @@ export interface ScheduleItem {
o_time?: string;
o_cmd?: string;
o_value?: string;
o_description?: string;
o_name?: string;
}
export interface Schedule {
@@ -328,12 +328,12 @@ export interface Schedule {
}
export enum ScheduleFlag {
SCHEDULE_SUN = 1,
SCHEDULE_MON = 2,
SCHEDULE_TUE = 4,
SCHEDULE_WED = 8,
SCHEDULE_THU = 16,
SCHEDULE_FRI = 32,
SCHEDULE_SAT = 64,
SCHEDULE_SUN = 1,
SCHEDULE_TIMER = 128
}

11
interface/src/project/validators.ts
View File

@@ -87,14 +87,13 @@ export const createSettingsValidator = (settings: Settings) =>
export const schedulerItemValidation = (schedule: ScheduleItem[], o_id: string) =>
new Schema({
id: [
{ required: true, message: 'Name is required' },
name: [
{
type: 'string',
pattern: /^[a-zA-Z0-9_\\.]{1,15}$/,
message: "Must be 1-15 characters: alpha numeric, '_' or '.'"
},
...[uniqueIDValidator(schedule, o_id)]
...[uniqueNameValidator(schedule, o_id)]
],
cmd: [
{ required: true, message: 'Command is required' },
@@ -102,9 +101,9 @@ export const schedulerItemValidation = (schedule: ScheduleItem[], o_id: string)
]
});
export const uniqueIDValidator = (schedule: ScheduleItem[], o_id: string) => ({
validator(rule: InternalRuleItem, id: string, callback: (error?: string) => void) {
if (id && o_id !== id && schedule.find((si) => si.id === id)) {
export const uniqueNameValidator = (schedule: ScheduleItem[], o_name: string) => ({
validator(rule: InternalRuleItem, name: string, callback: (error?: string) => void) {
if (name && o_name !== name && schedule.find((si) => si.name === name)) {
callback('Name already in use');
} else {
callback();