@iobroker/adapter-react-v5 4.8.1 → 4.9.0

package/Components/Schedule.js

@@ -1,1662 +1,1244 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/styles");
-var _reactTextMask = _interopRequireDefault(require("react-text-mask"));
-var _material = require("@mui/material");
-var _i18n = _interopRequireDefault(require("../i18n"));
-var _excluded = ["inputRef"],
-  _excluded2 = ["inputRef"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var styles = function styles(theme) {
-  return {
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
+const i18n_1 = __importDefault(require("../i18n"));
+const styles = (theme) => ({
     hr: {
-      border: 0,
-      borderTop: '1px solid gray'
+        border: 0,
+        borderTop: '1px solid gray',
     },
     scrollWindow: {
-      width: '100%',
-      overflow: 'auto',
-      height: 'calc(100% - 22px)'
+        width: '100%',
+        overflow: 'auto',
+        height: 'calc(100% - 22px)',
     },
     rowDiv: {
-      width: '100%'
+        width: '100%',
     },
     modeDiv: {
-      width: 200,
-      display: 'inline-block',
-      verticalAlign: 'top'
+        width: 200,
+        display: 'inline-block',
+        verticalAlign: 'top',
     },
     settingsDiv: {
-      display: 'inline-block',
-      verticalAlign: 'top'
+        display: 'inline-block',
+        verticalAlign: 'top',
     },
     inputTime: {
-      width: 90,
-      marginTop: 0,
-      marginLeft: 5
+        width: 90,
+        marginTop: 0,
+        marginLeft: 5,
     },
     inputDate: {
-      width: 140,
-      marginTop: 0,
-      marginLeft: 5
+        width: 140,
+        marginTop: 0,
+        marginLeft: 5,
     },
     inputEvery: {
-      width: 40,
-      marginLeft: 5,
-      marginRight: 5
+        width: 40,
+        marginLeft: 5,
+        marginRight: 5,
     },
     inputRadio: {
-      padding: '4px 12px',
-      verticalAlign: 'top'
+        padding: '4px 12px',
+        verticalAlign: 'top',
     },
     inputGroup: {
-      maxWidth: 400,
-      display: 'inline-block'
+        maxWidth: 400,
+        display: 'inline-block',
     },
     inputGroupElement: {
-      width: 120
+        width: 120,
     },
     inputDateDay: {
-      width: 60
+        width: 60,
     },
     inputDateDayCheck: {
-      padding: 4
+        padding: 4,
     },
     inputSmallCheck: {
-      padding: 0
+        padding: 0,
     },
     rowOnce: {},
     rowDays: {
-      background: theme.palette.mode !== 'dark' ? '#ddeaff' : '#4b5057'
+        background: theme.palette.mode !== 'dark' ? '#ddeaff' : '#4b5057',
     },
     rowDows: {
-      background: theme.palette.mode !== 'dark' ? '#DDFFDD' : '#52646c'
+        background: theme.palette.mode !== 'dark' ? '#DDFFDD' : '#52646c',
     },
     rowDates: {
-      background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#747a86'
+        background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#747a86',
     },
     rowWeeks: {
-      background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#717680'
+        background: theme.palette.mode !== 'dark' ? '#DDDDFF' : '#717680',
     },
     rowMonths: {
-      background: theme.palette.mode !== 'dark' ? '#DDFFFF' : '#1f5557'
+        background: theme.palette.mode !== 'dark' ? '#DDFFFF' : '#1f5557',
     },
     rowMonthsDates: {
-      background: theme.palette.mode !== 'dark' ? '#EEFFFF' : '#3c5737',
-      maxWidth: 600
+        background: theme.palette.mode !== 'dark' ? '#EEFFFF' : '#3c5737',
+        maxWidth: 600,
     },
     rowYears: {
-      background: theme.palette.mode !== 'dark' ? '#fbffdd' : '#574b33'
+        background: theme.palette.mode !== 'dark' ? '#fbffdd' : '#574b33',
     },
     rowDaysDows: {
-      background: theme.palette.mode !== 'dark' ? '#EEEAFF' : '#573544',
-      paddingLeft: 10,
-      paddingBottom: 10
+        background: theme.palette.mode !== 'dark' ? '#EEEAFF' : '#573544',
+        paddingLeft: 10,
+        paddingBottom: 10,
     },
     rowDowsDows: {
-      background: theme.palette.mode !== 'dark' ? '#EEFFEE' : '#3d4c54',
-      paddingLeft: 10,
-      paddingBottom: 10
-    }
-  };
-};
-var WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-var PERIODS = {
-  minutes: 'minutes',
-  hours: 'hours'
+        background: theme.palette.mode !== 'dark' ? '#EEFFEE' : '#3d4c54',
+        paddingLeft: 10,
+        paddingBottom: 10,
+    },
+});
+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',
 };
-var ASTRO = ['sunrise', 'sunriseEnd', 'goldenHourEnd', 'solarNoon', 'goldenHour', 'sunsetStart', 'sunset', 'dusk', 'nauticalDusk', 'night', 'nightEnd', 'nauticalDawn', 'dawn', 'nadir'];
+const ASTRO = [
+    'sunrise',
+    'sunriseEnd',
+    'goldenHourEnd',
+    'solarNoon',
+    'goldenHour',
+    'sunsetStart',
+    'sunset',
+    'dusk',
+    'nauticalDusk',
+    'night',
+    'nightEnd',
+    'nauticalDawn',
+    'dawn',
+    'nadir',
+];
 function padding(num) {
-  if (num < 10) {
-    return "0".concat(num);
-  }
-  return "".concat(num);
-}
-function TextTime(props) {
-  var inputRef = props.inputRef,
-    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], (0, _extends2["default"])({}, other, {
-    ref: inputRef,
-    mask: [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/],
-    placeholderChar: props.placeholder || '00:00',
-    showMask: true
-  }));
-}
-TextTime.propTypes = {
-  inputRef: _propTypes["default"].func.isRequired
-};
-function TextDate(props) {
-  var inputRef = props.inputRef,
-    other = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  return /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], (0, _extends2["default"])({}, 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: true
-  }));
+    if (num < 10) {
+        return `0${num}`;
+    }
+    return `${num}`;
 }
