JS 상호작용되는 달력 만들기 (4) - 예약달력 (중)

서론

 글이 너무 길어져서 달력과 시간표로 나눠서 작성하게 되었습니다.

지난번에 이어서 추가로 이어집니다.

 

개발환경

•  IDE : Eclipse
•  사용 언어 : HTML, JSP, Java script, SQL
•  사용 라이브러리 : JSTL, JSON

 

목차

1. 가정

2. 제약사항

3. 구조

    ㄱ. HTML

    ㄴ. Java script

4. 시간표 구성

    ㄱ. 지금 만들어진 달력이 현재 달력인지 확인

    ㄴ. 요일입력에 내용 추가

    ㄷ. 예약불가일자 처리 (1/2) - 요일생성 안

    ㄹ. 예약불가일 예외처리

    ㅁ. 예약가능일 클릭이벤트 추가

    ㅂ. 예약불가일자 처리 (2/2) - 요일생성 밖

5. 예약정보 출력

---

1. 가정

• 예약되어있는 데이터는 JSONArray로 받아옴

  <%
  JSONArray thisMonthResData = (JSONArray)request.getAttribute("thisMonthResData");
  JSONArray nextMonthResData = (JSONArray)request.getAttribute("nextMonthResData");
  %>

• JSONArray에 담긴 JSONObject의 키는 date이고, 값은 다음과 같다.

  ArrayList<Integer> startNum;
  ArrayList<Integer> shareTime;
  int totalShareTime;

  • startNum : 해당일의 예약건수들의 시작시간이 오름차순으로 담긴 ArrayList
  • shareTime : 해당일의 예약 건수마다 이용하는 시간이 예약시작시간기준 오름차순 담긴 ArrayList
  • totalShareTime : 해당일에 예약된 총 시간

---

2. 제약사항

• 예약가능 시간 제한. 형식은 hh

  <%
  int startTime = share.getStartTime();
  int endTime = share.getEndTime();
  int totalUsingTime = endTime - startTime;
  %>

---

3. 구조

ㄱ. HTML

//시간표를 출력할 테이블
<table id = "timeTable"></table>
//선택 초기화 버튼
<button type="button" onclick="tableinit()">초기화</button>

ㄴ. Java script

//————time table——————
var price = "<%=price%>";
var startTime = "<%=startTime%>";
var endTime = "<%=endTime%>";
//사용자가 시간표에서 선택한 시간
var selectedFirstTime = 24*1;
var selectedFinalTime = 0*1;

//시간표 제작
function timeTableMaker(selectedMonth, selectedDate){…};
//시간표 초기화
function tableinit(){…};
//시간표 및 예약시간과 결제시간을 초기화
function selectedTimeAndTotalPriceInit(){…};

---

4. 시간표 구성

시간표를 만드는 function timeTableMaker(selectedMonth, selectedDate) 함수부터 시작하겠습니다.

function timeTableMaker(selectedMonth, selectedDate){
	row = null
	month = selectedMonth;
	date = selectedDate;
	var timeTable = document.getElementById("timeTable");
    
    //...

 달력에서 선택한 셀의 달과 날자를 받아오고, 시간표를 출력할 테이블을 가져오는것부터 시작합니다.

 

ㄱ. 테이블 초기화

while(timeTable.rows.length > 0){
	timeTable.deleteRow(timeTable.rows.length-1);
}

 

ㄴ.시간표 테이블 생성

for (i = 0; i < endTime - startTime; i++){
	cellTime = startTime*1 + i;
	cellStartTimeText = cellTime + ":00";
	cellEndTimeText = (cellTime + 1) + ":00";
	inputCellText = cellStartTimeText + " ~ " +  cellEndTimeText;
			
	row = timeTable.insertRow();
	cell = row.insertCell();
	cell.setAttribute('id', cellTime);
	cell.innerHTML = inputCellText;
}

• 시작시간부터 1시간씩 순차적으로 셀을 생성합니다.
• 셀의 id는 행의 시작시간입니다.

 

ㄷ. 시간표 테이블의 클릭이벤트

cell.onclick = function(){
	cellTime = this.getAttribute('id');
	cellTime = cellTime*1;
    //...

ㄴ의 for문 하단에 입력하게 됩니다.

 

a. 선택한 시간을 전역변수에 저장 

//예약일시 입력처리
if (selectedFirstTime != 24 && selectedFinalTime != 0){
	if(cellTime < selectedFirstTime - 1){
		alert("연속한 시간만 예약가능합니다.");
		return false;
	}
	if (cellTime > selectedFinalTime + 1){
		alert("연속한 시간만 예약가능합니다.");
		console.log(cellTime + ">" + selectedFinalTime + 1)
		return false;
	}
}

• 예약시간을 selectedFirstTime, selectedFinalTime 변수에 저장합니다.
• 퐁당선택을 하지 못하도록 예외처리를 합니다.
• 연속된 선택을 저장하기 쉽게 시작시간과 마지막시간 두종류의 변수를 사용합니다.
• 유효하지 않은 선택일경우 false를 반환하여 이후 이벤트들이 적용되지 않도록 합니다.

 

b. 선택된 셀의 색상 변경

this.bgColor = "#fbedaa";
if (cellTime < selectedFirstTime) {
	selectedFirstTime = cellTime
}
if (cellTime > selectedFinalTime) {
	selectedFinalTime = cellTime
}

연속된 선택시 알맞게 selectedFirstTime와 selectedFinalTime를 갱신합니다.

---

5.  예약정보 출력

//하단의 예약일시에 시간 표시
resTime  = selectedFirstTime + ":00 ~ " + (selectedFinalTime + 1) + ":00";
resTimeForm = document.getElementById("selectedTime");
resTimeForm.value = resTime;
				
//하단의 결제정보에 가격정보 표시
useTime = (selectedFinalTime + 1) - selectedFirstTime;
	
useTimeForm = document.getElementById("totalPrice");
useTimeForm.value = useTime * price;

---

6.  결제정보 초기화

function tableinit(){
	timeTableMaker(selectedMonth, selectedDate);
	selectedTimeAndTotalPriceInit();
	buildCalendar();
}

function selectedTimeAndTotalPriceInit(){
	resDateForm = document.getElementById("selectedDate");
	resTimeForm = document.getElementById("selectedTime");
	resTimeForm.value = "";
	resDateForm.value = "";
	
	useTimeForm = document.getElementById("totalPrice");
	useTimeForm.value = "";
	
	selectedFirstTime = 24*1;
	selectedFinalTime = 0*1;
}

 초기화 버튼이 호출하는 함수입니다.

하단에 입력된 결제정보 및 달력과 시간표를 초기화합니다.