Skip to content

Commit

Permalink
Merge pull request #140 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 authored Nov 22, 2023
2 parents 275f3a8 + 8d1c179 commit 159562d
Show file tree
Hide file tree
Showing 9 changed files with 324 additions and 90 deletions.
27 changes: 26 additions & 1 deletion src/components/modal/BookingInfoModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export const BookingInfoModalView = styled.div`
z-index: 3;
`

export const BookingInfosModalView = styled(BookingInfoModalView)`
`

export const BookingInfoText = styled.span`
font-size: 15px;
margin-bottom: 10px;
Expand All @@ -28,12 +32,33 @@ export const BookingLastInfoText = styled(BookingInfoText)`
margin-bottom: 0;
`

export const Line = styled.hr`
margin: 10px 0;
width: 100%;
`

export function BookingInfoModal(props) {
return(
return (
<BookingInfoModalView onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
<BookingInfoText>{props.info.reservatorName}</BookingInfoText>
<BookingInfoText>{props.info.department}</BookingInfoText>
<BookingLastInfoText>{props.info.reservatorPhone}</BookingLastInfoText>
</BookingInfoModalView>
)
}

export function BookingInfosModal(props) {
return (
<BookingInfosModalView onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
{props.info.map((value, index) =>
<>
<BookingInfoText>{value.start} ~ {value.end}</BookingInfoText>
<BookingInfoText>{value.reservatorName}</BookingInfoText>
<BookingInfoText>{value.department}</BookingInfoText>
<BookingLastInfoText>{value.reservatorPhone}</BookingLastInfoText>
{index < props.info.length - 1 ? <Line/> : null}
</>
)}
</BookingInfosModalView>
)
}
8 changes: 3 additions & 5 deletions src/components/officeBooking/BookingTimeBar.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, {useRef} from 'react';
import {useState} from 'react'
import React, {useState} from 'react';
import styled from "styled-components"
import {setStartTimeStr, setEndTimeStr, getBookingInfo} from 'pages/basic/booking/office/OfficeBooking';
import {BookingInfoModal, BookingInfoModalView, BookingInfoText, BookingLastInfoText} from "../modal/BookingInfoModal";
import {setEndTimeStr, setStartTimeStr} from 'pages/basic/booking/office/OfficeBooking';
import {BookingInfoModal} from "../modal/BookingInfoModal";
import {TimeList} from "../../constants/ToggleList";
import {OfficesAxios} from "../../api/AxiosApi";
import {getToken} from "../../utils/IsLoginUtil";
import {basicError} from "../../utils/ErrorHandlerUtil";
import {useParams} from "react-router-dom";
import {UserModal} from "../modal/UserModal";
import moment from "moment/moment";

let bookingState = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,];
Expand Down
109 changes: 109 additions & 0 deletions src/components/resourceBooking/TimeSelector.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import styled from "styled-components"
import React, {useEffect, useState} from "react";
import {ResourceTimeList} from "../../constants/ToggleList";
import {ResourcesAxios} from "../../api/AxiosApi";
import {getToken} from "../../utils/IsLoginUtil";
import {basicError} from "../../utils/ErrorHandlerUtil";

export const TimeContainer = styled.ul`
margin-top: 10px;
overflow-y: scroll;
&::-webkit-scrollbar {
display: flex;
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: #BDBDBD;
border-radius: 10px;
}
`

export const TimeCard = styled.li`
border: 1px solid #BDBDBD;
height: 30px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 5px;
margin-right: 3px;
&.disabled {
background: #BDBDBD;
cursor: default;
}
&.disabled:hover {
background: #BDBDBD;
color: #4c4c4c;
}
&:hover {
background: #8741CB;
color: white;
}
`

let currentDate = "";

export function setDate(date) {
currentDate = date
}

export function TimeSelector(props) {
const [bookedTimes, setBookedTimes] = useState([]);

useEffect(() => {
getResourceBookedDates(currentDate, props.resourceId)
}, [currentDate]);

const clickHandler = (time) => {
props.click(time)
}

function isTimeMatch(time) {
for (let i = 0; i < bookedTimes.length; i++) {
if (bookedTimes[i] === time)
return true
}
return false
}

const getResourceBookedDates = (date, resourceId) => {
const params = {date: date};
ResourcesAxios.get(`/${resourceId}/booking-time`, {
params, headers: {
Authorization: getToken()
}
})
.then((Response) => {
var temp = [];
Response.data.data.map(function (time) {
temp.push(time)
})
setBookedTimes(temp)
})
.catch((Error) => {
basicError(Error)
window.alert("예약 정보를 불러올 수 없습니댜.")
window.history.back()
});
}

return (
<TimeContainer>
{
ResourceTimeList.map(function (time) {
if (isTimeMatch(time))
return (<TimeCard className={'disabled'}>{time}</TimeCard>)
else
return (<TimeCard onClick={() => clickHandler(time)}>{time}</TimeCard>)
})
}
</TimeContainer>
)
;
}
2 changes: 1 addition & 1 deletion src/constants/Path.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const BOOKING_MENUS = [
export const MY_BOOKING_MENUS = [
{name: '회의실 예약 내역', path: '/my/bookings/offices'},
{name: '장비 예약 내역', path: '/my/bookings/resources'},
{name: '차량 내역 내역', path: '/my/bookings/cars'}
{name: '차량 예약 내역', path: '/my/bookings/cars'}
]

export const MAIN_MENUS = [
Expand Down
9 changes: 8 additions & 1 deletion src/constants/ToggleList.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@ export const TimeList = [
"00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00",
"07:00", "08:00", "09:00", "10:00", "11:00", "12:00",
"13:00", "14:00", "15:00", "16:00", "17:00", "18:00",
"19:00", "20:00", "21:00", "22:00", "23:00", "24:00",
"19:00", "20:00", "21:00", "22:00", "23:00", "24:00"
]

export const ResourceTimeList = [
"00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00",
"07:00", "08:00", "09:00", "10:00", "11:00", "12:00",
"13:00", "14:00", "15:00", "16:00", "17:00", "18:00",
"19:00", "20:00", "21:00", "22:00", "23:00"
]

export const BookingCategoryList = [
Expand Down
4 changes: 4 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ input, button, select, text, p, textarea {
margin: 0;
}

ul {
list-style: none;
}

::-webkit-scrollbar {
display: none;
}
4 changes: 2 additions & 2 deletions src/pages/admin/carBookings/CarBookingManage.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ function CarBookingManage(props) {
</tr>
</BookedThead>
<tbody>
{carBookings.map((carBooking, index) =>
{carBookings.map(carBooking =>
<CarBookingManageCell
key={index}
key={carBooking.id}
id={carBooking.id}
name={carBooking.name}
location={carBooking.location}
Expand Down
36 changes: 17 additions & 19 deletions src/pages/basic/booking/resource/CustomCalendar.css
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@

.react-calendar {
/* width: 330px; */
max-width: 100%;
.react-calendar {
background-color: #fff;
color: #222;
border-color: white;
font-family: Roboto;
font-size: 15px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0em;
letter-spacing: 0;
text-align: left;
}

.react-calendar__navigation {
background: white;
height: 25px;
justify-content: space-around;
}



.react-calendar__navigation button:disabled {
background-color: white;
background: none;
color: lightgray;
}

.react-calendar__navigation button {
min-width: 44px;
max-width: fit-content;
color: #8741CB;
background: none;
scale: 2;
}

.react-calendar__navigation__label > span {
color: black;
font-family: sans-serif;
font-size: 9px;
font-weight: 700;
}

.react-calendar__navigation__arrow.react-calendar__navigation__prev-button {
z-index: 2;
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: white;
background: none;
}

.react-calendar__month-view__weekdays {
Expand Down Expand Up @@ -78,12 +77,11 @@
color:red;
}

.react-calendar__tile--active {
background: #8d53c7;
color: white;
.react-calendar__tile--active, .react-calendar__tile--active, .react-calendar__tile--hasActive, .calendar__tile--hasActive:enabled:focus, .react-calendar__tile--active:enabled:hover {
background: #8d53c7 !important;
color: white !important;
}

.react-calendar__tile--active {
background: #8d53c7;
color: white;
}
/*.react-calendar__tile--active:enabled:hover {*/
/* background: #a9d4ff;*/
/*}*/
Loading

0 comments on commit 159562d

Please sign in to comment.