@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
984 lines • 68.4 kB
JavaScript
import React, { Component } from 'react';
import { Input, Radio, FormControlLabel, FormGroup, Checkbox, MenuItem, Select, TextField, Box, } from '@mui/material';
import { I18n } from '../i18n';
import { Utils } from './Utils';
const styles = {
hr: {
border: 0,
borderTop: '1px solid gray',
},
scrollWindow: {
width: '100%',
overflow: 'auto',
height: 'calc(100% - 22px)',
},
rowDiv: {
width: '100%',
},
modeDiv: {
width: 200,
display: 'inline-block',
verticalAlign: 'top',
},
settingsDiv: {
display: 'inline-block',
verticalAlign: 'top',
},
inputTime: {
width: 90,
marginTop: 0,
marginLeft: 5,
},
inputDate: {
width: 140,
marginTop: 0,
marginLeft: 5,
},
inputEvery: {
width: 40,
marginLeft: 5,
marginRight: 5,
},
inputRadio: {
padding: '4px 12px',
verticalAlign: 'top',
},
inputGroup: {
maxWidth: 400,
display: 'inline-block',
},
inputGroupElement: {
width: 120,
},
inputDateDay: {
width: 60,
},
inputDateDayCheck: {
padding: 4,
},
inputSmallCheck: {
padding: 0,
},
rowOnce: {},
rowDays: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#ddeaff' : '#4b5057',
}),
rowDows: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#DDFFDD' : '#52646c',
}),
rowDates: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#747a86',
}),
rowWeeks: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#717680',
}),
rowMonths: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#DDFFFF' : '#1f5557',
}),
rowMonthsDates: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#EEFFFF' : '#3c5737',
maxWidth: 600,
}),
rowYears: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#fbffdd' : '#574b33',
}),
rowDaysDows: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#EEEAFF' : '#573544',
pl: '10px',
pb: '10px',
}),
rowDowsDows: (theme) => ({
background: theme.palette.mode !== 'dark' ? '#EEFFEE' : '#3d4c54',
pl: '10px',
pb: '10px',
}),
};
const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const MONTHS = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const PERIODS = {
minutes: 'minutes',
hours: 'hours',
};
const ASTRO = [
'sunrise',
'sunriseEnd',
'goldenHourEnd',
'solarNoon',
'goldenHour',
'sunsetStart',
'sunset',
'dusk',
'nauticalDusk',
'night',
'nightEnd',
'nauticalDawn',
'dawn',
'nadir',
];
function padding(num) {
if (num < 10) {
return `0${num}`;
}
return `${num}`;
}
// interface TextTimeProps {
// inputRef: React.RefObject<HTMLInputElement>;
// placeholder?: string;
// }
// function TextTime(props: TextTimeProps) {
// const { inputRef, ...other } = props;
//
// return <MaskedInput
// {...other}
// ref={inputRef}
// mask={[/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/]}
// placeholderChar={props.placeholder || '00:00'}
// showMask
// />;
// }
// function TextDate(props: TextTimeProps) {
// const { inputRef, ...other } = props;
//
// return <MaskedInput
// {...other}
// ref={inputRef}
// mask={[/[0-3]/, /[0-9]/, '.', /[0-1]/, /[0-9]/, '.', '2', '0', /[0-9]/, /[0-9]/]}
// placeholderChar={props.placeholder || '01.01.2020'}
// showMask
// />;
// }
const DEFAULT = {
time: {
exactTime: false,
start: '00:00',
end: '23:59',
mode: 'hours',
interval: 1,
},
period: {
once: '',
days: 1,
dows: '',
dates: '',
weeks: 0,
months: '',
years: 0,
yearMonth: 0,
yearDate: 0,
},
valid: {
from: '',
to: '',
},
};
function string2USdate(date) {
const parts = date.split('.');
if (parts.length === 3) {
return `${parts[2]}-${parts[1]}-${parts[0]}`;
}
return '';
}
export class Schedule extends Component {
refFrom;
refTo;
refOnce;
timerOnce = null;
timerFrom = null;
timerTo = null;
constructor(props) {
super(props);
let schedule;
if (this.props.schedule && typeof this.props.schedule === 'string' && this.props.schedule[0] === '{') {
try {
schedule = JSON.parse(this.props.schedule);
}
catch {
// ignore
}
}
else if (typeof this.props.schedule === 'object') {
schedule = this.props.schedule;
}
if (!schedule || !Object.keys(schedule).length) {
setTimeout(() => this.onChange(this.state.schedule, true), 200);
schedule = DEFAULT;
}
schedule = { ...DEFAULT, ...schedule };
schedule.valid.from ||= Schedule.now2string();
this.refFrom = React.createRef();
this.refTo = React.createRef();
this.refOnce = React.createRef();
this.state = {
schedule,
desc: Schedule.state2text(schedule),
};
if (JSON.stringify(schedule) !== this.props.schedule) {
setTimeout(() => this.props.onChange?.(JSON.stringify(schedule)), 100);
}
}
onChange(schedule, force) {
const isDiff = JSON.stringify(schedule) !== JSON.stringify(this.state.schedule);
if (force || isDiff) {
if (isDiff) {
this.setState({ schedule, desc: Schedule.state2text(schedule) });
}
const copy = JSON.parse(JSON.stringify(schedule));
if (copy.period.once) {
const once = copy.period.once;
delete copy.period;
copy.period = { once };
delete copy.valid;
}
else if (copy.period.days) {
const days = copy.period.days;
const daysOfWeek = copy.period.dows;
delete copy.period;
copy.period = { days };
if (daysOfWeek && daysOfWeek !== '[]') {
copy.period.dows = daysOfWeek;
}
}
else if (copy.period.weeks) {
const weeks = copy.period.weeks;
const daysOfWeek = copy.period.dows;
delete copy.period;
copy.period = { weeks };
if (daysOfWeek && daysOfWeek !== '[]') {
copy.period.dows = daysOfWeek;
}
}
else if (copy.period.months) {
const months = copy.period.months;
const dates = copy.period.dates;
delete copy.period;
copy.period = { months };
if (dates && dates !== '[]') {
copy.period.dates = dates;
}
}
else if (copy.period.years) {
const years = copy.period.years;
const yearMonth = copy.period.yearMonth;
const yearDate = copy.period.yearDate;
delete copy.period;
copy.period = { years, yearDate };
if (yearMonth) {
copy.period.yearMonth = yearMonth;
}
}
if (copy.time.exactTime) {
delete copy.time.end;
delete copy.time.mode;
delete copy.time.interval;
}
else {
delete copy.time.exactTime;
}
if (copy.valid) {
if (!copy.valid.to) {
delete copy.valid.to;
}
if (copy.period.days === 1 ||
copy.period.weeks === 1 ||
copy.period.months === 1 ||
copy.period.years === 1) {
const from = Schedule.string2date(copy.valid.from);
const today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
if (from <= today) {
delete copy.valid.from;
}
}
if (!copy.valid.from && !copy.valid.to) {
delete copy.valid;
}
}
this.props.onChange?.(JSON.stringify(copy), Schedule.state2text(schedule));
}
}
static state2text(schedule) {
if (typeof schedule === 'string') {
try {
schedule = JSON.parse(schedule);
}
catch {
return '';
}
}
const desc = [];
const validFrom = Schedule.string2date(schedule.valid.from);
if (schedule.period.once) {
// once
const once = Schedule.string2date(schedule.period.once);
const now = new Date();
now.setMilliseconds(0);
now.setSeconds(0);
now.setMinutes(0);
now.setHours(0);
//
if (once < now) {
// will be not executed anymore, because start is in the past
return I18n.t('sch_desc_onceInPast');
}
// only once
desc.push(I18n.t('sch_desc_once_on', schedule.period.once));
}
else if (schedule.period.days) {
if (schedule.period.days === 1) {
if (schedule.period.dows) {
const daysOfWeek = JSON.parse(schedule.period.dows);
if (daysOfWeek.length === 2 && daysOfWeek[0] === 0 && daysOfWeek[1] === 6) {
// on weekends
desc.push(I18n.t('sch_desc_onWeekends'));
}
else if (daysOfWeek.length === 5 &&
daysOfWeek[0] === 1 &&
daysOfWeek[1] === 2 &&
daysOfWeek[2] === 3 &&
daysOfWeek[3] === 4 &&
daysOfWeek[4] === 5) {
// on workdays
desc.push(I18n.t('sch_desc_onWorkdays'));
}
else {
const tDows = daysOfWeek.map((day) => I18n.t(WEEKDAYS[day]));
if (tDows.length === 1) {
// on Monday
desc.push(I18n.t('sch_desc_onWeekday', tDows[0]));
}
else if (tDows.length === 7) {
// on every day
desc.push(I18n.t('sch_desc_everyDay'));
}
else {
const last = tDows.pop();
// on Monday and Sunday
desc.push(I18n.t('sch_desc_onWeekdays', tDows.join(', '), last));
}
}
}
else {
desc.push(I18n.t('sch_desc_everyDay'));
}
}
else {
desc.push(I18n.t('sch_desc_everyNDay', schedule.period.days.toString()));
}
}
else if (schedule.period.weeks) {
if (schedule.period.weeks === 1) {
desc.push(I18n.t('sch_desc_everyWeek'));
}
else {
desc.push(I18n.t('sch_desc_everyNWeeks', schedule.period.weeks.toString()));
}
if (schedule.period.dows) {
const daysOfWeek = JSON.parse(schedule.period.dows);
if (daysOfWeek.length === 2 && daysOfWeek[0] === 0 && daysOfWeek[1] === 6) {
// on weekends
desc.push(I18n.t('sch_desc_onWeekends'));
}
else if (daysOfWeek.length === 5 &&
daysOfWeek[0] === 1 &&
daysOfWeek[1] === 2 &&
daysOfWeek[2] === 3 &&
daysOfWeek[3] === 4 &&
daysOfWeek[4] === 5) {
// on workdays
desc.push(I18n.t('sch_desc_onWorkdays'));
}
else {
const tDows = daysOfWeek.map((day) => I18n.t(WEEKDAYS[day]));
if (tDows.length === 1) {
// on Monday
desc.push(I18n.t('sch_desc_onWeekday', tDows[0]));
}
else if (tDows.length === 7) {
// on every day
desc.push(I18n.t('sch_desc_everyDay'));
}
else {
const last = tDows.pop();
// on Monday and Sunday
desc.push(I18n.t('sch_desc_onWeekdays', tDows.join(', '), last));
}
}
}
else {
return I18n.t('sch_desc_never');
}
}
else if (schedule.period.months) {
if (schedule.period.dates) {
const dates = JSON.parse(schedule.period.dates);
if (dates.length === 1) {
// in 1 of month
desc.push(I18n.t('sch_desc_onDate', dates[0]));
}
else if (dates.length === 31) {
desc.push(I18n.t('sch_desc_onEveryDate'));
}
else if (!dates.length) {
return I18n.t('sch_desc_never');
}
else {
const last = dates.pop();
// in 1 and 4 of month
desc.push(I18n.t('sch_desc_onDates', dates.join(', '), last));
}
}
else {
desc.push(I18n.t('sch_desc_onEveryDate'));
}
if (schedule.period.months === 1) {
desc.push(I18n.t('sch_desc_everyMonth'));
}
else if (typeof schedule.period.months === 'number') {
desc.push(I18n.t('sch_desc_everyNMonths', schedule.period.months.toString()));
}
else {
const months = JSON.parse(schedule.period.months);
const tMonths = months.map((month) => I18n.t(MONTHS[month - 1]));
if (!tMonths.length) {
// in January
return I18n.t('sch_desc_never');
}
if (tMonths.length === 1) {
// in January
desc.push(I18n.t('sch_desc_onMonth', tMonths[0]));
}
else if (tMonths.length === 12) {
// every month
desc.push(I18n.t('sch_desc_everyMonth'));
}
else {
const last = tMonths.pop();
// in January and May
desc.push(I18n.t('sch_desc_onMonths', tMonths.join(', '), last));
}
}
}
else if (schedule.period.years) {
if (schedule.period.years === 1) {
desc.push(I18n.t('sch_desc_everyYear'));
}
else {
desc.push(I18n.t('sch_desc_everyNYears', schedule.period.years.toString()));
}
desc.push(I18n.t('sch_desc_onDate', schedule.period.yearDate.toString(), schedule.period.yearMonth
? I18n.t(MONTHS[schedule.period.yearMonth - 1])
: I18n.t('sch_desc_everyMonth')));
}
// time
if (schedule.time.exactTime) {
if (ASTRO.includes(schedule.time.start)) {
// at sunset
desc.push(I18n.t('sch_desc_atTime', I18n.t(`sch_astro_${schedule.time.start}`)));
}
else {
// at HH:MM
desc.push(I18n.t('sch_desc_atTime', schedule.time.start));
}
}
else {
if (schedule.time.mode === PERIODS.minutes) {
if (schedule.time.interval === 1) {
// every minute
desc.push(I18n.t('sch_desc_everyMinute'));
}
else {
// every N minute
desc.push(I18n.t('sch_desc_everyNMinutes', schedule.time.interval.toString()));
}
}
else if (schedule.time.interval === 1) {
// every minute
desc.push(I18n.t('sch_desc_everyHour'));
}
else {
// every N minute
desc.push(I18n.t('sch_desc_everyNHours', schedule.time.interval.toString()));
}
const start = ASTRO.indexOf(schedule.time.start) !== -1
? I18n.t(`sch_astro_${schedule.time.start}`)
: schedule.time.start;
const end = ASTRO.indexOf(schedule.time.end) !== -1 ? I18n.t(`sch_astro_${schedule.time.end}`) : schedule.time.end;
if (start !== '00:00' || (end !== '24:00' && end !== '23:59')) {
// from HH:mm to HH:mm
desc.push(I18n.t('sch_desc_intervalFromTo', start, end));
}
}
if (!schedule.period.once) {
// valid
if (validFrom.getTime() > Date.now() && schedule.valid.to) {
// from XXX to XXXX
desc.push(I18n.t('sch_desc_validFromTo', schedule.valid.from, schedule.valid.to));
}
else if (validFrom.getTime() > Date.now()) {
// from XXXX
desc.push(I18n.t('sch_desc_validFrom', schedule.valid.from));
}
else if (schedule.valid.to) {
// till XXXX
desc.push(I18n.t('sch_desc_validTo', schedule.valid.to));
}
}
return desc.join(' ');
}
getTimePeriodElements() {
const schedule = this.state.schedule;
let wholeDay = false;
let day = false;
let night = false;
let fromTo = true;
if (schedule.time.start === '00:00' && schedule.time.end === '24:00') {
wholeDay = true;
fromTo = false;
}
else if (schedule.time.start === 'sunrise') {
day = true;
fromTo = false;
}
else if (schedule.time.start === 'sunset') {
night = true;
fromTo = false;
}
return (React.createElement("div", { key: "timePeriod", style: styles.rowDiv },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !schedule.time.exactTime, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.exactTime = false;
this.onChange(_schedule);
} }), label: I18n.t('sch_intervalTime') })),
React.createElement("div", { style: styles.settingsDiv },
React.createElement("div", { style: styles.settingsDiv },
!schedule.time.exactTime && (React.createElement("div", null,
React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!fromTo, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = '00:00';
_schedule.time.end = '23:59';
this.onChange(_schedule);
} }), label: !fromTo ? I18n.t('sch_fromTo') : '' }),
fromTo && [
React.createElement(TextField, { variant: "standard", style: { ...styles.inputTime, marginRight: 10 }, key: "exactTimeFrom", type: "time", sx: (theme) => ({
'& input[type="time"]::-webkit-calendar-picker-indicator': {
filter: theme.palette.mode === 'dark' ? 'invert(80%)' : undefined,
},
}), value: this.state.schedule.time.start,
// InputProps={{inputComponent: TextTime}}
onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = e.target.value;
this.onChange(_schedule);
}, slotProps: {
inputLabel: { shrink: true },
}, label: I18n.t('sch_from'), margin: "normal" }),
React.createElement(TextField, { variant: "standard", style: styles.inputTime, key: "exactTimeTo", type: "time", sx: (theme) => ({
'& input[type="time"]::-webkit-calendar-picker-indicator': {
filter: theme.palette.mode === 'dark' ? 'invert(80%)' : undefined,
},
}), value: this.state.schedule.time.end,
// InputProps={{inputComponent: TextTime}}
onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.end = e.target.value;
this.onChange(_schedule);
}, slotProps: {
inputLabel: { shrink: true },
}, label: I18n.t('sch_to'), margin: "normal" }),
]))),
!schedule.time.exactTime && (React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!wholeDay, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = '00:00';
_schedule.time.end = '24:00';
this.onChange(_schedule);
} }), label: I18n.t('sch_wholeDay') }))),
!schedule.time.exactTime && (React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!day, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = 'sunrise';
_schedule.time.end = 'sunset';
this.onChange(_schedule);
} }), label: I18n.t('sch_astroDay') }))),
!schedule.time.exactTime && (React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!night, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = 'sunset';
_schedule.time.end = 'sunrise';
this.onChange(_schedule);
} }), label: I18n.t('sch_astroNight') })))),
!schedule.time.exactTime && this.getPeriodSettingsMinutes(fromTo))));
}
getTimeExactElements() {
const isAstro = ASTRO.includes(this.state.schedule.time.start);
return (React.createElement("div", { key: "timeExact", style: styles.rowDiv },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!this.state.schedule.time.exactTime, onClick: () => {
const schedule = JSON.parse(JSON.stringify(this.state.schedule));
schedule.time.exactTime = true;
this.onChange(schedule);
} }), label: I18n.t('sch_exactTime') })),
this.state.schedule.time.exactTime && (React.createElement(Select, { variant: "standard", value: isAstro ? this.state.schedule.time.start : '00:00', onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = e.target.value;
this.onChange(_schedule);
} },
React.createElement(MenuItem, { key: "specific", value: "00:00" }, I18n.t('sch_specificTime')),
ASTRO.map(event => (React.createElement(MenuItem, { key: event, value: event }, I18n.t(`sch_astro_${event}`)))))),
this.state.schedule.time.exactTime && !isAstro && (React.createElement("div", { style: styles.settingsDiv },
React.createElement(TextField, { variant: "standard", style: styles.inputTime, key: "exactTimeValue", value: this.state.schedule.time.start, type: "time", sx: (theme) => ({
'& input[type="time"]::-webkit-calendar-picker-indicator': {
filter: theme.palette.mode === 'dark' ? 'invert(80%)' : undefined,
},
}), onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.start = e.target.value;
this.onChange(_schedule);
}, slotProps: {
inputLabel: { shrink: true },
}, margin: "normal" })))));
}
static getDivider() {
return React.createElement("hr", { style: styles.hr });
}
getPeriodModes() {
const schedule = this.state.schedule;
const isOnce = !schedule.period.dows &&
!schedule.period.months &&
!schedule.period.dates &&
!schedule.period.years &&
!schedule.period.days &&
!schedule.period.weeks;
if (isOnce && !schedule.period.once) {
schedule.period.once = Schedule.now2string(true);
}
return [
// ----- once ---
React.createElement("div", { key: "once", style: { ...styles.rowDiv, ...styles.rowOnce } },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!isOnce, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.once ||= Schedule.now2string(true);
_schedule.period.dows = '';
_schedule.period.months = '';
_schedule.period.dates = '';
_schedule.period.years = 0;
_schedule.period.yearDate = 0;
_schedule.period.yearMonth = 0;
_schedule.period.weeks = 0;
_schedule.period.days = 0;
this.onChange(_schedule);
} }), label: I18n.t('sch_periodOnce') })),
isOnce && (React.createElement("div", { style: styles.settingsDiv },
React.createElement(TextField, { variant: "standard", style: styles.inputDate, type: "date", ref: this.refOnce, key: "exactDateAt", defaultValue: string2USdate(schedule.period.once),
// InputProps={{inputComponent: TextTime}}
onChange: e => {
this.timerOnce && clearTimeout(this.timerOnce);
this.timerOnce = null;
if (this.refOnce.current) {
this.refOnce.current.style.background = '#ff000030';
}
this.timerOnce = setTimeout(value => {
this.timerOnce = null;
if (this.refOnce.current) {
this.refOnce.current.style.background = '';
}
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
const date = Schedule.string2date(value);
if (date.toString() !== 'Invalid Date') {
_schedule.period.once = `${padding(date.getDate())}.${padding(date.getMonth() + 1)}.${date.getFullYear()}`;
this.onChange(_schedule);
}
}, 1500, e.target.value);
}, slotProps: {
inputLabel: { shrink: true },
}, label: I18n.t('sch_at'), margin: "normal" })))),
// ----- days ---
React.createElement(Box, { component: "div", key: "days", sx: Utils.getStyle(this.props.theme, styles.rowDiv, styles.rowDays) },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!schedule.period.days, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.days = 1;
_schedule.period.dows = '';
_schedule.period.months = '';
_schedule.period.dates = '';
_schedule.period.years = 0;
_schedule.period.yearDate = 0;
_schedule.period.yearMonth = 0;
_schedule.period.weeks = 0;
_schedule.period.once = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodDaily') })),
React.createElement("div", { style: styles.settingsDiv },
this.getPeriodSettingsDaily(),
schedule.period.days ? this.getPeriodSettingsWeekdays() : null)),
// ----- days of weeks ---
/*
!schedule.period.days && (
<div key="dows" style={styles.rowDiv + ' ' + styles.rowDows}>
<div style={styles.modeDiv}>
<FormControlLabel control={<Radio style={styles.inputRadio} checked={!!schedule.period.dows} onClick={() => {
const schedule = JSON.parse(JSON.stringify(this.state.schedule));
schedule.period.dows = schedule.period.dows ? '' : '[0,1,2,3,4,5,6]';
this.onChange(schedule);
}}/>}
label={I18n.t('sch_periodWeekdays')} />
</div>
<div style={styles.settingsDiv}>
{this.getPeriodSettingsWeekdays()}
</div>
</div>,
*/
// ----- weeks ---
React.createElement(Box, { component: "div", key: "weeks", sx: Utils.getStyle(this.props.theme, styles.rowDiv, styles.rowDows) },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!schedule.period.weeks, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.weeks = schedule.period.weeks ? 0 : 1;
_schedule.period.dows ||= '[0]';
_schedule.period.months = '';
_schedule.period.dates = '';
_schedule.period.years = 0;
_schedule.period.yearDate = 0;
_schedule.period.yearMonth = 0;
_schedule.period.days = 0;
_schedule.period.once = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodWeekly') })),
React.createElement(Box, { component: "div", style: styles.settingsDiv },
React.createElement("div", { style: styles.settingsDiv }, this.getPeriodSettingsWeekly()),
React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles.settingsDiv, styles.rowDowsDows) }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
// ----- months ---
React.createElement(Box, { component: "div", key: "months", sx: Utils.getStyle(this.props.theme, styles.rowDiv, styles.rowMonths) },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!schedule.period.months, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.months = 1;
_schedule.period.dows = '';
_schedule.period.dates = '';
_schedule.period.years = 0;
_schedule.period.yearDate = 0;
_schedule.period.yearMonth = 0;
_schedule.period.weeks = 0;
_schedule.period.days = 0;
_schedule.period.once = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodMonthly') })),
React.createElement("div", { style: styles.settingsDiv },
this.getPeriodSettingsMonthly(),
schedule.period.months ? (React.createElement(Box, null,
React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) },
React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { style: styles.inputRadio, checked: !!schedule.period.dates, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.months ||= 1;
const dates = [];
for (let i = 1; i <= 31; i++) {
dates.push(i);
}
_schedule.period.dates ||= JSON.stringify(dates);
_schedule.period.dows = '';
_schedule.period.years = 0;
_schedule.period.yearDate = 0;
_schedule.period.yearMonth = 0;
_schedule.period.weeks = 0;
_schedule.period.days = 0;
_schedule.period.once = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodDates') })),
React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates()))) : null)),
// ----- years ---
React.createElement(Box, { component: "div", key: "years", sx: Utils.getStyle(this.props.theme, styles.rowDiv, styles.rowYears) },
React.createElement("div", { style: styles.modeDiv },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: !!schedule.period.years, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.years = 1;
_schedule.period.yearDate = 1;
_schedule.period.yearMonth = 1;
_schedule.period.dows = '';
_schedule.period.months = 0;
_schedule.period.dates = '';
_schedule.period.weeks = 0;
_schedule.period.days = 0;
_schedule.period.once = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodYearly') })),
React.createElement("div", { style: styles.settingsDiv },
React.createElement("div", { style: styles.settingsDiv }, this.getPeriodSettingsYearly()),
!!schedule.period.years && (React.createElement("div", { style: styles.settingsDiv },
React.createElement("span", null, I18n.t('sch_on')),
React.createElement(Input, { key: "input", value: this.state.schedule.period.yearDate, style: styles.inputEvery, type: "number", inputProps: { min: 1, max: 31 }, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.yearDate = parseInt(e.target.value, 10);
if (_schedule.period.yearDate < 1) {
_schedule.period.yearDate = 31;
}
if (_schedule.period.yearDate > 31) {
_schedule.period.yearDate = 1;
}
this.onChange(_schedule);
} }),
React.createElement(Select, { variant: "standard", value: schedule.period.yearMonth, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.yearMonth = e.target.value;
this.onChange(_schedule);
} },
React.createElement(MenuItem, { key: "every", value: 0 }, I18n.t('sch_yearEveryMonth')),
MONTHS.map((month, i) => (React.createElement(MenuItem, { key: month, value: i + 1 }, I18n.t(month))))))))),
];
}
getPeriodSettingsMinutes(fromTo) {
return (React.createElement("div", { style: { display: 'inline-block', marginTop: fromTo ? 15 : 'inherit' } },
React.createElement("label", { style: { marginLeft: 4, marginRight: 4 } }, I18n.t('sch_every')),
React.createElement(Input, { value: this.state.schedule.time.interval, style: {
...styles.inputEvery,
verticalAlign: 'bottom',
}, type: "number", inputProps: { min: 1 }, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.interval = parseInt(e.target.value, 10);
this.onChange(_schedule);
} }),
React.createElement(Select, { variant: "standard", value: this.state.schedule.time.mode, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.time.mode = e.target.value;
this.onChange(_schedule);
} },
React.createElement(MenuItem, { value: PERIODS.minutes }, I18n.t('sch_periodMinutes')),
React.createElement(MenuItem, { value: PERIODS.hours }, I18n.t('sch_periodHours')))));
}
getPeriodSettingsWeekdays() {
// || this.state.schedule.period.dows === '[1, 2, 3, 4, 5]' || this.state.schedule.period.dows === '[0, 6]'
const schedule = this.state.schedule;
const isSpecific = schedule.period.dows && schedule.period.dows !== '[1, 2, 3, 4, 5]' && schedule.period.dows !== '[0, 6]';
return [
React.createElement("div", { key: "workdays" },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.dows === '[1, 2, 3, 4, 5]', onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.dows = '[1, 2, 3, 4, 5]';
if (_schedule.period.days) {
_schedule.period.days = 1;
}
this.onChange(_schedule);
} }), label: I18n.t('sch_periodWorkdays') })),
React.createElement("div", { key: "weekend" },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.dows === '[0, 6]', onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.dows = '[0, 6]';
if (_schedule.period.days) {
_schedule.period.days = 1;
}
this.onChange(_schedule);
} }), label: I18n.t('sch_periodWeekend') })),
React.createElement("div", { key: "specific", style: { verticalAlign: 'top' } },
React.createElement(FormControlLabel, { style: { verticalAlign: 'top' }, control: React.createElement(Radio, { style: styles.inputRadio, checked: !!isSpecific, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.dows = '[0, 1, 2, 3, 4, 5, 6]';
if (_schedule.period.days) {
_schedule.period.days = 1;
}
this.onChange(_schedule);
} }), label: I18n.t('sch_periodWeekdays') }),
isSpecific && (schedule.period.days === 1 || schedule.period.weeks) && (React.createElement(FormGroup, { row: true, style: { ...styles.inputGroup, width: 150 } }, [1, 2, 3, 4, 5, 6, 0].map(i => (React.createElement(FormControlLabel, { key: `specific_${i}`, style: styles.inputGroupElement, control: React.createElement(Checkbox, { style: styles.inputSmallCheck, checked: schedule.period.dows.includes(i.toString()), onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
let daysOfWeek;
try {
daysOfWeek = JSON.parse(_schedule.period.dows);
}
catch {
daysOfWeek = [];
}
if (e.target.checked && !daysOfWeek.includes(i)) {
daysOfWeek.push(i);
}
else if (!e.target.checked && daysOfWeek.includes(i)) {
daysOfWeek.splice(daysOfWeek.indexOf(i), 1);
}
daysOfWeek.sort((a, b) => a - b);
_schedule.period.dows = JSON.stringify(daysOfWeek);
if (_schedule.period.days) {
_schedule.period.days = 1;
}
this.onChange(_schedule);
} }), label: I18n.t(WEEKDAYS[i]) })))))),
];
}
getPeriodSettingsDaily() {
if (!this.state.schedule.period.days) {
return null;
}
const schedule = this.state.schedule;
return [
React.createElement("div", { key: "every_day" },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.days === 1 && !schedule.period.dows, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.days = 1;
_schedule.period.dows = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodEveryDay') })),
React.createElement("div", { key: "everyN_day" },
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.days > 1, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.days = 2;
_schedule.period.dows = '';
this.onChange(_schedule);
} }), label: I18n.t('sch_periodEvery') }),
schedule.period.days > 1 && [
React.createElement(Input, { key: "input", value: this.state.schedule.period.days, style: styles.inputEvery, type: "number", inputProps: { min: 2 }, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.days = parseInt(e.target.value, 10);
_schedule.period.dows = '';
this.onChange(_schedule);
} }),
React.createElement("span", { key: "span", style: { paddingRight: 10 } }, I18n.t('sch_periodDay')),
]),
];
}
getPeriodSettingsWeekly() {
if (!this.state.schedule.period.weeks) {
return null;
}
const schedule = this.state.schedule;
return [
React.createElement("div", { key: "radios", style: { display: 'inline-block', verticalAlign: 'top' } },
React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.weeks === 1, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.weeks = 1;
this.onChange(_schedule);
} }), label: I18n.t('sch_periodEveryWeek') })),
React.createElement("div", null,
React.createElement(FormControlLabel, { control: React.createElement(Radio, { style: styles.inputRadio, checked: schedule.period.weeks > 1, onClick: () => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.weeks = 2;
this.onChange(_schedule);
} }), label: I18n.t('sch_periodEvery') }),
schedule.period.weeks > 1 && [
React.createElement(Input, { key: "input", value: this.state.schedule.period.weeks, style: styles.inputEvery, type: "number", inputProps: { min: 2 }, onChange: e => {
const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
_schedule.period.weeks = parseInt(e.target.value, 10);
this.onChange(_schedule);
} }),
React.createElement("span", { key: "text" }, I18n.t('sch_periodWeek')),
])),
];
}
getPeriodSettingsDates() {
if (!this.state.schedule.period.dates) {
return nu