-TextDate.propTypes = {
-  inputRef: _propTypes["default"].func.isRequired
-};
-var 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: ''
-  }
+// 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) {
-  var parts = date.split('.');
-  if (parts.length === 3) {
-    return "".concat(parts[2], "-").concat(parts[1], "-").concat(parts[0]);
-  }
-  return '';
-}
-var Schedule = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Schedule, _React$Component);
-  var _super = _createSuper(Schedule);
-  function Schedule(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, Schedule);
-    _this = _super.call(this, props);
-    var schedule;
-    if (_this.props.schedule && typeof _this.props.schedule === 'string' && _this.props.schedule[0] === '{') {
-      try {
-        schedule = JSON.parse(_this.props.schedule);
-      } catch (e) {
-        // ignore
-      }
-    }
-    if ((!schedule || !Object.keys(schedule).length) && _this.props.onChange) {
-      setTimeout(function () {
-        return _this.onChange(_this.state.schedule, true);
-      }, 200);
-    }
-    schedule = schedule || {};
-    schedule = _objectSpread(_objectSpread({}, DEFAULT), schedule);
-    schedule.valid.from = schedule.valid.from || Schedule.now2string();
-    _this.refFrom = /*#__PURE__*/_react["default"].createRef();
-    _this.refTo = /*#__PURE__*/_react["default"].createRef();
-    _this.refOnce = /*#__PURE__*/_react["default"].createRef();
-    _this.state = {
-      schedule: schedule,
-      desc: Schedule.state2text(schedule)
-    };
-    if (JSON.stringify(schedule) !== _this.props.schedule) {
-      setTimeout(function () {
-        return _this.props.onChange && _this.props.onChange(JSON.stringify(schedule));
-      }, 100);
+    const parts = date.split('.');
+    if (parts.length === 3) {
+        return `${parts[2]}-${parts[1]}-${parts[0]}`;
     }
-    return _this;
-  }
-  (0, _createClass2["default"])(Schedule, [{
-    key: "onChange",
-    value: function onChange(schedule, force) {
-      var isDiff = JSON.stringify(schedule) !== JSON.stringify(this.state.schedule);
-      if (force || isDiff) {
-        isDiff && this.setState({
-          schedule: schedule,
-          desc: Schedule.state2text(schedule)
-        });
-        var copy = JSON.parse(JSON.stringify(schedule));
-        if (copy.period.once) {
-          var once = copy.period.once;
-          delete copy.period;
-          copy.period = {
-            once: once
-          };
-          delete copy.valid;
-        } else if (copy.period.days) {
-          var days = copy.period.days;
-          var dows = copy.period.dows;
-          delete copy.period;
-          copy.period = {
-            days: days
-          };
-          if (dows && dows !== '[]') {
-            copy.period.dows = dows;
-          }
-        } else if (copy.period.weeks) {
-          var weeks = copy.period.weeks;
-          var _dows = copy.period.dows;
-          delete copy.period;
-          copy.period = {
-            weeks: weeks
-          };
-          if (_dows && _dows !== '[]') {
-            copy.period.dows = _dows;
-          }
-        } else if (copy.period.months) {
-          var months = copy.period.months;
-          var dates = copy.period.dates;
-          delete copy.period;
-          copy.period = {
-            months: months
-          };
-          if (dates && dates !== '[]') {
-            copy.period.dates = dates;
-          }
-        } else if (copy.period.years) {
-          var years = copy.period.years;
-          var yearMonth = copy.period.yearMonth;
-          var yearDate = copy.period.yearDate;
-          delete copy.period;
-          copy.period = {
-            years: years,
-            yearDate: 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) {
-            var from = Schedule.string2date(copy.valid.from);
-            var 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 && this.props.onChange(JSON.stringify(copy), Schedule.state2text(schedule));
-      }
-    }
-  }, {
-    key: "getTimePeriodElements",
-    value: function getTimePeriodElements() {
-      var _this2 = this;
-      var schedule = this.state.schedule;
-      var wholeDay = false;
-      var day = false;
-      var night = false;
-      var 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 /*#__PURE__*/_react["default"].createElement("div", {
-        key: "timePeriod",
-        className: this.props.classes.rowDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !schedule.time.exactTime,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-            _schedule.time.exactTime = false;
-            _this2.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_intervalTime')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!fromTo,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-            _schedule.time.start = '00:00';
-            _schedule.time.end = '23:59';
-            _this2.onChange(_schedule);
-          }
-        }),
-        label: !fromTo ? _i18n["default"].t('sch_fromTo') : ''
-      }), fromTo && [/*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.inputTime,
-        style: {
-          marginRight: 10
-        },
-        key: "exactTimeFrom",
-        type: "time",
-        value: this.state.schedule.time.start
-        // InputProps={{inputComponent: TextTime}}
-        ,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-          _schedule.time.start = e.target.value;
-          _this2.onChange(_schedule);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        label: _i18n["default"].t('sch_from'),
-        margin: "normal"
-      }), /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.inputTime,
-        key: "exactTimeTo",
-        type: "time",
-        value: this.state.schedule.time.end
-        // InputProps={{inputComponent: TextTime}}
-        ,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-          _schedule.time.end = e.target.value;
-          _this2.onChange(_schedule);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        label: _i18n["default"].t('sch_to'),
-        margin: "normal"
-      })])), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!wholeDay,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-            _schedule.time.start = '00:00';
-            _schedule.time.end = '24:00';
-            _this2.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_wholeDay')
-      })), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!day,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-            _schedule.time.start = 'sunrise';
-            _schedule.time.end = 'sunset';
-            _this2.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_astroDay')
-      })), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!night,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));
-            _schedule.time.start = 'sunset';
-            _schedule.time.end = 'sunrise';
-            _this2.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_astroNight')
-      }))), !schedule.time.exactTime && this.getPeriodSettingsMinutes()));
-    }
-  }, {
-    key: "getTimeExactElements",
-    value: function getTimeExactElements() {
-      var _this3 = this;
-      var isAstro = ASTRO.includes(this.state.schedule.time.start);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: "timeExact",
-        className: this.props.classes.rowDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!this.state.schedule.time.exactTime,
-          onClick: function onClick() {
-            var schedule = JSON.parse(JSON.stringify(_this3.state.schedule));
-            schedule.time.exactTime = true;
-            _this3.onChange(schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_exactTime')
-      })), this.state.schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement(_material.Select, {
-        variant: "standard",
-        value: isAstro ? this.state.schedule.time.start : '00:00',
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this3.state.schedule));
-          _schedule.time.start = e.target.value;
-          _this3.onChange(_schedule);
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        key: "specific",
-        value: "00:00"
-      }, _i18n["default"].t('sch_specificTime')), ASTRO.map(function (event) {
-        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-          key: event,
-          value: event
-        }, _i18n["default"].t("sch_astro_".concat(event)));
-      })), this.state.schedule.time.exactTime && !isAstro && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.inputTime,
-        key: "exactTimeValue",
-        value: this.state.schedule.time.start,
-        type: "time"
-        // inputComponent={TextTime}
-        ,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this3.state.schedule));
-          _schedule.time.start = e.target.value;
-          _this3.onChange(_schedule);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        margin: "normal"
-      })));
-    }
-  }, {
-    key: "getDivider",
-    value: function getDivider() {
-      return /*#__PURE__*/_react["default"].createElement("hr", {
-        className: this.props.classes.hr
-      });
-    }
-  }, {
-    key: "getPeriodModes",
-    value: function getPeriodModes() {
-      var _this4 = this;
-      var schedule = this.state.schedule;
-      var 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 [
-      /*#__PURE__*/
-      // ----- once ---
-      _react["default"].createElement("div", {
-        key: "once",
-        className: "".concat(this.props.classes.rowDiv, " ").concat(this.props.classes.rowOnce)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!isOnce,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));
-            _schedule.period.once = _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;
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodOnce')
-      })), isOnce && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.inputDate,
-        type: "date",
-        ref: this.refOnce,
-        key: "exactDateAt",
-        defaultValue: string2USdate(schedule.period.once)
-        // InputProps={{inputComponent: TextTime}}
-        ,
-        onChange: function onChange(e) {
-          _this4.timerOnce && clearTimeout(_this4.timerOnce);
-          _this4.refOnce.current.style.background = '#ff000030';
-          _this4.timerOnce = setTimeout(function (value) {
-            _this4.timerOnce = null;
-            _this4.refOnce.current.style.background = '';
-            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));
-            var date = Schedule.string2date(value);
-            if (date.toString() !== 'Invalid Date') {
-              _schedule.period.once = "".concat(padding(date.getDate()), ".").concat(padding(date.getMonth() + 1), ".").concat(date.getFullYear());
-              _this4.onChange(_schedule);
+    return '';
+}
+class Schedule extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.timerOnce = null;
+        this.timerFrom = null;
+        this.timerTo = null;
+        let schedule = undefined;
+        if (this.props.schedule && typeof this.props.schedule === 'string' && this.props.schedule[0] === '{') {
+            try {
+                schedule = JSON.parse(this.props.schedule);
             }
-          }, 1500, e.target.value);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        label: _i18n["default"].t('sch_at'),
-        margin: "normal"
-      }))),
-      /*#__PURE__*/
-      // ----- days ---
-      _react["default"].createElement("div", {
-        key: "days",
-        className: "".concat(this.props.classes.rowDiv, " ").concat(this.props.classes.rowDays)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.period.days,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.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 = '';
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodDaily')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, this.getPeriodSettingsDaily(), schedule.period.days ? this.getPeriodSettingsWeekdays() : null)),
-      /*#__PURE__*/
-      // ----- days of weeks ---
-      /*
-      !schedule.period.days && (
-          <div key="dows" className={this.props.classes.rowDiv + ' ' + this.props.classes.rowDows}>
-              <div className={this.props.classes.modeDiv}>
-                  <FormControlLabel control={<Radio className={this.props.classes.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 className={this.props.classes.settingsDiv}>
-                  {this.getPeriodSettingsWeekdays()}
-              </div>
-          </div>,
-      */
-      // ----- weeks ---
-      _react["default"].createElement("div", {
-        key: "weeks",
-        className: "".concat(this.props.classes.rowDiv, " ").concat(this.props.classes.rowDows)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.period.weeks,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));
-            _schedule.period.weeks = schedule.period.weeks ? 0 : 1;
-            _schedule.period.dows = 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 = '';
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodWeekly')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, this.getPeriodSettingsWeekly()), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(this.props.classes.settingsDiv, " ").concat(this.props.classes.rowDowsDows)
-      }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
-      /*#__PURE__*/
-      // ----- months ---
-      _react["default"].createElement("div", {
-        key: "months",
-        className: "".concat(this.props.classes.rowDiv, " ").concat(this.props.classes.rowMonths)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.period.months,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.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 = '';
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodMonthly')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, this.getPeriodSettingsMonthly(), schedule.period.months ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(this.props.classes.settingsDiv, " ").concat(this.props.classes.rowMonthsDates)
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.period.dates,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));
-            _schedule.period.months = _schedule.period.months || 1;
-            var dates = [];
-            for (var i = 1; i <= 31; i++) {
-              dates.push(i);
+            catch (e) {
+                // ignore
             }
-            _schedule.period.dates = _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 = '';
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodDates')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(this.props.classes.settingsDiv, " ").concat(this.props.classes.rowMonthsDates)
-      }, this.getPeriodSettingsDates())) : null)),
-      /*#__PURE__*/
-      // ----- years ---
-      _react["default"].createElement("div", {
-        key: "years",
-        className: "".concat(this.props.classes.rowDiv, " ").concat(this.props.classes.rowYears)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.period.years,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this4.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 = '';
-            _this4.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodYearly')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, this.getPeriodSettingsYearly()), !!schedule.period.years && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].t('sch_on')), /*#__PURE__*/_react["default"].createElement(_material.Input, {
-        key: "input",
-        value: this.state.schedule.period.yearDate,
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 1,
-        max: 31,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this4.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;
-          _this4.onChange(_schedule);
         }
-      }), /*#__PURE__*/_react["default"].createElement(_material.Select, {
-        variant: "standard",
-        value: schedule.period.yearMonth,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));
-          _schedule.period.yearMonth = e.target.value;
-          _this4.onChange(_schedule);
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        key: "every",
-        value: 0
-      }, _i18n["default"].t('sch_yearEveryMonth')), MONTHS.map(function (month, i) {
-        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-          key: month,
-          value: i + 1
-        }, _i18n["default"].t(month));
-      })))))];
-    }
-  }, {
-    key: "getPeriodSettingsMinutes",
-    value: function getPeriodSettingsMinutes() {
-      var _this5 = this;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'inline-block'
+        else if (typeof this.props.schedule === 'object') {
+            schedule = this.props.schedule;
         }
-      }, /*#__PURE__*/_react["default"].createElement("label", null, _i18n["default"].t('sch_every')), /*#__PURE__*/_react["default"].createElement(_material.Input, {
-        value: this.state.schedule.time.interval,
-        style: {
-          verticalAlign: 'bottom'
-        },
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 1,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this5.state.schedule));
-          _schedule.time.interval = parseInt(e.target.value, 10);
-          _this5.onChange(_schedule);
+        if ((!schedule || !Object.keys(schedule).length)) {
+            setTimeout(() => this.onChange(this.state.schedule, true), 200);
+            schedule = DEFAULT;
         }
-      }), /*#__PURE__*/_react["default"].createElement(_material.Select, {
-        variant: "standard",
-        value: this.state.schedule.time.mode,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this5.state.schedule));
-          _schedule.time.mode = e.target.value;
-          _this5.onChange(_schedule);
+        schedule = Object.assign(Object.assign({}, DEFAULT), schedule);
+        schedule.valid.from = schedule.valid.from || Schedule.now2string();
+        this.refFrom = react_1.default.createRef();
+        this.refTo = react_1.default.createRef();
+        this.refOnce = react_1.default.createRef();
+        this.state = {
+            schedule,
+            desc: Schedule.state2text(schedule),
+        };
+        if (JSON.stringify(schedule) !== this.props.schedule) {
+            setTimeout(() => this.props.onChange && this.props.onChange(JSON.stringify(schedule)), 100);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        value: PERIODS.minutes
-      }, _i18n["default"].t('sch_periodMinutes')), /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        value: PERIODS.hours
-      }, _i18n["default"].t('sch_periodHours'))));
     }
