\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \r\n
\r\n :\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Warning
\r\n \r\n\r\n
\r\n {bookState.Message}
\r\n\r\n \r\n
\r\n \r\n
\r\n )\r\n :\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
;\r\n}\r\n\r\nexport default BookingLessonModal;","'use strict';\nvar $ = require('../internals/export');\nvar toInteger = require('../internals/to-integer');\nvar thisNumberValue = require('../internals/this-number-value');\nvar repeat = require('../internals/string-repeat');\nvar fails = require('../internals/fails');\n\nvar nativeToFixed = 1.0.toFixed;\nvar floor = Math.floor;\n\nvar pow = function (x, n, acc) {\n return n === 0 ? acc : n % 2 === 1 ? pow(x, n - 1, acc * x) : pow(x * x, n / 2, acc);\n};\n\nvar log = function (x) {\n var n = 0;\n var x2 = x;\n while (x2 >= 4096) {\n n += 12;\n x2 /= 4096;\n }\n while (x2 >= 2) {\n n += 1;\n x2 /= 2;\n } return n;\n};\n\nvar FORCED = nativeToFixed && (\n 0.00008.toFixed(3) !== '0.000' ||\n 0.9.toFixed(0) !== '1' ||\n 1.255.toFixed(2) !== '1.25' ||\n 1000000000000000128.0.toFixed(0) !== '1000000000000000128'\n) || !fails(function () {\n // V8 ~ Android 4.3-\n nativeToFixed.call({});\n});\n\n// `Number.prototype.toFixed` method\n// https://tc39.github.io/ecma262/#sec-number.prototype.tofixed\n$({ target: 'Number', proto: true, forced: FORCED }, {\n // eslint-disable-next-line max-statements\n toFixed: function toFixed(fractionDigits) {\n var number = thisNumberValue(this);\n var fractDigits = toInteger(fractionDigits);\n var data = [0, 0, 0, 0, 0, 0];\n var sign = '';\n var result = '0';\n var e, z, j, k;\n\n var multiply = function (n, c) {\n var index = -1;\n var c2 = c;\n while (++index < 6) {\n c2 += n * data[index];\n data[index] = c2 % 1e7;\n c2 = floor(c2 / 1e7);\n }\n };\n\n var divide = function (n) {\n var index = 6;\n var c = 0;\n while (--index >= 0) {\n c += data[index];\n data[index] = floor(c / n);\n c = (c % n) * 1e7;\n }\n };\n\n var dataToString = function () {\n var index = 6;\n var s = '';\n while (--index >= 0) {\n if (s !== '' || index === 0 || data[index] !== 0) {\n var t = String(data[index]);\n s = s === '' ? t : s + repeat.call('0', 7 - t.length) + t;\n }\n } return s;\n };\n\n if (fractDigits < 0 || fractDigits > 20) throw RangeError('Incorrect fraction digits');\n // eslint-disable-next-line no-self-compare\n if (number != number) return 'NaN';\n if (number <= -1e21 || number >= 1e21) return String(number);\n if (number < 0) {\n sign = '-';\n number = -number;\n }\n if (number > 1e-21) {\n e = log(number * pow(2, 69, 1)) - 69;\n z = e < 0 ? number * pow(2, -e, 1) : number / pow(2, e, 1);\n z *= 0x10000000000000;\n e = 52 - e;\n if (e > 0) {\n multiply(0, z);\n j = fractDigits;\n while (j >= 7) {\n multiply(1e7, 0);\n j -= 7;\n }\n multiply(pow(10, j, 1), 0);\n j = e - 1;\n while (j >= 23) {\n divide(1 << 23);\n j -= 23;\n }\n divide(1 << j);\n multiply(1, 1);\n divide(2);\n result = dataToString();\n } else {\n multiply(0, z);\n multiply(1 << -e, 0);\n result = dataToString() + repeat.call('0', fractDigits);\n }\n }\n if (fractDigits > 0) {\n k = result.length;\n result = sign + (k <= fractDigits\n ? '0.' + repeat.call('0', fractDigits - k) + result\n : result.slice(0, k - fractDigits) + '.' + result.slice(k - fractDigits));\n } else {\n result = sign + result;\n } return result;\n }\n});\n","var classof = require('../internals/classof-raw');\n\n// `thisNumberValue` abstract operation\n// https://tc39.github.io/ecma262/#sec-thisnumbervalue\nmodule.exports = function (value) {\n if (typeof value != 'number' && classof(value) != 'Number') {\n throw TypeError('Incorrect invocation');\n }\n return +value;\n};\n","'use strict';\nvar toInteger = require('../internals/to-integer');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\n// `String.prototype.repeat` method implementation\n// https://tc39.github.io/ecma262/#sec-string.prototype.repeat\nmodule.exports = ''.repeat || function repeat(count) {\n var str = String(requireObjectCoercible(this));\n var result = '';\n var n = toInteger(count);\n if (n < 0 || n == Infinity) throw RangeError('Wrong number of repetitions');\n for (;n > 0; (n >>>= 1) && (str += str)) if (n & 1) result += str;\n return result;\n};\n","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { GetScheduleTeacherAPI } from \"~src/api/studentAPI\"\r\nimport { toast } from 'react-toastify'\r\nimport 'react-toastify/scss/main.scss'\r\nimport { toastInit } from \"~src/utils\"\r\nimport { BOOKING_SUCCESS } from '~components/common/Constant/toast'\r\n\r\nconst ListSchedule = ({\r\n learnTime,\r\n TeacherUID,\r\n TeacherIMG,\r\n TeacherName,\r\n Rate,\r\n date,\r\n Start,\r\n End,\r\n handleBooking,\r\n onBookTeacherUID,\r\n onBookStudyTimeID,\r\n onBookDate,\r\n}) => {\r\n const [scheduleList, setSchedule] = useState([])\r\n const [loading, setLoading] = useState(false)\r\n const bookingToast = () => toast.success(BOOKING_SUCCESS, toastInit);\r\n\r\n\r\n const onHandleBooking = (StudyTimeID, LessionName, TeacherUID, TeacherIMG, TeacherName, Rate, date, start, end, BookingID) => {\r\n handleBooking(StudyTimeID, LessionName, TeacherUID, TeacherIMG, TeacherName, Rate, date, start, end, BookingID)\r\n }\r\n\r\n const getAPI = async (params) => {\r\n setLoading(true);\r\n const res = await GetScheduleTeacherAPI(params);\r\n if(res.Code === 1) {\r\n setSchedule(res.Data);\r\n }\r\n setLoading(false);\r\n }\r\n useEffect(() => {\r\n getAPI({\r\n TeacherUID,\r\n Date: date,\r\n Start,\r\n End,\r\n })\r\n }, [])\r\n\r\n useEffect(() => {\r\n let newSchedule = [...scheduleList]\r\n\r\n let index = newSchedule.findIndex(i =>\r\n i.StudyTimeID == onBookStudyTimeID &&\r\n i.TeacherUID == onBookTeacherUID &&\r\n moment(i.Start).format(\"DD/MM/YYYY\") == onBookDate);\r\n\r\n if (index !== -1) {\r\n newSchedule[index].bookStatus = true;\r\n setSchedule(newSchedule);\r\n bookingToast();\r\n }\r\n }, [onBookTeacherUID, onBookStudyTimeID, onBookDate])\r\n\r\n return loading ? \r\n
\r\n \r\n
\r\n \r\n
\r\n Warning
\r\n \r\n\r\n
\r\n Đã có lỗi xảy ra, xin vui lòng thử lại
\r\n\r\n \r\n
\r\n \r\n
\r\n: <>\r\n {\r\n !!scheduleList && !!learnTime && learnTime.length > 0 && learnTime.map((item, index) => {\r\n let bookedFilter = scheduleList.filter(item => item.bookStatus)\r\n let availableFilter = scheduleList.filter(item => !item.bookStatus && item.available)\r\n\r\n let status = \"\";\r\n let StudyTimeID = \"\";\r\n let BookingID = \"\";\r\n let LessionName = \"\";\r\n let start = \"\";\r\n let end = \"\";\r\n bookedFilter.map(x => {\r\n if (new Date(x.Start).getHours() === parseInt(item.split(\":\")[0]) &&\r\n new Date(x.Start).getMinutes() === parseInt(item.split(\":\")[1]))\r\n status = \"registed\"\r\n })\r\n availableFilter.map(x => {\r\n if (new Date(x.Start).getHours() === parseInt(item.split(\":\")[0]) &&\r\n new Date(x.Start).getMinutes() === parseInt(item.split(\":\")[1])) {\r\n start = new Date(x.Start)\r\n end = new Date(x.End)\r\n StudyTimeID = x.StudyTimeID;\r\n BookingID = x.BookingID;\r\n LessionName = x.title;\r\n status = \"available\"\r\n }\r\n })\r\n return \r\n
\r\n
\r\n \r\n}\r\n\r\nexport default ListNation;\r\n","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport Select from 'react-select'\r\nimport ListSchedule from \"./ListSchedule\"\r\nimport { getListTeacher } from \"~src/api/studentAPI\"\r\nimport { getLevelPurposeOptions } from \"~src/api/optionAPI\"\r\nimport Pagination from \"react-js-pagination\"\r\n\r\nimport BookingLessonModal from \"../BookingLessonModal\"\r\nimport ListNationModal from \"~components/ListNationModal\"\r\n\r\nimport { toast } from 'react-toastify'\r\nimport 'react-toastify/scss/main.scss'\r\nimport { toastInit } from \"~src/utils\"\r\nimport {appSettings} from '~src/config'\r\n\r\nimport { nationMapToFlag } from \"~src/utils\"\r\nimport { ToastContainer } from 'react-toastify'\r\nimport Flatpickr from 'react-flatpickr'\r\n\r\nimport styles from '~components/StudentBooking/BookingLesson.module.scss'\r\n\r\nconst initialState = {\r\n nation: [],\r\n gender: \"0\",\r\n levelPurpose: [],\r\n selectedLevelPurpose: [],\r\n date: moment(new Date()).format('DD/MM/YYYY'),\r\n startTime: `${new Date().getHours() + 1}:00`,\r\n endTime: \"23:00\",\r\n searchText: \"\",\r\n}\r\n\r\nconst initialBookLesson = {\r\n StudyTimeID: \"\",\r\n LessionName: \"\",\r\n TeacherUID: \"\",\r\n TeacherIMG: \"\",\r\n TeacherName: \"\",\r\n Rate: \"\",\r\n date: \"\",\r\n start: \"\",\r\n end: \"\",\r\n BookingID: \"\",\r\n}\r\n\r\nconst initialOnBookState = {\r\n TeacherUID: \"\",\r\n StudyTimeID: \"\",\r\n date: \"\",\r\n}\r\n\r\nconst reducer = (prevState, { type, payload }) => {\r\n switch (type) {\r\n case \"STATE_CHANGE\": {\r\n return {\r\n ...prevState,\r\n [payload.key]: payload.value\r\n }\r\n }\r\n default: return prevState;\r\n break;\r\n }\r\n}\r\n\r\nconst BookingLesson = () => {\r\n const [state, dispatch] = useReducer(reducer, initialState);\r\n const [teachersList, setTeacherList] = useState(null)\r\n const [loading, setLoading] = useState(false)\r\n const [onBookState, setOnBookState] = useState(initialOnBookState)\r\n const [stateBookLesson, setStateBookLesson] = useState(initialBookLesson);\r\n const [learnTime, setLearnTime] = useState([]);\r\n\r\n const [page, setPage] = useState(1);\r\n const [pageSize, setPageSize] = useState(0);\r\n const [totalResult, setTotalResult] = useState(0);\r\n\r\n const errorToast = () => toast.error(\"Đã có lỗi xảy ra, xin vui lòng thử lại\", toastInit);\r\n\r\n const getAPI = async (params) => {\r\n setLoading(true);\r\n const res = await getListTeacher(params);\r\n if (res.Code === 1) {\r\n setTeacherList(res.Data);\r\n setPageSize(res.PageSize);\r\n setTotalResult(res.TotalResult)\r\n }\r\n else errorToast();\r\n setLoading(false);\r\n }\r\n\r\n const renderLevelPurpose = (options) => {\r\n return options.map(item => item.PurposeLevelName)\r\n }\r\n\r\n const fetchListLevelPurpose = async () => {\r\n const res = await getLevelPurposeOptions();\r\n if (res.Code === 1 && res.Data.length > 0) {\r\n let key = \"levelPurpose\";\r\n const value = res.Data;\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key, value } })\r\n }\r\n }\r\n\r\n const onHandleBooking = (StudyTimeID, LessionName, TeacherUID, TeacherIMG, TeacherName, Rate, date, start, end, BookingID) => {\r\n setStateBookLesson({\r\n ...stateBookLesson,\r\n StudyTimeID,\r\n LessionName,\r\n TeacherUID,\r\n TeacherIMG,\r\n TeacherName,\r\n Rate,\r\n date,\r\n start,\r\n end,\r\n BookingID,\r\n })\r\n }\r\n\r\n const handleChange = (e) => {\r\n const target = e.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const key = target.getAttribute(\"name\");\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key, value } })\r\n }\r\n\r\n const handlePageChange = (pageNumber) => {\r\n if (page !== pageNumber) {\r\n setPage(pageNumber);\r\n onSearch(null, pageNumber)\r\n }\r\n }\r\n\r\n const handleChangeDate = (e) => {\r\n let key = \"date\";\r\n let value = $(\"#date-selected\").val().split(\", \")[1]\r\n\r\n if(moment(new Date()).format('DD/MM/YYYY') == value) {\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key:\"startTime\", value: `${new Date().getHours() + 1}:00` } })\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key:\"endTime\", value: \"23:00\" } })\r\n }\r\n\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key, value } })\r\n }\r\n\r\n const onSelectNation = (value) => {\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key: \"nation\", value } })\r\n }\r\n\r\n const onBook = (TeacherUID, StudyTimeID, date) => {\r\n setOnBookState({\r\n ...onBookState,\r\n TeacherUID,\r\n StudyTimeID,\r\n date,\r\n })\r\n }\r\n\r\n const onSearch = (e, page) => {\r\n setTeacherList(null);\r\n e && e.preventDefault();\r\n\r\n let x = [];\r\n let min = Math.min(\r\n parseInt(state.startTime.split(\":\")[0]),\r\n parseInt(state.endTime.split(\":\")[0])\r\n )\r\n let max = Math.max(\r\n parseInt(state.startTime.split(\":\")[0]),\r\n parseInt(state.endTime.split(\":\")[0])\r\n )\r\n\r\n for (let i = min; i <= max; i++) {\r\n x.push(`${i < 10 ? '0' + i : i}:00`)\r\n if (i !== max)\r\n x.push(`${i < 10 ? '0' + i : i}:30`)\r\n }\r\n setLearnTime(x);\r\n\r\n let z = [];\r\n if (!!state.selectedLevelPurpose)\r\n for (let i = 0; i < state.selectedLevelPurpose.length; i++) {\r\n for (let j = 0; j < state.levelPurpose.length; j++) {\r\n if (state.selectedLevelPurpose[i] === state.levelPurpose[j].PurposeLevelName) {\r\n z.push(state.levelPurpose[j].ID);\r\n break;\r\n }\r\n }\r\n }\r\n\r\n $('#display-schedule').prop('checked', false);\r\n getAPI({\r\n Nation: state.nation.length === 0 ? \"\" : state.nation,\r\n LevelPurpose: z.join(\",\"),\r\n Gender: state.gender,\r\n Date: state.date,\r\n Start: state.startTime,\r\n End: state.endTime,\r\n Search: state.searchText,\r\n Page: page,\r\n });\r\n }\r\n\r\n const initCalendar = () => {\r\n const dateString = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday', 'Saturday'];\r\n const monthString = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',\r\n 'October', 'November', 'December'\r\n ];\r\n const getMonthString = inMonth => monthString[inMonth];\r\n const getDateString = inDate => dateString[inDate];\r\n const getNextNumberDay = (startDate, daysToAdd) => {\r\n let arrDates = [];\r\n for (let i = 1; i <= daysToAdd; i++) {\r\n let currentDate = new Date(startDate);\r\n currentDate.setDate(startDate.getDate() + i);\r\n let html = `\t\r\n
\r\n \r\n
\r\n \r\n
\r\n Quốc tịch
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
`;\r\n arrDates.push(html);\r\n }\r\n return arrDates;\r\n }\r\n const dateDisplay = document.getElementById('date-selected');\r\n\r\n const slideClickCallback = (event) => {\r\n let swiper = calendarSwiper;\r\n if (event.target !== swiper.clickedSlide)\r\n return false;\r\n let slides = swiper.slides;\r\n let i = 0;\r\n while (i < slides.length) {\r\n swiper.slides[i].classList.remove('selected');\r\n i++;\r\n }\r\n swiper.clickedSlide.classList.add('selected');\r\n\r\n if (window.matchMedia('(min-width: 992px)').matches) {\r\n swiper.slideTo((swiper.clickedIndex - 3), 500, false);\r\n } else if (window.matchMedia('(min-width: 600px)').matches) {\r\n swiper.slideTo((swiper.clickedIndex - 2), 500, false);\r\n } else {\r\n swiper.slideTo((swiper.clickedIndex - 1), 500, false);\r\n }\r\n };\r\n const calendarSwiper = new Swiper('.calendar__picker', {\r\n init: false,\r\n speed: 500,\r\n spaceBetween: 5,\r\n slidesPerView: 7,\r\n grabCursor: true,\r\n loop: false,\r\n // centerMode:true,\r\n watchOverflow: true,\r\n // centeredSlidesBounds:true,\r\n // centerInsufficientSlides:true,\r\n navigation: {\r\n nextEl: '.navigation_slider .next-btn',\r\n prevEl: '.navigation_slider .prev-btn',\r\n },\r\n breakpoints: {\r\n 992: {\r\n slidesPerView: 7,\r\n spaceBetween: 10,\r\n\r\n },\r\n 600: {\r\n slidesPerView: 5,\r\n spaceBetween: 10,\r\n },\r\n 0: {\r\n slidesPerView: 3,\r\n spaceBetween: 5,\r\n }\r\n },\r\n observer: true,\r\n observeParents: true,\r\n on: {\r\n init: function () {\r\n let today = new Date();\r\n today.setDate(today.getDate() - 1);\r\n this.appendSlide(getNextNumberDay(today, 14));\r\n },\r\n click: slideClickCallback,\r\n reachEnd: function (event) {\r\n if (this.slides.length === 0 || this.slides.length > 14) return;\r\n let lastDate = new Date(this.slides[this.slides.length - 1].dataset.date);\r\n this.appendSlide(getNextNumberDay(lastDate, 7));\r\n this.update();\r\n }\r\n }\r\n });\r\n calendarSwiper.init();\r\n\r\n const todayBtn = document.getElementById('js-select-today');\r\n\r\n const chooseToday = (e) => {\r\n e && e.preventDefault();\r\n const slideEls = document.querySelectorAll('.calendar__picker .day-block');\r\n [...slideEls].map(slide => slide.classList.remove('selected'));\r\n slideEls[0].classList.add('selected');\r\n calendarSwiper.slideTo(0, 500, false);\r\n const date = slideEls[0].dataset.date;\r\n dateDisplay.value = moment(new Date(date)).format('dddd, DD/MM/YYYY');\r\n }\r\n todayBtn.addEventListener('click', chooseToday);\r\n\r\n\r\n\r\n function setDateDisplay() {\r\n const selected = this.el.querySelector('.swiper-slide.selected');\r\n if (selected) {\r\n const date = selected.dataset.date;\r\n dateDisplay.value = moment(new Date(date)).format('dddd, DD/MM/YYYY');\r\n }\r\n }\r\n\r\n calendarSwiper.on('click', setDateDisplay);\r\n calendarSwiper.on('slideChange', setDateDisplay);\r\n chooseToday();\r\n }\r\n\r\n useEffect(() => {\r\n initCalendar();\r\n fetchListLevelPurpose();\r\n \r\n /* $('#display-schedule').on('change', function () {\r\n if ($('#display-schedule').prop('checked') === true) {\r\n $('.tutor-schedule').slideDown();\r\n } else {\r\n $('.tutor-schedule').slideUp();\r\n }\r\n }); */\r\n\r\n $('.nationality').click(function () {\r\n $('#div-nationality').modal();\r\n });\r\n\r\n $(document).on(\"click\", \".day-block\", handleChangeDate.bind(this))\r\n $(\"#js-select-today\").on(\"click\", handleChangeDate.bind(this))\r\n }, []);\r\n\r\n return (\r\n <>\r\n ${getMonthString(currentDate.getMonth())}
\r\n ${currentDate.getDate()}
\r\n ${getDateString(currentDate.getDay())}
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nReactDOM.render(\r\n
\r\n ĐĂNG KÝ HỌC
\r\nVui lòng chọn ngày:
\r\n\r\n
\r\n Chọn hôm nay\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n THÔNG TIN
\r\n\r\n
\r\n \r\n
\r\n \r\n { e.preventDefault() }}>Quốc tịch\r\n
\r\n \r\n \r\n
\r\n \r\n label}\r\n getOptionValue={value => value}\r\n styles={appSettings.selectStyle}\r\n className=\"basic-multi-select\"\r\n placeholder=\"Chương trình học\"\r\n classNamePrefix=\"select\"\r\n onChange={val => {\r\n dispatch({\r\n type: \"STATE_CHANGE\",\r\n payload: { key: \"selectedLevelPurpose\", value: val }\r\n })\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n THỜI GIAN
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key: \"startTime\", value: dateStr } })\r\n }} />\r\n
\r\n \r\n {\r\n dispatch({ type: \"STATE_CHANGE\", payload: { key: \"endTime\", value: dateStr } })\r\n }} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n TÊN GIÁO VIÊN
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n onSearch(e,1)}>\r\n Search\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* Danh sách giáo viên
\r\n\r\n
*/}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n - \r\n {\r\n !!teachersList && teachersList.length > 0 ? teachersList.map(item =>\r\n
- \r\n \r\n ):\r\n (!!teachersList &&
- \r\n Không tìm thấy giáo viên phù hợp\r\n )\r\n }\r\n