Skip to content

GitLab

Commit 2135143b authored by Kim, Subin's avatar Kim, Subin
Browse files

TimeTableEditForm 수정 중

parent d1599537
Hide whitespace changes
Inline Side-by-side
client/src/components/Admin/TimeTableEditForm.js
View file @ 2135143b
...@@ -15,11 +15,12 @@ const INIT_MOVIE = { ...@@ -15,11 +15,12 @@ const INIT_MOVIE = {
const TimeTableEditForm = () => { const TimeTableEditForm = () => {
const [movieList, setMovieList] = useState([]) const [movieList, setMovieList] = useState([])
const [theater, setTheater] = useState([]) const [theaterList, setTheaterList] = useState([])
const [selectId, setSelectId] = useState(0) const [selectId, setSelectId] = useState(0)
const [selectMovie, setSelectMovie] = useState({}) const [selectMovie, setSelectMovie] = useState({})
const [selectTheater, setSelectTheater] = useState(0) const [selectInfo, setSelectInfo] = useState({ theater: 0, start: "", end: "" })
const [sendMovie, setSendMovie] = useState(INIT_MOVIE) const [showTimes, setShowTimes] = useState({ list: [] })
const [sendInfo, setSendInfo] = useState(INIT_MOVIE)
const [error, setError] = useState("") const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
...@@ -41,26 +42,70 @@ const TimeTableEditForm = () => { ...@@ -41,26 +42,70 @@ const TimeTableEditForm = () => {
try { try {
setError("") setError("")
const res = await theaterApi.getAll() const res = await theaterApi.getAll()
console.log("res==", res) setTheaterList(res)
setTheater(res)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
async function handleSelect(e) { function addRunTime(start, runTime) {
const { name, value } = e.target const startArr = start.split(':')
if (name === "movieId") { const add = Number(startArr[1]) + runTime
setSelectId(value)
const res = await movieApi.getMovieInfofromTM(value) let hours = Number(startArr[0]) + Math.floor(add / 60)
setSelectMovie({ ...res }) if (hours <= 9) hours = '0' + hours
setSendMovie({ ...sendMovie, movieId: value, title: res.title, release_date: res.release_date }) if (hours / 24 > 0) hours = '0' + hours % 24
} else setSelectTheater(value) else if (hours <= 9) hours = '0' + hours
let mins = add % 60
if (mins <= 9) mins = '0' + mins
setSelectInfo({ ...selectInfo, "start": start, "end": hours + ':' + mins })
} }
function handleChange(e) { function addData() {
const { name, value } = e.target const { list } = showTimes
setSendMovie({ ...sendMovie, [name]: value }) 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('선택한 상영관을 찾지 못했습니다. 다시 시도하길 바랍니다.')
} else alert('추가할 데이터의 갯수가 부족합니다. 모든 항목을 입력해주시길 바랍니다.')
setSelectInfo({ ...selectInfo, theater: 0, start: "", end: "" })
}
function delData(index) {
let { list } = showTimes
list = list.splice(index, 1)
setShowTimes({ list: list })
}
async function handleChange(e) {
try {
setError("")
const { name, value } = e.target
if (name === "movieId") {
setSelectId(value)
const res = await movieApi.getMovieInfofromTM(value)
setSelectMovie({ ...res })
setSendInfo({ ...sendInfo, movieId: value, title: res.title, release_date: res.release_date, end_date: "" })
} else if (name === "end_date") {
setSendInfo({ ...sendInfo, [name]: value })
} else if (name === "theater") {
setSelectInfo({ ...selectInfo, [name]: Number(value) })
} else if (name === "start") {
addRunTime(value, selectMovie.runtime)
} else setSelectInfo({ ...selectInfo, [name]: value })
} catch (error) {
catchErrors(error, setError)
}
} }
async function handleSubmit(e) { async function handleSubmit(e) {
...@@ -76,8 +121,8 @@ const TimeTableEditForm = () => { ...@@ -76,8 +121,8 @@ const TimeTableEditForm = () => {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{console.log("data==", sendMovie)} {console.log("select==", showTimes)}
<select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleSelect} 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) => {
if (index === 0) return <> if (index === 0) return <>
...@@ -89,19 +134,26 @@ const TimeTableEditForm = () => { ...@@ -89,19 +134,26 @@ const TimeTableEditForm = () => {
: <option value="0" disabled>서버에 등록된 영화가 없습니다.</option>} : <option value="0" disabled>서버에 등록된 영화가 없습니다.</option>}
</select> </select>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label for="release_date" className="form-label">상영시작일</label> <label htmlFor="release_date" className="form-label">상영시작일</label>
<input type="text" className={`form-control ${styles.shadowNone}`} id="release_date" name="release_date" value={selectMovie.release_date} /> <input type="text" className={`form-control ${styles.shadowNone}`} id="release_date" name="release_date" value={selectMovie?.release_date || ''} disabled />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label for="end_date" className="form-label">상영종료일</label> <label htmlFor="end_date" className="form-label">상영종료일</label>
<input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" onChange={handleChange} /> <input type="date" className={`form-control ${styles.shadowNone}`} id="end_date" name="end_date" value={sendInfo.end_date} min={sendInfo.release_date} onChange={handleChange} />
</div> </div>
<p>시간대 설정</p> <p>시간대 설정</p>
<ul className="list-group list-group-flush">
{showTimes.list.length !== 0 ?
showTimes.list.map((timeInfo, index) => <li className="list-group-item d-flex justify-content-between align-items-center">
{timeInfo.theaterName}&nbsp;&nbsp;&nbsp;{timeInfo.start} ~ {timeInfo.end}
<button type="button" className="btn btn-danger" onClick={() => delData(index)}>삭제</button>
</li>) : <li className="list-group-item text-center">추가된 시간대가 없습니다. 폼을 작성해 시간대를 추가해 주세요.</li>}
</ul>
<div> <div>
<div> <div>
<select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="theater" name="theater" value={selectTheater} onChange={handleSelect} aria-label="select theater" defaultValue="0"> <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="theater" name="theater" value={selectInfo.theater} onChange={handleChange} aria-label="select theater" defaultValue="0">
{theater.length !== 0 ? {theaterList.length !== 0 ?
theater.map((theater, index) => { theaterList.map((theater, index) => {
if (index === 0) return <> if (index === 0) return <>
<option value="0" disabled>상영관을 선택해주십시오.</option> <option value="0" disabled>상영관을 선택해주십시오.</option>
<option value={theater.theatertypeId}>{theater.theaterName}관 / {theater.theatertype.theaterTypeName}</option> <option value={theater.theatertypeId}>{theater.theaterName}관 / {theater.theatertype.theaterTypeName}</option>
...@@ -111,6 +163,16 @@ const TimeTableEditForm = () => { ...@@ -111,6 +163,16 @@ const TimeTableEditForm = () => {
: <option value="0" disabled>서버에 등록된 상영관이 없습니다.</option>} : <option value="0" disabled>서버에 등록된 상영관이 없습니다.</option>}
</select> </select>
</div> </div>
<div>
<input type="time" id="start" name="start" value={selectInfo.start} onChange={handleChange} disabled={!selectId || !selectInfo.theater} />
<p>{(selectId && selectInfo.start !== "") ? "~ " + selectInfo.end : ""}</p>
</div>
<div>
<button type="button" className={`btn btn-dark ${styles.customBtn}`} onClick={addData}>추가</button>
</div>
</div>
<div>
<button type="submit" className={`btn btn-dark ${styles.customBtn}`}>등록</button>
</div> </div>
</form> </form>
) )
......
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