-  }, {
-    key: "getPeriodSettingsWeekdays",
-    value: function getPeriodSettingsWeekdays() {
-      var _this6 = this;
-      // || this.state.schedule.period.dows === '[1, 2, 3, 4, 5]' || this.state.schedule.period.dows === '[0, 6]'
-      var schedule = this.state.schedule;
-      var isSpecific = schedule.period.dows && schedule.period.dows !== '[1, 2, 3, 4, 5]' && schedule.period.dows !== '[0, 6]';
-      return [/*#__PURE__*/_react["default"].createElement("div", {
-        key: "workdays"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.dows === '[1, 2, 3, 4, 5]',
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));
-            _schedule.period.dows = '[1, 2, 3, 4, 5]';
-            if (_schedule.period.days) {
-              _schedule.period.days = 1;
+    onChange(schedule, force) {
+        const isDiff = JSON.stringify(schedule) !== JSON.stringify(this.state.schedule);
+        if (force || isDiff) {
+            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;
             }
-            _this6.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodWorkdays')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "weekend"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.dows === '[0, 6]',
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));
-            _schedule.period.dows = '[0, 6]';
-            if (_schedule.period.days) {
-              _schedule.period.days = 1;
+            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;
+                }
             }
-            _this6.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodWeekend')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "specific",
-        style: {
-          verticalAlign: 'top'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        style: {
-          verticalAlign: 'top'
-        },
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: !!isSpecific,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));
-            _schedule.period.dows = '[0,1,2,3,4,5,6]';
-            if (_schedule.period.days) {
-              _schedule.period.days = 1;
+            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;
+                }
             }
-            _this6.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodWeekdays')
-      }), isSpecific && (schedule.period.days === 1 || schedule.period.weeks) && /*#__PURE__*/_react["default"].createElement(_material.FormGroup, {
-        row: true,
-        className: this.props.classes.inputGroup,
-        style: {
-          width: 150
-        }
-      }, [1, 2, 3, 4, 5, 6, 0].map(function (i) {
-        return /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-          key: "specific_".concat(i),
-          className: _this6.props.classes.inputGroupElement,
-          control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-            className: _this6.props.classes.inputSmallCheck,
-            checked: schedule.period.dows.includes(i.toString()),
-            onChange: function onChange(e) {
-              var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));
-              var dows;
-              try {
-                dows = JSON.parse(_schedule.period.dows);
-              } catch (err) {
-                dows = [];
-              }
-              if (e.target.checked && !dows.includes(i)) {
-                dows.push(i);
-              } else if (!e.target.checked && dows.includes(i)) {
-                dows.splice(dows.indexOf(i), 1);
-              }
-              dows.sort(function (a, b) {
-                return a - b;
-              });
-              _schedule.period.dows = JSON.stringify(dows);
-              if (_schedule.period.days) {
-                _schedule.period.days = 1;
-              }
-              _this6.onChange(_schedule);
+            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;
+                }
             }
-          }),
-          label: _i18n["default"].t(WEEKDAYS[i])
-        });
-      })))];
-    }
-  }, {
-    key: "getPeriodSettingsDaily",
-    value: function getPeriodSettingsDaily() {
-      var _this7 = this;
-      if (!this.state.schedule.period.days) {
-        return null;
-      }
-      var schedule = this.state.schedule;
-      return [/*#__PURE__*/_react["default"].createElement("div", {
-        key: "every_day"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.days === 1 && !schedule.period.dows,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));
-            _schedule.period.days = 1;
-            _schedule.period.dows = '';
-            _this7.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEveryDay')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "everyN_day"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.days > 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));
-            _schedule.period.days = 2;
-            _schedule.period.dows = '';
-            _this7.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEvery')
-      }), schedule.period.days > 1 && [/*#__PURE__*/_react["default"].createElement(_material.Input, {
-        key: "input",
-        value: this.state.schedule.period.days,
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 2,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));
-          _schedule.period.days = parseInt(e.target.value, 10);
-          _schedule.period.dows = '';
-          _this7.onChange(_schedule);
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        key: "span",
-        style: {
-          paddingRight: 10
+            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 && this.props.onChange(JSON.stringify(copy), Schedule.state2text(schedule));
         }
-      }, _i18n["default"].t('sch_periodDay'))])];
     }
-  }, {
-    key: "getPeriodSettingsWeekly",
-    value: function getPeriodSettingsWeekly() {
-      var _this8 = this;
-      if (!this.state.schedule.period.weeks) {
-        return null;
-      }
-      var schedule = this.state.schedule;
-      return [/*#__PURE__*/_react["default"].createElement("div", {
-        key: "radios",
-        style: {
-          display: 'inline-block',
-          verticalAlign: 'top'
+    static state2text(schedule) {
+        if (typeof schedule === 'string') {
+            try {
+                schedule = JSON.parse(schedule);
+            }
+            catch (e) {
+                return '';
+            }
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.weeks === 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));
-            _schedule.period.weeks = 1;
-            _this8.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEveryWeek')
-      })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.weeks > 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));
-            _schedule.period.weeks = 2;
-            _this8.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEvery')
-      }), schedule.period.weeks > 1 && [/*#__PURE__*/_react["default"].createElement(_material.Input, {
-        key: "input",
-        value: this.state.schedule.period.weeks,
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 2,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));
-          _schedule.period.weeks = parseInt(e.target.value, 10);
-          _this8.onChange(_schedule);
+        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_1.default.t('sch_desc_onceInPast');
+            }
+            // only once
+            desc.push(i18n_1.default.t('sch_desc_once_on', schedule.period.once));
         }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        key: "text"
