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