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

refactor dialog to prevent multiple parent renders

Browse Source
This commit is contained in:
Proddy
2023-04-18 22:04:00 +02:00
parent 8eb7793cd0
commit 6bd744f12e
23 changed files with 622 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/src/framework/network/WiFiNetworkSelector.tsx
View File

@@ -47,7 +47,7 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
const renderNetwork = (network: WiFiNetwork) => {
return (
<ListItem key={network.bssid} button onClick={() => wifiConnectionContext.selectNetwork(network)}>
<ListItem key={network.bssid} onClick={() => wifiConnectionContext.selectNetwork(network)}>
<ListItemAvatar>
<Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
</ListItemAvatar>

5
interface/src/i18n/de/index.ts
View File

@@ -311,7 +311,7 @@ const de: Translation = {
LEAVE: 'Verlassen',
SCHEDULER: 'Planer',
SCHEDULER_HELP_1: 'Fügen Sie eigene, geplante Befehle zur Automatisierung hinzu. Vergeben Sie einen Entitätsnamen um die Aktivierung über API/Mqtt zu steuern',
SCHEDULER_HELP_2: 'Use 00:00 to trigger on boot', // TODO translate
SCHEDULER_HELP_2: 'Use 00:00 to trigger once on start-up', // TODO translate
SCHEDULE: 'Zeitplan',
TIME: 'Zeit',
TIMER: 'Timer',
@@ -320,7 +320,8 @@ const de: Translation = {
SCHEDULE_TIMER_2: 'jede Minute',
SCHEDULE_TIMER_3: 'jede Stunde',
CUSTOM_ENTITIES: 'Individuelle Entitäten',
ENTITIES_HELP_1: 'Abfrage von Werten auf dem EMS-Bus'
ENTITIES_HELP_1: 'Abfrage von Werten auf dem EMS-Bus',
WRITEABLE: 'Schreibbar'
};
export default de;

3
interface/src/i18n/en/index.ts
View File

@@ -320,7 +320,8 @@ const en: Translation = {
SCHEDULE_TIMER_2: 'every minute',
SCHEDULE_TIMER_3: 'every hour',
CUSTOM_ENTITIES: 'Custom Entities',
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus'
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus',
WRITEABLE: 'Writeable'
};
export default en;

3
interface/src/i18n/fr/index.ts
View File

@@ -320,7 +320,8 @@ const fr: Translation = {
SCHEDULE_TIMER_2: 'every minute', // TODO translate
SCHEDULE_TIMER_3: 'every hour', // TODO translate
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus', // TODO translate
WRITEABLE: 'Writeable' // TODO translate
};
export default fr;

3
interface/src/i18n/nl/index.ts
View File

@@ -320,7 +320,8 @@ const nl: Translation = {
SCHEDULE_TIMER_2: 'every minute', // TODO translate
SCHEDULE_TIMER_3: 'every hour', // TODO translate
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus', // TODO translate
WRITEABLE: 'Writeable' // TODO translate
};
export default nl;

3
interface/src/i18n/no/index.ts
View File

@@ -320,7 +320,8 @@ const no: Translation = {
SCHEDULE_TIMER_2: 'hvert minutt',
SCHEDULE_TIMER_3: 'hver time',
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus', // TODO translate
WRITEABLE: 'Writeable' // TODO translate
};
export default no;

3
interface/src/i18n/pl/index.ts
View File

@@ -320,7 +320,8 @@ const pl: BaseTranslation = {
SCHEDULE_TIMER_2: 'co minutę',
SCHEDULE_TIMER_3: 'co godzinę',
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus',
WRITEABLE: 'Writeable' // TODO translate
};
export default pl;

4
interface/src/i18n/sv/index.ts
View File

@@ -320,7 +320,9 @@ const sv: Translation = {
SCHEDULE_TIMER_2: 'every minute', // TODO translate
SCHEDULE_TIMER_3: 'every hour', // TODO translate
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus', // TODO translate
WRITEABLE: 'Writeable' // TODO translate
};
export default sv;

3
interface/src/i18n/tr/index.ts
View File

@@ -320,7 +320,8 @@ const tr: Translation = {
SCHEDULE_TIMER_2: 'every minute', // TODO translate
SCHEDULE_TIMER_3: 'every hour', // TODO translate
CUSTOM_ENTITIES: 'Custom Entities', // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus' // TODO translate
ENTITIES_HELP_1: 'Fetch custom entities from the EMS bus', // TODO translate
WRITEABLE: 'Writeable' // TODO translate
};
export default tr;

330
interface/src/project/SettingsEntities.tsx
View File

@@ -1,71 +1,40 @@
import { FC, useState, useEffect, useCallback } from 'react';
import type { FC } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
import {
Button,
Typography,
Box,
Grid,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
MenuItem,
InputAdornment
} from '@mui/material';
import { Button, Typography, Box } from '@mui/material';
import { useTheme } from '@table-library/react-table-library/theme';
import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
import { toast } from 'react-toastify';
import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
import WarningIcon from '@mui/icons-material/Warning';
import CancelIcon from '@mui/icons-material/Cancel';
import DoneIcon from '@mui/icons-material/Done';
import AddIcon from '@mui/icons-material/Add';
import { ValidatedTextField, ButtonRow, FormLoader, SectionContent, BlockNavigation } from 'components';
import { ButtonRow, FormLoader, SectionContent, BlockNavigation } from 'components';
import { DeviceValueUOM_s, EntityItem } from './types';
import { extractErrorMessage, updateValue } from 'utils';
import SettingsEntitiesDialog from './SettingsEntitiesDialog';
import { validate } from 'validators';
import { entityItemValidation } from './validators';
import { ValidateFieldsError } from 'async-validator';
import type { EntityItem } from './types';
import { DeviceValueUOM_s } from './types';
import { extractErrorMessage } from 'utils';
import { useI18nContext } from 'i18n/i18n-react';
import * as EMSESP from './api';
function makeid() {
return Math.floor(Math.random() * (Math.floor(200) - 100) + 100);
}
import { entityItemValidation } from './validators';
const SettingsEntities: FC = () => {
const { LL } = useI18nContext();
const [numChanges, setNumChanges] = useState<number>(0);
const blocker = useBlocker(numChanges !== 0);
const emptyEntity = {
id: 0,
name: '',
device_id: 8,
type_id: 0,
offset: 0,
factor: 1,
uom: 0,
val_type: 2,
deleted: false,
o_name: ''
};
const [entities, setEntities] = useState<EntityItem[]>([emptyEntity]);
const [entityItem, setEntityItem] = useState<EntityItem>();
const [entities, setEntities] = useState<EntityItem[]>([]);
const [selectedEntityItem, setSelectedEntityItem] = useState<EntityItem>();
const [errorMessage, setErrorMessage] = useState<string>();
const [creating, setCreating] = useState<boolean>(false);
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
function hasEntityChanged(ei: EntityItem) {
return (
@@ -76,21 +45,15 @@ const SettingsEntities: FC = () => {
ei.offset !== ei.o_offset ||
ei.uom !== ei.o_uom ||
ei.factor !== ei.o_factor ||
ei.val_type !== ei.o_val_type ||
ei.value_type !== ei.o_value_type ||
ei.writeable !== ei.o_writeable ||
ei.deleted !== ei.o_deleted
);
}
const getNumChanges = () => {
if (!entities) {
return 0;
}
return entities.filter((ei) => hasEntityChanged(ei)).length;
};
useEffect(() => {
setNumChanges(getNumChanges());
});
setNumChanges(entities ? entities.filter((ei) => hasEntityChanged(ei)).length : 0);
}, [entities]);
const entity_theme = useTheme({
Table: `
@@ -156,8 +119,9 @@ const SettingsEntities: FC = () => {
o_offset: ei.offset,
o_factor: ei.factor,
o_uom: ei.uom,
o_val_type: ei.val_type,
o_value_type: ei.value_type,
o_name: ei.name,
o_writeable: ei.writeable,
o_deleted: ei.deleted
}))
);
@@ -182,19 +146,19 @@ const SettingsEntities: FC = () => {
const response = await EMSESP.writeEntities({
entities: entities
.filter((ei) => !ei.deleted)
.map((condensed_ei) => {
return {
id: condensed_ei.id,
name: condensed_ei.name,
device_id: condensed_ei.device_id,
type_id: condensed_ei.type_id,
offset: condensed_ei.offset,
factor: condensed_ei.factor,
uom: condensed_ei.uom,
val_type: condensed_ei.val_type
};
})
.map((condensed_ei) => ({
id: condensed_ei.id,
name: condensed_ei.name,
device_id: condensed_ei.device_id,
type_id: condensed_ei.type_id,
offset: condensed_ei.offset,
factor: condensed_ei.factor,
uom: condensed_ei.uom,
writeable: condensed_ei.writeable,
value_type: condensed_ei.value_type
}))
});
if (response.status === 200) {
toast.success(LL.SUCCESS());
} else {
@@ -207,42 +171,48 @@ const SettingsEntities: FC = () => {
}
};
const editEntityItem = (ei: EntityItem) => {
const editEntityItem = useCallback((ei: EntityItem) => {
setCreating(false);
setEntityItem(ei);
setSelectedEntityItem(ei);
setDialogOpen(true);
}, []);
const onDialogClose = () => {
setDialogOpen(false);
};
const onDialogSave = (updatedItem: EntityItem) => {
if (creating) {
setEntities([...entities.filter((ei) => creating || ei.o_id !== updatedItem.o_id), updatedItem]);
} else {
setEntities(entities.map((ei) => (ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei)));
}
setDialogOpen(false);
};
// TODO need callback here too?
const addEntityItem = () => {
setCreating(true);
setEntityItem({
id: makeid(),
setSelectedEntityItem({
id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
device_id: 11,
type_id: 0,
offset: 0,
factor: 1,
val_type: 2,
value_type: 2,
uom: 0,
name: '',
writeable: false,
deleted: false
});
};
const updateEntityItem = () => {
console.log('here');
if (entityItem) {
setEntities([...entities.filter((ei) => creating || ei.o_id !== entityItem.o_id), entityItem]);
}
setEntityItem(undefined);
setDialogOpen(true);
};
function formatValue(value: any, uom: number) {
if (value === undefined) {
return '';
}
if (uom === 0) {
return new Intl.NumberFormat().format(value);
}
return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
return new Intl.NumberFormat().format(value) + (uom === 0 ? '' : ' ' + DeviceValueUOM_s[uom]);
}
function showHex(value: number, digit: number) {
@@ -287,185 +257,6 @@ const SettingsEntities: FC = () => {
);
};
const removeEntityItem = (ei: EntityItem) => {
ei.deleted = true;
setEntityItem(ei);
updateEntityItem();
};
const validateEntityItem = async () => {
if (entityItem) {
console.log(1);
try {
setFieldErrors(undefined);
console.log(2);
await validate(entityItemValidation(entities, entityItem), entityItem);
console.log(3);
updateEntityItem();
} catch (errors: any) {
console.log(4);
console.log(errors);
setFieldErrors(errors);
}
}
};
const closeDialog = () => {
setEntityItem(undefined);
setFieldErrors(undefined);
};
const renderEditEntity = () => {
if (entityItem) {
return (
<Dialog open={!!entityItem} onClose={() => closeDialog()}>
<DialogTitle>
{creating ? LL.ADD(1) + ' ' + LL.NEW() : LL.EDIT()}&nbsp;{LL.ENTITY()}
</DialogTitle>
<DialogContent dividers>
<Box display="flex" flexWrap="wrap" mb={1}>
<Box flexGrow={1}></Box>
<Box flexWrap="nowrap" whiteSpace="nowrap"></Box>
</Box>
<Grid container spacing={2}>
<Grid item xs={12}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="name"
label={LL.NAME(0)}
value={entityItem.name}
margin="normal"
fullWidth
// onChange={updateValue(setEntityItem)}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="device_id"
label="Device ID"
margin="normal"
fullWidth
value={entityItem.device_id}
onChange={updateValue(setEntityItem)}
InputProps={{
startAdornment: <InputAdornment position="start">0x</InputAdornment>
}}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="type_id"
label="Type ID"
margin="normal"
fullWidth
value={entityItem.type_id}
onChange={updateValue(setEntityItem)}
InputProps={{
startAdornment: <InputAdornment position="start">0x</InputAdornment>
}}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="offset"
label="Offset"
margin="normal"
fullWidth
type="number"
value={entityItem.offset}
onChange={updateValue(setEntityItem)}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
name="val_type"
label="Value Type"
value={entityItem.val_type}
variant="outlined"
onChange={updateValue(setEntityItem)}
margin="normal"
fullWidth
select
>
<MenuItem value={0}>BOOL</MenuItem>
<MenuItem value={1}>INT</MenuItem>
<MenuItem value={2}>UINT</MenuItem>
<MenuItem value={3}>SHORT</MenuItem>
<MenuItem value={4}>USHORT</MenuItem>
<MenuItem value={5}>ULONG</MenuItem>
<MenuItem value={6}>TIME</MenuItem>
</ValidatedTextField>
</Grid>
{entityItem.val_type !== 0 && (
<>
<Grid item xs={4}>
<ValidatedTextField
name="factor"
label={LL.FACTOR()}
value={entityItem.factor}
variant="outlined"
onChange={updateValue(setEntityItem)}
fullWidth
margin="normal"
type="number"
inputProps={{ step: '0.001' }}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
name="uom"
label={LL.UNIT()}
value={entityItem.uom}
margin="normal"
fullWidth
onChange={updateValue(setEntityItem)}
select
>
{DeviceValueUOM_s.map((val, i) => (
<MenuItem key={i} value={i}>
{val}
</MenuItem>
))}
</ValidatedTextField>
</Grid>
</>
)}
</Grid>
</DialogContent>
<DialogActions>
{!creating && (
<Box flexGrow={1}>
<Button
startIcon={<RemoveIcon />}
variant="outlined"
color="error"
onClick={() => removeEntityItem(entityItem)}
>
{LL.REMOVE()}
</Button>
</Box>
)}
<Button startIcon={<CancelIcon />} variant="outlined" onClick={() => closeDialog()} color="secondary">
{LL.CANCEL()}
</Button>
<Button
startIcon={creating ? <AddIcon /> : <DoneIcon />}
variant="outlined"
type="submit"
onClick={() => validateEntityItem()}
color="primary"
>
{creating ? LL.ADD(0) : LL.UPDATE()}
</Button>
</DialogActions>
</Dialog>
);
}
};
return (
<SectionContent title={LL.CUSTOM_ENTITIES()} titleGutter>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
@@ -473,10 +264,21 @@ const SettingsEntities: FC = () => {
<Typography variant="body2">{LL.ENTITIES_HELP_1()}</Typography>
</Box>
{renderEntity()}
{renderEditEntity()}
{selectedEntityItem && (
<SettingsEntitiesDialog
open={dialogOpen}
creating={creating}
onClose={onDialogClose}
onSave={onDialogSave}
selectedEntityItem={selectedEntityItem}
validator={entityItemValidation(entities, creating)}
/>
)}
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1}>
{numChanges !== 0 && (
{numChanges > 0 && (
<ButtonRow>
<Button startIcon={<CancelIcon />} variant="outlined" onClick={() => fetchEntities()} color="secondary">
{LL.CANCEL()}

228
interface/src/project/SettingsEntitiesDialog.tsx Normal file
View File

@@ -0,0 +1,228 @@
import { useState, useEffect } from 'react';
import {
Grid,
Button,
Box,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Checkbox,
InputAdornment,
MenuItem
} from '@mui/material';
import { ValidatedTextField, BlockFormControlLabel } from 'components';
import DoneIcon from '@mui/icons-material/Done';
import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
import CancelIcon from '@mui/icons-material/Cancel';
import AddIcon from '@mui/icons-material/Add';
import { useI18nContext } from 'i18n/i18n-react';
import { validate } from 'validators';
import type { ValidateFieldsError } from 'async-validator';
import type Schema from 'async-validator';
import { updateValue } from 'utils';
import type { EntityItem } from './types';
import { DeviceValueUOM_s } from './types';
type SettingsEntitiesDialogProps = {
open: boolean;
creating: boolean;
onClose: () => void;
onSave: (ei: EntityItem) => void;
selectedEntityItem: EntityItem;
validator: Schema;
};
const SettingsEntitiesDialog = ({
open,
creating,
onClose,
onSave,
selectedEntityItem,
validator
}: SettingsEntitiesDialogProps) => {
const { LL } = useI18nContext();
const [editItem, setEditItem] = useState<EntityItem>(selectedEntityItem);
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
const updateFormValue = updateValue(setEditItem);
useEffect(() => {
if (open) {
setFieldErrors(undefined);
setEditItem(selectedEntityItem);
}
}, [open, selectedEntityItem]);
const close = () => {
onClose();
};
const save = async () => {
try {
setFieldErrors(undefined);
await validate(validator, editItem);
onSave(editItem);
} catch (errors: any) {
setFieldErrors(errors);
}
};
const remove = () => {
editItem.deleted = true;
onSave(editItem);
};
return (
<Dialog open={open} onClose={close}>
<DialogTitle>
{creating ? LL.ADD(1) + ' ' + LL.NEW() : LL.EDIT()}&nbsp;{LL.ENTITY()}
</DialogTitle>
<DialogContent dividers>
<Box display="flex" flexWrap="wrap" mb={1}>
<Box flexWrap="nowrap" whiteSpace="nowrap" />
</Box>
<Grid container spacing={2}>
<Grid item xs={8}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="name"
label={LL.NAME(0)}
value={editItem.name}
margin="normal"
fullWidth
onChange={updateFormValue}
/>
</Grid>
<Grid item xs={4} mt={3}>
<BlockFormControlLabel
control={<Checkbox checked={selectedEntityItem.writeable} onChange={updateFormValue} name="write" />}
label={LL.WRITEABLE()}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="device_id"
label="Device ID"
margin="normal"
fullWidth
value={editItem.device_id}
onChange={updateFormValue}
InputProps={{
startAdornment: <InputAdornment position="start">0x</InputAdornment>
}}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="type_id"
label="Type ID"
margin="normal"
fullWidth
value={editItem.type_id}
onChange={updateFormValue}
InputProps={{
startAdornment: <InputAdornment position="start">0x</InputAdornment>
}}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="offset"
label="Offset"
margin="normal"
fullWidth
type="number"
value={editItem.offset}
onChange={updateFormValue}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
name="val_type"
label="Value Type"
value={editItem.value_type}
variant="outlined"
onChange={updateFormValue}
margin="normal"
fullWidth
select
>
<MenuItem value={0}>BOOL</MenuItem>
<MenuItem value={1}>INT</MenuItem>
<MenuItem value={2}>UINT</MenuItem>
<MenuItem value={3}>SHORT</MenuItem>
<MenuItem value={4}>USHORT</MenuItem>
<MenuItem value={5}>ULONG</MenuItem>
<MenuItem value={6}>TIME</MenuItem>
</ValidatedTextField>
</Grid>
{selectedEntityItem.value_type !== 0 && (
<>
<Grid item xs={4}>
<ValidatedTextField
name="factor"
label={LL.FACTOR()}
value={editItem.factor}
variant="outlined"
onChange={updateFormValue}
fullWidth
margin="normal"
type="number"
inputProps={{ step: '0.001' }}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField
name="uom"
label={LL.UNIT()}
value={editItem.uom}
margin="normal"
fullWidth
onChange={updateFormValue}
select
>
{DeviceValueUOM_s.map((val, i) => (
<MenuItem key={i} value={i}>
{val}
</MenuItem>
))}
</ValidatedTextField>
</Grid>
</>
)}
</Grid>
</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={close} 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 SettingsEntitiesDialog;

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

@@ -1,4 +1,5 @@
import { FC, useState, useEffect, useCallback } from 'react';
import type { FC } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
import {
@@ -43,9 +44,10 @@ import { extractErrorMessage, updateValue } from 'utils';
import { validate } from 'validators';
import { schedulerItemValidation } from './validators';
import { ValidateFieldsError } from 'async-validator';
import type { ValidateFieldsError } from 'async-validator';
import { ScheduleItem, ScheduleFlag } from './types';
import type { ScheduleItem } from './types';
import { ScheduleFlag } from './types';
import { useI18nContext } from 'i18n/i18n-react';
@@ -105,6 +107,7 @@ const SettingsScheduler: FC = () => {
);
}
// TODO fix
const getNumChanges = () => {
if (!schedule) {
return 0;
@@ -184,12 +187,12 @@ const SettingsScheduler: FC = () => {
} catch (error) {
setErrorMessage(extractErrorMessage(error, LL.PROBLEM_LOADING()));
}
setDow(getDayNames());
}, [LL]);
useEffect(() => {
fetchSchedule();
}, [fetchSchedule]);
void fetchSchedule();
setDow(getDayNames());
}, [getDayNames, fetchSchedule]);
const getFlagNumber = (newFlag: string[]) => {
let new_flag = 0;
@@ -234,17 +237,15 @@ const SettingsScheduler: FC = () => {
const response = await EMSESP.writeSchedule({
schedule: schedule
.filter((si) => !si.deleted)
.map((condensed_si) => {
return {
id: condensed_si.id,
active: condensed_si.active,
flags: condensed_si.flags,
time: condensed_si.time,
cmd: condensed_si.cmd,
value: condensed_si.value,
name: condensed_si.name
};
})
.map((condensed_si) => ({
id: condensed_si.id,
active: condensed_si.active,
flags: condensed_si.flags,
time: condensed_si.time,
cmd: condensed_si.cmd,
value: condensed_si.value,
name: condensed_si.name
}))
});
if (response.status === 200) {
toast.success(LL.SCHEDULE_SAVED());

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

@@ -346,8 +346,9 @@ export interface EntityItem {
offset: number;
factor: number;
uom: number;
val_type: number;
value_type: number;
value?: number;
writeable: boolean;
deleted?: boolean; // optional
o_id?: number;
o_name?: string;
@@ -356,8 +357,9 @@ export interface EntityItem {
o_offset?: number;
o_factor?: number;
o_uom?: number;
o_val_type?: number;
o_value_type?: number;
o_deleted?: boolean;
o_writeable?: boolean;
}
export interface Entities {

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

@@ -1,6 +1,7 @@
import Schema, { InternalRuleItem } from 'async-validator';
import type { InternalRuleItem } from 'async-validator';
import Schema from 'async-validator';
import { IP_OR_HOSTNAME_VALIDATOR } from 'validators/shared';
import { Settings, ScheduleItem, EntityItem } from './types';
import type { Settings, ScheduleItem, EntityItem } from './types';
export const GPIO_VALIDATOR = {
validator(rule: InternalRuleItem, value: number, callback: (error?: string) => void) {
@@ -111,17 +112,7 @@ export const schedulerItemValidation = (schedule: ScheduleItem[], scheduleItem:
]
});
export const uniqueEntityNameValidator = (entities: EntityItem[], o_name?: string) => ({
validator(rule: InternalRuleItem, name: string, callback: (error?: string) => void) {
if (name && o_name && o_name !== name && entities.find((ei) => ei.name === name)) {
callback('Name already in use');
} else {
callback();
}
}
});
export const entityItemValidation = (entities: EntityItem[], entityItem: EntityItem) =>
export const entityItemValidation = (entities: EntityItem[], creating: boolean) =>
new Schema({
name: [
{ required: true, message: 'Name is required' },
@@ -129,8 +120,7 @@ export const entityItemValidation = (entities: EntityItem[], entityItem: EntityI
type: 'string',
pattern: /^[a-zA-Z0-9_\\.]{1,15}$/,
message: "Must be <15 characters: alpha numeric, '_' or '.'"
},
...[uniqueEntityNameValidator(entities, entityItem.o_name)]
}
],
device_id: [{ type: 'hex', required: true, message: 'ID must be a hex value' }]
// type_id: [

10
interface/src/validators/shared.ts
View File

@@ -1,12 +1,13 @@
import Schema, { InternalRuleItem, ValidateOption } from 'async-validator';
import type { InternalRuleItem, ValidateOption } from 'async-validator';
import type Schema from 'async-validator';
export const validate = <T extends object>(
validator: Schema,
source: Partial<T>,
options?: ValidateOption
): Promise<T> => {
return new Promise((resolve, reject) => {
validator.validate(source, options ? options : {}, (errors, fieldErrors) => {
): Promise<T> =>
new Promise((resolve, reject) => {
void validator.validate(source, options ? options : {}, (errors, fieldErrors) => {
if (errors) {
reject(fieldErrors);
} else {
@@ -14,7 +15,6 @@ export const validate = <T extends object>(
}
});
});
};
// updated to support both IPv4 and IPv6
const IP_ADDRESS_REGEXP =