-      }, _i18n["default"].t('sch_periodWeek'))]))];
-    }
-  }, {
-    key: "getPeriodSettingsDates",
-    value: function getPeriodSettingsDates() {
-      var _this9 = this;
-      if (!this.state.schedule.period.dates) {
-        return null;
-      }
-      var schedule = this.state.schedule;
-      var dates = [];
-      for (var i = 1; i <= 31; i++) {
-        dates.push(i);
-      }
-      var parsedDates = JSON.parse(schedule.period.dates);
-      return /*#__PURE__*/_react["default"].createElement(_material.FormGroup, {
-        row: true,
-        className: this.props.classes.inputGroup,
-        style: {
-          maxWidth: 620
+        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_1.default.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_1.default.t('sch_desc_onWorkdays'));
+                    }
+                    else {
+                        const tDows = daysOfWeek.map((day) => i18n_1.default.t(WEEKDAYS[day]));
+                        if (tDows.length === 1) {
+                            // on Monday
+                            desc.push(i18n_1.default.t('sch_desc_onWeekday', tDows[0]));
+                        }
+                        else if (tDows.length === 7) {
+                            // on every day
+                            desc.push(i18n_1.default.t('sch_desc_everyDay'));
+                        }
+                        else {
+                            const last = tDows.pop();
+                            // on Monday and Sunday
+                            desc.push(i18n_1.default.t('sch_desc_onWeekdays', tDows.join(', '), last));
+                        }
+                    }
+                }
+                else {
+                    desc.push(i18n_1.default.t('sch_desc_everyDay'));
+                }
+            }
+            else {
+                desc.push(i18n_1.default.t('sch_desc_everyNDay', schedule.period.days.toString()));
+            }
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: parsedDates.length === 31,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));
-            var _dates = [];
-            for (var _i = 1; _i <= 31; _i++) {
-              _dates.push(_i);
+        else if (schedule.period.weeks) {
+            if (schedule.period.weeks === 1) {
+                desc.push(i18n_1.default.t('sch_desc_everyWeek'));
             }
-            _schedule.period.dates = JSON.stringify(_dates);
-            _this9.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_all')
-      }), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: !parsedDates.length,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));
-            _schedule.period.dates = '[]';
-            _this9.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_no_one')
-      }), parsedDates.length !== 31 && !!parsedDates.length && /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: false,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));
-            var result = [];
-            var _parsedDates = JSON.parse(_schedule.period.dates);
-            for (var _i2 = 1; _i2 <= 31; _i2++) {
-              if (!_parsedDates.includes(_i2)) {
-                result.push(_i2);
-              }
+            else {
+                desc.push(i18n_1.default.t('sch_desc_everyNWeeks', schedule.period.weeks.toString()));
             }
-            result.sort(function (a, b) {
-              return a - b;
-            });
-            _schedule.period.dates = JSON.stringify(result);
-            _this9.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_invert')
-      }), /*#__PURE__*/_react["default"].createElement("div", null), dates.map(function (i) {
-        return /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-          key: "date_".concat(i),
-          className: _this9.props.classes.inputDateDay,
-          style: !i ? {
-            opacity: 0,
-            cursor: 'default',
-            userSelect: 'none',
-            pointerEvents: 'none'
-          } : {},
-          control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-            className: _this9.props.classes.inputDateDayCheck,
-            checked: JSON.parse(schedule.period.dates).includes(i),
-            onChange: function onChange(e) {
-              var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));
-              var _dates;
-              try {
-                _dates = JSON.parse(_schedule.period.dates);
-              } catch (err) {
-                _dates = [];
-              }
-              if (e.target.checked && !_dates.includes(i)) {
-                _dates.push(i);
-              } else if (!e.target.checked && _dates.includes(i)) {
-                _dates.splice(_dates.indexOf(i), 1);
-              }
-              _dates.sort(function (a, b) {
-                return a - b;
-              });
-              _schedule.period.dates = JSON.stringify(_dates);
-              _this9.onChange(_schedule);
+            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_1.default.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_1.default.t('sch_desc_onWorkdays'));
+                }
+                else {
+                    const tDows = daysOfWeek.map((day) => i18n_1.default.t(WEEKDAYS[day]));
+                    if (tDows.length === 1) {
+                        // on Monday
+                        desc.push(i18n_1.default.t('sch_desc_onWeekday', tDows[0]));
+                    }
+                    else if (tDows.length === 7) {
+                        // on every day
+                        desc.push(i18n_1.default.t('sch_desc_everyDay'));
+                    }
+                    else {
+                        const last = tDows.pop();
+                        // on Monday and Sunday
+                        desc.push(i18n_1.default.t('sch_desc_onWeekdays', tDows.join(', '), last));
+                    }
+                }
             }
