From f915c2b688e02d118dd0a096503fd48636ec5e49 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Fri, 1 Dec 2023 17:34:07 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=ED=88=AC?=
=?UTF-8?q?=ED=91=9C=20=EC=A0=95=EB=B3=B4=20=EC=A0=84=EC=86=A1,=20?=
=?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20=EB=B0=8F=20=EA=B0=80?=
=?UTF-8?q?=EB=8A=A5/=EB=B6=88=EA=B0=80=EB=8A=A5=20=EC=83=81=ED=83=9C=20?=
=?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CalendarWeek2.jsx | 49 +++++++++----
.../src/components/HomeParticipateForm.js | 22 +++++-
react-whenMeet/src/components/TableCell.jsx | 2 +-
react-whenMeet/src/routes/UserTimeInfo.js | 73 +++++++++++++++++--
4 files changed, 120 insertions(+), 26 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index 401f77d..175d5a9 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/react-whenMeet/src/components/CalendarWeek2.jsx
@@ -3,7 +3,7 @@ import '../styles/Calendar.css'
import MakeDay2 from "./MakeDay2";
import TableCell from "./TableCell";
-function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
+function CaculateWeek({ nowYear, nowMonth, week, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
const startDay = new Date(nowYear, nowMonth - 1, 1);
const lastDay = new Date(nowYear, nowMonth, 0);
const firstDay = startDay.getDay();
@@ -20,17 +20,16 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
setIsDragging(!isDragging);
};
- const doCheck=[...availableTimes];
+ let doCheck=availableTimes;
+ doCheck.sort();
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
- console.log(newDate-0+idx);
-
const elm2 = document.getElementById(comp);
- if(elm2.classList.contains("dragging")){
+ if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
const elm = document.getElementById(newDate-0+idx);
elm.classList.remove("dragging")
- doCheck.filter(key=>key!==newDate-0+idx);
+ doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
}
else {
const elm = document.getElementById(newDate-0+idx);
@@ -45,14 +44,29 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
setDragging();
};
- const handleClick = () => {
- for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
- for(let indx = startTime; indx <= endTime; indx++){
- const elm = document.getElementById(day + indx);
- elm.classList.remove("dragging")
- }
+ const handleClick = (newDate, idx, comp) => {
+ // for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+ // for(let indx = startTime; indx <= endTime; indx++){
+ // const elm = document.getElementById(day + indx);
+ // elm.classList.remove("dragging")
+ // }
+ // }
+ // setAvailableTimes([])
+
+ const elm2 = document.getElementById(comp);
+ // console.log(comp, elm2);
+ if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
+ const elm = document.getElementById(newDate-0+idx);
+ elm.classList.remove("dragging")
+ doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
}
- setAvailableTimes([])
+ else {
+ const elm = document.getElementById(newDate-0+idx);
+ elm.classList.add("dragging")
+ doCheck.push(newDate-0+idx);
+ }
+
+ setAvailableTimes(doCheck)
}
const weekArr = [];
@@ -108,7 +122,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
);
}
-function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
+function CalendarWeek2({ state, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
const [currentDay, setCurrentDay] = useState(today);
// 일요일 0 시작
const nowDay = startDate.getDay();
@@ -183,9 +197,14 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate
<button onClick={nextWeek}>next</button>
</div>
<h1>{nowYear}</h1>
+ {
+ state ?
+ <span>가능한 시간</span> :
+ <span>불가능한 시간</span>
+ }
<table className="calendarTable">
<MakeDay2/>
- <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+ <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
</table>
</div>
);
diff --git a/react-whenMeet/src/components/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js
index 407b908..4e2eee2 100644
--- a/react-whenMeet/src/components/HomeParticipateForm.js
+++ b/react-whenMeet/src/components/HomeParticipateForm.js
@@ -55,7 +55,16 @@ function HomeParticipateForm() {
try{
const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
- navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
+ const startDate = response.data.startDate;
+ const endDate = response.data.endDate;
+ try{
+ const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`);
+ // console.log(startDate, endDate);
+ navigate('UserTimeInfo', { state: { id:id, startDate: startDate, endDate: endDate, schedules:response.data.schedules }});
+ }
+ catch(e){
+ console.log(e);
+ }
}
catch(e){
console.log(e);
@@ -103,7 +112,16 @@ function HomeParticipateForm() {
});
try{
const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
- navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
+ const startDate = response.data.startDate;
+ const endDate = response.data.endDate;
+ try{
+ const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`);
+ // console.log(startDate, endDate);
+ navigate('UserTimeInfo', { state: { id:id, startDate: startDate, endDate: endDate, schedules:response.data.schedules }});
+ }
+ catch(e){
+ console.log(e);
+ }
}
catch(e){
console.log(e);
diff --git a/react-whenMeet/src/components/TableCell.jsx b/react-whenMeet/src/components/TableCell.jsx
index 7c7be2c..f2f170c 100644
--- a/react-whenMeet/src/components/TableCell.jsx
+++ b/react-whenMeet/src/components/TableCell.jsx
@@ -18,7 +18,7 @@ export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i
onDragStart={()=>hds(newDate, i, k)}
onDragEnter={()=>hdw(newDate, i, k)}
onDragEnd={()=>hde(newDate, i)}
- onClick={()=>handleClick(newDate)}>
+ onClick={()=>handleClick(newDate,i,k)}>
{value} </td>
);
}
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 172d8bd..50497a5 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -6,12 +6,20 @@ import axios from "axios";
import { useLocation, useNavigate, useParams } from "react-router-dom";
function UserTimeInfo() {
+ const location = useLocation();
const [state, setState] = useState(true);
- const [availableSchedules, setAvailableSchedules] = useState([]);
- const [availableTimes, setAvailableTimes] = useState([]);
- const {id} = useParams();
+ const [availableSchedules, setAvailableSchedules] = useState(location.state.schedules);
- const location = useLocation();
+ const at = [];
+ for(let key of availableSchedules){
+ const date = new Date(key.availableDate) - 0;
+ for(let t of key.availableTimes){
+ at.push(date+t);
+ }
+ }
+
+ const [availableTimes, setAvailableTimes] = useState(at);
+ const {id} = useParams();
const [startTime, setStartTime] = useState(0);
const [endTime, setEndTime] = useState(10);
@@ -43,7 +51,7 @@ function UserTimeInfo() {
}
};
- const handleAlert = () => {
+ const handleAlert = async () => {
const sat = [];
// state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고
// 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다.
@@ -91,9 +99,58 @@ function UserTimeInfo() {
});
setAvailableSchedules(compressedData);
- console.log(availableSchedules);
+ if(location.state.schedules){
+ try {
+ const response = await axios.put(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{
+ schedules: compressedData
+ });
+ }
+ catch (error) {
+ if (error.response) {
+ if (error.response.status === 401) {
+ alert('Password를 잘못 입력하였습니다');
+ } else if (error.response.status === 404) {
+ alert('해당하는 이름이 존재하지 않습니다');
+ }
+ else if(error.response.status === 400){
+ alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요")
+ }
+ else {
+ alert(`Unexpected status code: ${error.response.status}`);
+ }
+ } else {
+ console.error(error);
+ }
+
+ }
+ }
+ else{
+ try {
+ const response = await axios.post(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{
+ schedules: compressedData
+ });
+ }
+ catch (error) {
+ if (error.response) {
+ if (error.response.status === 401) {
+ alert('Password를 잘못 입력하였습니다');
+ } else if (error.response.status === 404) {
+ alert('해당하는 이름이 존재하지 않습니다');
+ }
+ else if(error.response.status === 400){
+ alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요")
+ }
+ else {
+ alert(`Unexpected status code: ${error.response.status}`);
+ }
+ } else {
+ console.error(error);
+ }
+
+ }
+ }
- console.log(state);
+
}
const isContain = (value) => {
@@ -112,7 +169,7 @@ function UserTimeInfo() {
text="불가능한 시간"
onClick={handleState2}
/>
- <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+ <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<Button
type="submit"
text="시작하기"
--
GitLab