Commit 0b1deeab authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'kimpen'

parents ddddae5b f1ca9c13
...@@ -11,8 +11,8 @@ const submit = async (sendData) => { ...@@ -11,8 +11,8 @@ const submit = async (sendData) => {
return data return data
} }
const remove = async () => { const remove = async (timeId) => {
const { data } = await axios.delete(`${baseUrl}/api/timetable/`) const { data } = await axios.delete(`${baseUrl}/api/timetable/${timeId}`)
return data return data
} }
......
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import moment from 'moment'; import moment from 'moment';
import Calender from "../Calender/Calender.js"; import HorizontalCalender from "../Calender/HorizontalCalender.js";
import timetableApi from "../../apis/timetable.api.js"; import timetableApi from "../../apis/timetable.api.js";
import catchErrors from "../../utils/catchErrors.js"; import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";
const TimeTable = () => { const TimeTable = () => {
const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD')) const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD'))
...@@ -23,10 +24,10 @@ const TimeTable = () => { ...@@ -23,10 +24,10 @@ const TimeTable = () => {
} }
} }
async function deleteTime() { async function deleteTime(timeId) {
try { try {
setError("") setError("")
await timetableApi.remove() await timetableApi.remove(timeId)
alert('해당 상영시간표 정보를 성공적으로 삭제하였습니다.') alert('해당 상영시간표 정보를 성공적으로 삭제하였습니다.')
getTimeTable(selectDate) getTimeTable(selectDate)
} catch (error) { } catch (error) {
...@@ -35,24 +36,22 @@ const TimeTable = () => { ...@@ -35,24 +36,22 @@ const TimeTable = () => {
} }
return ( return (
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6 ms-lg-1 mb-5">
{console.log("list==", timeList)} <HorizontalCalender selectDate={selectDate} setSelectDate={setSelectDate} />
<Calender selectDate={selectDate} setSelectDate={setSelectDate} />
{timeList.length !== 0 ? {timeList.length !== 0 ?
timeList.map(el => <> timeList.map(el => <div className="mt-4">
<h5>{el.theaterName} </h5> <h5 className="mb-0">{el.theaterName} / <p className="d-inline fs-6 mb-0">{el.theatertype.theaterTypeName}</p></h5>
{/* {arr = el.timetable.map(time => <div className="card"> {el.timetable.map(time => <div className="d-inline-flex flex-column m-2">
<div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div> <div className="d-flex justify-content-end">
<button type="button" className={`btn btn-dark btn-sm ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
</div> </div>
) <div className="card">
} */} <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
{/* {el.timetable.map(time => { <div className="card-footer text-center py-1">{time.title}</div>
if (el.id === time.id) return <div className="card">
<div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div>
</div> </div>
})} */} </div>)}
</>) </div>)
: <></>} : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.<br />아래의 양식을 작성해 새로운 상영시간표를 등록해주세요.</p>}
</div> </div>
) )
} }
......
...@@ -75,7 +75,7 @@ const TimeTableEditForm = () => { ...@@ -75,7 +75,7 @@ const TimeTableEditForm = () => {
const { list } = showTimes const { list } = showTimes
const isSelect = Object.values(selectInfo).every((el) => Boolean(el)) const isSelect = Object.values(selectInfo).every((el) => Boolean(el))
if (isSelect) { if (isSelect) {
const isTime = list.find(el => el.theaterTypeId === selectInfo.theater && (getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end))) const isTime = list.find(el => (el.theaterTypeId === selectInfo.theater) && ((getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end))))
if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.') if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.')
else { else {
const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater) const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
...@@ -146,7 +146,8 @@ const TimeTableEditForm = () => { ...@@ -146,7 +146,8 @@ const TimeTableEditForm = () => {
} }
return ( return (
<form className="col-12 col-lg-6" onSubmit={handleSubmit}> <form className="col-12 col-lg-6 me-lg-1" onSubmit={handleSubmit}>
<h5 className={`border-top border-dark border-2 pt-3 mb-3 ${styles.borderLg}`}>상영시간표 등록</h5>
<select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0"> <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0">
{movieList.length !== 0 ? {movieList.length !== 0 ?
movieList.map((movie, index) => { movieList.map((movie, index) => {
......
...@@ -44,6 +44,12 @@ ...@@ -44,6 +44,12 @@
} }
} }
@media screen and (min-width: 992px) {
.borderLg {
border: 0 !important;
}
}
.selectInput { .selectInput {
& option[disabled] { & option[disabled] {
color: #000; color: #000;
......
...@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') }) dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
lastWeek.add(1, 'days') lastWeek.add(1, 'days')
} }
console.log("arr=", dateArr) const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
console.log("same==", moment(oneDay).isSame('2021-08-07')) {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
const resultArr = dateArr.map(el => <div onClick={() => setSelectDate(el.date)}> <div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
{moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong>{moment(el.date).format('YYYY.MM')}</strong> : ""} <strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
<div> <strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
<strong>{moment(el.date).format('DD')}</strong>
<em>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</em>
</div> </div>
</div>) </div>)
setDateList(resultArr) setDateList(resultArr)
...@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => { ...@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
return ( return (
<> <>
{console.log("date==", selectDate)} {console.log("date==", selectDate)}
<div> <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
<i className="bi bi-chevron-left"></i> <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
{dateList.map(el => el)} <i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
<i className="bi bi-chevron-right"></i> <div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
<i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
</div> </div>
</> </>
) )
......
.box {
overflow: hidden;
& .yearmonth {
position: relative;
top: 0;
width: 100%;
font-size: 10px;
}
& .selectDate {
background-color: #000;
color: #fff;
border-radius: 50%;
}
}
.calender {
right: 13px;
font-size: 1.5em;
}
\ No newline at end of file
import { TimeTable, Theater } from "../db/index.js"; import { TimeTable, Theater, TheaterType } from "../db/index.js";
import moment from 'moment'; import moment from 'moment';
import sequelize from 'sequelize' import sequelize from 'sequelize'
const { Op } = sequelize const { Op } = sequelize
...@@ -8,21 +8,18 @@ const getAll = async (req, res) => { ...@@ -8,21 +8,18 @@ const getAll = async (req, res) => {
const { when } = req.query const { when } = req.query
const selectDate = new Date(when) const selectDate = new Date(when)
const theaterArr = [] const theaterArr = []
// const timeTableArr = []
const findAll = await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theater", "ASC"], ["start_time", "ASC"]] }) const findAll = await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theater", "ASC"], ["start_time", "ASC"]] })
findAll.forEach(element => { findAll.forEach(element => {
if (!theaterArr.includes(element.theater)) theaterArr.push(element.theater) if (!theaterArr.includes(element.theater)) theaterArr.push(element.theater)
}) })
const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [['theaterName']] }) const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [TheaterType], order: [['theaterName']] })
findTheater.forEach(el => { findTheater.forEach(el => {
const arr = findAll.filter(timetable => { const arr = findAll.filter(timetable => {
if (el.id === timetable.theater) return timetable.dataValues if (el.id === timetable.theater) return timetable.dataValues
}) })
el.dataValues.timetable = arr el.dataValues.timetable = arr
// timeTableArr.push({ id: el.id, info: arr })
}) })
return res.json(findTheater) return res.json(findTheater)
// return res.json({findTheater, timeTableArr})
} catch (error) { } catch (error) {
return res.status(500).send(error.message || "상영시간표 정보 가져오는 중 에러 발생") return res.status(500).send(error.message || "상영시간표 정보 가져오는 중 에러 발생")
} }
...@@ -85,7 +82,7 @@ const getTime = (string, runtime = 0) => { ...@@ -85,7 +82,7 @@ const getTime = (string, runtime = 0) => {
const remove = async (req, res) => { const remove = async (req, res) => {
try { try {
const { timeId } = req.params const { timeId } = req.params
const delNum = await TimeTable.destroy({ where: {} }) const delNum = await TimeTable.destroy({ where: { id: timeId } })
if (delNum) res.json(delNum) if (delNum) res.json(delNum)
else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.") else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.")
} catch (error) { } catch (error) {
......
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