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

client - TimeTableEdit 컴포넌트 완성 (css 미완)

parent 72bd94dc
......@@ -4,11 +4,11 @@ import TimeTable from "./TimeTable";
const TimeTableEdit = () => {
return (
<>
<h2 className="border-bottom border-2 text-center pb-2 me-2">현재 상영시간표 정보</h2>
<div>
<TimeTableEditForm />
<TimeTable />
</div>
<h2 className="border-bottom border-2 text-center pb-2 me-2">현재 상영시간표 정보</h2>
<div>
<TimeTableEditForm />
<TimeTable />
</div>
</>
)
}
......
import { useState, useEffect } from "react";
import movieApi from "../../apis/movie.api.js";
import theaterApi from "../../apis/theater.api.js";
import timetableApi from "../../apis/timetable.api.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";
const INIT_MOVIE = {
movieId: 0,
title: "",
release_date: "",
end_date: "",
theater: [],
times: []
const INIT_INFO = {
theater: 0,
start: "",
end: ""
}
const TimeTableEditForm = () => {
......@@ -18,9 +16,9 @@ const TimeTableEditForm = () => {
const [theaterList, setTheaterList] = useState([])
const [selectId, setSelectId] = useState(0)
const [selectMovie, setSelectMovie] = useState({})
const [selectInfo, setSelectInfo] = useState({ theater: 0, start: "", end: "" })
const [info, setInfo] = useState({ end_date: "" })
const [selectInfo, setSelectInfo] = useState(INIT_INFO)
const [showTimes, setShowTimes] = useState({ list: [] })
const [sendInfo, setSendInfo] = useState(INIT_MOVIE)
const [error, setError] = useState("")
useEffect(() => {
......@@ -28,6 +26,11 @@ const TimeTableEditForm = () => {
getTheater()
}, [])
useEffect(() => {
setSelectInfo({ ...selectInfo, ...INIT_INFO })
setShowTimes({ list: [] })
}, [selectId])
async function getMoviesfromDB() {
try {
setError("")
......@@ -48,17 +51,23 @@ const TimeTableEditForm = () => {
}
}
function getDate(string) {
const arr = string.split(':')
const date = new Date(0, 0, 0, Number(arr[0]), Number(arr[1]))
return date
}
function addRunTime(start, runTime) {
const startArr = start.split(':')
const add = Number(startArr[1]) + runTime
let hours = Number(startArr[0]) + Math.floor(add / 60)
if (hours <= 9) hours = '0' + hours
if (hours / 24 > 0) hours = '0' + hours % 24
if (Math.floor(hours / 24) > 0) hours = '0' + hours % 24
else if (hours <= 9) hours = '0' + hours
let mins = add % 60
if (mins <= 9) mins = '0' + mins
setSelectInfo({ ...selectInfo, "start": start, "end": hours + ':' + mins })
}
......@@ -66,23 +75,27 @@ const TimeTableEditForm = () => {
const { list } = showTimes
const isSelect = Object.values(selectInfo).every((el) => Boolean(el))
if (isSelect) {
const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
if (theater) {
const myTime = {
theaterTypeId: selectInfo.theater,
theaterName: theater.theaterName + '관 / ' + theater.theatertype.theaterTypeName,
start: selectInfo.start,
end: selectInfo.end
}
setShowTimes({ list: list.concat(myTime) })
} else alert('선택한 상영관을 찾지 못했습니다. 다시 시도하길 바랍니다.')
const isTime = list.find(el => el.theaterTypeId === selectInfo.theater && (getDate(el.start) <= getDate(selectInfo.end) && getDate(el.end) >= getDate(selectInfo.start)))
if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.')
else {
const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
if (theater) {
const myTime = {
theaterTypeId: selectInfo.theater,
theaterName: theater.theaterName + '관 / ' + theater.theatertype.theaterTypeName,
start: selectInfo.start,
end: selectInfo.end
}
setShowTimes({ list: list.concat(myTime) })
} else alert('선택한 상영관을 찾지 못했습니다. 다시 시도하길 바랍니다.')
}
} else alert('추가할 데이터의 갯수가 부족합니다. 모든 항목을 입력해주시길 바랍니다.')
setSelectInfo({ ...selectInfo, theater: 0, start: "", end: "" })
setSelectInfo({ ...selectInfo, ...INIT_INFO })
}
function delData(index) {
let { list } = showTimes
list = list.splice(index, 1)
list.splice(index, 1)
setShowTimes({ list: list })
}
......@@ -94,9 +107,9 @@ const TimeTableEditForm = () => {
setSelectId(value)
const res = await movieApi.getMovieInfofromTM(value)
setSelectMovie({ ...res })
setSendInfo({ ...sendInfo, movieId: value, title: res.title, release_date: res.release_date, end_date: "" })
setInfo({ ...info, end_date: "" })
} else if (name === "end_date") {
setSendInfo({ ...sendInfo, [name]: value })
setInfo({ ...info, [name]: value })
} else if (name === "theater") {
setSelectInfo({ ...selectInfo, [name]: Number(value) })
} else if (name === "start") {
......@@ -105,13 +118,25 @@ const TimeTableEditForm = () => {
} catch (error) {
catchErrors(error, setError)
}
}
async function handleSubmit(e) {
e.preventDefault()
const timeArr = []
try {
setError("")
showTimes.list.map(time => {
timeArr.push({ theater: time.theaterTypeId, start: time.start, end: time.end })
})
const sendData = {
movieId: selectMovie.id,
title: selectMovie.title,
release_date: selectMovie.release_date,
runtime: selectMovie.runtime,
theater: timeArr,
date: info.end_date
}
await timetableApi.submit(sendData)
alert("해당 상영시간표 정보 등록이 성공적으로 완료되었습니다.")
window.location.reload()
} catch (error) {
......@@ -121,7 +146,6 @@ const TimeTableEditForm = () => {
return (
<form onSubmit={handleSubmit}>
{console.log("select==", showTimes)}
<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.map((movie, index) => {
......@@ -139,7 +163,7 @@ const TimeTableEditForm = () => {
</div>
<div className="col-md-6 mb-3">
<label htmlFor="end_date" className="form-label">상영종료일</label>
<input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" value={sendInfo.end_date} min={sendInfo.release_date} onChange={handleChange} />
<input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" value={info.end_date} min={selectMovie.release_date} onChange={handleChange} />
</div>
<p>시간대 설정</p>
<ul className="list-group list-group-flush">
......
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