-          }),
-          label: i < 10 ? [/*#__PURE__*/_react["default"].createElement("span", {
-            key: "0",
-            style: {
-              opacity: 0
+            else {
+                return i18n_1.default.t('sch_desc_never');
             }
-          }, "0"), /*#__PURE__*/_react["default"].createElement("span", {
-            key: "num"
-          }, i)] : i
-        });
-      }));
-    }
-  }, {
-    key: "getPeriodSettingsMonthly",
-    value: function getPeriodSettingsMonthly() {
-      var _this10 = this;
-      if (!this.state.schedule.period.months) {
-        return null;
-      }
-      var schedule = this.state.schedule;
-      var parsedMonths = typeof schedule.period.months === 'string' ? JSON.parse(schedule.period.months) : [];
-      return [/*#__PURE__*/_react["default"].createElement("div", {
-        key: "every"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: typeof schedule.period.months === 'number' && schedule.period.months === 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            _schedule.period.months = 1;
-            _this10.onChange(schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEveryMonth')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "everyN"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: typeof schedule.period.months === 'number' && schedule.period.months > 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            _schedule.period.months = 2;
-            _this10.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEvery')
-      }), typeof schedule.period.months === 'number' && schedule.period.months > 1 && [/*#__PURE__*/_react["default"].createElement(_material.Input, {
-        key: "input",
-        value: schedule.period.months,
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 2,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-          _schedule.period.months = parseInt(e.target.value, 10);
-          if (_schedule.period.months < 1) _schedule.period.months = 1;
-          _this10.onChange(_schedule);
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        key: "text"
-      }, _i18n["default"].t('sch_periodMonth'))]), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "specific",
-        style: {
-          verticalAlign: 'top'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        style: {
-          verticalAlign: 'top'
-        },
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: typeof schedule.period.months === 'string',
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            _schedule.period.months = '[1,2,3,4,5,6,7,8,9,10,11,12]';
-            _this10.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodSpecificMonths')
-      }), typeof schedule.period.months === 'string' && /*#__PURE__*/_react["default"].createElement(_material.FormGroup, {
-        row: true,
-        className: this.props.classes.inputGroup
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: parsedMonths.length === 12,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            var months = [];
-            for (var i = 1; i <= 12; i++) {
-              months.push(i);
+        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_1.default.t('sch_desc_onDate', dates[0]));
+                }
+                else if (dates.length === 31) {
+                    desc.push(i18n_1.default.t('sch_desc_onEveryDate'));
+                }
+                else if (!dates.length) {
+                    return i18n_1.default.t('sch_desc_never');
+                }
+                else {
+                    const last = dates.pop();
+                    // in 1 and 4 of month
+                    desc.push(i18n_1.default.t('sch_desc_onDates', dates.join(', '), last));
+                }
             }
-            _schedule.period.months = JSON.stringify(months);
-            _this10.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_all')
-      }), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: !parsedMonths.length,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            _schedule.period.months = '[]';
-            _this10.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_no_one')
-      }), parsedMonths.length !== 12 && !!parsedMonths.length && /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        className: this.props.classes.inputDateDay,
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputDateDayCheck,
-          checked: false,
-          onChange: function onChange() {
-            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-            var result = [];
-            var _parsedMonths = JSON.parse(_schedule.period.months);
-            for (var i = 1; i <= 12; i++) {
-              if (!_parsedMonths.includes(i)) {
-                result.push(i);
-              }
+            else {
+                desc.push(i18n_1.default.t('sch_desc_onEveryDate'));
             }
-            result.sort(function (a, b) {
-              return a - b;
-            });
-            _schedule.period.months = JSON.stringify(result);
-            _this10.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_invert')
-      }), /*#__PURE__*/_react["default"].createElement("div", null), MONTHS.map(function (month, i) {
-        return /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-          className: _this10.props.classes.inputGroupElement,
-          control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-            className: _this10.props.classes.inputSmallCheck,
-            checked: JSON.parse(schedule.period.months).includes(i + 1),
-            onChange: function onChange(e) {
-              var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));
-              var months;
-              try {
-                months = JSON.parse(_schedule.period.months);
-              } catch (err) {
-                months = [];
-              }
-              if (e.target.checked && !months.includes(i + 1)) {
-                months.push(i + 1);
-              } else if (!e.target.checked && months.includes(i + 1)) {
-                months.splice(months.indexOf(i + 1), 1);
-              }
-              months.sort(function (a, b) {
-                return a - b;
-              });
-              _schedule.period.months = JSON.stringify(months);
-              _this10.onChange(_schedule);
+            if (schedule.period.months === 1) {
+                desc.push(i18n_1.default.t('sch_desc_everyMonth'));
+            }
+            else if (typeof schedule.period.months === 'number') {
+                desc.push(i18n_1.default.t('sch_desc_everyNMonths', schedule.period.months.toString()));
+            }
+            else {
+                const months = JSON.parse(schedule.period.months);
+                const tMonths = months.map((month) => i18n_1.default.t(MONTHS[month - 1]));
+                if (!tMonths.length) {
+                    // in January
+                    return i18n_1.default.t('sch_desc_never');
+                }
+                if (tMonths.length === 1) {
+                    // in January
+                    desc.push(i18n_1.default.t('sch_desc_onMonth', tMonths[0]));
+                }
+                else if (tMonths.length === 12) {
+                    // every month
+                    desc.push(i18n_1.default.t('sch_desc_everyMonth'));
+                }
+                else {
+                    const last = tMonths.pop();
+                    // in January and May
+                    desc.push(i18n_1.default.t('sch_desc_onMonths', tMonths.join(', '), last));
+                }
             }
-          }),
-          label: _i18n["default"].t(month)
-        });
-      })))];
-    }
-  }, {
-    key: "getPeriodSettingsYearly",
-    value: function getPeriodSettingsYearly() {
-      var _this11 = this;
-      if (!this.state.schedule.period.years) {
-        return null;
-      }
-      var schedule = this.state.schedule;
-      return [/*#__PURE__*/_react["default"].createElement("div", {
-        key: "year"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.years === 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this11.state.schedule));
-            _schedule.period.years = 1;
-            _this11.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEveryYear')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "every"
-      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Radio, {
-          className: this.props.classes.inputRadio,
-          checked: schedule.period.years > 1,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this11.state.schedule));
-            _schedule.period.years = 2;
-            _this11.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_periodEvery')
-      }), schedule.period.years > 1 && [/*#__PURE__*/_react["default"].createElement(_material.Input, {
-        key: "input",
-        value: this.state.schedule.period.years,
-        className: this.props.classes.inputEvery,
-        type: "number",
-        min: 2,
-        onChange: function onChange(e) {
-          var _schedule = JSON.parse(JSON.stringify(_this11.state.schedule));
-          _schedule.period.years = parseInt(e.target.value, 10);
-          if (_schedule.period.years < 1) _schedule.period.years = 1;
-          _this11.onChange(_schedule);
         }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        key: "text"
-      }, _i18n["default"].t('sch_periodYear'))])];
-    }
-  }, {
-    key: "getValidSettings",
-    value: function getValidSettings() {
-      var _this12 = this;
-      var schedule = this.state.schedule;
-      // ----- from ---
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.rowDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.modeDiv,
-        style: {
-          verticalAlign: 'middle'
+        else if (schedule.period.years) {
+            if (schedule.period.years === 1) {
+                desc.push(i18n_1.default.t('sch_desc_everyYear'));
+            }
+            else {
+                desc.push(i18n_1.default.t('sch_desc_everyNYears', schedule.period.years.toString()));
+            }
+            desc.push(i18n_1.default.t('sch_desc_onDate', schedule.period.yearDate.toString(), schedule.period.yearMonth ? i18n_1.default.t(MONTHS[schedule.period.yearMonth - 1]) : i18n_1.default.t('sch_desc_everyMonth')));
         }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          fontWeight: 'bold',
-          paddingRight: 10
+        // time
+        if (schedule.time.exactTime) {
+            if (ASTRO.indexOf(schedule.time.start) !== -1) {
+                // at sunset
+                desc.push(i18n_1.default.t('sch_desc_atTime', i18n_1.default.t(`sch_astro_${schedule.time.start}`)));
+            }
+            else {
+                // at HH:MM
+                desc.push(i18n_1.default.t('sch_desc_atTime', schedule.time.start));
+            }
         }
-      }, _i18n["default"].t('sch_valid')), /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].t('sch_validFrom'))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.settingsDiv
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        className: this.props.classes.inputDate,
-        style: {
-          marginRight: 10
-        },
-        key: "exactTimeFrom",
-        inputRef: this.refFrom,
-        defaultValue: string2USdate(schedule.valid.from),
-        type: "date"
-        // inputComponent={TextDate}
-        ,
-        onChange: function onChange(e) {
-          _this12.timerFrom && clearTimeout(_this12.timerFrom);
-          _this12.refFrom.current.style.background = '#ff000030';
-          _this12.timerFrom = setTimeout(function (value) {
-            _this12.timerFrom = null;
-            _this12.refFrom.current.style.background = '';
-            var _schedule = JSON.parse(JSON.stringify(_this12.state.schedule));
-            var date = Schedule.string2date(value);
-            if (date.toString() !== 'Invalid Date') {
-              _schedule.valid.from = "".concat(padding(date.getDate()), ".").concat(padding(date.getMonth() + 1), ".").concat(date.getFullYear());
-              _this12.onChange(_schedule);
+        else {
+            if (schedule.time.mode === PERIODS.minutes) {
+                if (schedule.time.interval === 1) {
+                    // every minute
+                    desc.push(i18n_1.default.t('sch_desc_everyMinute'));
+                }
+                else {
+                    // every N minutes
+                    desc.push(i18n_1.default.t('sch_desc_everyNMinutes', schedule.time.interval.toString()));
+                }
             }
-          }, 1500, e.target.value);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        margin: "normal"
-      }), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          className: this.props.classes.inputRadio,
-          checked: !!schedule.valid.to,
-          onClick: function onClick() {
-            var _schedule = JSON.parse(JSON.stringify(_this12.state.schedule));
-            _schedule.valid.to = _schedule.valid.to ? '' : Schedule.now2string(true);
-            _this12.onChange(_schedule);
-          }
-        }),
-        label: _i18n["default"].t('sch_validTo')
-      }), !!schedule.valid.to && /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        inputRef: this.refTo,
-        className: this.props.classes.inputDate,
-        style: {
-          marginRight: 10
-        },
-        key: "exactTimeFrom",
-        type: "date",
-        defaultValue: string2USdate(schedule.valid.to)
-        // inputComponent={TextDate}
-        ,
-        onChange: function onChange(e) {
-          _this12.timerTo && clearTimeout(_this12.timerTo);
-          _this12.refTo.current.style.background = '#ff000030';
-          _this12.timerTo = setTimeout(function (value) {
-            _this12.timerTo = null;
-            _this12.refTo.current.style.background = '';
-            var _schedule = JSON.parse(JSON.stringify(_this12.state.schedule));
-            var date = Schedule.string2date(value);
-            if (date.toString() !== 'Invalid Date') {
-              _schedule.valid.to = "".concat(padding(date.getDate()), ".").concat(padding(date.getMonth() + 1), ".").concat(date.getFullYear());
-              _this12.onChange(_schedule);
+            else if (schedule.time.interval === 1) {
+                // every minute
+                desc.push(i18n_1.default.t('sch_desc_everyHour'));
+            }
+            else {
+                // every N minutes
+                desc.push(i18n_1.default.t('sch_desc_everyNHours', schedule.time.interval.toString()));
+            }
+            const start = ASTRO.indexOf(schedule.time.start) !== -1 ? i18n_1.default.t(`sch_astro_${schedule.time.start}`) : schedule.time.start;
+            const end = ASTRO.indexOf(schedule.time.end) !== -1 ? i18n_1.default.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_1.default.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_1.default.t('sch_desc_validFromTo', schedule.valid.from, schedule.valid.to));
+            }
+            else if (validFrom.getTime() > Date.now()) {
+                // from XXXX
+                desc.push(i18n_1.default.t('sch_desc_validFrom', schedule.valid.from));
+            }
+            else if (schedule.valid.to) {
+                // till XXXX
+                desc.push(i18n_1.default.t('sch_desc_validTo', schedule.valid.to));
             }
-          }, 1500, e.target.value);
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        margin: "normal"
-      })));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          height: 'calc(100% - 48px)',
-          width: '100%',
-          overflow: 'hidden'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, this.state.desc), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.scrollWindow
-      }, /*#__PURE__*/_react["default"].createElement("h5", null, _i18n["default"].t('sch_time')), this.getTimePeriodElements(), this.getTimeExactElements(), this.getDivider(), /*#__PURE__*/_react["default"].createElement("h5", null, _i18n["default"].t('sch_period')), this.getPeriodModes(), !this.state.schedule.period.once && this.getDivider(), !this.state.schedule.period.once && this.getValidSettings()));
+        return desc.join(' ');
     }
