TicketingSeatPage.js 10.8 KB
Newer Older
1
2
3
import { Link, useHistory } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import { Modal } from 'bootstrap'
Jiwon Yoon's avatar
Jiwon Yoon committed
4
5
import CountButton from '../components/CountButton'
import SeatTable from '../components/SeatTable/SeatTable'
6
7
8
import styles from '../components/SeatTable/seatTable.module.scss'
import axios from 'axios'
import { useAuth } from '../context/auth_context.js'
9
import catchErrors from '../utils/catchErrors'
Jiwon Yoon's avatar
Jiwon Yoon committed
10
11

const TicketingSeatPage = ({ location }) => {
12
13
14
15
    const history = useHistory()
    const modalRef = useRef(null)
    const modal = useRef()
    const { user } = useAuth()
16
    const [error, setError] = useState()
Jiwon Yoon's avatar
Jiwon Yoon committed
17
    const [ticketInfo, setTicketInfo] = useState({ ...location.state })
18
    const [theaterInfo, setTheaterInfo] = useState({ theatertypeId: 0 })
Jiwon Yoon's avatar
Jiwon Yoon committed
19
    const [selectedSeats, setSelectedSeats] = useState([])
20
    const [reservedSeats, setReservedSeats] = useState([])
21
22
23
24
25
    const [ticketFee, setTicketFee] = useState({
        youth: 0,
        adult: 0,
        senior: 0
    })
Jiwon Yoon's avatar
Jiwon Yoon committed
26
    const [count, setCount] = useState({
27
        youth: 0,
Jiwon Yoon's avatar
Jiwon Yoon committed
28
        adult: 0,
29
        senior: 0
Jiwon Yoon's avatar
Jiwon Yoon committed
30
    })
Jiwon Yoon's avatar
Jiwon Yoon committed
31

32
33
34
    useEffect(() => {
        getInfo()
    }, [])
35
36
37
    useEffect(() => {
        getTicketFee()
    }, [theaterInfo.theatertypeId])
Jiwon Yoon's avatar
Jiwon Yoon committed
38

39
40
41
    async function getInfo() {
        try {
            const response = await axios.post('/api/theater/getInfo', {
Jiwon Yoon's avatar
Jiwon Yoon committed
42
                theaterName: ticketInfo.selectedTheater
43
44
45
46
47
48
49
50
51
52
            })
            setTheaterInfo(response.data)
            const response2 = await axios.post('/api/reservation/findreservation', {
                timetable: 1
            })
            const reserve = response2.data.map((el) =>
                el.row + '-' + el.col
            )
            setReservedSeats(reserve)
        } catch (error) {
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
            catchErrors(error, setError)
        }
    }

    async function getTicketFee() {
        try {
            const response3 = await axios.get(`/api/info/ticketfee`, {
                params: {
                    theaterTypeId: theaterInfo.theatertypeId
                }
            })
            const basicFee = response3.data[0].day + response3.data[0].defaultPrice + response3.data[0].weekdays
            setTicketFee({
                adult: basicFee + response3.data[0].adult,
                youth: basicFee + response3.data[0].youth,
                senior: basicFee + response3.data[0].senior
            })
        } catch (error) {
            catchErrors(error, setError)
72
73
        }
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
74

75
    function loginModal() {
76
        if (user.role === "member") {
77
            history.push("/payment", {
78
                ...ticketInfo, selectedSeats: selectedSeats, ...count, totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior
79
80
81
82
83
84
            });
        } else {
            modal.current = new Modal(modalRef.current)
            modal.current?.show()
        }
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
85

86
87
    return (
        <>
88
            <div ref={modalRef} className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden={modal}>
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="staticBackdropLabel">로그인이 필요한 서비스입니다.</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            로그인을 하시겠습니까? 비회원예매로 진행하시겠습니까?
                        </div>
                        <div className="modal-footer">
                            <Link to={{ pathname: '/login' }}>
                                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" >
                                    로그인
                                </button>
                            </Link>
                            <Link to={{
                                pathname: `/payment`,
106
                                state: { ...ticketInfo, selectedSeats: selectedSeats, ...count,totalFee: count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior }
107
108
109
110
111
                            }}>
                                <button type="button" className="btn btn-primary" data-bs-dismiss="modal">비회원예매</button>
                            </Link>
                        </div>
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
112
113
                </div>
            </div>
114
            <div className="mx-5 pb-5" style={{ color: "white" }}>
115
                <div className="row justify-content-center my-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
116
                    <div className="col-sm-4">
117
118
                        <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>좌석선택</h3>
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
119
                </div>
120
121
                <div className="row justify-content-center my-3">
                    <div className="col-sm-6 mb-4 text-center">
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
                        <div className="row text-end justify-content-sm-end">
                            <div className="col-sm-6 me-5">
                                <div>
                                    <span className="my-1">일반</span>
                                    <span>
                                        <CountButton name="adult" count={count} setCount={setCount} />
                                    </span>
                                </div>
                                <div>
                                    <span className="my-1">청소년</span>
                                    <span>
                                        {ticketInfo.adult
                                        ?
                                        <CountButton name="youth" count={count} setCount={setCount} disabled />
                                        :
                                        <CountButton name="youth" count={count} setCount={setCount} />
                                        }
                                    </span>
                                </div>
                                <div>
                                    <span className="my-1">경로우대</span>
                                    <span>
                                        <CountButton name="senior" count={count} setCount={setCount} />
                                    </span>
                                </div>
147
148
149
150
151
152
153
154
                            </div>
                        </div>
                    </div>
                    <div className="col-sm-6 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
                        <div>{ticketInfo.cinema} | {ticketInfo.selectedTheater}</div>
                        <div>{ticketInfo.title}</div>
                        <div>{ticketInfo.time}</div>
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
155
                </div>
156
157
158
159
160
161
162
163
164
165
166
167
168
169
                <div className="row justify-content-center border p-5 ">
                    <div className="col-sm-8">
                        <SeatTable count={count} setSelectedSeats={setSelectedSeats} selectedSeats={selectedSeats} theaterInfo={theaterInfo} reservedSeats={reservedSeats} />
                    </div>
                    <div className="col-sm-4 mt-5">
                        <div>
                            <button className={styles.on} style={{ height: '1rem', width: '1rem' }} disabled></button>
                            <span> 선택됨</span>
                        </div>
                        <div>
                            <button className={styles.btnBlock} style={{ height: '1rem', width: '1rem' }} disabled></button>
                            <span> 선택불가</span>
                        </div>
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
170
                </div>
171
                <div className="row p-3 mt-5" style={{ backgroundColor: "#252525" }}>
172
                    <div className="col-sm-2 mb-1 text-center">
173
                        {ticketInfo
174
                            ? <img style={{ width: "6rem" }} src={`https://image.tmdb.org/t/p/original${ticketInfo.poster_path}`} alt="영화포스터" />
175
176
                            : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
                    </div>
177
                    <div className="col-sm-4  mb-1" style={{ color: "white" }}>
178
179
180
181
182
                        {ticketInfo
                            ? <ul>
                                <li>영화: {ticketInfo.title}</li>
                                <li>극장: {ticketInfo.cinema}</li>
                                <li>일시: 2021/07/21 10:00 </li>
Jiwon Yoon's avatar
Jiwon Yoon committed
183
                                <li>상영관: {ticketInfo.selectedTheater}</li>
184
                                <li>좌석: {selectedSeats.map(el => String.fromCharCode(parseInt(el.split('-')[0]) + 64) + el.split('-')[1]) + ' '}</li>
185
                            </ul>
186
187
188
                            :
                            <div className="mb-2  text-center">극장선택</div>
                        }
189
                    </div>
190
191
192
193
194
195
196
197
198
199
200
201
202
203
                    <div className="col-sm-4  mb-1">
                        {selectedSeats
                            ?
                            <ul>
                                <li>성인: {count.adult}</li>
                                <li>청소년: {count.youth}</li>
                                <li>경로: {count.senior}</li>
                                <li className="mt-3"> 결제금액: {count.adult * ticketFee.adult + count.youth * ticketFee.youth + count.senior * ticketFee.senior}</li>
                            </ul>
                            : <></>}
                    </div>
                    <div className="col-sm-2 text-center  mb-1">
                        <div className="h5 mb-3">결제하기</div>
                        {selectedSeats.length > 0 && count.adult + count.youth + count.senior === selectedSeats.length
204
205
                            ?
                            <button onClick={loginModal} style={{ backgroundColor: '#252525', border: 0 }} >
206
                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
207
208
                            </button>
                            :
209
210
                            <button onClick={() => { alert("좌석을 선택해주세요.") }} style={{ backgroundColor: '#252525', border: 0 }}>
                                <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" style={{ width: "70px" }} alt="결제하기" />
211
                            </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
212

213
214
                        }
                    </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
215
216
                </div>
            </div>
217
        </>
Jiwon Yoon's avatar
Jiwon Yoon committed
218
219
220
221
    )
}

export default TicketingSeatPage