Skip to content

Commit

Permalink
Merge pull request #146 from PLADI-ALM/feat/PDW-75-resource-booking
Browse files Browse the repository at this point in the history 
[PDW-75/feat] 장비 예약 정보 확인
  • Loading branch information
@psyeon1120
psyeon1120 authored Nov 26, 2023
2 parents 3f8c13b + b8c1a63 commit 719c0c9
Show file tree
Hide file tree
Showing 10 changed files with 173 additions and 71 deletions.
16 changes: 11 additions & 5 deletions src/components/modal/BookingInfoModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,17 @@ export const BookingInfoModalView = styled.div`
box-shadow: 0 9px 26px 0 #170F490D;
padding: 10px;
width: fit-content;
height: fit-content;
z-index: 3;
`

export const BookingInfosModalView = styled(BookingInfoModalView)`
max-height: 300px;
position: relative;
z-index: initial;
margin-left: 50px;
margin-top: initial;
overflow-y: scroll;
`

export const BookingInfoText = styled.span`
Expand Down Expand Up @@ -49,12 +55,12 @@ export function BookingInfoModal(props) {

export function BookingInfosModal(props) {
return (
<BookingInfosModalView onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
{props.info.map((value, index) =>
<BookingInfosModalView x={props.x} y={props.y} onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
{props.info && props.info.map((value, index) =>
<>
<BookingInfoText>{value.start} ~ {value.end}</BookingInfoText>
<BookingInfoText>{value.startDateTime} ~ {value.endDateTime}</BookingInfoText>
<BookingInfoText>{value.reservatorName}</BookingInfoText>
<BookingInfoText>{value.department}</BookingInfoText>
<BookingInfoText>{value.reservatorDepartment}</BookingInfoText>
<BookingLastInfoText>{value.reservatorPhone}</BookingLastInfoText>
{index < props.info.length - 1 ? <Line/> : null}
</>
Expand Down
2 changes: 1 addition & 1 deletion src/components/officeBooking/BookingTimeBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ let date = moment(new Date()).format("YYYY-MM-DD");
export const BookingContentContainer = styled.div`
margin: 30px 0 30px 20px;
display: flex;
align-items: baseline;
//align-items: baseline;
`

export const BookingDateTextContainer = styled.div`
Expand Down
55 changes: 51 additions & 4 deletions src/components/resourceBooking/TimeSelector.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import styled from "styled-components"
import React, {useEffect, useState} from "react";
import {ResourceTimeList} from "../../constants/ToggleList";
import {findTimeIndex, ResourceTimeList, TimeList} from "../../constants/ToggleList";
import {ResourcesAxios} from "../../api/AxiosApi";
import {getToken} from "../../utils/IsLoginUtil";
import {basicError} from "../../utils/ErrorHandlerUtil";
import {BookingInfosModal} from "../modal/BookingInfoModal";

