diff --git a/src/pages/main.js b/src/pages/main.js new file mode 100644 index 0000000000000000000000000000000000000000..0874de6f880a5e0a91ed37f27067349c23a6504d --- /dev/null +++ b/src/pages/main.js @@ -0,0 +1,374 @@ +import React, {useEffect, useState} from 'react'; +import '@progress/kendo-react-intl'; +import '@progress/kendo-react-scheduler'; +import { Scheduler, WeekView, DayView, MonthView, WorkWeekView} from '@progress/kendo-react-scheduler'; +import { Calendar } from '@progress/kendo-react-dateinputs'; + +import main_styles from './main.module.css' +import ScheduleModal from './scheduleModal' +import ScheduleItem from './deleteModal'; +import ScheduleInquiry from './inquiryModal'; +// import '@progress/kendo-react-intl/dist/es/all'; +// import '@progress/kendo-react-scheduler/dist/es/views/week/WeekView' // 한글 지역화 파일s +// import { IntlProvider, load, LocalizationProvider, IntlService } from '@progress/kendo-react-intl'; +import Header from './Header' + +const MySchedulerApp = () => { + useEffect(() => { + // 페이지가 로드되면 실행될 코드 + const headingCell1 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(1)'); + const headingCell2 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(2)'); + const headingCell3 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(3)'); + const headingCell4 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(4)'); + const headingCell5 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(5)'); + const headingCell6= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(6)'); + const headingCell7= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(7)'); + if (headingCell1) { + headingCell1.textContent = "일"; + } + if (headingCell2) { + headingCell2.textContent = "월"; + } + if (headingCell3) { + headingCell3.textContent = "화"; + } + if (headingCell4) { + headingCell4.textContent = "수"; + } + if (headingCell5) { + headingCell5.textContent = "목"; + } + if (headingCell6) { + headingCell6.textContent = "금"; + } + if (headingCell7) { + headingCell7.textContent = "토"; + } + }, []); + const [scheduleData, setScheduleData] = useState([]); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isInModalOpen, setIsInModalOpen] = useState(false); + const [isDeModalOpen, setIsDeModalOpen]=useState(false); + const [selectedSchedule, setSelectedSchedule] = useState(null); + const [weeklySchedules, setWeeklySchedules] = useState([]); + const[selectedDate, setSelectedDate]=useState(new Date()); + + + const openInModal=()=>{ + //일정 조회 모달 열기 + setIsInModalOpen(true); + + } + const openModal = () => { + // 일정 추가 모달 열기 + setIsModalOpen(true); + + }; + const openDeModal=()=>{ + //일정 삭제 모달 열기 + setIsDeModalOpen(true); + console.log('isDeModalOpen:', isDeModalOpen); + } + const closeModal = () => { + // 일정 추가 모달 닫기 + setIsModalOpen(false); + + }; + const closeInModal = () => { + // 일정 조회 모달 닫기 + setIsInModalOpen(false); + + }; + + const closeDeModal = () => { + // 일정 삭제 모달 닫기 + setIsDeModalOpen(false); + console.log('isDeModalOpen:', isDeModalOpen); + }; + const handleSaveEvent = (formData) => { + // 일정 저장 및 모달 닫기 + const jsonData=JSON.stringify(formData); + console.log('Sending data to the server:', jsonData); + + // 백엔드로 데이터 전송 (Fetch API 사용) + fetch('/scheduler', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: jsonData, + }) + .then(response => response.json()) + .then(data => { + // 성공 시 처리 + console.log(data); + }) + .catch(error => { + // 실패 시 처리 + console.error(error); + }); + + // 모달 닫기 + setScheduleData((prevData) => [...prevData, formData]) + closeModal(); + }; + const handleInquiryEvent=async(date)=>{ + try { + setSelectedDate(date.InquiryDate); + const formattedDate = date.InquiryDate.toISOString().split('T')[0]; + const response = await fetch(`/api/schedules/dates?date=${formattedDate}`); + const data = await response.json(); + const processedDataArray = []; + for (const backendData of data) { + // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 + const startDate = new Date(backendData.date); + + // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 + const startTimeParts = backendData.startTime.split(':'); + const endTimeParts = backendData.endTime.split(':'); + const startTime = new Date(startDate); + const endTime=new Date(startDate); + const clr=backendData.color; + startTime.setHours(parseInt(startTimeParts[0], 10)); + startTime.setMinutes(parseInt(startTimeParts[1], 10)); + endTime.setHours(parseInt(endTimeParts[0], 10)); + endTime.setMinutes(parseInt(endTimeParts[1], 10)); + + processedDataArray.push({ + id: backendData.id, + date: backendData.date, + start:startTime, + end: endTime, + title: backendData.title, + color:clr, + description: backendData.Description + }); + } + setScheduleData(processedDataArray); + + } catch (error) { + console.error('Error fetching weekly schedules:', error); + } + + + }; + + + + + useEffect(() => { + // 페이지가 로드되면 백엔드에서 일정 데이터를 가져와서 설정 + + + // const backendEndpoint = '/api/schedules'; + + // fetch(backendEndpoint) + // .then(response => response.json()) + // .then(data => { + // // 성공 시 처리 + // console.log(data); + // const backendDataArray = data.schedules; + // setScheduleData(fetchedData); + // .catch(error => { + // console.error(error); + // }); + + + const backendDataArray = + [{ + "id":23423, + "date":"2023-11-19", + "startTime":"10:00", + "endTime":"11:30", + "title":"뇨끼 먹기", + "color":"#8393BE", + "Description":"맛있게 먹기" + },{ + "id":1923, + "date":"2023-11-23", + "startTime":"17:00", + "endTime":"19:00", + "title":"까르보나라 만들기", + "color":"#8393BE" + },{ + "id":777, + "date":"2023-11-24", + "startTime":"09:00", + "endTime":"12:00", + "title":"강의 듣기", + "color":"#8393BE" + }]; + // 만약 backendDataArray가 undefined인지 확인 + + + // 받아온 여러 개의 데이터를 가공하여 사용할 형식으로 변환 + const processedDataArray = []; + for (const backendData of backendDataArray) { + // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 + const startDate = new Date(backendData.date); + + // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 + const startTimeParts = backendData.startTime.split(':'); + const endTimeParts = backendData.endTime.split(':'); + const startTime = new Date(startDate); + const endTime=new Date(startDate); + const clr=backendData.color; + startTime.setHours(parseInt(startTimeParts[0], 10)); + startTime.setMinutes(parseInt(startTimeParts[1], 10)); + endTime.setHours(parseInt(endTimeParts[0], 10)); + endTime.setMinutes(parseInt(endTimeParts[1], 10)); + + processedDataArray.push({ + id: backendData.id, + date: backendData.date, + start:startTime, + end: endTime, + title: backendData.title, + color:clr, + description: backendData.Description + }); + } + // 변환된 데이터 배열을 JSON 문자열로 변환 + + + // JSON 문자열을 상태에 설정 + setScheduleData(processedDataArray); + // 초기 데이터를 스케줄 데이터에 설정 + //setScheduleData(initialData); + // }) + + }, []); + + const handleDeleteEvent=(id, deleteOption)=>{ + let deleteUrl = `/scheduler/${id}`; + const deleteData= { + afterDay: deleteOption==='afterDay', + total: deleteOption==='total', + } + fetch(deleteUrl,{ + method: 'DELETE', + headers:{ + 'Content-Type':'application/json', + }, + body: JSON.stringify(deleteData) + + }) + .then(response => response.json()) + .then(data => { + // 성공 시 처리 + console.log(data); + + }) + .catch(error => { + // 실패 시 처리 + console.error(error); + }); + }; + const kEventElements = document.querySelectorAll(".k-event"); + + + const handleScheduleClick = (event) => { + console.log('Item clicked:', event.target); + setSelectedSchedule(event); + setIsDeModalOpen(true); + //console.log('클릭시 isDeModalOpen:', isDeModalOpen); + }; + useEffect(() => { + console.log('클릭시 isDeModalOpen:', isDeModalOpen); + }, [isDeModalOpen]); + // 각 요소에 새로운 클릭 이벤트 리스너 등록 + kEventElements.forEach((element) => { + element.addEventListener('click', handleScheduleClick); + }); + /* + useEffect(() => { + // 페이지가 로드될 때 실행되는 코드 + const initialScheduleElement = document.querySelector(".k-event"); + + const handleInitialScheduleClick = (event) => { + setSelectedSchedule(event.target); + setIsDeModalOpen(true); + }; + + if (initialScheduleElement) { + initialScheduleElement.addEventListener('click', handleInitialScheduleClick); + } + + // 컴포넌트가 언마운트될 때 이벤트 리스너를 정리합니다. + return () => { + if (initialScheduleElement) { + initialScheduleElement.removeEventListener('click', handleInitialScheduleClick); + } + } + }, [setSelectedSchedule, setIsDeModalOpen]); // 의존성 배열에 명시 + + // ... (기타 코드) + + // 빈 배열을 전달하여 한 번만 실행되도록 합니다. + */ + return ( + <div> + <div className={main_styles.main_header}> + <Header /> + </div> + <div className={main_styles.scheduler_container}> + <div className={main_styles.side_container}> + <h1>side부분</h1> + </div> + <div className={main_styles.scheduler_content}> + <div className={main_styles.button_handler}> + <button className={main_styles.add_event_button} onClick={openModal}> + 일정추가 + </button> + <button className={main_styles.inquiry_event_button} onClick={openInModal}> + 일정조회 + </button> + </div> + <div> + <Scheduler data={scheduleData}> + + <WeekView + startDate={selectedDate} + eventRender={(event) => ( + <div + style={{ + backgroundColor: event.dataItem.color || '#8393BE', + // 다른 스타일링 속성을 원하는 경우 여기에 추가하세요. + }} + > + {event.dataItem.title} + </div> + )} + + /> + <DayView startDate={selectedDate}/> + <MonthView /> + + </Scheduler> + </div> + <ScheduleModal + isOpen={isModalOpen} + onClose={closeModal} + onSave={handleSaveEvent} + /> + + + <ScheduleItem + isOpen={isDeModalOpen} + onClose={closeDeModal} + onDelete={handleDeleteEvent} + schedule={selectedSchedule} + /> + <ScheduleInquiry + isOpen={isInModalOpen} + onClose={closeInModal} + onInquiry={handleInquiryEvent} + /> + + </div> + </div> + </div> + ); + }; + +export default MySchedulerApp;