-  }], [{
-    key: "state2text",
-    value: function state2text(schedule) {
-      if (typeof schedule === 'string') {
-        try {
-          schedule = JSON.parse(schedule);
-        } catch (e) {
-          schedule = {};
+    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;
         }
-      }
-      var desc = [];
-      var validFrom = Schedule.string2date(schedule.valid.from);
-      if (schedule.period.once) {
-        // once
-        var once = Schedule.string2date(schedule.period.once);
-        var 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["default"].t('sch_desc_onceInPast');
+        else if (schedule.time.start === 'sunrise') {
+            day = true;
+            fromTo = false;
         }
-        // only once
-        desc.push(_i18n["default"].t('sch_desc_once_on', schedule.period.once));
-      } else if (schedule.period.days) {
-        if (schedule.period.days === 1) {
-          if (schedule.period.dows) {
-            var dows = JSON.parse(schedule.period.dows);
-            if (dows.length === 2 && dows[0] === 0 && dows[1] === 6) {
-              // on weekends
-              desc.push(_i18n["default"].t('sch_desc_onWeekends'));
-            } else if (dows.length === 5 && dows[0] === 1 && dows[1] === 2 && dows[2] === 3 && dows[3] === 4 && dows[4] === 5) {
-              // on workdays
-              desc.push(_i18n["default"].t('sch_desc_onWorkdays'));
-            } else {
-              var tDows = dows.map(function (day) {
-                return _i18n["default"].t(WEEKDAYS[day]);
-              });
-              if (tDows.length === 1) {
-                // on Monday
-                desc.push(_i18n["default"].t('sch_desc_onWeekday', tDows[0]));
-              } else if (tDows.length === 7) {
-                // on every day
-                desc.push(_i18n["default"].t('sch_desc_everyDay'));
-              } else {
-                var last = tDows.pop();
-                // on Monday and Sunday
-                desc.push(_i18n["default"].t('sch_desc_onWeekdays', tDows.join(', '), last));
-              }
-            }
-          } else {
-            desc.push(_i18n["default"].t('sch_desc_everyDay'));
-          }
-        } else {
-          desc.push(_i18n["default"].t('sch_desc_everyNDay', schedule.period.days));
+        else if (schedule.time.start === 'sunset') {
+            night = true;
+            fromTo = false;
         }
-      } else if (schedule.period.weeks) {
-        if (schedule.period.weeks === 1) {
-          desc.push(_i18n["default"].t('sch_desc_everyWeek'));
-        } else {
-          desc.push(_i18n["default"].t('sch_desc_everyNWeeks', schedule.period.weeks));
+        return react_1.default.createElement("div", { key: "timePeriod", className: this.props.classes.rowDiv },
+            react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: !schedule.time.exactTime, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.time.exactTime = false;
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_intervalTime') })),
+            react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    !schedule.time.exactTime && react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_fromTo') : '' }),
+                            fromTo && [
+                                react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.inputTime, style: { marginRight: 10 }, key: "exactTimeFrom", type: "time", 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);
+                                    }, InputLabelProps: { shrink: true }, label: i18n_1.default.t('sch_from'), margin: "normal" }),
+                                react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.inputTime, key: "exactTimeTo", type: "time", 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);
+                                    }, InputLabelProps: { shrink: true }, label: i18n_1.default.t('sch_to'), margin: "normal" }),
+                            ])),
+                    !schedule.time.exactTime && react_1.default.createElement("div", null,
+                        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_wholeDay') })),
+                    !schedule.time.exactTime && react_1.default.createElement("div", null,
+                        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_astroDay') })),
+                    !schedule.time.exactTime && react_1.default.createElement("div", null,
+                        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_astroNight') }))),
+                !schedule.time.exactTime && this.getPeriodSettingsMinutes()));
+    }
+    getTimeExactElements() {
+        const isAstro = ASTRO.includes(this.state.schedule.time.start);
+        return react_1.default.createElement("div", { key: "timeExact", className: this.props.classes.rowDiv },
+            react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_exactTime') })),
+            this.state.schedule.time.exactTime && react_1.default.createElement(material_1.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_1.default.createElement(material_1.MenuItem, { key: "specific", value: "00:00" }, i18n_1.default.t('sch_specificTime')),
+                ASTRO.map(event => react_1.default.createElement(material_1.MenuItem, { key: event, value: event }, i18n_1.default.t(`sch_astro_${event}`)))),
+            this.state.schedule.time.exactTime && !isAstro &&
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.inputTime, key: "exactTimeValue", value: this.state.schedule.time.start, type: "time", 
+                        // inputComponent={TextTime}
+                        onChange: e => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.time.start = e.target.value;
+                            this.onChange(_schedule);
+                        }, InputLabelProps: { shrink: true }, margin: "normal" })));
+    }
+    getDivider() {
+        return react_1.default.createElement("hr", { className: this.props.classes.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);
         }
-        if (schedule.period.dows) {
-          var _dows2 = JSON.parse(schedule.period.dows);
-          if (_dows2.length === 2 && _dows2[0] === 0 && _dows2[1] === 6) {
-            // on weekends
-            desc.push(_i18n["default"].t('sch_desc_onWeekends'));
-          } else if (_dows2.length === 5 && _dows2[0] === 1 && _dows2[1] === 2 && _dows2[2] === 3 && _dows2[3] === 4 && _dows2[4] === 5) {
-            // on workdays
-            desc.push(_i18n["default"].t('sch_desc_onWorkdays'));
-          } else {
-            var _tDows = _dows2.map(function (day) {
-              return _i18n["default"].t(WEEKDAYS[day]);
-            });
-            if (_tDows.length === 1) {
-              // on Monday
-              desc.push(_i18n["default"].t('sch_desc_onWeekday', _tDows[0]));
-            } else if (_tDows.length === 7) {
-              // on every day
-              desc.push(_i18n["default"].t('sch_desc_everyDay'));
-            } else {
-              var _last = _tDows.pop();
-              // on Monday and Sunday
-              desc.push(_i18n["default"].t('sch_desc_onWeekdays', _tDows.join(', '), _last));
-            }
-          }
-        } else {
-          return _i18n["default"].t('sch_desc_never');
+        return [
+            // ----- once ---
+            react_1.default.createElement("div", { key: "once", className: `${this.props.classes.rowDiv} ${this.props.classes.rowOnce}` },
+                react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: !!isOnce, onClick: () => {
+                                const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                _schedule.period.once = _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_1.default.t('sch_periodOnce') })),
+                isOnce && react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.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);
+                        }, InputLabelProps: { shrink: true }, label: i18n_1.default.t('sch_at'), margin: "normal" }))),
+            // ----- days ---
+            react_1.default.createElement("div", { key: "days", className: `${this.props.classes.rowDiv} ${this.props.classes.rowDays}` },
+                react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodDaily') })),
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    this.getPeriodSettingsDaily(),
+                    schedule.period.days ? this.getPeriodSettingsWeekdays() : null)),
+            // ----- days of weeks ---
+            /*
+            !schedule.period.days && (
+                <div key="dows" className={this.props.classes.rowDiv + ' ' + this.props.classes.rowDows}>
+                    <div className={this.props.classes.modeDiv}>
+                        <FormControlLabel control={<Radio className={this.props.classes.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 className={this.props.classes.settingsDiv}>
+                        {this.getPeriodSettingsWeekdays()}
+                    </div>
+                </div>,
+            */
+            // ----- weeks ---
+            react_1.default.createElement("div", { key: "weeks", className: `${this.props.classes.rowDiv} ${this.props.classes.rowDows}` },
+                react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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 = 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_1.default.t('sch_periodWeekly') })),
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    react_1.default.createElement("div", { className: this.props.classes.settingsDiv }, this.getPeriodSettingsWeekly()),
+                    react_1.default.createElement("div", { className: `${this.props.classes.settingsDiv} ${this.props.classes.rowDowsDows}` }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
+            // ----- months ---
+            react_1.default.createElement("div", { key: "months", className: `${this.props.classes.rowDiv} ${this.props.classes.rowMonths}` },
+                react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodMonthly') })),
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    this.getPeriodSettingsMonthly(),
+                    schedule.period.months ? react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: `${this.props.classes.settingsDiv} ${this.props.classes.rowMonthsDates}` },
+                            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputRadio, checked: !!schedule.period.dates, onClick: () => {
+                                        const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                        _schedule.period.months = _schedule.period.months || 1;
+                                        const dates = [];
+                                        for (let i = 1; i <= 31; i++) {
+                                            dates.push(i);
+                                        }
+                                        _schedule.period.dates = _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_1.default.t('sch_periodDates') })),
+                        react_1.default.createElement("div", { className: `${this.props.classes.settingsDiv} ${this.props.classes.rowMonthsDates}` }, this.getPeriodSettingsDates())) : null)),
+            // ----- years ---
+            react_1.default.createElement("div", { key: "years", className: `${this.props.classes.rowDiv} ${this.props.classes.rowYears}` },
+                react_1.default.createElement("div", { className: this.props.classes.modeDiv },
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodYearly') })),
+                react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                    react_1.default.createElement("div", { className: this.props.classes.settingsDiv }, this.getPeriodSettingsYearly()),
+                    !!schedule.period.years && react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                        react_1.default.createElement("span", null, i18n_1.default.t('sch_on')),
+                        react_1.default.createElement(material_1.Input, { key: "input", value: this.state.schedule.period.yearDate, className: this.props.classes.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_1.default.createElement(material_1.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_1.default.createElement(material_1.MenuItem, { key: "every", value: 0 }, i18n_1.default.t('sch_yearEveryMonth')),
+                            MONTHS.map((month, i) => react_1.default.createElement(material_1.MenuItem, { key: month, value: i + 1 }, i18n_1.default.t(month))))))),
+        ];
+    }
+    getPeriodSettingsMinutes() {
+        return react_1.default.createElement("div", { style: { display: 'inline-block' } },
+            react_1.default.createElement("label", null, i18n_1.default.t('sch_every')),
+            react_1.default.createElement(material_1.Input, { value: this.state.schedule.time.interval, style: { verticalAlign: 'bottom' }, className: this.props.classes.inputEvery, 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_1.default.createElement(material_1.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_1.default.createElement(material_1.MenuItem, { value: PERIODS.minutes }, i18n_1.default.t('sch_periodMinutes')),
+                react_1.default.createElement(material_1.MenuItem, { value: PERIODS.hours }, i18n_1.default.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_1.default.createElement("div", { key: "workdays" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodWorkdays') })),
+            react_1.default.createElement("div", { key: "weekend" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodWeekend') })),
+            react_1.default.createElement("div", { key: "specific", style: { verticalAlign: 'top' } },
+                react_1.default.createElement(material_1.FormControlLabel, { style: { verticalAlign: 'top' }, control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodWeekdays') }),
+                isSpecific && (schedule.period.days === 1 || schedule.period.weeks) &&
+                    react_1.default.createElement(material_1.FormGroup, { row: true, className: this.props.classes.inputGroup, style: { width: 150 } }, [1, 2, 3, 4, 5, 6, 0].map(i => react_1.default.createElement(material_1.FormControlLabel, { key: `specific_${i}`, className: this.props.classes.inputGroupElement, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.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 (err) {
+                                    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_1.default.t(WEEKDAYS[i]) })))),
+        ];
+    }
+    getPeriodSettingsDaily() {
+        if (!this.state.schedule.period.days) {
+            return null;
         }
-      } else if (schedule.period.months) {
-        if (schedule.period.dates) {
-          var dates = JSON.parse(schedule.period.dates);
-          if (dates.length === 1) {
-            // in 1 of month
-            desc.push(_i18n["default"].t('sch_desc_onDate', dates[0]));
-          } else if (dates.length === 31) {
-            desc.push(_i18n["default"].t('sch_desc_onEveryDate'));
-          } else if (!dates.length) {
-            return _i18n["default"].t('sch_desc_never');
-          } else {
-            var _last2 = dates.pop();
-            // in 1 and 4 of month
-            desc.push(_i18n["default"].t('sch_desc_onDates', dates.join(', '), _last2));
-          }
-        } else {
-          desc.push(_i18n["default"].t('sch_desc_onEveryDate'));
+        const schedule = this.state.schedule;
+        return [
+            react_1.default.createElement("div", { key: "every_day" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodEveryDay') })),
+            react_1.default.createElement("div", { key: "everyN_day" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodEvery') }),
+                schedule.period.days > 1 && [
+                    react_1.default.createElement(material_1.Input, { key: "input", value: this.state.schedule.period.days, className: this.props.classes.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_1.default.createElement("span", { key: "span", style: { paddingRight: 10 } }, i18n_1.default.t('sch_periodDay')),
+                ]),
+        ];
+    }
+    getPeriodSettingsWeekly() {
+        if (!this.state.schedule.period.weeks) {
+            return null;
         }
-        if (schedule.period.months === 1) {
-          desc.push(_i18n["default"].t('sch_desc_everyMonth'));
-        } else if (typeof schedule.period.months === 'number') {
-          desc.push(_i18n["default"].t('sch_desc_everyNMonths', schedule.period.months));
-        } else {
-          var months = JSON.parse(schedule.period.months);
-          var tMonths = months.map(function (month) {
-            return _i18n["default"].t(MONTHS[month - 1]);
-          });
-          if (!tMonths.length) {
-            // in January
-            return _i18n["default"].t('sch_desc_never');
-          }
-          if (tMonths.length === 1) {
-            // in January
-            desc.push(_i18n["default"].t('sch_desc_onMonth', tMonths[0]));
-          } else if (tMonths.length === 12) {
-            // every month
-            desc.push(_i18n["default"].t('sch_desc_everyMonth'));
-          } else {
-            var _last3 = tMonths.pop();
-            // in January and May
-            desc.push(_i18n["default"].t('sch_desc_onMonths', tMonths.join(', '), _last3));
-          }
+        const schedule = this.state.schedule;
+        return [
+            react_1.default.createElement("div", { key: "radios", style: { display: 'inline-block', verticalAlign: 'top' } },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodEveryWeek') })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.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_1.default.t('sch_periodEvery') }),
+                    schedule.period.weeks > 1 && [
+                        react_1.default.createElement(material_1.Input, { key: "input", value: this.state.schedule.period.weeks, className: this.props.classes.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_1.default.createElement("span", { key: "text" }, i18n_1.default.t('sch_periodWeek')),
+                    ])),
+        ];
+    }
+    getPeriodSettingsDates() {
+        if (!this.state.schedule.period.dates) {
+            return null;
         }
-      } else if (schedule.period.years) {
-        if (schedule.period.years === 1) {
-          desc.push(_i18n["default"].t('sch_desc_everyYear'));
-        } else {
-          desc.push(_i18n["default"].t('sch_desc_everyNYears', schedule.period.years));
+        const schedule = this.state.schedule;
+        const dates = [];
+        for (let i = 1; i <= 31; i++) {
+            dates.push(i);
         }
-        desc.push(_i18n["default"].t('sch_desc_onDate', schedule.period.yearDate, schedule.period.yearMonth ? _i18n["default"].t(MONTHS[schedule.period.yearMonth - 1]) : _i18n["default"].t('sch_desc_everyMonth')));
-      }
-
-      // time
-      if (schedule.time.exactTime) {
-        if (ASTRO.indexOf(schedule.time.start) !== -1) {
-          // at sunset
-          desc.push(_i18n["default"].t('sch_desc_atTime', _i18n["default"].t("sch_astro_".concat(schedule.time.start))));
-        } else {
-          // at HH:MM
-          desc.push(_i18n["default"].t('sch_desc_atTime', schedule.time.start));
+        const parsedDates = JSON.parse(schedule.period.dates);
+        return react_1.default.createElement(material_1.FormGroup, { row: true, className: this.props.classes.inputGroup, style: { maxWidth: 620 } },
+            react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: parsedDates.length === 31, onChange: () => {
+                        const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                        const _dates = [];
+                        for (let i = 1; i <= 31; i++) {
+                            _dates.push(i);
+                        }
+                        _schedule.period.dates = JSON.stringify(_dates);
+                        this.onChange(_schedule);
+                    } }), label: i18n_1.default.t('sch_all') }),
+            react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: !parsedDates.length, onChange: () => {
+                        const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                        _schedule.period.dates = '[]';
+                        this.onChange(_schedule);
+                    } }), label: i18n_1.default.t('sch_no_one') }),
+            parsedDates.length !== 31 && !!parsedDates.length &&
+                react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: false, onChange: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            const result = [];
+                            const _parsedDates = JSON.parse(_schedule.period.dates);
+                            for (let i = 1; i <= 31; i++) {
+                                if (!_parsedDates.includes(i)) {
+                                    result.push(i);
+                                }
+                            }
+                            result.sort((a, b) => a - b);
+                            _schedule.period.dates = JSON.stringify(result);
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_invert') }),
+            react_1.default.createElement("div", null),
+            dates.map(i => react_1.default.createElement(material_1.FormControlLabel, { key: `date_${i}`, className: this.props.classes.inputDateDay, style: !i ? {
+                    opacity: 0,
+                    cursor: 'default',
+                    userSelect: 'none',
+                    pointerEvents: 'none',
+                } : {}, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: JSON.parse(schedule.period.dates).includes(i), onChange: e => {
+                        const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                        let _dates;
+                        try {
+                            _dates = JSON.parse(_schedule.period.dates);
+                        }
+                        catch (err) {
+                            _dates = [];
+                        }
+                        if (e.target.checked && !_dates.includes(i)) {
+                            _dates.push(i);
+                        }
+                        else if (!e.target.checked && _dates.includes(i)) {
+                            _dates.splice(_dates.indexOf(i), 1);
+                        }
+                        _dates.sort((a, b) => a - b);
+                        _schedule.period.dates = JSON.stringify(_dates);
+                        this.onChange(_schedule);
+                    } }), label: i < 10 ? [
+                    react_1.default.createElement("span", { key: "0", style: { opacity: 0 } }, "0"),
+                    react_1.default.createElement("span", { key: "num" }, i),
+                ] : i })));
+    }
+    getPeriodSettingsMonthly() {
+        if (!this.state.schedule.period.months) {
+            return null;
         }
-      } else {
-        if (schedule.time.mode === PERIODS.minutes) {
-          if (schedule.time.interval === 1) {
-            // every minute
-            desc.push(_i18n["default"].t('sch_desc_everyMinute'));
-          } else {
-            // every N minutes
-            desc.push(_i18n["default"].t('sch_desc_everyNMinutes', schedule.time.interval));
-          }
-        } else if (schedule.time.interval === 1) {
-          // every minute
-          desc.push(_i18n["default"].t('sch_desc_everyHour'));
-        } else {
-          // every N minutes
-          desc.push(_i18n["default"].t('sch_desc_everyNHours', schedule.time.interval));
+        const schedule = this.state.schedule;
+        const parsedMonths = typeof schedule.period.months === 'string' ? JSON.parse(schedule.period.months) : [];
+        return [
+            react_1.default.createElement("div", { key: "every" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: typeof schedule.period.months === 'number' && schedule.period.months === 1, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.months = 1;
+                            this.onChange(schedule);
+                        } }), label: i18n_1.default.t('sch_periodEveryMonth') })),
+            react_1.default.createElement("div", { key: "everyN" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: typeof schedule.period.months === 'number' && schedule.period.months > 1, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.months = 2;
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_periodEvery') }),
+                typeof schedule.period.months === 'number' && schedule.period.months > 1 && [
+                    react_1.default.createElement(material_1.Input, { key: "input", value: schedule.period.months, className: this.props.classes.inputEvery, type: "number", inputProps: { min: 2 }, onChange: e => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.months = parseInt(e.target.value, 10);
+                            if (_schedule.period.months < 1)
+                                _schedule.period.months = 1;
+                            this.onChange(_schedule);
+                        } }),
+                    react_1.default.createElement("span", { key: "text" }, i18n_1.default.t('sch_periodMonth')),
+                ]),
+            react_1.default.createElement("div", { key: "specific", style: { verticalAlign: 'top' } },
+                react_1.default.createElement(material_1.FormControlLabel, { style: { verticalAlign: 'top' }, control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: typeof schedule.period.months === 'string', onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.months = '[1,2,3,4,5,6,7,8,9,10,11,12]';
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_periodSpecificMonths') }),
+                typeof schedule.period.months === 'string' &&
+                    react_1.default.createElement(material_1.FormGroup, { row: true, className: this.props.classes.inputGroup },
+                        react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: parsedMonths.length === 12, onChange: () => {
+                                    const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                    const months = [];
+                                    for (let i = 1; i <= 12; i++) {
+                                        months.push(i);
+                                    }
+                                    _schedule.period.months = JSON.stringify(months);
+                                    this.onChange(_schedule);
+                                } }), label: i18n_1.default.t('sch_all') }),
+                        react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: !parsedMonths.length, onChange: () => {
+                                    const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                    _schedule.period.months = '[]';
+                                    this.onChange(_schedule);
+                                } }), label: i18n_1.default.t('sch_no_one') }),
+                        parsedMonths.length !== 12 && !!parsedMonths.length &&
+                            react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputDateDay, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputDateDayCheck, checked: false, onChange: () => {
+                                        const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                        const result = [];
+                                        const _parsedMonths = JSON.parse(_schedule.period.months);
+                                        for (let i = 1; i <= 12; i++) {
+                                            if (!_parsedMonths.includes(i)) {
+                                                result.push(i);
+                                            }
+                                        }
+                                        result.sort((a, b) => a - b);
+                                        _schedule.period.months = JSON.stringify(result);
+                                        this.onChange(_schedule);
+                                    } }), label: i18n_1.default.t('sch_invert') }),
+                        react_1.default.createElement("div", null),
+                        MONTHS.map((month, i) => react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.inputGroupElement, control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputSmallCheck, checked: typeof schedule.period.months === 'string' ? JSON.parse(schedule.period.months).includes(i + 1) : schedule.period.months === i, onChange: e => {
+                                    const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                                    let months;
+                                    try {
+                                        months = JSON.parse(_schedule.period.months);
+                                    }
+                                    catch (err) {
+                                        months = [];
+                                    }
+                                    if (e.target.checked && !months.includes(i + 1)) {
+                                        months.push(i + 1);
+                                    }
+                                    else if (!e.target.checked && months.includes(i + 1)) {
+                                        months.splice(months.indexOf(i + 1), 1);
+                                    }
+                                    months.sort((a, b) => a - b);
+                                    _schedule.period.months = JSON.stringify(months);
+                                    this.onChange(_schedule);
+                                } }), label: i18n_1.default.t(month) })))),
+        ];
+    }
+    getPeriodSettingsYearly() {
+        if (!this.state.schedule.period.years) {
+            return null;
         }
-        var start = ASTRO.indexOf(schedule.time.start) !== -1 ? _i18n["default"].t("sch_astro_".concat(schedule.time.start)) : schedule.time.start;
-        var end = ASTRO.indexOf(schedule.time.end) !== -1 ? _i18n["default"].t("sch_astro_".concat(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["default"].t('sch_desc_intervalFromTo', start, end));
+        const schedule = this.state.schedule;
+        return [
+            react_1.default.createElement("div", { key: "year" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: schedule.period.years === 1, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.years = 1;
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_periodEveryYear') })),
+            react_1.default.createElement("div", { key: "every" },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { className: this.props.classes.inputRadio, checked: schedule.period.years > 1, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.years = 2;
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_periodEvery') }),
+                schedule.period.years > 1 && [
+                    react_1.default.createElement(material_1.Input, { key: "input", value: this.state.schedule.period.years, className: this.props.classes.inputEvery, type: "number", inputProps: { min: 2 }, onChange: e => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.period.years = parseInt(e.target.value, 10);
+                            if (_schedule.period.years < 1)
+                                _schedule.period.years = 1;
+                            this.onChange(_schedule);
+                        } }),
+                    react_1.default.createElement("span", { key: "text" }, i18n_1.default.t('sch_periodYear')),
+                ]),
+        ];
+    }
+    static now2string(isEnd) {
+        const d = new Date();
+        d.setHours(0);
+        d.setMinutes(0);
+        d.setSeconds(0);
+        d.setMilliseconds(0);
+        if (isEnd) {
+            d.setDate(d.getDate() + 2);
+            d.setMilliseconds(d.getMilliseconds() - 1);
         }
-      }
-      if (!schedule.period.once) {
-        // valid
-        if (validFrom.getTime() > Date.now() && schedule.valid.to) {
-          // from XXX to XXXX
-          desc.push(_i18n["default"].t('sch_desc_validFromTo', schedule.valid.from, schedule.valid.to));
-        } else if (validFrom.getTime() > Date.now()) {
-          // from XXXX
-          desc.push(_i18n["default"].t('sch_desc_validFrom', schedule.valid.from));
-        } else if (schedule.valid.to) {
-          // till XXXX
-          desc.push(_i18n["default"].t('sch_desc_validTo', schedule.valid.to));
+        return `${padding(d.getDate())}.${padding(d.getMonth() + 1)}.${padding(d.getFullYear())}`;
+    }
+    static string2date(str) {
+        let parts = str.split('.'); // 31.12.2019
+        if (parts.length === 1) {
+            parts = str.split('-'); // 2018-12-31
+            return new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
         }
-      }
-      return desc.join(' ');
+        return new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) - 1, parseInt(parts[0], 10));
     }
-  }, {
-    key: "now2string",
-    value: function now2string(isEnd) {
-      var d = new Date();
-      d.setHours(0);
-      d.setMinutes(0);
-      d.setSeconds(0);
-      d.setMilliseconds(0);
-      if (isEnd) {
-        d.setDate(d.getDate() + 2);
-        d.setMilliseconds(d.getMilliseconds() - 1);
-      }
-      return "".concat(padding(d.getDate()), ".").concat(padding(d.getMonth() + 1), ".").concat(padding(d.getFullYear()));
+    getValidSettings() {
+        const schedule = this.state.schedule;
+        // ----- from ---
+        return react_1.default.createElement("div", { className: this.props.classes.rowDiv },
+            react_1.default.createElement("div", { className: this.props.classes.modeDiv, style: { verticalAlign: 'middle' } },
+                react_1.default.createElement("span", { style: { fontWeight: 'bold', paddingRight: 10 } }, i18n_1.default.t('sch_valid')),
+                react_1.default.createElement("span", null, i18n_1.default.t('sch_validFrom'))),
+            react_1.default.createElement("div", { className: this.props.classes.settingsDiv },
+                react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.inputDate, style: { marginRight: 10 }, key: "exactTimeFrom", inputRef: this.refFrom, defaultValue: string2USdate(schedule.valid.from), type: "date", 
+                    // inputComponent={TextDate}
+                    onChange: e => {
+                        this.timerFrom && clearTimeout(this.timerFrom);
+                        if (this.refFrom.current) {
+                            this.refFrom.current.style.background = '#ff000030';
+                        }
+                        this.timerFrom = setTimeout(value => {
+                            this.timerFrom = null;
+                            if (this.refFrom.current) {
+                                this.refFrom.current.style.background = '';
+                            }
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            const date = Schedule.string2date(value);
+                            if (date.toString() !== 'Invalid Date') {
+                                _schedule.valid.from = `${padding(date.getDate())}.${padding(date.getMonth() + 1)}.${date.getFullYear()}`;
+                                this.onChange(_schedule);
+                            }
+                        }, 1500, e.target.value);
+                    }, InputLabelProps: { shrink: true }, margin: "normal" }),
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { className: this.props.classes.inputRadio, checked: !!schedule.valid.to, onClick: () => {
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            _schedule.valid.to = _schedule.valid.to ? '' : Schedule.now2string(true);
+                            this.onChange(_schedule);
+                        } }), label: i18n_1.default.t('sch_validTo') }),
+                !!schedule.valid.to && react_1.default.createElement(material_1.TextField, { variant: "standard", inputRef: this.refTo, className: this.props.classes.inputDate, style: { marginRight: 10 }, key: "exactTimeFrom", type: "date", defaultValue: string2USdate(schedule.valid.to), 
+                    // inputComponent={TextDate}
+                    onChange: e => {
+                        this.timerTo && clearTimeout(this.timerTo);
+                        if (this.refTo.current) {
+                            this.refTo.current.style.background = '#ff000030';
+                        }
+                        this.timerTo = setTimeout(value => {
+                            this.timerTo = null;
+                            if (this.refTo.current) {
+                                this.refTo.current.style.background = '';
+                            }
+                            const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
+                            const date = Schedule.string2date(value);
+                            if (date.toString() !== 'Invalid Date') {
+                                _schedule.valid.to = `${padding(date.getDate())}.${padding(date.getMonth() + 1)}.${date.getFullYear()}`;
+                                this.onChange(_schedule);
+                            }
+                        }, 1500, e.target.value);
+                    }, InputLabelProps: { shrink: true }, margin: "normal" })));
     }
