feat(core): added configuration of notification schedule to configura…

…tion

package.json

@@ -92,6 +92,7 @@
   },
   "dependencies": {
     "cz-format-extension": "^1.5.0",
-    "react-router-dom": "^6.4.2"
+    "react-router-dom": "^6.4.2",
+    "react-time-picker": "^6.5.0"
   }
 }

src/index.ts

@@ -9,7 +9,7 @@ import updateElectronApp from 'update-electron-app';
 import hasSquirrelStartupEvents from 'electron-squirrel-startup';
 import { store } from './store';
 import { initialize } from './i18n';
-import { NotificationsConfiguration } from './types/NotificationEnabled';
+import { NotificationConfiguration } from './types/NotificationEnabled';
 
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
@@ -39,19 +39,9 @@ app.setLoginItemSettings({
 app.on('ready', () => {
   initialize(app.getLocale()?.slice(0, 2) || 'en');
   const tray = new TrayMenu();
-  const notification = new NotificationManager(
-    (store.get('notificationSchedule') as NotificationsConfiguration) || {
-      datetime: [
-        { weekday: 0, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 1, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 2, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 3, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 4, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 5, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-        { weekday: 6, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
-      ],
-    }
-  );
+  const notification = new NotificationManager({
+    datetime: store.get('notificationSchedule') as Array<NotificationConfiguration>,
+  });
   const observerManager = new ObserverManager(tray, notification);
   observerManager.refershObservers();
   appManager.setTray(tray);

src/renderer/components/NotificationSchedule/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { NotificationConfiguration } from '../../../types/NotificationEnabled';
+import TimePicker from 'react-time-picker';
+import './style.css';
+
+export const NotificationSchedule = ({ schedules, translate, updateSchedules }: any) => {
+  const [localSchedule, setLocalSchedule] = useState(schedules);
+  const update = (fieldName: string, index: number, value: any) => {
+    console.log(value);
+    setLocalSchedule(
+      localSchedule.map((schedule: NotificationConfiguration, currentIndex: number) =>
+        currentIndex != index ? schedule : { ...schedule, [fieldName]: value }
+      )
+    );
+  };
+  return (
+    <>
+      {localSchedule.map((schedule: NotificationConfiguration, index: number) => (
+        <Stack
+          spacing={1}
+          justifyContent="space-between"
+          direction="row"
+          margin={'1rem 0'}
+          key={`notification-schedule-${index}`}
+        >
+          <Select
+            sx={{
+              flexBasis: '25%',
+            }}
+            value={schedule.weekday}
+            label={translate('Weekday')}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => update('weekday', index, event.target.value)}
+          >
+            <MenuItem value={1}>{translate('Monday')}</MenuItem>
+            <MenuItem value={2}>{translate('Tuesday')}</MenuItem>
+            <MenuItem value={3}>{translate('Wednesday')}</MenuItem>
+            <MenuItem value={4}>{translate('Thursday')}</MenuItem>
+            <MenuItem value={5}>{translate('Friday')}</MenuItem>
+            <MenuItem value={6}>{translate('Saturday')}</MenuItem>
+            <MenuItem value={0}>{translate('Sunday')}</MenuItem>
+          </Select>
+          <TimePicker
+            disableClock
+            clearIcon={null}
+            value={`${schedule.enableTime.hour}:${schedule.enableTime.minute}`}
+            onChange={(value) =>
+              update('enableTime', index, { hour: Number(value.substring(0, 2)), minute: Number(value.substring(3)) })
+            }
+          />
+          <TimePicker
+            disableClock
+            clearIcon={null}
+            value={`${schedule.disableTime.hour}:${schedule.disableTime.minute}`}
+            onChange={(value) =>
+              update('disableTime', index, { hour: Number(value.substring(0, 2)), minute: Number(value.substring(3)) })
+            }
+          />
+          <Button
+            variant="contained"
+            sx={{
+              flexBasis: '20%',
+            }}
+            onClick={() =>
+              setLocalSchedule(localSchedule.filter((_: any, currentIndex: number) => currentIndex != index))
+            }
+          >
+            {translate('Delete')}
+          </Button>
+        </Stack>
+      ))}
+      <Stack spacing={2} direction="row">
+        <Button
+          variant="contained"
+          onClick={() =>
+            setLocalSchedule([
+              ...localSchedule,
+              { weekday: 0, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+            ])
+          }
+          sx={{
+            flexBasis: '50%',
+          }}
+        >
+          {translate('Add')}
+        </Button>
+        <Button
+          variant="contained"
+          sx={{
+            flexBasis: '50%',
+          }}
+          onClick={() => updateSchedules(localSchedule)}
+        >
+          {translate('Save')}
+        </Button>
+      </Stack>
+    </>
+  );
+};

src/renderer/components/NotificationSchedule/style.css

@@ -0,0 +1,113 @@
+.react-time-picker {
+  display: inline-flex;
+  position: relative;
+}
+
+.react-time-picker,
+.react-time-picker *,
+.react-time-picker *:before,
+.react-time-picker *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-time-picker--disabled {
+  background-color: #f0f0f0;
+  color: #6d6d6d;
+}
+
+.react-time-picker__wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  border: thin solid gray;
+}
+
+.react-time-picker__inputGroup {
+  min-width: calc((4px * 3) + 0.217em * 2);
+  flex-grow: 1;
+  padding: 0 20px;
+  box-sizing: content-box;
+}
+
+.react-time-picker__inputGroup__divider {
+  padding: 1px 0;
+  white-space: pre;
+}
+
+.react-time-picker__inputGroup__divider,
+.react-time-picker__inputGroup__leadingZero {
+  display: inline-block;
+}
+
+.react-time-picker__inputGroup__input {
+  min-width: 0.54em;
+  height: 100%;
+  position: relative;
+  padding: 0 1px;
+  border: 0;
+  background: none;
+  color: currentColor;
+  font: inherit;
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.react-time-picker__inputGroup__input::-webkit-outer-spin-button,
+.react-time-picker__inputGroup__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.react-time-picker__inputGroup__input:invalid {
+  background: rgba(255, 0, 0, 0.1);
+}
+
+.react-time-picker__inputGroup__amPm {
+  font: inherit;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  appearance: menulist;
+}
+
+.react-time-picker__button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.react-time-picker__button:enabled {
+  cursor: pointer;
+}
+
+.react-time-picker__button:enabled:hover .react-time-picker__button__icon,
+.react-time-picker__button:enabled:focus .react-time-picker__button__icon {
+  stroke: #0078d7;
+}
+
+.react-time-picker__button:disabled .react-time-picker__button__icon {
+  stroke: #6d6d6d;
+}
+
+.react-time-picker__button svg {
+  display: inherit;
+}
+
+.react-time-picker__clock {
+  width: 200px;
+  height: 200px;
+  max-width: 100vw;
+  padding: 25px;
+  background-color: white;
+  border: thin solid #a0a096;
+  z-index: 1;
+}
+
+.react-time-picker__clock--closed {
+  display: none;
+}

src/renderer/pages/General/helpers/storage.ts

@@ -1,3 +1,5 @@
+import { NotificationConfiguration } from '../../../../types/NotificationEnabled';
+
 export const storage = (electron: any) => ({
   saveAutoupdate: (autoupdate: boolean): void => {
     electron.store.set('autoupdate', autoupdate);
@@ -11,6 +13,12 @@ export const storage = (electron: any) => ({
   getAutostart: (): boolean => {
     return electron.store.get('autostart');
   },
+  saveNotificationSchedule: (schedule: Array<NotificationConfiguration>): void => {
+    electron.store.set('notificationSchedule', schedule);
+  },
+  getNotificationSchedule: (): Array<NotificationConfiguration> => {
+    return electron.store.get('notificationSchedule');
+  },
   importConfig: (): boolean => {
     return electron.store.import();
   },

src/renderer/pages/General/index.tsx

@@ -5,14 +5,27 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import { storage } from './helpers/storage';
+import { NotificationSchedule } from '../../components/NotificationSchedule';
 
 export const General = () => {
   const { translate } = window.electron.translations;
-  const { getAutoupdate, saveAutoupdate, getAutostart, saveAutostart, importConfig, exportConfig } = storage(
-    window.electron
-  );
+  const {
+    getAutoupdate,
+    saveAutoupdate,
+    getAutostart,
+    saveAutostart,
+    getNotificationSchedule,
+    saveNotificationSchedule,
+    importConfig,
+    exportConfig,
+  } = storage(window.electron);
   const [autoupdate, setAutoupdate] = useState(getAutoupdate());
   const [autostart, setAutostart] = useState(getAutostart());
+  const [notificationSchedule, setNotificationSchedule] = useState(getNotificationSchedule());
+  const updateNotificationSchedule = (notificationSchedule: any) => {
+    saveNotificationSchedule(notificationSchedule);
+    setNotificationSchedule(notificationSchedule);
+  };
   return (
     <Stack>
       <Divider sx={{ mb: 2 }}>{translate('Update')}</Divider>
@@ -40,6 +53,12 @@ export const General = () => {
         }
         label={translate('Auto Update')}
       />
+      <Divider sx={{ my: 2 }}>{translate('Notification Enabled Schedule')}</Divider>
+      <NotificationSchedule
+        schedules={notificationSchedule}
+        translate={translate}
+        updateSchedules={updateNotificationSchedule}
+      />
       <Divider sx={{ my: 2 }}>{translate('Backup')}</Divider>
       <Stack spacing={2} direction="row">
         <Button variant="contained" onClick={importConfig}>

src/store.ts

@@ -18,24 +18,36 @@ const schema: any = {
     default: true,
   },
   notificationSchedule: {
-    type: 'object',
-    properties: {
-      weekday: { type: 'number' },
-      enableTime: {
-        type: 'object',
-        properties: {
-          hour: { type: 'number' },
-          minute: { type: 'number' },
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {
+        weekday: { type: 'number' },
+        enableTime: {
+          type: 'object',
+          properties: {
+            hour: { type: 'number' },
+            minute: { type: 'number' },
+          },
         },
-      },
-      disableTime: {
-        type: 'object',
-        properties: {
-          hour: { type: 'number' },
-          minute: { type: 'number' },
+        disableTime: {
+          type: 'object',
+          properties: {
+            hour: { type: 'number' },
+            minute: { type: 'number' },
+          },
         },
       },
     },
+    default: [
+      { weekday: 0, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 1, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 2, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 3, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 4, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 5, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+      { weekday: 6, enableTime: { hour: 0, minute: 0 }, disableTime: { hour: 23, minute: 59 } },
+    ],
   },
 };