Skip to content
Snippets Groups Projects
Commit d4e20deb authored by 이권민's avatar 이권민
Browse files

[ADD] UserTimeInfo 화면 그리기

parent 95fa03d3
No related branches found
No related tags found
No related merge requests found
import React, { useState } from "react"
import React, { useEffect, useState } from "react"
import '../styles/Calendar.css'
import MakeDay2 from "./MakeDay2";
import TableCell from "./TableCell";
......@@ -67,7 +67,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
for(let j = 0; j < 7; j++){
const d = (week - 1) * 7 + j - firstDay+1;
const newDate = new Date(nowYear, nowMonth-1, d);
const newDate = new Date(nowYear, nowMonth-1, d,9);
if(i===0){
let cn = "cella";
......@@ -76,7 +76,6 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
// console.log(newDate, startDate, endDate);
if(newDate < startDate || newDate > endDate){
forSelect.push(
<TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} i={i}/>
......@@ -111,12 +110,11 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
const [currentDay, setCurrentDay] = useState(today);
// 일요일 0 시작
const nowDay = currentDay.getDay();
const nowDate = currentDay.getDate();
const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
const [nowYear, setNowYear] = useState(currentDay.getFullYear());
const nowDay = startDate.getDay();
const nowDate = startDate.getDate();
const [nowMonth, setNowMonth] = useState(startDate.getMonth() + 1); // zero-base
const [nowYear, setNowYear] = useState(startDate.getFullYear());
const getWeek = (date) => {
const currentDate = date.getDate();
......@@ -125,7 +123,9 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate
return Math.ceil((currentDate + firstDay) / 7);
};
const [nowWeek, setNowWeek] = useState(getWeek(today));
const [nowWeek, setNowWeek] = useState(getWeek(currentDay));
const firstDay = (new Date(nowYear, nowMonth - 1, 1)).getDay();
const lastDay = (new Date(nowYear, nowMonth, 0)).getDay();
......@@ -155,7 +155,7 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate
setNowWeek(newWeek);
setNowMonth(newMonth);
setNowYear(newYear);
setCurrentDay(new Date(nowYear, nowMonth - 1, 1*(nowWeek-1) + nowDay));
// setCurrentDay(new Date(nowYear, nowMonth - 1, 1*(nowWeek-1) + nowDay));
}
const nextWeek = () => {
let newWeek = nowWeek + 1;
......@@ -172,7 +172,7 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate
setNowWeek(newWeek);
setNowMonth(newMonth);
setNowYear(newYear);
setCurrentDay(new Date(nowYear, nowMonth - 1, nowDate));
// setCurrentDay(new Date(nowYear, nowMonth - 1, nowDate));
}
return(
......
......@@ -11,6 +11,7 @@ function HomeParticipateForm() {
const navigate = useNavigate();
const { id } = useParams();
const handleName = (event) => {
setName(event.target.value);
}
......@@ -22,7 +23,7 @@ function HomeParticipateForm() {
}
const checkParticipantExistence = async()=>{
try{
const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/participants/?name=${name}`);
const response = await axios.get(`http://localhost:3000/meetings/${id}/participants/?name=${name}`);
return false;
}
catch(err){
......@@ -39,12 +40,44 @@ function HomeParticipateForm() {
let checkParticipant = await checkParticipantExistence();
if(checkParticipant){
try {
const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/participants`, {
const response = await axios.post(`http://localhost:3000/meetings/${id}/participants`, {
name: name,
password: password,
email: email
});
navigate('UserTimeInfo', { state: { id } });
try {
const response = await axios.post(`http://localhost:3000/meetings/${id}/entry`,{
name : name,
password : password
}, {
withCredentials: true
});
try{
const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
}
catch(e){
console.log(e);
}
}
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);
}
}
}
catch (error) {
console.error(error);
......@@ -62,11 +95,19 @@ function HomeParticipateForm() {
}
else {
try {
const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/entry`,{
const response = await axios.post(`http://localhost:3000/meetings/${id}/entry`,{
name : name,
password : password
}, {
withCredentials: true
});
navigate('UserTimeInfo', { state: { id } });
try{
const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
navigate('UserTimeInfo', { state: { id:id, startDate: response.data.startDate, endDate:response.data.endDate }});
}
catch(e){
console.log(e);
}
}
catch (error) {
if (error.response) {
......
......@@ -58,7 +58,7 @@ function MeetingInfoForm() {
transformedPurpose = 'ETC';
}
try {
const response = await axios.post("http://43.200.79.42:3000/meetings", {
const response = await axios.post("http://localhost:3000/meetings", {
title: title,
adminPassword: password,
purpose: transformedPurpose,
......
......@@ -3,7 +3,7 @@ import Button from "../components/Button";
import CalendarWeek2 from "../components/CalendarWeek2"
import "../styles/HomeMake.css"
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import { useLocation, useNavigate, useParams } from "react-router-dom";
function UserTimeInfo() {
const [state, setState] = useState(true);
......@@ -11,34 +11,39 @@ function UserTimeInfo() {
const [availableTimes, setAvailableTimes] = useState([]);
const {id} = useParams();
const location = useLocation();
const [startTime, setStartTime] = useState(0);
const [endTime, setEndTiem] = useState(10);
const [today, setToday] = useState(new Date());
const [startDate, setStartDate] = useState(new Date(2023,10,30));
const [endDate, setEndDate] = useState(new Date(2023,11,2));
const [endTime, setEndTime] = useState(10);
const [today, setToday] = useState(new Date(location.state.startDate));
const [startDate, setStartDate] = useState(new Date(location.state.startDate));
const [endDate, setEndDate] = useState(new Date(location.state.endDate));
const handleState = () => {
setState((state) => !state);
const handleState1 = () => {
setState(true);
}
const handleState2 = () => {
setState(false);
}
const handleCalendar = (value) => {
console.log('Selected Date:', value);
};
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/`);
console.log(response.data.title);
const response = await axios.get(`http://localhost:3000/meetings/${id}/`);
const nd = response.data.startDate.split("-");
setStartDate(new Date(nd[0]-0,nd[1]-1,nd[2]-0));
setToday(startDate);
const ed = response.data.endDate.split("-");
setEndDate(new Date(ed[0]-0,ed[1]-1,ed[2]-0));
} catch (error) {
console.error(error);
}
};
fetchData();
}, [id]);
const handleAlert = () => {
// let sat = [...availableTimes].sort();
const sat = [];
// state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고
// 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다.
......@@ -100,12 +105,12 @@ function UserTimeInfo() {
<Button
type="button"
text="가능한 시간"
onClick={handleState}
onClick={handleState1}
/>
<Button
type="button"
text="불가능한 시간"
onClick={handleState}
onClick={handleState2}
/>
<CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<Button
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment