Add report scheduling

1 files changed, 120 insertions, 78 deletions

diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 67ea3d2f..6ffb56d9 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
 } from '@mui/material';
@@ -8,8 +8,9 @@ import { useTranslation } from '../../common/components/LocalizationProvider';
 import useReportStyles from '../common/useReportStyles';
 import { reportsActions } from '../../store';
 import SplitButton from '../../common/components/SplitButton';
+import SelectField from '../../common/components/SelectField';
 
-const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDevice, includeGroups }) => {
+const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignoreDevice, multiDevice, includeGroups }) => {
   const classes = useReportStyles();
   const dispatch = useDispatch();
   const t = useTranslation();
@@ -29,51 +30,65 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
   const period = useSelector((state) => state.reports.period);
   const from = useSelector((state) => state.reports.from);
   const to = useSelector((state) => state.reports.to);
+  const button = useSelector((state) => state.reports.button);
 
-  const disabled = !ignoreDevice && !selectedDeviceId && !deviceId && !deviceIds.length && !groupIds.length;
+  const [description, setDescription] = useState();
+  const [calendarId, setCalendarId] = useState();
+
+  const scheduleDisabled = button === 'schedule' && (!description || !calendarId);
+  const disabled = (!ignoreDevice && !selectedDeviceId && !deviceId && !deviceIds.length && !groupIds.length) || scheduleDisabled;
 
   const handleClick = (type) => {
-    let selectedFrom;
-    let selectedTo;
-    switch (period) {
-      case 'today':
-        selectedFrom = moment().startOf('day');
-        selectedTo = moment().endOf('day');
-        break;
-      case 'yesterday':
-        selectedFrom = moment().subtract(1, 'day').startOf('day');
-        selectedTo = moment().subtract(1, 'day').endOf('day');
-        break;
-      case 'thisWeek':
-        selectedFrom = moment().startOf('week');
-        selectedTo = moment().endOf('week');
-        break;
-      case 'previousWeek':
-        selectedFrom = moment().subtract(1, 'week').startOf('week');
-        selectedTo = moment().subtract(1, 'week').endOf('week');
-        break;
-      case 'thisMonth':
-        selectedFrom = moment().startOf('month');
-        selectedTo = moment().endOf('month');
-        break;
-      case 'previousMonth':
-        selectedFrom = moment().subtract(1, 'month').startOf('month');
-        selectedTo = moment().subtract(1, 'month').endOf('month');
-        break;
-      default:
-        selectedFrom = moment(from, moment.HTML5_FMT.DATETIME_LOCAL);
-        selectedTo = moment(to, moment.HTML5_FMT.DATETIME_LOCAL);
-        break;
-    }
+    if (type === 'schedule') {
+      handleSchedule(deviceIds, groupIds, {
+        description,
+        calendarId,
+        attributes: {},
+      });
+    } else {
+      let selectedFrom;
+      let selectedTo;
+      switch (period) {
+        case 'today':
+          selectedFrom = moment().startOf('day');
+          selectedTo = moment().endOf('day');
+          break;
+        case 'yesterday':
+          selectedFrom = moment().subtract(1, 'day').startOf('day');
+          selectedTo = moment().subtract(1, 'day').endOf('day');
+          break;
+        case 'thisWeek':
+          selectedFrom = moment().startOf('week');
+          selectedTo = moment().endOf('week');
+          break;
+        case 'previousWeek':
+          selectedFrom = moment().subtract(1, 'week').startOf('week');
+          selectedTo = moment().subtract(1, 'week').endOf('week');
+          break;
+        case 'thisMonth':
+          selectedFrom = moment().startOf('month');
+          selectedTo = moment().endOf('month');
+          break;
+        case 'previousMonth':
+          selectedFrom = moment().subtract(1, 'month').startOf('month');
+          selectedTo = moment().subtract(1, 'month').endOf('month');
+          break;
+        default:
+          selectedFrom = moment(from, moment.HTML5_FMT.DATETIME_LOCAL);
+          selectedTo = moment(to, moment.HTML5_FMT.DATETIME_LOCAL);
+          break;
+      }
 
-    handleSubmit({
-      deviceId,
-      deviceIds,
-      groupIds,
-      from: selectedFrom.toISOString(),
-      to: selectedTo.toISOString(),
-      type,
-    });
+      handleSubmit({
+        deviceId,
+        deviceIds,
+        groupIds,
+        from: selectedFrom.toISOString(),
+        to: selectedTo.toISOString(),
+        calendarId,
+        type,
+      });
+    }
   };
 
   return (
@@ -112,41 +127,65 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
           </FormControl>
         </div>
       )}
