June 6, 2021 - 특정일,특정시간대에 맞는 좌석 현황 구현(예매 로직)

*6월9일

-특정일, 특정시간대에 맞는 좌석 현황을 ajax으로 꺼내오는데 성공했다. inner join을 이용해 DB에서 데이터를 꺼내는 일은 크게 어렵지 않았으나 해당 데이터를 javascript로 띄우는 것에서 애를 많이 먹었다.

-먼저 ajax으로 예약 현황을 확인한 후, 예약된 좌석은 background-color 및 a 태그의 pointer-events를 이용하여 강조 표시 및 클릭 할 수 없도록 했다.

확인된 좌석정보 현황

-특정 좌석을 누르면 종합적인 예약정보를 띄워주고, 사용자의 최종 확인을 받아 예약을 완료하는 구조이다.

예약 정보 확인 알림창; 추후 디자인 예정.

 

-Controller로 넘어온 데이터의 모습. 아무 것도 아닌 이 콘솔창이 너무 나도 반갑다.

 

ticket table을 구성하기 위한 모든 데이터를 안전하게 controller로 가져왔다!

 

*최종 예약 정보를 controller로 가져오기까지의 과정

-DB 및 DAO에서는 Seat table에서 점유된 좌석 정보를 'key(seatNum column) : value(row)' 형태로 내어주기에, List<Map<String, Object>>형태로 데이터를 받도록 설계했다.

 

 

-별다른 막힘없이 ajax로 데이터를 끌고 왔으나.... List<map<string, object>> 형태가 아니고 String형태였다. List<map<string, object>> 형태로 가져올 방법을 열심히 찾아보았으나 마땅한 해답이 없었다. 이 부분을 어떻게 처리할지 고민하다가 'split -> 정규식을 이용한 숫자값 추출 -> split'으로 숫자값만 배열로 빼왔다.

 

}).done(function(result) {

var a = result.split(',');

var numbers = "";
for (let i = 0; i < a.length; i++) {
   if (i == (a.length - 1)) {
     numbers += a[i].replace(/[^0-9]/g, '');
   } else {
     numbers += a[i].replace(/[^0-9]/g, '') + ",";
   };
};
var b = numbers.split(',');

 

-해당 배열을 활용하여 점유된 좌석의 배경색상 및 a 태그 기능을 죽이는데 성공!

 

function takenSeat(b) {
for (let i = 0; i < b.length; i++) {
$("#t" + b[i]).css("background-color", "black");
$("#a" + b[i]).css('pointer-events', 'none');
};
};

 

-최종 available한 좌석을 클릭하고, 예약 내역을 confirm 해주면 예약 등록에 필요한 모든 데이터를 Controller로 넘기는데 성공~

 

var answer = confirm("[예약 정보 확인]..................................................");

 

if (answer) {

$.ajax({
url : './rc',
type : 'post',
data : {
nextSt : "tkCfm",
moviNum : moviNum,
moviName : moviName,
cfmNum : cfmNum,
scheduleNum : scheduleNum,
seatNum : seatNum,
viewDate : viewDate,
viewTime : viewTime,
email : "${Ses_email}"
},