mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-06 15:59:52 +03:00
@@ -25,9 +25,9 @@
|
||||
"@mui/icons-material": "^5.11.11",
|
||||
"@mui/material": "^5.11.11",
|
||||
"@remix-run/router": "^1.3.3",
|
||||
"@table-library/react-table-library": "4.0.28",
|
||||
"@table-library/react-table-library": "4.0.29",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/node": "^18.14.2",
|
||||
"@types/node": "^18.14.4",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
|
||||
@@ -51,7 +51,6 @@ import { ScheduleItem, ScheduleFlag } from './types';
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
|
||||
import * as EMSESP from './api';
|
||||
export const APIURL = window.location.origin + '/api/';
|
||||
|
||||
const SettingsScheduler: FC = () => {
|
||||
const { LL, locale } = useI18nContext();
|
||||
@@ -69,7 +68,8 @@ const SettingsScheduler: FC = () => {
|
||||
time: '12:00',
|
||||
cmd: '',
|
||||
value: '',
|
||||
description: ''
|
||||
description: '',
|
||||
o_id: ''
|
||||
};
|
||||
const [schedule, setSchedule] = useState<ScheduleItem[]>([emptySchedule]);
|
||||
const [scheduleItem, setScheduleItem] = useState<ScheduleItem>();
|
||||
@@ -97,7 +97,7 @@ const SettingsScheduler: FC = () => {
|
||||
|
||||
const schedule_theme = useTheme({
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: 140px 48px 324px 72px 240px repeat(1, minmax(100px, 1fr));
|
||||
--data-table-library_grid-template-columns: 152px 36px 324px 72px 240px repeat(1, minmax(100px, 1fr));
|
||||
`,
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
@@ -106,22 +106,18 @@ const SettingsScheduler: FC = () => {
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
&:nth-of-type(1) {
|
||||
padding: 8px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
text-align: center;
|
||||
},
|
||||
&:nth-of-type(3) {
|
||||
text-align: center;
|
||||
},
|
||||
&:nth-of-type(4) {
|
||||
text-align: center;
|
||||
},
|
||||
}
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
color: #90CAF9;
|
||||
.th {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #565656;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
@@ -132,7 +128,6 @@ const SettingsScheduler: FC = () => {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
}
|
||||
@@ -325,13 +320,8 @@ const SettingsScheduler: FC = () => {
|
||||
};
|
||||
|
||||
const updateScheduleItem = () => {
|
||||
if (scheduleItem) {
|
||||
const new_schedule = [...schedule.filter((si) => si.id !== scheduleItem.id), scheduleItem].sort((a, b) =>
|
||||
a.time.localeCompare(b.time)
|
||||
);
|
||||
setSchedule(new_schedule);
|
||||
setSchedule([...schedule.filter((si) => creating || si.o_id !== scheduleItem.o_id), scheduleItem]);
|
||||
setScheduleItem(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSchedule = () => {
|
||||
@@ -340,7 +330,11 @@ const SettingsScheduler: FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Table data={{ nodes: schedule.filter((si) => !si.deleted) }} theme={schedule_theme} layout={{ custom: true }}>
|
||||
<Table
|
||||
data={{ nodes: schedule.filter((si) => !si.deleted).sort((a, b) => a.time.localeCompare(b.time)) }}
|
||||
theme={schedule_theme}
|
||||
layout={{ custom: true }}
|
||||
>
|
||||
{(tableList: any) => (
|
||||
<>
|
||||
<Header>
|
||||
@@ -414,7 +408,7 @@ const SettingsScheduler: FC = () => {
|
||||
if (scheduleItem) {
|
||||
try {
|
||||
setFieldErrors(undefined);
|
||||
await validate(schedulerItemValidation(schedule, creating), scheduleItem);
|
||||
await validate(schedulerItemValidation(schedule, scheduleItem.o_id), scheduleItem);
|
||||
updateScheduleItem();
|
||||
} catch (errors: any) {
|
||||
setFieldErrors(errors);
|
||||
@@ -422,16 +416,19 @@ const SettingsScheduler: FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
setScheduleItem(undefined);
|
||||
setFieldErrors();
|
||||
};
|
||||
|
||||
const renderEditSchedule = () => {
|
||||
if (scheduleItem) {
|
||||
return (
|
||||
<Dialog open={!!scheduleItem} onClose={() => setScheduleItem(undefined)}>
|
||||
<Dialog open={!!scheduleItem} onClose={() => closeDialog()}>
|
||||
<DialogTitle>
|
||||
{creating ? LL.ADD(0) + ' ' + LL.NEW() + ' ' + LL.SCHEDULE() : LL.EDIT() + " '" + scheduleItem.id + "'"}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
{creating ? (
|
||||
<>
|
||||
<ValidatedTextField
|
||||
fieldErrors={fieldErrors}
|
||||
name="id"
|
||||
@@ -442,6 +439,7 @@ const SettingsScheduler: FC = () => {
|
||||
sx={{ width: '60ch' }}
|
||||
onChange={updateValue(setScheduleItem)}
|
||||
/>
|
||||
{creating ? (
|
||||
<RadioGroup
|
||||
row
|
||||
name="schedule-type"
|
||||
@@ -459,7 +457,6 @@ const SettingsScheduler: FC = () => {
|
||||
<FormControlLabel value="w" control={<Radio />} label={LL.WEEKLY()} />
|
||||
<FormControlLabel value="t" control={<Radio />} label={LL.TIMER()} />
|
||||
</RadioGroup>
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="h6" color="primary" sx={{ pb: 1 }}>
|
||||
{LL.TYPE()}: {scheduleItem.flags & ScheduleFlag.SCHEDULE_TIMER ? LL.TIMER() : LL.WEEKLY()}
|
||||
@@ -536,16 +533,11 @@ const SettingsScheduler: FC = () => {
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
startIcon={<CancelIcon />}
|
||||
variant="outlined"
|
||||
onClick={() => setScheduleItem(undefined)}
|
||||
color="secondary"
|
||||
>
|
||||
<Button startIcon={<CancelIcon />} variant="outlined" onClick={() => closeDialog()} color="secondary">
|
||||
{LL.CANCEL()}
|
||||
</Button>
|
||||
<Button
|
||||
startIcon={<DoneIcon />}
|
||||
startIcon={creating ? <AddIcon /> : <DoneIcon />}
|
||||
variant="outlined"
|
||||
type="submit"
|
||||
onClick={() => validateScheduleItem()}
|
||||
|
||||
@@ -85,26 +85,26 @@ export const createSettingsValidator = (settings: Settings) =>
|
||||
})
|
||||
});
|
||||
|
||||
export const schedulerItemValidation = (schedule: ScheduleItem[], creating: boolean) =>
|
||||
export const schedulerItemValidation = (schedule: ScheduleItem[], o_id: string) =>
|
||||
new Schema({
|
||||
id: [
|
||||
{ required: true, message: 'Name is required' },
|
||||
{
|
||||
type: 'string',
|
||||
pattern: /^[a-zA-Z0-9_\\.]{1,24}$/,
|
||||
message: "Must be 1-24 characters: alpha numeric, '_' or '.'"
|
||||
pattern: /^[a-zA-Z0-9_\\.]{1,15}$/,
|
||||
message: "Must be 1-15 characters: alpha numeric, '_' or '.'"
|
||||
},
|
||||
...(creating ? [uniqueIDValidator(schedule)] : [])
|
||||
...[uniqueIDValidator(schedule, o_id)]
|
||||
],
|
||||
cmd: [
|
||||
{ required: true, message: 'Command is required' },
|
||||
{ type: 'string', min: 1, max: 32, message: 'Command must be 1-32 characters' }
|
||||
{ type: 'string', min: 1, max: 64, message: 'Command must be 1-64 characters' }
|
||||
]
|
||||
});
|
||||
|
||||
export const uniqueIDValidator = (schedule: ScheduleItem[]) => ({
|
||||
export const uniqueIDValidator = (schedule: ScheduleItem[], o_id: string) => ({
|
||||
validator(rule: InternalRuleItem, id: string, callback: (error?: string) => void) {
|
||||
if (id && schedule.find((si) => si.id === id)) {
|
||||
if (id && o_id !== id && schedule.find((si) => si.id === id)) {
|
||||
callback('Name already in use');
|
||||
} else {
|
||||
callback();
|
||||
|
||||
@@ -1165,9 +1165,9 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@table-library/react-table-library@npm:4.0.28":
|
||||
version: 4.0.28
|
||||
resolution: "@table-library/react-table-library@npm:4.0.28"
|
||||
"@table-library/react-table-library@npm:4.0.29":
|
||||
version: 4.0.29
|
||||
resolution: "@table-library/react-table-library@npm:4.0.29"
|
||||
dependencies:
|
||||
clsx: 1.1.1
|
||||
react-virtualized-auto-sizer: 1.0.7
|
||||
@@ -1176,7 +1176,7 @@ __metadata:
|
||||
"@emotion/react": ">= 11"
|
||||
react: ">=16.8.0"
|
||||
react-dom: ">=16.8.0"
|
||||
checksum: de4e429d5659e22b101cfef8aafb430fcad20a20af803982e50ed0ba070968c0bd5a3ef02e64c34eb1b40fb7415f417cf3c30b483b0b1bbad9099f15d6489a8d
|
||||
checksum: f0daace88cc8fe20d23a7f0430c293cd737ae9d0f5deb8ef17eec238917ae0fd1d196453e2a8549cdd6e92533c4e2469dc0aeb6333555502b8b1e5df4ab2bdf4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1238,10 +1238,10 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/node@npm:^18.14.2":
|
||||
version: 18.14.2
|
||||
resolution: "@types/node@npm:18.14.2"
|
||||
checksum: 53c07e721f6ae33de71306f6a0b75dae6066a4f55bd5484c93bd59ff25f0c5f004ceafeef509a4d0cb9e24a247efc34d50489bcc1b05a53ecc68e2fc088e65cb
|
||||
"@types/node@npm:^18.14.4":
|
||||
version: 18.14.4
|
||||
resolution: "@types/node@npm:18.14.4"
|
||||
checksum: 3f2f625777747b9f87e793eea5a8bbf1ac2c828846bda5811d07a457d55cfe6762239779759de61e7b7e917632b9ceee3f7ffd2a024117e7ec364dc1b4eb8d55
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1485,10 +1485,10 @@ __metadata:
|
||||
"@mui/icons-material": ^5.11.11
|
||||
"@mui/material": ^5.11.11
|
||||
"@remix-run/router": ^1.3.3
|
||||
"@table-library/react-table-library": 4.0.28
|
||||
"@table-library/react-table-library": 4.0.29
|
||||
"@types/lodash-es": ^4.17.6
|
||||
"@types/mime-types": ^2
|
||||
"@types/node": ^18.14.2
|
||||
"@types/node": ^18.14.4
|
||||
"@types/react": ^18.0.28
|
||||
"@types/react-dom": ^18.0.11
|
||||
"@types/react-router-dom": ^5.3.3
|
||||
|
||||
Reference in New Issue
Block a user