June 16, 2021 - 다좌석 예매 로직 추가

*6월16일

-다좌석 동시 예매 로직을 구현했다. 마감이 얼마 남지 않아 Controller 및 자바 코드 수정 없이 JS만으로 처리했다.

다좌석 동시 예매 화면

 

-available seats만 a태그가 활성화되어있고, 좌석을 고르면 background-color가 변경된다.

-좌석 선택 후 예매 버튼을 누르면 background-color 기준으로 선택된 좌석들을 배열화하고, 공백을 제거하여 예매용 function에 넣어준다.

-primary key인 scheduleNum과 cfmNum은 끝자리 숫자만 조정하여 충돌하지 않도록 구성했다.

-각 좌석 번호가 순차적으로 ajax을 통해 servlet으로 전달되는 구조인데, 'ajax.done' 영역에 myPage로 이동하는 코드를 넣어놨더니, 비정기적으로 ibatis 에러가 계속해서 떴다.

-대부분 모든 좌석이 다 예매되고 페이지 이동 로직이 한꺼번에 실행되었으나, 드물게 예매 잔여 좌석이 남아 있을때 페이지 이동 로직이 실행되는 경우, 해당 에러가 뜬 것으로 확인했다.

-따라서 length를 이용하여 모든 좌석이 예매되고 난 후, 페이지 이동을 한번만 실행하는 것으로 로직을 고쳤다.

 

/* 6월 16일 다중 예매 구현 */
//선택한 자리 시각 효과
function bgcolor(param) {
   if ($("#t" + param).css("background-color") ==  "rgb(0, 0, 255)") {
       $("#t" + param).css("background-color",  "rgba(0,0,0,0)");
   } else {
       $("#t" + param).css("background-color",  "rgb(0, 0, 255)");
   }
}
//배경색 선택된 자리만 seats에 추가
$("#cfmBtn").on("click", function() {
   var cfmSeats = "";
   for (let i = 1; i < 51; i++) {
       if($("#t" + i).css("background-color") ==  "rgb(0, 0, 255)") {
            cfmSeats += i + ",";
       };
   };
   
   //선택 좌석 배열화
   var cfmNumbers =cfmSeats.split(",");
   
   //공백 필터링
   cfmNumbers = cfmNumbers.filter(function (el) {
       return el != "";
   });
   
   //done 이벤트 param 전달용
   var length = cfmNumbers.length;
   
   //예약 작업
   for (let i = 0; i < cfmNumbers.length; i++) {
       tkCfm(cfmNumbers[i], length);
       // 스케쥴번호(동일 6자리 + 식별용 끝자리) + 예약번호 조정
       $("#scheduleNum").text(Number($("#scheduleNum").text())  + 1);
       $("#cfmNum").text(Number($("#cfmNum").text())  + 1);
       length = length - 1;
   }
});

function tkCfm(param1, param2) {

var seatNum = param1;
var toMypage = param2;

 

............

}).done(function() {

if(toMypage == 1) {
window.location.href = "./rc?nextSt=mypage";
}
});

 

 

-코드 수정 후 하단과 같이 다중 예매가 잘 실행되는 모습이다.

마이페이지 다중 예매 내역