Skip to content

Delete editing form function #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
esmeii wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Delete editing form function #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link href="../styles/index.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />

<link
href="https://fonts.googleapis.com/css?family=Song+Myung|Rubik+Scribble|Nanum+Gothic+Coding|DM+Serif+Display|Noto+Serif+KR:wght@500;600&display=swap"
rel="stylesheet"
Expand Down
198 changes: 100 additions & 98 deletions public/manageBooking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,9 @@ <h1 class="fw-bolder">예매 정보 확인</h1>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-dark">확인</button>
<button type="submit" class="btn btn-dark" id="confirmButton">
확인
</button>
</div>
</form>
</div>
Expand Down Expand Up @@ -150,16 +152,16 @@ <h5 class="modal-title" id="exampleModalLabel">예매 정보</h5>
예매 취소
</button>
<!-- 예매 취소 버튼 -->
<button id="openUpdateForm" type="button" class="btn btn-dark">
<!-- <button id="openUpdateForm" type="button" class="btn btn-dark">
정보 수정
</button>
</button> -->
<!-- 정보 수정 버튼 -->
</div>
</div>
</div>
</div>

<!-- 정보 수정 폼 -->
<!-- 정보 수정 폼
<div id="updateForm" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
Expand Down Expand Up @@ -217,7 +219,7 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>
</div>
</div>
</div>
</div>
</div> -->

<script>
// web app's Firebase configuration
Expand All @@ -242,13 +244,13 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>

var docRef = null; // 예매 정보에 대한 참조를 저장할 변수
var reservationModal = document.getElementById("reservationModal"); // 모달 창
var updateForm = document.getElementById("updateForm"); // 정보 수정 폼
//var updateForm = document.getElementById("updateForm"); // 정보 수정 폼
// 사용자 입력 값 가져오기
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;

document
.querySelector(".btn.btn-dark")
.getElementById("confirmButton")
.addEventListener("click", function () {
$("#reservationModal").modal("show");
});
Expand All @@ -265,19 +267,19 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>
});

// 정보 수정 버튼 클릭 이벤트 핸들러
document
.getElementById("openUpdateForm")
.addEventListener("click", function () {
$("#reservationModal").modal("hide"); // 예매 정보 폼 닫기
$("#updateForm").modal("show"); // 정보 수정 폼 보여주기
});
// document
// .getElementById("openUpdateForm")
// .addEventListener("click", function () {
// $("#reservationModal").modal("hide"); // 예매 정보 폼 닫기
// $("#updateForm").modal("show"); // 정보 수정 폼 보여주기
// });

// 정보 수정 폼 닫기 버튼 클릭 이벤트 핸들러
document
.getElementById("closeUpdateForm")
.addEventListener("click", function () {
$("#updateForm").modal("hide"); // 정보 수정 폼 닫기
});
// // 정보 수정 폼 닫기 버튼 클릭 이벤트 핸들러
// document
// .getElementById("closeUpdateForm")
// .addEventListener("click", function () {
// $("#updateForm").modal("hide"); // 정보 수정 폼 닫기
// });

// 폼 제출 이벤트 핸들러
document
Expand Down Expand Up @@ -323,18 +325,18 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>

document.getElementById("reservationInfo").innerHTML = result;

// 정보를 수정 폼의 input 값으로 설정
document.getElementById("updateName").value = data.name;
document.getElementById("updateEmail").value = data.email;
document.getElementById("updatePeople").value = data.people;
document.getElementById("updatePhone").value = data.phone;
// // 정보를 수정 폼의 input 값으로 설정
// document.getElementById("updateName").value = data.name;
// document.getElementById("updateEmail").value = data.email;
// document.getElementById("updatePeople").value = data.people;
// document.getElementById("updatePhone").value = data.phone;
// 복수 개의 날짜 선택을 위해 date 필드를 배열로 처리
var updateDate = document.getElementById("updateDate");
for (var i = 0; i < updateDate.options.length; i++) {
updateDate.options[i].selected = data.date.includes(
updateDate.options[i].value
);
}
// var updateDate = document.getElementById("updateDate");
// for (var i = 0; i < updateDate.options.length; i++) {
// updateDate.options[i].selected = data.date.includes(
// updateDate.options[i].value
// );
// }
document.getElementById("cancelReservation").disabled = false; // 예매 취소 버튼 활성화
found = true; // 일치하는 정보를 찾았음을 표시
}
Expand Down Expand Up @@ -384,78 +386,78 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>
});