-  }, {
-    key: "string2date",
-    value: function string2date(str) {
-      var parts = str.split('.'); // 31.12.2019
-      if (parts.length === 1) {
-        parts = str.split('-'); // 2018-12-31
-        return new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
-      }
-      return new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) - 1, parseInt(parts[0], 10));
+    render() {
+        return react_1.default.createElement("div", { style: { height: 'calc(100% - 48px)', width: '100%', overflow: 'hidden' } },
+            react_1.default.createElement("div", null, this.state.desc),
+            react_1.default.createElement("div", { className: this.props.classes.scrollWindow },
+                react_1.default.createElement("h5", null, i18n_1.default.t('sch_time')),
+                this.getTimePeriodElements(),
+                this.getTimeExactElements(),
+                this.getDivider(),
+                react_1.default.createElement("h5", null, i18n_1.default.t('sch_period')),
+                this.getPeriodModes(),
+                !this.state.schedule.period.once && this.getDivider(),
+                !this.state.schedule.period.once && this.getValidSettings()));
     }
-  }]);
-  return Schedule;
-}(_react["default"].Component);
-Schedule.propTypes = {
-  schedule: _propTypes["default"].string,
-  onChange: _propTypes["default"].func.isRequired
-};
-var _default = exports["default"] = (0, _styles.withStyles)(styles)(Schedule);
-//# sourceMappingURL=Schedule.js.map
+}
+exports.default = (0, styles_1.withStyles)(styles)(Schedule);