export const TimeContainer = styled.ul`
margin-top: 10px;
Expand Down Expand Up @@ -55,6 +56,8 @@ export function setDate(date) {

export function TimeSelector(props) {
const [bookedTimes, setBookedTimes] = useState([]);
const [bookingInfos, setBookingInfos] = useState(false)
const [isOpen, setIsOpen] = useState(false)

useEffect(() => {
getResourceBookedDates(currentDate, props.resourceId)
Expand All @@ -72,6 +75,40 @@ export function TimeSelector(props) {
return false
}

// 시간에 마우스 오버
const handleTimeMouseEnter = (time, date) => {
// ResourcesAxios.get(`/${props.resourceId}/booking?dateTime=${date} ${time.slice(0 ,2)}`, {
// headers: {
// Authorization: getToken()
// }
// })
// .then((Response) => {
// const info = Response.data.data;
// if (info === undefined) {
// setBookingInfos(null)
// } else {
// setBookingInfos(Response.data.data)
// setIsOpen(true)
// }
// })
// .catch((Error) => {
// basicError(Error)
// window.alert("예약 정보를 불러오는데 실패하였습니다.")
// });
}

const handleTimeMouseLeave = () => {
setIsOpen(false)
}

const handleModalMouseEnter = () => {
setIsOpen(true)
}

const handleModalMouseLeave = () => {
setIsOpen(false)
}

const getResourceBookedDates = (date, resourceId) => {
const params = {date: date};
ResourcesAxios.get(`/${resourceId}/booking-time`, {
Expand All @@ -98,12 +135,22 @@ export function TimeSelector(props) {
{
ResourceTimeList.map(function (time) {
if (isTimeMatch(time))
return (<TimeCard className={'disabled'}>{time}</TimeCard>)
return (<TimeCard
onMouseOver={() => handleTimeMouseEnter(time, currentDate)}
onMouseOut={() => handleTimeMouseLeave()}
className={'disabled'}>{time}</TimeCard>)
else
return (<TimeCard onClick={() => clickHandler(time)}>{time}</TimeCard>)
})
}
{isOpen && (
<BookingInfosModal
info={bookingInfos}
// x={x}
// y={y}
onMouseOver={() => handleModalMouseEnter()}
onMouseOut={() => handleModalMouseLeave()}/>
)}
</TimeContainer>
)
;
);
}
6 changes: 5 additions & 1 deletion src/constants/ToggleList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,8 @@ export const BookingCategoryList = [

export const AffiliationList = [
"플래디", "스튜디오아이", "피디룸"
]
]

export function findTimeIndex(time) {
return ResourceTimeList.indexOf(time)
}
3 changes: 2 additions & 1 deletion src/pages/admin/car/CarManageAdd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import EmptyImg from "assets/images/EmptyImg.svg"
import {ExitBtn} from "components/modal/BigModal";
import axios from "axios";
import {useParams} from "react-router-dom";
import {getImgKey} from "../../../utils/ImageUtil";

const MarginWhiteContainer = styled(WhiteContainer)`
padding: 40px;
Expand Down Expand Up @@ -291,7 +292,7 @@ function CarManageAdd(props) {
manufacturer: manufacturer,
location: place,
name: name,
imgKey: imageFile === null ? imageUrl : `car/${imageUrl.imageKey}`,
imgKey: imageFile === null ? getImgKey(imageUrl) : `car/${imageUrl.imageKey}`,
},
{
headers: {
Expand Down
5 changes: 4 additions & 1 deletion src/pages/admin/resource/ResourceManageAdd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import EmptyImg from "assets/images/EmptyImg.svg"
import {ExitBtn} from "components/modal/BigModal";
import axios from "axios";
import {useParams} from "react-router-dom";
import {getImgKey} from "../../../utils/ImageUtil";

const MarginWhiteContainer = styled(WhiteContainer)`
padding: 40px;
Expand Down Expand Up @@ -206,6 +207,7 @@ function ResourceManageAdd(props) {
setIsUpload(false);
imageInput.current.value = "";
setImgSrc(null)
setImgUrl(null)
};

// 이미지 람다 호출
Expand Down Expand Up @@ -290,7 +292,7 @@ function ResourceManageAdd(props) {
manufacturer: manufacturer,
location: place,
name: name,
imgKey: imageFile === null ? imageUrl : `resource/${imageUrl.imageKey}`,
imgKey: imageFile === null ? getImgKey(imageUrl) : `resource/${imageUrl.imageKey}`,
},
{
headers: {
Expand Down Expand Up @@ -328,6 +330,7 @@ function ResourceManageAdd(props) {
description: Response.data.data.description
});
setImgUrl(Response.data.data.imgUrl);
setImgSrc(Response.data.data.imgUrl);
})
.catch((Error) => {
basicError(Error)
Expand Down
121 changes: 65 additions & 56 deletions src/pages/basic/booking/resource/ResourceBooking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from "styled-components"
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import moment from 'moment';
import {OfficesAxios, ResourcesAxios} from 'api/AxiosApi';
import {ResourcesAxios} from 'api/AxiosApi';
import {useParams} from 'react-router-dom';
import Capsule from 'components/capsule/Capsule';
import {DetailSubTitleText, NameSubTitleText} from 'components/officeBooking/SubTitleBar';
Expand All @@ -16,9 +16,8 @@ import SmallButton from 'components/button/SmallButton';
import {Bar} from 'pages/basic/myBookings/BookedList';
import {getToken} from 'utils/IsLoginUtil';
import ResourceDetailInfo from "components/card/ResourceDetailInfo";
import {TimeList} from "constants/ToggleList";
import {setDate, TimeSelector} from "../../../../components/resourceBooking/TimeSelector";
import {BookingInfoModal, BookingInfosModal} from "../../../../components/modal/BookingInfoModal";
import {setDate, TimeSelector} from "components/resourceBooking/TimeSelector";
import {BookingInfosModal} from "components/modal/BookingInfoModal";

export const BookingDateTimeContainer = styled.div`
margin-left: 10px;
Expand All @@ -32,6 +31,7 @@ export const BookingDateText = styled.text`
color: #575757;
font-size: 22px;
text-align: left;
line-height: 34px;
`

export const PurposeTextarea = styled.textarea`
Expand All @@ -56,9 +56,7 @@ export const DateContainer = styled.div`
margin-left: 10px;
`

var currentMonth = moment(new Date()).format('YYYY-MM')
// var startTime = "";
// var endTime = "";
let currentMonth = moment(new Date()).format('YYYY-MM');

function ResourceBooking(props) {
let {resourceId} = useParams();
Expand All @@ -74,27 +72,9 @@ function ResourceBooking(props) {
const [changed, setCurrentMonth] = useState();
const [isOpen, setIsOpen] = useState(false)
const [bookingInfos, setBookingInfos] = useState(false)

// const handleMouseEnter = (index) => {
// OfficesAxios.get(`/${resourceId}/booking?date=${date}&time=${TimeList[index]}`, {
// headers: {
// Authorization: getToken()
// }
// })
// .then((Response) => {
// const info = Response.data.data;
// if (info === undefined) {
// setBookingInfo(null)
// } else {
// setBookingInfo(Response.data.data)
// setIsOpen(true)
// }
// })
// .catch((Error) => {
// basicError(Error)
// window.alert("예약 정보를 불러오는데 실패하였습니다.")
// });
// }
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [clickedDate, setClickedDate] = useState(null);

const getResourceInfo = () => {
ResourcesAxios.get(`/${resourceId}`, {
Expand Down Expand Up @@ -143,7 +123,6 @@ function ResourceBooking(props) {
endDate.current = ""
setStartTime("")
setEndTime("")
// endTime = ""
} else {
endDate.current = dateFormat
for (var i = 0; i < dates.length; i++) {
Expand All @@ -164,31 +143,19 @@ function ResourceBooking(props) {
if ((startDate !== "" && startTime === "") || (startDate !== "" && endDate.current === "")) {
setStartTime(time)
} else if (startDate !== "" && endDate.current !== "" && startTime !== "") {
// endTime = time
setEndTime(time)
// console.log(startDate + " " + startTime)
// console.log(endDate.current + " " + endTime)
// if (new Date(startDate + " " + startTime) > new Date(endDate.current + " " + endTime)) {
// alert('시작일시보다 종료일시가 더 앞에 있습니다.')
// endTime = ""
// }
// for (var i = 0; i < dates.length; i++) {
// var temp = new Date(dates[i])
// temp = moment(temp).format("YYYY-MM-DD")
//
// if (startDate <= temp && endDate >= temp) {
// alert('예약된 일자를 포함한 날짜는 선택할 수 없습니다.')
// startDate = '';
// endDate = '';
// setStartDate(startDate)
// setEndDate(endDate)
// window.location.reload()
// return
// }
// }
console.log(startDate + " " + startTime)
console.log(endDate.current + " " + endTime)
}
};

useEffect(() => {
if (endTime !== "" && new Date(startDate + " " + startTime) > new Date(endDate.current + " " + endTime)) {
alert('시작일시보다 종료일시가 더 앞에 있습니다.')
setEndTime("")
}
}, [endTime])

const onActiveStartDateChange = (e) => {
if (e.activeStartDate !== null) {
const changed = moment(e.activeStartDate).format("YYYY-MM")
Expand Down Expand Up @@ -232,6 +199,46 @@ function ResourceBooking(props) {
getBookedDates()
}, []);

useEffect(() => {
if (clickedDate !== null)
handleDateMouseEnter(clickedDate)
}, [clickedDate])

function formatDate(dateString) {
// 한글 문자 제거
const cleanedDateString = dateString.replace(/[년월일]/g, '');
const originalDate = new Date(cleanedDateString);

// 월과 일을 가져와서 두 자리로 포맷팅
const month = ('0' + (originalDate.getMonth() + 1)).slice(-2);
const day = ('0' + originalDate.getDate()).slice(-2);

// 년-월-일 형식으로 조합
return `${originalDate.getFullYear()}-${month}-${day}`;
}

// 일자에 마우스 오버
const handleDateMouseEnter = (date) => {
ResourcesAxios.get(`/${resourceId}/booking-info?date=${date}`, {
headers: {
Authorization: getToken()
}
})
.then((Response) => {
const info = Response.data.data;
if (info === undefined) {
setBookingInfos(null)
} else {
setBookingInfos(Response.data.data)
// setIsOpen(true)
}
})
.catch((Error) => {
basicError(Error)
window.alert("예약 정보를 불러오는데 실패하였습니다.")
});
}

const handleMouseLeave = () => {
setIsOpen(false)
}
Expand Down Expand Up @@ -275,8 +282,11 @@ function ResourceBooking(props) {

<BookingDateContainer
onMouseOver={(event) => {
// console.log(event)
if (event.target.classList.contains("react-calendar__month-view__days__day")) {
console.log(event)
setX(event.clientX)
setY(event.clientY)
setClickedDate(formatDate(event.target.children[0].ariaLabel))
}
}}
onMouseOut={(event) => {
Expand Down Expand Up @@ -309,13 +319,12 @@ function ResourceBooking(props) {
<TimeSelector resourceId={resourceId} click={clickTime}/>
: null
}
{/*{isOpen && (*/}
{/* <BookingInfosModal info={bookingInfo}*/}
{/* onMouseOver={() => handleModalMouseEnter()}*/}
{/* onMouseOut={() => handleModalMouseLeave()}/>*/}
{/*)}*/}
</BookingDateContainer>
</DateContainer>
<BookingInfosModal
info={bookingInfos}
onMouseOver={() => handleModalMouseEnter()}
onMouseOut={() => handleModalMouseLeave()}/>
</BookingContentContainer>

<BookingPurposeContainer>
Expand Down
Loading

0 comments on commit 719c0c9

Please sign in to comment.