Skip to content

[fix] reserve, goods_list 버튼 수정 #60

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
yenqkr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[fix] reserve, goods_list 버튼 수정 #60

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
Binary file modified BACKEND/HYUNSOO/sswu/db.sqlite3
View file
Open in desktop
Binary file not shown.
13 changes: 10 additions & 3 deletions BACKEND/HYUNSOO/sswu/order/templates/goods_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,9 @@
const bookingBtn = document.getElementById("bookingBtn");
const selectElements = document.querySelectorAll(".num_select");

bookingBtn.disabled = true;


// select 요소가 변경될 때마다 실행되는 함수를 정의합니다.
function handleSelectChange() {
let atLeastOneOptionSelected = false;
Expand All @@ -225,14 +228,18 @@
// 하나 이상의 옵션이 선택되었는지에 따라 버튼의 CSS 색상을 변경합니다.
if (atLeastOneOptionSelected) {
bookingBtn.style.backgroundColor = "#F06786"; // 버튼의 색상을 변경합니다.
bookingBtn.disabled = false; // 선택된 옵션이 있을 때 버튼을 활성화합니다.

// 예약 버튼을 클릭했을 때, 원하는 페이지로 이동하도록 설정합니다.
bookingBtn.addEventListener("click", function () {
window.location.href = "https://www.naver.com"; // 여기에 이동할 페이지의 URL을 넣으세요.
});
} else {
} else {handleSelectChange
bookingBtn.style.backgroundColor = ""; // 선택한 옵션이 없을 때 기본 색상으로 변경합니다.
bookingBtn.disabled = true; // 선택된 옵션이 없을 때 버튼을 비활성화합니다.

bookingBtn.removeEventListener("click", function () {
window.location.href = "https://www.naver.com"; // 이전에 설정된 이벤트 제거
window.location.href = ""; // 이전에 설정된 이벤트 제거
});
}
}
Expand Down Expand Up @@ -292,4 +299,4 @@
}
</script>
</body>
</html>
</html>
131 changes: 93 additions & 38 deletions BACKEND/HYUNSOO/sswu/order/templates/reserve.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,95 @@

<!-- js -->
<script>
// 모달 창
const modalOpenButton = document.getElementById("modalOpenButton");
const HomeButton = document.getElementById("HomeButton");
const goodsMoreButton = document.getElementById("goodsMoreButton");
const closeButton = document.getElementById("closeBtn");
const modal = document.getElementById("modalContainer");
const header = document.querySelector(".header"); // header 요소 선택
const overlay = document.createElement("div"); // 어두운 배경을 생성

modalOpenButton.addEventListener("click", () => {

// HTML에서 전화번호 입력 필드의 값을 가져옵니다.
const phoneNumberInput = document.querySelector("input[name='phone_number']");
const phoneNumber = phoneNumberInput.value;

// 전화번호에 하이픈(-)이 포함되었는지 확인합니다.
if (phoneNumber.includes('-')) {
// alert("전화번호에 하이픈(-)을 포함할 수 없습니다.");
return; // 모달 창을 띄우지 않고 함수를 종료합니다.
}


modal.classList.remove("hidden");
overlay.style.display = "block"; // 어두운 배경 표시
document.body.style.overflow = "hidden"; // 스크롤 비활성화
header.style.filter = "brightness(50%)"; // 헤더 어둡게 만들기

});

HomeButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원
});
goodsMoreButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원

});
closeButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원

});

// 버튼 비활성화
document.addEventListener("DOMContentLoaded", function () {
const bookingBtn = document.querySelector(".booking_btn");
const userNameInput = document.querySelector("input[name='user_name']");
const phoneNumberInput = document.querySelector("input[name='phone_number']");
const userMailInput = document.querySelector("input[name='user_mail']");
const purchaseDateInputs = document.querySelectorAll("input[name='purchase_date']");
const purchaseTimeSelect = document.querySelector("select[name='purchase_time']");

// 예약하기 버튼의 초기 상태를 설정합니다.
updateBookingButtonState();

// 입력 필드나 선택 상태가 변경될 때 예약하기 버튼의 상태를 업데이트합니다.
userNameInput.addEventListener("input", updateBookingButtonState);
phoneNumberInput.addEventListener("input", updateBookingButtonState);
userMailInput.addEventListener("input", updateBookingButtonState);
purchaseDateInputs.forEach((input) => {
input.addEventListener("change", updateBookingButtonState);
});
purchaseTimeSelect.addEventListener("change", updateBookingButtonState);

function updateBookingButtonState() {
// 필수 입력 필드가 모두 입력되었고, 선택한 일자와 시간이 있는지 확인합니다.
const isUserNameValid = userNameInput.value.trim() !== "";
const isPhoneNumberValid = phoneNumberInput.value.trim() !== "";
const isUserMailValid = userMailInput.value.trim() !== "";
const isPurchaseDateSelected = Array.from(purchaseDateInputs).some(input => input.checked);
const isPurchaseTimeSelected = purchaseTimeSelect.value !== "";

// 모든 필수 조건이 충족되었을 때 버튼을 활성화합니다.
if (isUserNameValid && isPhoneNumberValid && isUserMailValid && isPurchaseDateSelected && isPurchaseTimeSelected) {
bookingBtn.removeAttribute("disabled");
bookingBtn.style.backgroundColor="#f06786"

} else {
bookingBtn.setAttribute("disabled", "disabled");
}
}
});



function showReservation(event) {
event.preventDefault();

Expand Down Expand Up @@ -250,9 +339,9 @@

document.getElementById("popup").style.display = "block";
}
// else {
// alert("예약 중 오류가 발생했습니다. 다시 시도해주세요.");
// }
else {
alert("예약 중 오류가 발생했습니다. 다시 시도해주세요.");
}
});
}
function Home() {
Expand Down Expand Up @@ -291,42 +380,8 @@



// 모달 창
const modalOpenButton = document.getElementById("modalOpenButton");
const HomeButton = document.getElementById("HomeButton");
const goodsMoreButton = document.getElementById("goodsMoreButton");
const closeButton = document.getElementById("closeBtn");
const modal = document.getElementById("modalContainer");
const header = document.querySelector(".header"); // header 요소 선택
const overlay = document.createElement("div"); // 어두운 배경을 생성

modalOpenButton.addEventListener("click", () => {
modal.classList.remove("hidden");
overlay.style.display = "block"; // 어두운 배경 표시
document.body.style.overflow = "hidden"; // 스크롤 비활성화
header.style.filter = "brightness(50%)"; // 헤더 어둡게 만들기

});

HomeButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원
});
goodsMoreButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원

});
closeButton.addEventListener("click", () => {
modal.classList.add("hidden");
document.body.style.overflow = "auto"; // 스크롤 활성화
header.style.filter = "brightness(100%)"; // 헤더 복원

});


</script>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion BACKEND/HYUNSOO/sswu/static/css/reserve.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ option:focus {
margin-bottom: 25px;
}
.booking_btn {
background-color: #f06786;
background-color: #ffced9;
color: #ffffff;
border: none;
border-radius: 7px;
Expand Down