Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
butter-studio
Commits
ad0a174e
Commit
ad0a174e
authored
Aug 10, 2021
by
Kim, Subin
Browse files
TimeTable 예매시 연결
parent
95cd0eb7
Changes
8
Show whitespace changes
Inline
Side-by-side
client/src/apis/timetable.api.js
View file @
ad0a174e
import
axios
from
"
axios
"
;
import
{
baseUrl
}
from
"
../utils/baseUrl.js
"
;
const
getAll
=
async
(
selectDate
)
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/api/timetable?when=
${
selectDate
}
`
)
const
getAll
=
async
(
selectDate
,
movieId
)
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/api/timetable?when=
${
selectDate
}
&movieId=
${
movieId
}
`
)
return
data
}
...
...
client/src/components/Admin/TimeTable.js
View file @
ad0a174e
...
...
@@ -5,19 +5,23 @@ import timetableApi from "../../apis/timetable.api.js";
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
import
styles
from
"
./admin.module.scss
"
;
const
TimeTable
=
()
=>
{
const
TimeTable
=
(
{
ticketInfo
=
{
movieId
:
0
},
setTicketInfo
}
)
=>
{
const
[
selectDate
,
setSelectDate
]
=
useState
(
moment
().
format
(
'
YYYY-MM-DD
'
))
const
[
timeList
,
setTimeList
]
=
useState
([])
const
[
error
,
setError
]
=
useState
(
""
)
useEffect
(()
=>
{
getTimeTable
(
selectDate
)
getTimeTable
(
selectDate
,
ticketInfo
.
movieId
)
},
[
selectDate
])
async
function
getTimeTable
()
{
useEffect
(()
=>
{
getTimeTable
(
selectDate
,
ticketInfo
.
movieId
)
},
[
ticketInfo
.
movieId
])
async
function
getTimeTable
(
selectDate
,
movieId
)
{
try
{
setError
(
""
)
const
res
=
await
timetableApi
.
getAll
(
selectDate
)
const
res
=
await
timetableApi
.
getAll
(
selectDate
,
movieId
)
setTimeList
(
res
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
...
...
@@ -35,13 +39,38 @@ const TimeTable = () => {
}
}
function
handleClick
(
time
)
{
const
date
=
new
Date
(
time
.
start_time
)
let
hours
=
date
.
getHours
()
let
mins
=
date
.
getMinutes
()
if
(
hours
<=
9
)
hours
=
'
0
'
+
hours
if
(
mins
<=
9
)
mins
=
'
0
'
+
mins
setTicketInfo
({
...
ticketInfo
,
timetableId
:
time
.
id
,
time
:
time
.
date
.
split
(
'
T
'
)[
0
]
+
"
"
+
hours
+
"
:
"
+
mins
,
selectedTheater
:
time
.
theater
.
theaterName
})
}
return
(
<
div
className
=
"
col-12 col-lg-6 ms-lg-1 mb-5
"
>
<>
<
HorizontalCalender
selectDate
=
{
selectDate
}
setSelectDate
=
{
setSelectDate
}
/
>
{
timeList
.
length
!==
0
?
timeList
.
map
(
el
=>
<
div
className
=
"
mt-4
"
>
<
h5
className
=
"
mb-0
"
>
{
el
.
theaterName
}
관
/
<
p
className
=
"
d-inline fs-6 mb-0
"
>
{
el
.
theatertype
.
theaterTypeName
}
<
/p></
h5
>
{
el
.
timetable
.
map
(
time
=>
<
div
className
=
"
d-inline-flex flex-column m-2
"
>
<
h5
className
=
"
mb-0
"
>
{
el
.
theaterName
}
관
/
<
p
className
=
"
d-inline fs-6 mb-0
"
>
{
el
.
theaterTypeName
}
<
/p></
h5
>
{
el
.
timetable
.
map
(
time
=>
{
console
.
log
(
"
timetable==
"
,
time
)
if
(
ticketInfo
)
return
<
div
className
=
"
d-inline-flex m-2
"
>
<
div
className
=
{
`card text-dark
${
styles
.
cursor
}
`
}
onClick
=
{()
=>
handleClick
(
time
)}
>
<
div
className
=
"
card-body py-1
"
>
{
moment
(
time
.
start_time
).
format
(
'
HH:mm
'
)}
~
{
moment
(
time
.
end_time
).
format
(
'
HH:mm
'
)}
<
/div
>
<
div
className
=
"
card-footer text-center py-1
"
>
{
time
.
theater
.
rows
*
time
.
theater
.
columns
-
time
.
reservations
}
/ {time.theater.rows * time.theater.columns}</
div
>
<
/div
>
<
/div
>
else
return
<
div
className
=
"
d-inline-flex flex-column m-2
"
>
<
div
className
=
"
d-flex justify-content-end
"
>
<
button
type
=
"
button
"
className
=
{
`btn btn-dark btn-sm shadow-none
${
styles
.
customBtn
}
`
}
onClick
=
{()
=>
deleteTime
(
time
.
id
)}
>
X
<
/button
>
<
/div
>
...
...
@@ -49,10 +78,11 @@ const TimeTable = () => {
<
div
className
=
"
card-body py-1
"
>
{
moment
(
time
.
start_time
).
format
(
'
HH:mm
'
)}
~
{
moment
(
time
.
end_time
).
format
(
'
HH:mm
'
)}
<
/div
>
<
div
className
=
"
card-footer text-center py-1
"
>
{
time
.
title
}
<
/div
>
<
/div
>
<
/div>
)
}
<
/div
>
})}
<
/div>
)
:
<
p
className
=
"
text-center mt-5 mb-0
"
>
서버에
저장되어
있는
상영시간표가
존재하지
않습니다
.
<
br
/>
아래의
양식을
작성해
새로운
상영시간표를
등록해주세요
.
<
/p>
}
<
/
div
>
<
/
>
)
}
...
...
client/src/components/Admin/TimeTableEdit.js
View file @
ad0a174e
...
...
@@ -7,7 +7,9 @@ const TimeTableEdit = () => {
<>
<
h2
className
=
"
border-bottom border-2 text-center pb-2 me-2
"
>
현재
상영시간표
정보
<
/h2
>
<
div
className
=
"
d-flex flex-column flex-lg-row-reverse
"
>
<
div
className
=
"
col-12 col-lg-6 ms-lg-1 mb-5
"
>
<
TimeTable
/>
<
/div
>
<
TimeTableEditForm
/>
<
/div
>
<
/
>
...
...
client/src/components/TicketingTimeTable/TicketingTimeTable.js
View file @
ad0a174e
const
TicketingTimeTable
=
({
ticketInfo
})
=>
{
import
TimeTable
from
"
../Admin/TimeTable
"
;
const
TicketingTimeTable
=
({
ticketInfo
,
setTicketInfo
})
=>
{
return
(
<
div
className
=
"
text-center
"
style
=
{{
color
:
"
white
"
}}
>
<
div
style
=
{{
color
:
"
white
"
}}
>
{
ticketInfo
.
movieId
&&
ticketInfo
.
cinema
?
<
div
>
{
ticketInfo
.
movieId
}
{
ticketInfo
.
cinema
}
<
/div
>
:
<
div
>
영화와
극장을
모두
선택해주세요
.
<
/div>
}
?
<
TimeTable
ticketInfo
=
{
ticketInfo
}
setTicketInfo
=
{
setTicketInfo
}
/
>
:
<
div
className
=
"
text-center
"
>
영화와
극장을
모두
선택해주세요
.
<
/div>
}
<
/div
>
)
}
...
...
client/src/pages/TicketingPage.js
View file @
ad0a174e
...
...
@@ -12,8 +12,8 @@ const TicketingPage = ({ location }) => {
const
[
ticketInfo
,
setTicketInfo
]
=
useState
({
...
location
.
state
,
cinema
:
""
,
selectedTheater
:
1
,
time
:
"
2021/07/21 10:00
"
selectedTheater
:
""
,
time
:
""
})
const
[
cinemaInfo
,
setCinemaInfo
]
=
useState
({})
const
[
movieInfo
,
setMovieInfo
]
=
useState
()
...
...
@@ -23,10 +23,6 @@ const TicketingPage = ({ location }) => {
getCinemaInfo
()
},
[])
useEffect
(()
=>
{
getCinemaInfo
()
},
[])
useEffect
(()
=>
{
getMovieInfo
()
},
[
ticketInfo
])
...
...
@@ -70,7 +66,7 @@ const TicketingPage = ({ location }) => {
<
/div
>
<
div
className
=
"
col-sm-5 mb-4
"
>
<
h3
className
=
"
py-2 text-white text-center
"
style
=
{{
border
:
"
3px solid #000000
"
,
borderBottom
:
"
3px solid #FEDC00
"
}}
>
시간표
<
/h3
>
<
TicketingTimeTable
ticketInfo
=
{
ticketInfo
}
cinemaInfo
=
{
cinema
Info
}
/
>
<
TicketingTimeTable
ticketInfo
=
{
ticketInfo
}
setTicketInfo
=
{
setTicket
Info
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
row p-3
"
style
=
{{
backgroundColor
:
"
#252525
"
}}
>
...
...
@@ -86,7 +82,7 @@ const TicketingPage = ({ location }) => {
<
li
>
영화
:
{
movieInfo
.
title
}
<
/li
>
<
li
>
극장
:
{
ticketInfo
.
cinema
}
<
/li
>
<
li
>
일시
:
{
ticketInfo
.
time
}
<
/li
>
<
li
>
상영관
:
{
ticketInfo
.
selectedTheater
}
<
/li
>
<
li
>
상영관
:
{
(
ticketInfo
.
selectedTheater
!==
""
)
?
ticketInfo
.
selectedTheater
+
"
관
"
:
""
}
<
/li
>
<
/ul
>
:
<
div
><
/div>
}
<
/div
>
...
...
server/controllers/timetable.controller.js
View file @
ad0a174e
import
{
TimeTable
,
Theater
,
TheaterType
}
from
"
../db/index.js
"
;
import
moment
from
'
moment
'
;
import
{
TimeTable
,
Theater
,
TheaterType
,
Reservation
}
from
"
../db/index.js
"
;
import
sequelize
from
'
sequelize
'
const
{
Op
}
=
sequelize
const
getAll
=
async
(
req
,
res
)
=>
{
try
{
const
{
when
}
=
req
.
query
const
{
when
,
movieId
}
=
req
.
query
const
selectDate
=
new
Date
(
when
)
let
findAll
=
null
const
theaterArr
=
[]
const
findAll
=
await
TimeTable
.
findAll
({
where
:
{
date
:
selectDate
},
attributes
:
{
exclude
:
[
'
createdAt
'
,
'
updatedAt
'
]
},
order
:
[[
"
theater
"
,
"
ASC
"
],
[
"
start_time
"
,
"
ASC
"
]]
})
findAll
.
forEach
(
element
=>
{
if
(
!
theaterArr
.
includes
(
element
.
theater
))
theaterArr
.
push
(
element
.
theater
)
findAll
=
movieId
?
await
TimeTable
.
findAll
({
where
:
{
date
:
selectDate
,
movieId
:
movieId
},
attributes
:
{
exclude
:
[
'
createdAt
'
,
'
updatedAt
'
]
},
order
:
[[
"
theaterId
"
,
"
ASC
"
],
[
"
start_time
"
,
"
ASC
"
]],
include
:
[
Theater
]
})
:
await
TimeTable
.
findAll
({
where
:
{
date
:
selectDate
},
attributes
:
{
exclude
:
[
'
createdAt
'
,
'
updatedAt
'
]
},
order
:
[[
"
theaterId
"
,
"
ASC
"
],
[
"
start_time
"
,
"
ASC
"
]],
include
:
[
Theater
]
})
findAll
.
forEach
(
async
(
element
)
=>
{
if
(
!
theaterArr
.
includes
(
element
.
theaterId
))
theaterArr
.
push
(
element
.
theaterId
)
if
(
movieId
)
{
const
{
count
}
=
await
Reservation
.
findAndCountAll
({
where
:
{
movieId
:
movieId
,
timetableId
:
element
.
id
}
})
element
.
dataValues
.
reservations
=
count
}
})
const
findTheater
=
await
Theater
.
findAll
({
where
:
{
id
:
theaterArr
},
attributes
:
{
exclude
:
[
'
createdAt
'
,
'
updatedAt
'
]
},
include
:
[
TheaterType
],
order
:
[[
'
theaterName
'
]]
})
findTheater
.
forEach
(
el
=>
{
el
.
dataValues
.
theaterTypeName
=
el
.
dataValues
.
theatertype
.
dataValues
.
theaterTypeName
const
arr
=
findAll
.
filter
(
timetable
=>
{
if
(
el
.
id
===
timetable
.
theater
)
return
timetable
.
dataValues
if
(
el
.
id
===
timetable
.
theater
Id
)
return
timetable
.
dataValues
})
el
.
dataValues
.
timetable
=
arr
})
...
...
@@ -35,7 +41,7 @@ const submit = async (req, res) => {
const
isTimeTable
=
await
TimeTable
.
findAll
({
where
:
{
[
Op
.
and
]:
[
{
theater
:
theater
.
theater
},
{
theater
Id
:
theater
.
theater
},
{
[
Op
.
or
]:
[
{
[
Op
.
and
]:
[{
start_time
:
{
[
Op
.
gt
]:
startTime
}
},
{
end_time
:
{
[
Op
.
lte
]:
endTime
}
}]
},
...
...
@@ -62,7 +68,7 @@ const submit = async (req, res) => {
if
(
'
06:00
'
<=
theater
.
start
&&
theater
.
start
<
'
10:00
'
)
partTime
=
"
morning
"
else
if
(
'
00:00
'
<=
theater
.
start
<
'
06:00
'
)
partTime
=
"
night
"
else
partTime
=
"
day
"
await
TimeTable
.
create
({
theater
:
theater
.
theater
,
movieId
,
title
,
release_date
,
date
:
curDate
,
start_time
:
getTime
(
theater
.
start
),
end_time
:
getTime
(
theater
.
start
,
runtime
),
partTime
:
partTime
,
week
:
(
day
===
0
||
day
===
6
)
?
"
weekend
"
:
"
weekdays
"
})
await
TimeTable
.
create
({
theater
Id
:
theater
.
theater
,
movieId
,
title
,
release_date
,
date
:
curDate
,
start_time
:
getTime
(
theater
.
start
),
end_time
:
getTime
(
theater
.
start
,
runtime
),
partTime
:
partTime
,
week
:
(
day
===
0
||
day
===
6
)
?
"
weekend
"
:
"
weekdays
"
})
})
)
curDate
.
setDate
(
curDate
.
getDate
()
+
1
)
...
...
server/db/index.js
View file @
ad0a174e
...
...
@@ -50,6 +50,8 @@ Theater.belongsTo(TheaterType, { onDelete: 'CASCADE' });
TicketFee
.
belongsTo
(
TheaterType
,
{
onDelete
:
'
CASCADE
'
});
TimeTable
.
belongsTo
(
Theater
);
Reservation
.
belongsTo
(
Theater
);
Reservation
.
belongsTo
(
TimeTable
);
...
...
server/models/timetable.model.js
View file @
ad0a174e
...
...
@@ -11,9 +11,6 @@ const TimeTableModel = (sequelize) => {
primaryKey
:
true
,
autoIncrement
:
true
,
},
theater
:
{
type
:
DataTypes
.
INTEGER
,
},
movieId
:
{
type
:
DataTypes
.
INTEGER
,
},
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment