-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pull request 1907: 951-blocked-services-schedule-api
Updates #951. Squashed commit of the following: commit 6b840fd Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Aug 29 19:53:03 2023 +0300 client: imp docs more commit 7fc8f03 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Aug 29 19:40:00 2023 +0300 client: imp docs commit 00bc14d Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 18:43:49 2023 +0300 try to fix lock file commit d749df7 Merge: c69f923 e1f6229 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Mon Aug 28 18:14:02 2023 +0300 Merge branch 'master' into 951-blocked-services-schedule-api commit c69f923 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 17:16:20 2023 +0300 revert eslintrc commit b37916c Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 12:02:39 2023 +0300 fix translations commit f5bb67d Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 11:43:57 2023 +0300 fix helpers commit 13ec6a8 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 11:24:57 2023 +0300 remove todo commit 23724ec Author: Ildar Kamalov <ik@adguard.com> Date: Mon Aug 28 09:56:56 2023 +0300 add clients schedule form commit 84d29e5 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Aug 25 17:44:40 2023 +0300 fix schedule form commit 83e4017 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Aug 18 12:58:16 2023 +0300 remove unused commit ef2b68e Author: Ildar Kamalov <ik@adguard.com> Date: Fri Aug 18 12:57:37 2023 +0300 client: fix translation string commit 32ea80c Author: Ildar Kamalov <ik@adguard.com> Date: Fri Aug 18 12:26:26 2023 +0300 wip schedule commit 9b77087 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Fri Jul 21 14:29:50 2023 +0300 all: imp naming commit ea4e951 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Wed Jul 19 18:09:27 2023 +0300 all: imp code commit 98a705b Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Jul 18 18:23:26 2023 +0300 all: imp naming commit 4f84b55 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Fri Jul 14 15:01:17 2023 +0300 all: add global schedule api commit 87cf164 Merge: cabb80a 2adc862 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Fri Jul 14 12:09:29 2023 +0300 Merge branch 'master' into 951-blocked-services-schedule-api commit cabb80a Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 13 13:37:23 2023 +0300 openapi: fix typo commit 2279b03 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 13 12:26:19 2023 +0300 all: imp docs ... and 3 more commits
- Loading branch information
Showing
54 changed files
with
1,506 additions
and
209 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "extends": ".eslintrc", | ||
| "rules": { | ||
| "no-debugger":"warn", | ||
| "no-debugger":"warn" | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
220 changes: 220 additions & 0 deletions
220
client/src/components/Filters/Services/ScheduleForm/Modal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import ReactModal from 'react-modal'; | ||
|
|
||
| import { Timezone } from './Timezone'; | ||
| import { TimeSelect } from './TimeSelect'; | ||
| import { TimePeriod } from './TimePeriod'; | ||
| import { getFullDayName, getShortDayName } from './helpers'; | ||
| import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants'; | ||
|
|
||
| export const DAYS_OF_WEEK = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; | ||
|
|
||
| const INITIAL_START_TIME_MS = 0; | ||
| const INITIAL_END_TIME_MS = 86340000; | ||
|
|
||
| export const Modal = ({ | ||
| isOpen, | ||
| currentDay, | ||
| schedule, | ||
| onClose, | ||
| onSubmit, | ||
| }) => { | ||
| const [t] = useTranslation(); | ||
|
|
||
| const intialTimezone = schedule.time_zone === LOCAL_TIMEZONE_VALUE | ||
| ? Intl.DateTimeFormat().resolvedOptions().timeZone | ||
| : schedule.time_zone; | ||
|
|
||
| const [timezone, setTimezone] = useState(intialTimezone); | ||
| const [days, setDays] = useState(new Set()); | ||
|
|
||
| const [startTime, setStartTime] = useState(INITIAL_START_TIME_MS); | ||
| const [endTime, setEndTime] = useState(INITIAL_END_TIME_MS); | ||
|
|
||
| const [wrongPeriod, setWrongPeriod] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| if (currentDay) { | ||
| const newDays = new Set([currentDay]); | ||
| setDays(newDays); | ||
|
|
||
| setStartTime(schedule[currentDay].start); | ||
| setEndTime(schedule[currentDay].end); | ||
| } | ||
| }, [currentDay]); | ||
|
|
||
| useEffect(() => { | ||
| if (startTime >= endTime) { | ||
| setWrongPeriod(true); | ||
| } else { | ||
| setWrongPeriod(false); | ||
| } | ||
| }, [startTime, endTime]); | ||
|
|
||
| const addDays = (day) => { | ||
| const newDays = new Set(days); | ||
|
|
||
| if (newDays.has(day)) { | ||
| newDays.delete(day); | ||
| } else { | ||
| newDays.add(day); | ||
| } | ||
|
|
||
| setDays(newDays); | ||
| }; | ||
|
|
||
| const activeDay = (day) => { | ||
| return days.has(day); | ||
| }; | ||
|
|
||
| const onFormSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (currentDay) { | ||
| const newSchedule = schedule; | ||
|
|
||
| Array.from(days).forEach((day) => { | ||
| newSchedule[day] = { | ||
| start: startTime, | ||
| end: endTime, | ||
| }; | ||
| }); | ||
|
|
||
| onSubmit(newSchedule); | ||
| } else { | ||
| const newSchedule = { | ||
| time_zone: timezone, | ||
| }; | ||
|
|
||
| Array.from(days).forEach((day) => { | ||
| newSchedule[day] = { | ||
| start: startTime, | ||
| end: endTime, | ||
| }; | ||
| }); | ||
|
|
||
| onSubmit(newSchedule); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <ReactModal | ||
| className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--schedule" | ||
| closeTimeoutMS={0} | ||
| isOpen={isOpen} | ||
| onRequestClose={onClose} | ||
| > | ||
| <div className="modal-content"> | ||
| <div className="modal-header"> | ||
| <h4 className="modal-title"> | ||
| {currentDay ? t('schedule_edit') : t('schedule_new')} | ||
| </h4> | ||
| <button type="button" className="close" onClick={onClose}> | ||
| <span className="sr-only">Close</span> | ||
| </button> | ||
| </div> | ||
| <form onSubmit={onFormSubmit}> | ||
| <div className="modal-body"> | ||
| <Timezone | ||
| timezone={timezone} | ||
| setTimezone={setTimezone} | ||
| /> | ||
|
|
||
| <div className="schedule__days"> | ||
| {DAYS_OF_WEEK.map((day) => ( | ||
| <button | ||
| type="button" | ||
| key={day} | ||
| className="btn schedule__button-day" | ||
| data-active={activeDay(day)} | ||
| onClick={() => addDays(day)} | ||
| > | ||
| {getShortDayName(t, day)} | ||
| </button> | ||
| )) } | ||
| </div> | ||
|
|
||
| <div className="schedule__time-wrap"> | ||
| <div className="schedule__time-row"> | ||
| <TimeSelect | ||
| value={startTime} | ||
| onChange={(v) => setStartTime(v)} | ||
| /> | ||
|
|
||
| <TimeSelect | ||
| value={endTime} | ||
| onChange={(v) => setEndTime(v)} | ||
| /> | ||
| </div> | ||
|
|
||
| {wrongPeriod && ( | ||
| <div className="schedule__error"> | ||
| {t('schedule_invalid_select')} | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="schedule__info"> | ||
| <div className="schedule__info-title"> | ||
| {t('schedule_modal_time_off')} | ||
| </div> | ||
| <div className="schedule__info-row"> | ||
| <svg className="icons schedule__info-icon"> | ||
| <use xlinkHref="#calendar" /> | ||
| </svg> | ||
| {days.size ? ( | ||
| Array.from(days).map((day) => getFullDayName(t, day)).join(', ') | ||
| ) : ( | ||
| <span> | ||
| — | ||
| </span> | ||
| )} | ||
| </div> | ||
| <div className="schedule__info-row"> | ||
| <svg className="icons schedule__info-icon"> | ||
| <use xlinkHref="#watch" /> | ||
| </svg> | ||
| {wrongPeriod ? ( | ||
| <span> | ||
| — | ||
| </span> | ||
| ) : ( | ||
| <TimePeriod | ||
| startTimeMs={startTime} | ||
| endTimeMs={endTime} | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="schedule__notice"> | ||
| {t('schedule_modal_description')} | ||
| </div> | ||
| </div> | ||
| <div className="modal-footer"> | ||
| <div className="btn-list"> | ||
| <button | ||
| type="button" | ||
| className="btn btn-success btn-standard" | ||
| disabled={days.size === 0 || wrongPeriod} | ||
| onClick={onFormSubmit} | ||
| > | ||
| {currentDay ? t('schedule_save') : t('schedule_add')} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </ReactModal> | ||
| ); | ||
| }; | ||
|
|
||
| Modal.propTypes = { | ||
| schedule: PropTypes.object.isRequired, | ||
| currentDay: PropTypes.string, | ||
| isOpen: PropTypes.bool.isRequired, | ||
| onClose: PropTypes.func.isRequired, | ||
| onSubmit: PropTypes.func.isRequired, | ||
| }; |
25 changes: 25 additions & 0 deletions
25
client/src/components/Filters/Services/ScheduleForm/TimePeriod.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { getTimeFromMs } from './helpers'; | ||
|
|
||
| export const TimePeriod = ({ | ||
| startTimeMs, | ||
| endTimeMs, | ||
| }) => { | ||
| const startTime = getTimeFromMs(startTimeMs); | ||
| const endTime = getTimeFromMs(endTimeMs); | ||
|
|
||
| return ( | ||
| <div className="schedule__time"> | ||
| <time>{startTime.hours}:{startTime.minutes}</time> | ||
| – | ||
| <time>{endTime.hours}:{endTime.minutes}</time> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| TimePeriod.propTypes = { | ||
| startTimeMs: PropTypes.number.isRequired, | ||
| endTimeMs: PropTypes.number.isRequired, | ||
| }; |
Oops, something went wrong.