-      <div className={classes.filterItem}>
-        <FormControl fullWidth>
-          <InputLabel>{t('reportPeriod')}</InputLabel>
-          <Select label={t('reportPeriod')} value={period} onChange={(e) => dispatch(reportsActions.updatePeriod(e.target.value))}>
-            <MenuItem value="today">{t('reportToday')}</MenuItem>
-            <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-            <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-            <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-            <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-            <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-            <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-          </Select>
-        </FormControl>
-      </div>
-      {period === 'custom' && (
-        <div className={classes.filterItem}>
-          <TextField
-            label={t('reportFrom')}
-            type="datetime-local"
-            value={from}
-            onChange={(e) => dispatch(reportsActions.updateFrom(e.target.value))}
-            fullWidth
-          />
-        </div>
-      )}
-      {period === 'custom' && (
-        <div className={classes.filterItem}>
-          <TextField
-            label={t('reportTo')}
-            type="datetime-local"
-            value={to}
-            onChange={(e) => dispatch(reportsActions.updateTo(e.target.value))}
-            fullWidth
-          />
-        </div>
+      {button !== 'schedule' ? (
+        <>
+          <div className={classes.filterItem}>
+            <FormControl fullWidth>
+              <InputLabel>{t('reportPeriod')}</InputLabel>
+              <Select label={t('reportPeriod')} value={period} onChange={(e) => dispatch(reportsActions.updatePeriod(e.target.value))}>
+                <MenuItem value="today">{t('reportToday')}</MenuItem>
+                <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+                <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+                <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+                <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+                <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+                <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+          {period === 'custom' && (
+            <div className={classes.filterItem}>
+              <TextField
+                label={t('reportFrom')}
+                type="datetime-local"
+                value={from}
+                onChange={(e) => dispatch(reportsActions.updateFrom(e.target.value))}
+                fullWidth
+              />
+            </div>
+          )}
+          {period === 'custom' && (
+            <div className={classes.filterItem}>
+              <TextField
+                label={t('reportTo')}
+                type="datetime-local"
+                value={to}
+                onChange={(e) => dispatch(reportsActions.updateTo(e.target.value))}
+                fullWidth
+              />
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div className={classes.filterItem}>
+            <TextField
+              value={description || ''}
+              onChange={(event) => setDescription(event.target.value)}
+              label={t('sharedDescription')}
+              fullWidth
+            />
+          </div>
+          <div className={classes.filterItem}>
+            <SelectField
+              value={calendarId || 0}
+              onChange={(event) => setCalendarId(Number(event.target.value))}
+              endpoint="/api/calendars"
+              label={t('sharedCalendar')}
+              fullWidth
+            />
+          </div>
+        </>
       )}
       {children}
       <div className={classes.filterItem}>
@@ -167,10 +206,13 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
             color="secondary"
             disabled={disabled}
             onClick={handleClick}
+            selected={button}
+            setSelected={(value) => dispatch(reportsActions.updateButton(value))}
             options={{
               json: t('reportShow'),
               export: t('reportExport'),
               mail: t('reportEmail'),
+              schedule: t('reportSchedule'),
             }}
           />
         )}