import {
Agenda,
DragAndDrop,
Inject,
Resize,
ResourceDirective,
ResourcesDirective,
ScheduleComponent,
TimelineMonth,
TimelineViews,
ViewDirective,
ViewsDirective,
Day,
Week,
} from "@syncfusion/ej2-react-schedule";
import MDBox from "components/MDBox";
import { useEffect } from "react";
import { L10n, loadCldr } from "@syncfusion/ej2-base";
import Loading from "components/Loading";
import { getFacilities } from "features/allFacilities/allFacilitiesSlice";
import { getFields } from "features/allFields/allFieldsSlice";
import { getAllReservation } from "features/allReservation/allReservationSlice";
import { useDispatch, useSelector } from "react-redux";
import * as gregorian from "./culture-file-vn/ca-gregorian.json";
import * as numberingSystems from "./culture-file-vn/numberingSystems.json";
import * as numbers from "./culture-file-vn/numbers.json";
import * as timeZoneNames from "./culture-file-vn/timeZoneNames.json";
import { Typography } from "@mui/material";
import moment from "moment";
import { useState } from "react";
import { DateTimePickerComponent } from "@syncfusion/ej2-react-calendars";
import { setCurrentDate } from "features/allReservation/allReservationSlice";
import { checkOutReservation } from "features/reservation/reservationSlice";
const Schedules = () => {
const { facilities, isLoading } = useSelector((store) => store.allFacilities);
const { fieldsScheduler } = useSelector((store) => store.allFields);
const { timeSlots, isLoadingReservation } = useSelector(
(store) => store.allReservation
);
let currentEventHanle;
let flag = true;
const handleTimeSlots = timeSlots.map((timeSlot) => {
if (timeSlot.reservationStatus === 1) {
return {
...timeSlot,
reservationStatusCustom: false,
descriptionStatus: "Xác nhận",
};
}
if (timeSlot.reservationStatus === 2) {
return {
...timeSlot,
reservationStatusCustom: true,
descriptionStatus: "Đã thanh toán",
};
}
return { ...timeSlot };
});
const dispatch = useDispatch();
const [calRef, setCalRef] = useState();
const [selectedDate, setSelectedDate] = useState(
moment(new Date()).format("YYYY-MM-DD[T]HH:mm:ss")
);
useEffect(() => {
dispatch(getFacilities());
dispatch(getFields());
}, []);
useEffect(() => {
if (selectedDate) {
dispatch(
getAllReservation(moment(selectedDate).format("YYYY-MM-DD[T]HH:mm:ss"))
);
}
}, [selectedDate]);
if (isLoading && isLoadingReservation) {
return <Loading />;
}
const eventTemplate = (props) => {
return (
<>
<div>
<Typography variant="p">
{`${props.subject}: ${props.rentalFee}`}K
</Typography>
</div>
<div>
<Typography variant="p">{`${moment(props.startTime, "HHmm").format(
"HH:mm"
)} - ${moment(props.endTime, "HHmm").format("HH:mm")} `}</Typography>
</div>
</>
);
};
const onEventRendered = (args) => {
//1. Đặt cọc
//2. Checkout
if (args.data.reservationStatus === 1) {
//Color
args.element.style.backgroundColor = "#A0E418";
}
if (args.data.reservationStatus === 2) {
args.element.style.backgroundColor = "#ae9674";
}
};
const handleNavigate = (args) => {
if (args.action === "date") {
setSelectedDate(moment(args.currentDate).format("YYYY-MM-DD[T]HH:mm:ss"));
dispatch(
setCurrentDate(moment(args.currentDate).format("YYYY-MM-DD[T]HH:mm:ss"))
);
}
};
const editorContentTemplate = (props) => {
return props !== undefined ? (
<table
className="custom-event-editor"
style={{ width: "100%" }}
cellPadding={5}
>
<tbody>
<tr>
<td className="e-textlabel">Tên</td>
<td colSpan={4}>
<input
id="subject"
className="e-field e-input"
type="text"
readOnly
name="subject"
value={props.subject}
style={{ width: "100%" }}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Số điện thoại</td>
<td colSpan={4}>
<input
id="phone"
className="e-field e-input"
type="text"
readOnly
name="phone"
value={props.phone ? props.phone : "Không có"}
style={{ width: "100%" }}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Tiền</td>
<td colSpan={4}>
<input
id="subject"
className="e-field e-input"
type="text"
readOnly
name="rentalFee"
value={props.rentalFee}
style={{ width: "100%" }}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Từ</td>
<td colSpan={4}>
<DateTimePickerComponent
id="startTime"
format="dd/MM/yy hh:mm a"
data-name="startTime"
value={props.startTime || props.StartTime}
className="e-field"
></DateTimePickerComponent>
</td>
</tr>
<tr>
<td className="e-textlabel">Đến</td>
<td colSpan={4}>
<DateTimePickerComponent
id="endTime"
format="dd/MM/yy hh:mm a"
data-name="endTime"
value={props.endTime || props.EndTime}
className="e-field"
></DateTimePickerComponent>
</td>
</tr>
</tbody>
</table>
) : (
<div></div>
);
};
const onEventClick = (args) => {
currentEventHanle = calRef.getEventDetails(args.element);
};
const confirmReservation = (args) => {
const eventData =
calRef.eventWindow.getObjectFromFormData("e-schedule-dialog");
console.log("HANDLE", currentEventHanle);
currentEventHanle.startTime = moment(currentEventHanle.startTime).format(
"YYYY-MM-DD[T]HH:mm:ss"
);
currentEventHanle.endTime = moment(currentEventHanle.endTime).format(
"YYYY-MM-DD[T]HH:mm:ss"
);
console.log("Done Handle", currentEventHanle);
const eventDataFinal = { ...eventData, ...currentEventHanle };
console.log("Confirm reservation", eventDataFinal);
if (eventDataFinal.reservationStatus === 1) {
dispatch(checkOutReservation(eventDataFinal.reservationId));
}
calRef.refreshEvents();
dialogClose();
};
const alertFunction = (args) => {
alert('Hello world')
dialogClose();
};
const dialogClose = () => {
calRef.closeEditor();
};
const onPopupOpen = (args) => {
if (args.type === "Editor") {
if (flag) {
let dialogObj = args.element.ej2_instances[0];
let buttons = dialogObj.buttons;
buttons.push({
buttonModel: { content: "Thanh toán", isPrimary: true },
click: () => confirmReservation(args),
});
dialogObj.setProperties({ buttons: buttons });
flag = false;
}
if (!flag) {
var isApp = args.target.classList.contains("e-appointment");
if (isApp) {
let currentEventDetails = calRef.getEventDetails(args.target);
// currentEventDetails.startTime = moment(
// currentEventDetails.startTime
// ).format("dd/MM/yy hh:mm");
// currentEventDetails.endTime = moment(
// currentEventDetails.endTime
// ).format("dd/MM/yy hh:mm");
// console.log("DETAIL", currentEventDetails);
// dispatch(setCurrentEvent(currentEventDetails));
// dispatch(setCurrentEvent(calRef.getEventDetails(args.target)));
}
args.element.querySelector(".e-event-save").style.display = "none";
// args.element.querySelector("#delete").style.display = "none";
// args.element.querySelector("#add").style.display = isApp ? "none" : "";
}
}
};
return (
<MDBox
width="100%"
height="100%"
minHeight="100vh"
borderRadius="lg"
shadow="lg"
bgColor="white"
sx={{ overflowX: "hidden" }}
>
<ScheduleComponent
cssClass="timeline-resource-grouping"
width="100%"
height="800px"
locale="vi"
currentView="TimelineDay"
allowDragAndDrop={false}
selectedDate={selectedDate}
ref={(t) => setCalRef(t)}
navigating={handleNavigate}
eventClick={onEventClick}
popupOpen={(args) => onPopupOpen(args)}
editorTemplate={editorContentTemplate}
eventRendered={onEventRendered}
timeScale={{ enable: true, interval: 30, slotCount: 2 }}
eventSettings={{
dataSource: handleTimeSlots,
fields: {
subject: { name: "subject" },
id: "reservationId",
endTime: { name: "endTime" },
startTime: { name: "startTime" },
rentalFee: { name: "rentalFee", title: "Phí thuê sân" },
description: { name: "descriptionStatus", title: "Mô tả" },
isReadonly: "reservationStatusCustom",
},
template: eventTemplate.bind(this),
}}
group={{ resources: ["Facilities", "Fields"] }}
>
<ResourcesDirective>
<ResourceDirective
field="facilityId"
title="Chọn cơ sở"
name="Facilities"
allowMultiple={false}
dataSource={facilities}
textField="facilityName"
idField="id"
></ResourceDirective>
<ResourceDirective
field="fieldId"
title="Sân"
name="Fields"
allowMultiple={true}
dataSource={fieldsScheduler}
textField="fieldName"
idField="id"
groupIDField="facilityId"
colorField="color"
></ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option="TimelineDay" />
<ViewDirective option="Day" />
</ViewsDirective>
<Inject
services={[
Day,
Week,
TimelineViews,
TimelineMonth,
Agenda,
Resize,
DragAndDrop,
]}
/>
</ScheduleComponent>
</MDBox>
);
};
export default Schedules;
