\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
\r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n 600 ? '100px': '60px' }}>\r\n\r\n
600 ? 100: 60}\r\n width={widthScreen > 600 ? 100: 60}/>\r\n 600 ?100:60}px)` }}>\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n}\r\nexport default CancelBookingLessonModal;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nconst PopUpCancelLesson = ({ LessionName, date, start, end, reason }) => {\r\n\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n Bạn muốn hủy buổi học?
\r\n \r\n\r\n
\r\n Tên buổi học: {LessionName || ''}
\r\nNgày học: {date || ''}
\r\nGiờ học: {`${start || ''} - ${end || ''}`}
\r\n\r\n
\r\n \r\n setReason(e.target.value)}>\r\n
\r\n Vui lòng điền lý do để chúng tôi hỗ trợ bạn tốt hơn
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n}\r\nexport default PopUpCancelLesson;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport styles from '~components/common/StudentComment/StudentCommentItem.module.scss';\r\nimport { decodeHTML } from \"~src/utils\"\r\n\r\nconst StudentCommentItem = ({\r\n ScheduleTimeVN,\r\n TeacherName,\r\n TeacherIMG,\r\n TeacherUID,\r\n Note,\r\n Rate,\r\n LinkDetail,\r\n DocumentName,\r\n\r\n CreatedDate,\r\n Evaluation,\r\n StudentIMG,\r\n StudentName,\r\n}) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Buổi học của bạn đã được hủy
\r\n \r\n\r\n
\r\n Tên buổi học: {LessionName || ''}
\r\nNgày học: {date || ''}
\r\nGiờ học: {`${start || ''} - ${end || ''}`}
\r\nLý do hủy: {reason || ''}
\r\n\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default StudentCommentItem;\r\n","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { toast } from 'react-toastify'\r\nimport 'react-toastify/scss/main.scss'\r\nimport { toastInit } from \"~src/utils\"\r\nimport { bookingLessonAPI, getLessonBookAPI } from \"~src/api/studentAPI\"\r\nimport { FETCH_ERROR, MAX_200 } from '~components/common/Constant/toast'\r\n\r\nimport styles from '~components/BookingLessonModal.module.scss'\r\n\r\nconst BookingLessonModal = ({\r\n style,\r\n StudyTimeID,\r\n LessionName = \"\",\r\n LessionMaterial = \"\",\r\n TeacherUID,\r\n TeacherIMG = \"default-avatar.png\",\r\n TeacherName,\r\n Rate,\r\n date,\r\n start,\r\n end,\r\n note = \"\",\r\n DocumentName = \"\",\r\n BookingID,\r\n onBook,\r\n}) => {\r\n\r\n const [state, setState] = useState(\"\");\r\n const [bookState, setBookState] = useState(null);\r\n const bookingToastFail = () => toast.error(FETCH_ERROR, toastInit);\r\n const bookingToastFail2 = (text) => toast.error(text, toastInit);\r\n const requireLessonAlert = () => toast.warn(MAX_200, toastInit);\r\n\r\n const fetchAPI = async (params) => {\r\n const res = await bookingLessonAPI(params);\r\n if (res.Code === 1) onBook && onBook(TeacherUID, StudyTimeID, date, res.Code);\r\n else if(!!res && res.Message) bookingToastFail2(res.Message)\r\n else bookingToastFail();\r\n }\r\n\r\n const getLessonToBookingAPI = async () => {\r\n const res = await getLessonBookAPI();\r\n if (res.Code === 1) {\r\n setBookState({\r\n ...res.Data,\r\n Code: 1\r\n });\r\n }\r\n else if (res.Code === 0) {\r\n setBookState({\r\n Message: res.Message,\r\n Code: 0,\r\n });\r\n }\r\n }\r\n\r\n const handleBookingLesson = () => {\r\n if (state.length > 200) {\r\n requireLessonAlert();\r\n }\r\n else {\r\n fetchAPI({\r\n TeacherUID,\r\n Date: date,\r\n StudyTimeID,\r\n DocumentID: bookState.DocumentID,\r\n DocumentDetailID: bookState.ID,\r\n SpecialRequest: state,\r\n })\r\n $('#md-book-schedule').fadeOut(500, function () {\r\n $('#md-book-schedule').modal('hide');\r\n });\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n getLessonToBookingAPI()\r\n setState(\"\")\r\n feather.replace();\r\n }, [TeacherUID, StudyTimeID, date])\r\n\r\n useEffect(() => {\r\n getLessonToBookingAPI();\r\n }, [])\r\n\r\n return !!bookState ? (\r\n bookState.Code === 0 ?\r\n \r\n 
{e.target.onerror = null; e.target.src=\"../assets/img/default-avatar.png\"}} />\r\n
\r\n \r\n
\r\n \r\n {\r\n !!TeacherName ?\r\n
\r\n {TeacherName}
: \r\n !!StudentName ?\r\n{StudentName}
: \"\"\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\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n ScheduleTimeVN ?
\r\n {\r\n LinkDetail && Time: {ScheduleTimeVN}
:\r\n CreatedDate ? Time: {moment(CreatedDate).format(\"LLLL\")}
: \"\"\r\n }\r\n {\r\n DocumentName && {DocumentName}
\r\n }\r\n \r\n Xem chi tiết \r\n
\r\n }\r\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;","import React, { useState, useEffect, useReducer } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport StudentCommentItem from \"./StudentCommentItem\"\r\nimport Pagination from \"react-js-pagination\";\r\nimport { getAllStudentReviewAPI } from \"~src/api/studentAPI\";\r\nimport SkeletonFeedback from \"~components/common/Skeleton/SkeletonFeedback\";\r\nimport Skeleton from \"react-loading-skeleton\";\r\n\r\nconst StudentComment = ({ TeacherUID }) => {\r\n const [state, setState] = useState([]);\r\n const [page, setPage] = useState(1)\r\n const [pageSize, setPageSize] = useState(0);\r\n const [totalResult, setTotalResult] = useState(0);\r\n const [loading, setLoading] = useState(true);\r\n\r\n const handlePageChange = (pageNumber) => {\r\n if (page !== pageNumber) {\r\n setPage(pageNumber);\r\n getCommentAPI({\r\n TeacherUID,\r\n Page: pageNumber,\r\n })\r\n }\r\n }\r\n\r\n const getCommentAPI = async (params) => {\r\n setLoading(true);\r\n const res = await getAllStudentReviewAPI(params);\r\n if (res.Code === 1) {\r\n setState(res.Data)\r\n setPageSize(res.PageSize);\r\n setTotalResult(res.TotalResult)\r\n }\r\n setLoading(false);\r\n }\r\n\r\n useEffect(() => {\r\n getCommentAPI({\r\n TeacherUID,\r\n Page: page,\r\n })\r\n }, [])\r\n return loading ? <>\r\n \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\nexport default StudentComment;","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { getScheduleByTeacherUID } 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 { FETCH_ERROR, CANCEL_BOOKING_SUCCESS, BOOKING_SUCCESS } from '~components/common/Constant/toast'\r\n\r\nlet calendar;\r\nDate.prototype.addHours = function (h) {\r\n this.setTime(this.getTime() + h * 60 * 60 * 1000);\r\n return this;\r\n};\r\nconst getDifferentMinBetweenTime = (startDate, endDate) => {\r\n const oneMinutes = 1000 * 60;\r\n const startTime = startDate.getTime();\r\n const endTime = endDate.getTime();\r\n const diffTime = endTime - startTime + (startDate.getTimezoneOffset() * 60 * 1000);\r\n return Math.round(diffTime / oneMinutes);\r\n};\r\nlet mondayOfWeek = new Date(new Date().setDate(new Date().getDate() - new Date().getDay() + 1));\r\nconst dayNamesShort = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\r\nconst hotTime = [5, 6, 7, 8, 9, 13, 14, 15, 16];\r\n\r\nlet uid = localStorage.getItem(\"uid\") ? localStorage.getItem(\"uid\") : \"\";\r\n\r\nconst BookingSchedule = ({\r\n TeacherUID,\r\n handleBookLesson,\r\n handleCancelLesson,\r\n onBookingId,\r\n onCancelId\r\n}) => {\r\n\r\n const [eventSource, setEventSource] = useState([])\r\n const [loading, setLoading] = useState(false)\r\n const [activeDate, setActiveDate] = useState(mondayOfWeek)\r\n\r\n const cancelToastSuccess = () => toast.success(CANCEL_BOOKING_SUCCESS, toastInit);\r\n const cancelToastFail = () => toast.error(FETCH_ERROR, toastInit);\r\n const bookingToastSuccess = () => toast.success(BOOKING_SUCCESS, toastInit);\r\n\r\n const bookLesson = (StudyTimeID, LessionName, date, start, end) => {\r\n handleBookLesson(StudyTimeID, LessionName, date, start, end)\r\n }\r\n\r\n const cancelLesson = (BookingID, LessionName, date, start, end) => {\r\n handleCancelLesson(BookingID, LessionName, date, start, end)\r\n }\r\n\r\n const calendarInit = () => {\r\n const calendarEl = document.getElementById(\"js-book-calendar\");\r\n let $toggleCheckbox;\r\n const eventDidMount = (args) => {\r\n const { event } = args;\r\n let toggleStudent = document.getElementById('student-toggle-checkbox');\r\n if (!args.isPast && (event._def.extendedProps.available || event._def.extendedProps.bookInfo)) {\r\n $(args.el).tooltip({\r\n html: true,\r\n title: `\r\n {\r\n totalResult == 0 ? \"Giáo viên hiện chưa có phản hồi\" :\r\n `${totalResult} học viên đã để lại phản hồi:`\r\n }\r\n
\r\n\r\n {\r\n !!state && state.length > 0 && state.map((item, index) =>\r\n
\r\n {\r\n pageSize < totalResult &&\r\n Ngày học: ${moment(event.start).format(\"DD/MM/YYYY\")}
\r\nGiờ học: ${moment(event.start).format(\"hh:mm A\")} - ${moment(event.end).format(\"hh:mm A\")}
`,\r\n animation: false,\r\n template: `\r\n \r\n
`,\r\n trigger: \"hover\",\r\n });\r\n }\r\n !!$toggleCheckbox && showStudentToggle();\r\n const events = calendar.getEvents();\r\n const dayHeaders = document.querySelectorAll('.fc-col-header-cell');\r\n if(dayHeaders.length > 0)\r\n for(let i = 0; i < dayHeaders.length; i++){\r\n if(\"data-date\" in dayHeaders[i].dataset) continue;\r\n const date = dayHeaders[i].getAttribute('data-date');\r\n const dateHD = new Date(date);\r\n let bookedSlot = 0;\r\n let totalSlot = 0;\r\n\r\n events.map(event => {\r\n const eventDate = new Date(event.extendedProps.Start.split('T')[0]);\r\n if(eventDate.getTime() === dateHD.getTime()){\r\n (event.extendedProps.bookStatus || event.extendedProps.available) && totalSlot++;\r\n event.extendedProps.bookStatus && bookedSlot++;\r\n }\r\n });\r\n dayHeaders[i].querySelector('.booked').textContent = bookedSlot;\r\n dayHeaders[i].querySelector('.total').textContent = totalSlot;\r\n }\r\n };\r\n\r\n const eventClick = (args) => {\r\n /* Handle when click on cell const element = args.el;\r\n if ([...element.classList].includes(\"available-slot\") &&\r\n !([...element.classList].includes(\"empty-slot\") || [...element.classList].includes(\"fc-event-past\"))\r\n ) {\r\n const { start, end } = args.event;\r\n }\r\n return; */\r\n };\r\n\r\n calendar = new FullCalendar.Calendar(calendarEl, {\r\n height: 600,\r\n expandRows: true,\r\n slotMinTime: \"06:00\",\r\n slotMaxTime: \"23:00\",\r\n eventSources: eventSource,\r\n headerToolbar: {\r\n start: '', // will normally be on the left. if RTL, will be on the right\r\n center: '',\r\n end: 'today,prev,title,next' // will normally be on the right. if RTL, will be on the left\r\n },\r\n titleFormat: { year: \"numeric\", month: \"short\" },\r\n navLinks: true, // can click day/week names to navigate views\r\n editable: false,\r\n stickyHeaderDates: true,\r\n selectable: true,\r\n nowIndicator: true,\r\n allDaySlot: false,\r\n allDayDefault: false,\r\n dayMaxEvents: true, // allow \"more\" link when too many events\r\n eventOverlap: false,\r\n initialDate: new Date(activeDate),\r\n initialView: \"timeGridWeek\",\r\n firstDay: 1,\r\n slotDuration: \"00:30\",\r\n slotLabelInterval: \"00:30\",\r\n slotEventOverlap: false,\r\n customButtons: {\r\n prev: {\r\n click: function () {\r\n calendar.prev();\r\n setActiveDate(calendar.getDate())\r\n }\r\n },\r\n next: {\r\n click: function () {\r\n calendar.next();\r\n setActiveDate(calendar.getDate())\r\n }\r\n },\r\n today: {\r\n text: \"Today\",\r\n click: function () {\r\n calendar.today();\r\n let today = calendar.getDate();\r\n /* Fetch data from Monday of this week */\r\n setActiveDate(new Date(today.setDate(today.getDate() - today.getDay() + 1)))\r\n }\r\n }\r\n },\r\n selectOverlap: function (event) {\r\n return event.rendering === \"background\";\r\n },\r\n slotLabelContent: function (arg) {\r\n // console.log('slotLabelContent', arg);\r\n const hour = arg.date.getHours();\r\n\r\n let templateEl = document.createElement(\"div\");\r\n templateEl.setAttribute(\"class\", \"slot-label\");\r\n const html = `${hotTime.includes(hour) ? `` : \"\"}\r\n ${moment(arg.date).format('hh:mm A')}`;\r\n templateEl.innerHTML = html;\r\n return { html };\r\n },\r\n\r\n dayHeaderContent: function (args) {\r\n const days = args.date.getDay();\r\n const d = args.date.getDate();\r\n const html = `${d} ${dayNamesShort[days]}\r\n 0 / 0\r\n
`;\r\n return { html };\r\n },\r\n\r\n eventClassNames: function (args) {\r\n const { event } = args;\r\n const {\r\n eventType,\r\n bookStatus,\r\n bookInfo,\r\n isEmptySlot,\r\n } = event.extendedProps;\r\n let classLists = bookStatus ?\r\n bookInfo.StudentUID.toString() == uid.toString() ? \"booked-slot\": \"booked-others-slot\"\r\n : \"available-slot\";\r\n classLists += eventType === 1 ? \" hot-slot \" : \"\";\r\n classLists += isEmptySlot ? \" empty-slot\" : \"\";\r\n return classLists;\r\n },\r\n eventContent: function (args) {\r\n let templateEl = document.createElement(\"div\");\r\n const { event, isPast, isStart } = args;\r\n const {\r\n bookInfo,\r\n bookStatus,\r\n isEmptySlot,\r\n title,\r\n BookingID,\r\n } = event.extendedProps;\r\n let minutesTilStart = getDifferentMinBetweenTime(new Date(), args.event._instance.range.start)\r\n const html = `${!isEmptySlot ? `\r\n \r\n \r\n
` : \"\"\r\n }`;\r\n templateEl.innerHTML = html;\r\n return { domNodes: [templateEl] };\r\n },\r\n\r\n eventClick: eventClick,\r\n eventDidMount: eventDidMount,\r\n nowIndicatorDidMount: function (args) {\r\n //console.log(\"nowIndicatorDidMount\", args);\r\n },\r\n //events: eventList,\r\n });\r\n\r\n calendar.render();\r\n\r\n if ($(\".fc-toolbar-chunk:first-child\").html() == \"\") {\r\n $(\".fc-toolbar-chunk:first-child\").append(\r\n `\r\n \r\n \r\n
`);\r\n }\r\n\r\n $('body').on('click', '.book-schedule', function (e) {\r\n e.preventDefault();\r\n const StudyTimeID = this.getAttribute('data-id');\r\n const LessionName = this.getAttribute('data-title')\r\n const date = moment(this.getAttribute('data-start')).format(\"DD/MM/YYYY\");\r\n const start = moment(this.getAttribute('data-start')).format(\"HH:mm A\");\r\n const end = moment(this.getAttribute('data-end')).format(\"HH:mm A\");\r\n bookLesson(StudyTimeID, LessionName, date, start, end);\r\n });\r\n\r\n $('body').on('click', '.cancel-schedule', function (e) {\r\n e.preventDefault();\r\n const BookingID = this.getAttribute('data-bookingID');\r\n const LessionName = this.getAttribute('data-title')\r\n const date = moment(this.getAttribute('data-start')).format(\"DD/MM/YYYY\");\r\n const start = moment(this.getAttribute('data-start')).format(\"HH:mm A\");\r\n const end = moment(this.getAttribute('data-end')).format(\"HH:mm A\");\r\n cancelLesson(BookingID, LessionName, date, start, end);\r\n });\r\n\r\n $toggleCheckbox = $('#student-toggle-checkbox');\r\n\r\n $('body').on('change', $toggleCheckbox, showStudentToggle);\r\n\r\n function showStudentToggle() {\r\n const value = $toggleCheckbox.prop('checked');\r\n //const availableEvents = $('.fc-event.available-slot');\r\n const availableEvents = $('.fc-event:not(.booked-slot)')\r\n value ? availableEvents.addClass('hide-event') : availableEvents.removeClass('hide-event');\r\n }\r\n\r\n }\r\n\r\n const getAPI = async (params, callback) => {\r\n setLoading(true);\r\n const res = await getScheduleByTeacherUID(params);\r\n if (res.Code === 1) {\r\n const newEvents = res.Data.map(event => {\r\n return {\r\n ...event,\r\n id: event.StudyTimeID,\r\n title: event.title || '',\r\n start: new Date(event.Start),\r\n end: new Date(event.End),\r\n eventType: event.eventType,\r\n bookStatus: event.bookStatus,\r\n bookInfo: event.bookInfo,\r\n available: event.available,\r\n isEmptySlot: event.isEmptySlot\r\n }\r\n })\r\n setEventSource(newEvents)\r\n }\r\n !!callback && callback();\r\n setLoading(false);\r\n }\r\n\r\n useEffect(() => {\r\n if (!!calendar) {\r\n let eventsInstance = calendar.getEventSources();\r\n eventsInstance[0] && eventsInstance[0].remove();\r\n calendar.addEventSource(eventSource);\r\n }\r\n }, [eventSource])\r\n\r\n useEffect(() => {\r\n getAPI({\r\n TeacherUID,\r\n Date: moment(activeDate).format(\"DD/MM/YYYY\"),\r\n });\r\n }, [activeDate]);\r\n\r\n useEffect(() => {\r\n if (onCancelId !== null) {\r\n onCancelId === \"fail\" ? cancelToastFail() :\r\n getAPI({\r\n TeacherUID,\r\n Date: moment(activeDate).format(\"DD/MM/YYYY\"),\r\n }, function(){ $('#md-cancel-schedule-popup').modal(\"show\") });\r\n }\r\n }, [onCancelId]);\r\n\r\n useEffect(() => {\r\n if (onBookingId !== null)\r\n getAPI({\r\n TeacherUID,\r\n Date: moment(activeDate).format(\"DD/MM/YYYY\"),\r\n }, !!onBookingId ? bookingToastSuccess : null);\r\n }, [onBookingId]);\r\n\r\n useEffect(() => {\r\n TeacherUID && calendarInit();\r\n }, [])\r\n\r\n return <>\r\n \r\n
\r\n \r\n}\r\nexport default BookingSchedule;","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\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\nimport Flatpickr from 'react-flatpickr'\r\nimport { GetScheduleTeacherAPI } from \"~src/api/studentAPI\"\r\n\r\nconst initialState = {\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}\r\n\r\nconst BookingScheduleMobile = ({ TeacherUID, onBookingId, handleBookLesson }) => {\r\n const [state, setState] = useState(initialState)\r\n const [loading, setLoading] = useState(false)\r\n const [schedule, setSchedule] = useState([])\r\n const [learnTime, setLearnTime] = useState([])\r\n\r\n const bookingToastSuccess = () => toast.success(BOOKING_SUCCESS, toastInit);\r\n const TimeAlertToast = () => toast.warn(\"Hãy chọn múi giờ từ 6:00 đến 23:00\", toastInit);\r\n const TimeAlert2Toast = () => toast.warn(\"Bạn không thể chọn múi giờ trong quá khứ\", toastInit);\r\n\r\n const onHandleBooking = (StudyTimeID, LessionName, date, start, end) => {\r\n handleBookLesson(StudyTimeID, LessionName, date, start, end)\r\n }\r\n\r\n const handleChangeDate = (dateStr) => {\r\n if (moment(new Date()).format('DD/MM/YYYY') == dateStr) {\r\n setState({\r\n ...state,\r\n date: dateStr,\r\n startTime: `${new Date().getHours() + 1}:00`,\r\n })\r\n }\r\n else {\r\n setState({\r\n ...state,\r\n date: dateStr,\r\n })\r\n }\r\n }\r\n\r\n const handleChangeTime = (dateStr, key) => {\r\n let condition1 = state.date == moment(new Date()).format(\"DD/MM/YYYY\") &&\r\n new Date().getHours() >= parseInt(dateStr.split(\":\")[0])\r\n\r\n let condition2 = key == \"startTime\" ?\r\n parseInt(dateStr.split(\":\")[0]) > parseInt(state.endTime.split(\":\")[0]) :\r\n parseInt(dateStr.split(\":\")[0]) < parseInt(state.startTime.split(\":\")[0])\r\n\r\n let condition3 = key == \"startTime\" ?\r\n parseInt(dateStr.split(\":\")[0]) < 6 :\r\n parseInt(dateStr.split(\":\")[0]) > 23;\r\n\r\n if (condition1 || condition2 || condition3) {\r\n setState({\r\n ...state,\r\n [key]: state[key] == \" \" ? \"\" : \" \",\r\n })\r\n if (condition1) TimeAlert2Toast();\r\n else TimeAlertToast();\r\n }\r\n else {\r\n setState({\r\n ...state,\r\n [key]: dateStr,\r\n })\r\n }\r\n }\r\n\r\n const onSearch = (e) => {\r\n e.preventDefault()\r\n\r\n let x = [];\r\n let start = state.startTime;\r\n let end = state.endTime;\r\n\r\n if (start == \"\" || start == \" \") {\r\n start = state.date == moment(new Date()).format(\"DD/MM/YYYY\") ?\r\n `${new Date().getHours() + 1}:00` : \"06:00\";\r\n }\r\n end = end == \"\" || end == \" \" ? \"23:00\" : end;\r\n\r\n let min = Math.min(\r\n parseInt(start.split(\":\")[0]),\r\n parseInt(end.split(\":\")[0])\r\n )\r\n let max = Math.max(\r\n parseInt(start.split(\":\")[0]),\r\n parseInt(end.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 console.log(x);\r\n setLearnTime(x);\r\n getAPI({\r\n TeacherUID,\r\n Date: state.date,\r\n Start: start,\r\n End: end,\r\n }, null);\r\n }\r\n\r\n const getAPI = async (params, callback) => {\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 !!callback && callback();\r\n setLoading(false);\r\n }\r\n\r\n useEffect(() => {\r\n if (onBookingId !== null)\r\n getAPI({\r\n TeacherUID,\r\n Date: state.date,\r\n Start: state.startTime,\r\n End: state.endTime,\r\n }, !!onBookingId ? bookingToastSuccess : null);\r\n }, [onBookingId]);\r\n\r\n return <>\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n}\r\nexport default BookingScheduleMobile;","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nconst TeacherInformation = ({ IntroduceContent, Experience, Certificate }) => {\r\n return <>\r\n \r\n
\r\n \r\n
\r\n Lịch học từ 06:00 đến 23:00\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n handleChangeDate(dateStr)} />\r\n
\r\n \r\n handleChangeTime(dateStr, \"startTime\")} />\r\n
\r\n \r\n handleChangeTime(dateStr, \"endTime\")} />\r\n
\r\n \r\n
\r\n \r\n \r\n Search\r\n
\r\n \r\n
\r\n - \r\n {\r\n !!schedule && schedule.length > 0 && learnTime.map((item, index) => {\r\n let bookedFilter = schedule.filter(item => item.bookStatus)\r\n let availableFilter = schedule.filter(item => !item.bookStatus && item.available)\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 {item}\r\n \r\n {\r\n status == \"available\" ?
\r\n
\r\n Giới thiệu
\r\n{IntroduceContent}
\r\n \r\n
\r\n \r\n}\r\n\r\nexport default TeacherInformation;","import React, { useState, useEffect, useReducer } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport StudentComment from \"../common/StudentComment/StudentComment\"\r\nimport BookingSchedule from \"./BookingSchedule\"\r\nimport BookingScheduleMobile from \"./BookingScheduleMobile\"\r\nimport TeacherInformation from \"./TeacherInformation\"\r\nimport CancelBookingLessonModal from \"~components/CancelBookingLessonModal\"\r\nimport BookingLessonModal from \"~components/BookingLessonModal\"\r\nimport PopUpCancelLesson from \"~components/PopUpCancelLesson\"\r\n\r\nimport SkeletonLessonCard from \"~components/common/Skeleton/SkeletonLessonCard\"\r\n\r\nimport { nationMapToFlag, randomId } from '~src/utils'\r\nimport { getTeacherInfo } from \"~src/api/studentAPI\"\r\n\r\nimport { ToastContainer } from 'react-toastify'\r\nimport styles from '~components/TeacherDetail/TeacherDetail.module.scss'\r\n\r\nconst width = window?.innerWidth\r\n\r\nconst initialCancelLesson = {\r\n BookingID: \"\",\r\n LessionName: \"\",\r\n date: \"\",\r\n start: \"\",\r\n end: \"\",\r\n reason: \"\",\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: null,\r\n date: \"\",\r\n start: \"\",\r\n end: \"\",\r\n}\r\n\r\nconst initialOnBookState = {\r\n id: null,\r\n}\r\n\r\nconst initialOnCancelState = {\r\n id: null,\r\n}\r\n\r\nconst TeacherDetail = () => {\r\n const [state, setState] = useState(null)\r\n const [stateCancelLesson, setStateCancelLesson] = useState(initialCancelLesson);\r\n const [stateBookLesson, setStateBookLesson] = useState(initialBookLesson);\r\n const [onBookState, setOnBookState] = useState(initialOnBookState)\r\n const [onCancelState, setOnCancelState] = useState(initialOnCancelState)\r\n const [loading, setLoading] = useState(false);\r\n const [showTab, setShowTab] = useState(1);\r\n\r\n const getAPI = async (params) => {\r\n setLoading(true);\r\n const res = await getTeacherInfo(params);\r\n if (res.Code === 1) {\r\n setState(res.Data)\r\n $('#js-video-modal iframe').attr('src', res.Data.LinkVideoIntroduce);\r\n }\r\n setLoading(false);\r\n }\r\n\r\n const onHandleBookLesson = (StudyTimeID, LessionName, date, start, end) => {\r\n setStateBookLesson({\r\n ...stateBookLesson,\r\n StudyTimeID,\r\n LessionName,\r\n TeacherUID: state && state.TeacherUID,\r\n TeacherIMG: state && state.TeacherIMG,\r\n TeacherName: state && state.TeacherName,\r\n date,\r\n start,\r\n end,\r\n })\r\n }\r\n\r\n const onBook = (TeacherUID, StudyTimeID, date, status) => {\r\n setOnBookState({\r\n id: randomId(),\r\n })\r\n }\r\n\r\n const onCancel = (id, status, LessionName, date, start, end, reason) => {\r\n if (status == 1) {\r\n setOnCancelState({\r\n id,\r\n })\r\n setStateCancelLesson({\r\n ...stateCancelLesson,\r\n reason,\r\n })\r\n }\r\n else if (status == 0) {\r\n setOnCancelState({\r\n id: \"fail\",\r\n })\r\n }\r\n }\r\n\r\n const onHandleCancelLesson = (BookingID, LessionName, date, start, end) => {\r\n setStateCancelLesson({\r\n ...stateCancelLesson,\r\n BookingID,\r\n LessionName,\r\n date,\r\n start,\r\n end\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n let search = window.location.search;\r\n let params = new URLSearchParams(search);\r\n let ID = params.get('ID');\r\n getAPI({\r\n TeacherUID: ID,\r\n })\r\n }, [])\r\n\r\n return loading ? Học vấn
\r\n\r\n
\r\n \r\n Kinh nghiệm
\r\n\r\n \r\n \r\n {\r\n !!Experience && Experience.length > 0 && Experience.map((item, index) =>\r\n
\r\n
\r\n | \r\n {item.Date.split(\" - \")[0]}\r\n | \r\n \r\n {item.ExperienceName} \r\n{item.ExperienceContent} \r\n | \r\n
Chứng chỉ
\r\n\r\n \r\n \r\n {\r\n !!Certificate && Certificate.length > 0 && Certificate.map((item, index) =>\r\n
\r\n
\r\n | \r\n {item.Date}\r\n | \r\n\r\n {item.CertificateName}\r\n \r\n{item.CertificateContent} \r\n | \r\n
\r\n
\r\n }\r\n \r\n}\r\n\r\nReactDOM.render(\r\n
\r\n \r\n
\r\n \r\n 
{ e.target.onerror = null; e.target.src = \"../assets/img/default-avatar.png\" }}\r\n alt=\"avatar\" />\r\n
\r\n {\r\n !!state && \r\n
\r\n }\r\n \r\n
\r\n {state.TeacherName}
\r\n\r\n \r\n Verified \r\n
\r\n \r\n Xem video giới thiệu\r\n
\r\n {state.IntroduceContent}
\r\n\r\n
\r\n \r\n
\r\n - \r\n
- \r\n { e.preventDefault(); setShowTab(1) }}>\r\n ĐẶT LỊCH HỌC\r\n \r\n
- \r\n { e.preventDefault(); setShowTab(2) }}>\r\n THÔNG TIN GIÁO VIÊN\r\n \r\n
- \r\n { e.preventDefault(); setShowTab(3) }}>\r\n HỌC VIÊN NHẬN XÉT\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n !!state && state.TeacherUID && (width > 768 ?\r\n
\r\n \r\n
\r\n Notes:
\r\n\r\n \r\n Tiết học có sẵn\r\n \r\n Tiết học đã được đăng ký\r\n \r\n Tiết học bạn đã đăng ký\r\n
\r\n - \r\n
- Mỗi lớp học kéo dài trong 25 phút. \r\n
- Chọn tiết học có sẵn, bấm vào bút \"Book\" để đăng ký lớp học \r\n
- Chọn tiết học đã đăng ký, bấm vào bút \"Cancel\" để hủy lớp học \r\n
- Bạn chỉ có thể đăng ký lớp học ít nhất 30 phút trước khi bắt đầu học \r\n
- Bạn chỉ có thể hủy lớp học ít nhất 30 phút trước khi bắt đầu học \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showTab == 3 &&
\r\n