Skip to content

GitLab

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

영화관람료 관련 client 컴포넌트

parent 1a25e838
Show whitespace changes
Inline Side-by-side
client/src/components/Admin/TicketEditForm.js 0 → 100644
View file @ dc8b9516
import { useState, useEffect } from "react";
import cinemaApi from "../../apis/cinema.api.js";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./admin.module.scss";
const INIT_TICKETFEE = {
theaterType: "",
weekdays: 0,
weekend: 0,
morning: 0,
day: 0,
night: 0,
youth: 0,
adult: 0,
senior: 0,
defaultPrice: 5000
}
const TicketEditForm = ({ editFee }) => {
const [ticketFee, setTicketFee] = useState(INIT_TICKETFEE)
const [error, setError] = useState("")
useEffect(() => {
setTicketFee({ ...ticketFee, ...editFee })
}, [editFee])
function handleChange(e) {
const { name, value } = e.target
setTicketFee({ ...ticketFee, [name]: value })
}
async function handleSubmit(e) {
e.preventDefault()
try {
setError("")
await cinemaApi.editTicketFee(ticketFee)
alert("해당 관람료 정보 등록이 성공적으로 완료되었습니다.")
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
}
return (
<form onSubmit={handleSubmit}>
<div className="d-flex mb-3">
<label for="theaterType" className="col-form-label">상영관 종류</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="text" id="theaterType" name="theaterType" value={ticketFee.theaterType} onChange={handleChange} />
</div>
<label for="defaultPrice" className="col-form-label">기본 가격</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="defaultPrice" name="defaultPrice" value={ticketFee.defaultPrice} onChange={handleChange} />
</div>
</div>
<div className="d-flex mb-3">
<label for="weekdays" className="col-form-label">주중</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="weekdays" name="weekdays" value={ticketFee.weekdays} onChange={handleChange} />
</div>
<label for="weekend" className="col-form-label">주말</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="weekend" name="weekend" value={ticketFee.weekend} onChange={handleChange} />
</div>
</div>
<div className="d-flex mb-3">
<label for="morning" className="col-form-label">조조</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="morning" name="morning" value={ticketFee.morning} onChange={handleChange} />
</div>
<label for="day" className="col-form-label">일반</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="day" name="day" value={ticketFee.day} onChange={handleChange} />
</div>
<label for="night" className="col-form-label">심야</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="night" name="night" value={ticketFee.night} onChange={handleChange} />
</div>
</div>
<div className="d-flex mb-3">
<label for="youth" className="col-form-label">청소년</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="youth" name="youth" value={ticketFee.youth} onChange={handleChange} />
</div>
<label for="adult" className="col-form-label">일반</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="adult" name="adult" value={ticketFee.adult} onChange={handleChange} />
</div>
<label for="senior" className="col-form-label">경로</label>
<div className="">
<input className={`form-control ${styles.shadowNone}`} type="number" id="senior" name="senior" value={ticketFee.senior} onChange={handleChange} />
</div>
<div>
<button type="submit" className={`btn btn-dark ${styles.customBtn}`}>추가</button>
</div>
</div>
</form>
)
}
export default TicketEditForm
\ No newline at end of file
client/src/components/Admin/TicketFeeTable.js 0 → 100644
View file @ dc8b9516
import { useState, useEffect } from "react";
import cinemaApi from "../../apis/cinema.api.js";
import catchErrors from "../../utils/catchErrors.js";
const FeeTable = ({ editFee, setEditFee }) => {
const [ticketFee, setTicketFee] = useState([])
const [error, setError] = useState("")
useEffect(() => {
getInfo()
}, [])
async function getInfo() {
const res = await cinemaApi.getTicketFee()
console.log("res==", res)
}
async function editRow(theaterType) {
try {
setError("")
const res = await cinemaApi.getTicketFeeOne(theaterType)
setEditFee({ ...editFee, ...res })
} catch (error) {
catchErrors(error, setError)
}
}
async function deleteData(theaterType) {
try {
setError("")
await cinemaApi.removeTicketFee(theaterType)
alert("해당 관람료 정보를 성공적으로 삭제했습니다.")
getInfo()
} catch (error) {
catchErrors(error, setError)
}
}
return (
<table className="table caption-top text-center align-middle">
<caption className="text-dark">영화관람료 안내</caption>
<thead className="table-dark">
<tr>
<th>상영관 종류</th>
<th>주중 / 주말</th>
<th>시간대</th>
<th>청소년</th>
<th>일반</th>
<th>경로</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td rowSpan="6">일반석 2D</td>
<td rowSpan="3">주중(월~목)</td>
<td>조조 (06:00 ~ )</td>
<td>6,000원</td>
<td>8,000원</td>
<td>6,000원</td>
<td rowSpan="6">
<div className="d-flex flex-column">
<button type="button" className="btn btn-primary my-1" onClick={() => editRow("일반석 2D")}>수정</button>
<button type="button" className="btn btn-danger my-1" onClick={() => deleteData("일반석 2D")}>삭제</button>
</div>
</td>
</tr>
<tr>
<td>일반 (11:00 ~ )</td>
<td>9,000원</td>
<td>12,000원</td>
<td>9,000원</td>
</tr>
<tr>
<td>심야 (00:00 ~ )</td>
<td>5,000원</td>
<td>7,000원</td>
<td>5,000원</td>
</tr>
<tr>
<td rowSpan="3">주말(금~일) 및 공휴일</td>
<td>조조 (06:00 ~ )</td>
<td>6,000원</td>
<td>9,000원</td>
<td>6,000원</td>
</tr>
<tr>
<td>일반 (11:00 ~ )</td>
<td>10,000원</td>
<td>13,000원</td>
<td>10,000원</td>
</tr>
<tr>
<td>심야 (00:00 ~ )</td>
<td>5,000원</td>
<td>7,000원</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
)
}
export default FeeTable
\ No newline at end of file
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