// 정보 수정 폼 제출 이벤트 핸들러
document
.getElementById("submitUpdate")
.addEventListener("click", function (event) {
event.preventDefault();
// document
// .getElementById("submitUpdate")
// .addEventListener("click", function (event) {
// event.preventDefault();

// 변경할 정보 가져오기
var updateName =
document.getElementById("updateName").value ||
document.getElementById("updateName").placeholder;
var updateEmail =
document.getElementById("updateEmail").value ||
document.getElementById("updateEmail").placeholder;
var updatePeople =
document.getElementById("updatePeople").value ||
document.getElementById("updatePeople").placeholder;
var updatePhone =
document.getElementById("updatePhone").value ||
document.getElementById("updatePhone").placeholder;
// // 변경할 정보 가져오기
// var updateName =
// document.getElementById("updateName").value ||
// document.getElementById("updateName").placeholder;
// var updateEmail =
// document.getElementById("updateEmail").value ||
// document.getElementById("updateEmail").placeholder;
// var updatePeople =
// document.getElementById("updatePeople").value ||
// document.getElementById("updatePeople").placeholder;
// var updatePhone =
// document.getElementById("updatePhone").value ||
// document.getElementById("updatePhone").placeholder;

// 선택된 날짜 가져오기
var updateDate = Array.from(
document.getElementById("updateDate").selectedOptions
).map((option) => option.value);
// // 선택된 날짜 가져오기
// var updateDate = Array.from(
// document.getElementById("updateDate").selectedOptions
// ).map((option) => option.value);

// 이름, 이메일, 전화번호 조건 검사
if (!updateName) {
alert("이름을 입력해주세요.");
return;
}
// // 이름, 이메일, 전화번호 조건 검사
// if (!updateName) {
// alert("이름을 입력해주세요.");
// return;
// }

if (!updateEmail) {
alert("이메일을 입력해주세요.");
return;
}
// if (!updateEmail) {
// alert("이메일을 입력해주세요.");
// return;
// }

if (!updatePhone) {
alert("전화번호를 입력해주세요.");
return;
}
// if (!updatePhone) {
// alert("전화번호를 입력해주세요.");
// return;
// }

// 인원과 날짜 조건 검사
if (!updatePeople || updatePeople < 1) {
alert("인원은 반드시 1명 이상이어야 합니다.");
return;
}
// // 인원과 날짜 조건 검사
// if (!updatePeople || updatePeople < 1) {
// alert("인원은 반드시 1명 이상이어야 합니다.");
// return;
// }

if (!updateDate.length) {
alert("날짜는 반드시 한 개 이상 선택되어야 합니다.");
return;
}
// if (!updateDate.length) {
// alert("날짜는 반드시 한 개 이상 선택되어야 합니다.");
// return;
// }

// 파이어베이스에 정보 업데이트
docRef
.update({
name: updateName,
date: updateDate,
email: updateEmail,
people: updatePeople,
phone: updatePhone,
})
.then(function () {
console.log("Document successfully updated!");
alert("예매 정보가 성공적으로 업데이트되었습니다.");
updateForm.style.display = "none"; // 정보 수정 폼 닫기
$("#updateForm").modal("hide");
$("body").removeClass("modal-open");
$(".modal-backdrop").remove();
})
.catch(function (error) {
console.error("Error updating document: ", error);
});
});
// // 파이어베이스에 정보 업데이트
// docRef
// .update({
// name: updateName,
// date: updateDate,
// email: updateEmail,
// people: updatePeople,
// phone: updatePhone,
// })
// .then(function () {
// console.log("Document successfully updated!");
// alert("예매 정보가 성공적으로 업데이트되었습니다.");
// updateForm.style.display = "none"; // 정보 수정 폼 닫기
// $("#updateForm").modal("hide");
// $("body").removeClass("modal-open");
// $(".modal-backdrop").remove();
// })
// .catch(function (error) {
// console.error("Error updating document: ", error);
// });
// });

// 페이지 로드 시 정보 가져오기
window.addEventListener("load", function () {
Expand All @@ -467,10 +469,10 @@ <h5 class="modal-title" id="exampleModalLabel">예매 내역 수정</h5>
var data = doc.data();

// 가져온 정보로 placeholder 설정
document.getElementById("updateName").placeholder = data.name;
document.getElementById("updateEmail").placeholder = data.email;
document.getElementById("updatePeople").placeholder = data.people;
document.getElementById("updatePhone").placeholder = data.phone;
// document.getElementById("updateName").placeholder = data.name;
// document.getElementById("updateEmail").placeholder = data.email;
// document.getElementById("updatePeople").placeholder = data.people;
// document.getElementById("updatePhone").placeholder = data.phone;
} else {
console.log("No such document!");
}
Expand Down
Loading