Skip to content

GitLab

Commit ad0a174e authored by Kim, Subin's avatar Kim, Subin
Browse files

TimeTable 예매시 연결

parent 95cd0eb7
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={cinemaInfo} />
<TicketingTimeTable ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
</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.theaterId) 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 },
{ theaterId: 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({ theaterId: 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,
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment