//test.js


const BNO = 6;

function listPage(page){
	page = page || 1;
	listUrl = "/replies/all/" + BNO + "/" + page;
	
	sendAjax(listUrl, (isSuccess, res)=>{
		if(isSuccess){
			let data = res.list,
			pageMaker = res.pageMaker;
			let str = "";
            
			/*
			    $(data).each(function(d){
			    str += ...
			    }); 와 같음
			*/
			data.forEach(
			    (d) => {
				str += `<li data-rno= "${d.rno}" class= "replyLi">
				<span>${d.replytext}</span>
				<!-- 수정 버튼 -->
				<button onclick=modClicked(this) class="point">수정</button>
			        </li>`;
			    }
			);

			//test.jsp 비어있던 replies 함수에 목록을 추가
			$('#replies').html(str);
		}
	});
}

function sendAjax(url, fn,  method, jsonData){
	let options = {
			method: method || 'GET',
			url: url,
			contentType: "application/json"
	};
	//jsonData가 있을 때만 data : JSON.stringify(jsonData) 추가
	if(jsonData){
		options.data = JSON.stringify(jsonData);
	}
	
	$.ajax(options).always((responseText, statusText, ajaxResult) =>{
		let isSuccess = statusText === 'success'; //ajax 호출 성공 여부
		fn(isSuccess,responseText);
		if(!isSuccess){
			alert("오류가 발생하였습니다. (errorMessage:" + responseText + ")");
		}
	})
}

//test.js


const BNO = 6;

...

function registerReply(){
	const REGIST_URL = "/replies";
	let $replyer = $('#newReplyWriter'), 
		$replytext = $('#newReplyText');
	let jsonData = getValidData($replyer, $replytext);
	if(!jsonData){
		return;
	}
	
	jsonData.bno = BNO;
	
	sendAjax(REGIST_URL, (isSuccess, res) => {
		if(isSuccess){
			alert("등록이 완료 되었습니다.");
			$replyer.val('');
			$replytext.val('');
			listPage(1);
		}else{
			console.debug("Error on registerReply>>",res);
		}
	} , 'POST', jsonData);
}

function getValidData($replyer, $replytext){
	let errorFocus = null,
	replyer = $replyer.val(),
	replytext = $replytext.val(),
	errorMsg = "";
	
	if(!replyer){
		errorMsg = "작성자를 입력하세요.";
		$errorFocus = $replyer;
	} else if(!replytext){
		errorMsg = "내용을 입력하세요";
		$errorFocus = $replytext;
	}
	
	if(errorMsg){
		alert(errorMsg);
		$errorFocus.focus();
		return;
	}
	
	return {replyer: replyer, replytext: replytext};
}

//test.js


const BNO = 6;

let workingReplyText ="",
	$workingReply = null,
	workingRno = 0;
    
    ...
    
function modClicked(btn){
	//수정 창 화면 가운데에 위치
	movCenterModDiv();
    
	let $btn = $(btn),
	$reply = $btn.parent(),
	rno = $reply.data('rno');
    
    //수정되기 전의 내용을 수정창에 보여줌 (공백 제거)
	replytext = truncSpace($reply.find('span').text());
	$('#replycontext').val(replytext);
    
    //수정 창 나타나게 함
	$('#modDiv').show('slow');
	workingRno = rno;
	workingReplyText = replytext;
	$workingReply = $reply;
}

function movCenterModDiv(){
	$modDiv = $('#modDiv');
	$modDiv.css({'margin-left':$modDiv.width()/2*(-1)});
	$modDiv.css({'margin-top':$modDiv.height()/2*(-1)});
}

//공백 제거 함수
var truncSpace = function(str){
	if(!str){
		return "";
	}
	return str.replace(/[\n\r\t]/g,'').trim();
};

//test.js


const BNO = 6;

let workingReplyText ="",
	$workingReply = null,
	workingRno = 0;

...

function editReply(){
	let editedReplyText = $('#replycontext').val();
	
	let jsonData = { replytext: editedReplyText };
	sendAjax("/replies/"+workingRno, (isSuccess, res) =>{
		if(isSuccess){
			alert(workingRno+"번 댓글이 수정되었습니다.");
			$workingReply.find('span').text(editedReplyText);
			closeMod();
		}else{
			console.debug("Error on updateReply>>", res);
		}
	},'PUT',jsonData);
}

//내용이 변경되지 않으면 수정 버튼 안 나타남
function replyContextChange(){
	if($('#replycontext').val() !== workingReplyText){
		$('#btnModReply').show();
	}else{
		$('#btnModReply').hide();
	}
}

//test.js

...

function closeMod(){
	let $modDiv = $("#modDiv");
	workingRno = 0;
	workingReplyText ="";
	$workingReply = null;
	$('#replycontext').val('');
	$modDiv.hide('slow');
	$('#btnModReply').hide();	
}

//test.js

let workingPage = 0; //삭제 후에도 현재 페이지에 그대로 있음(페이징 처리 후에 적용하세요~)
...

function removeReply(){
	if(!confirm("Are u sure??")) return;
	
	sendAjax("/replies/"+workingRno, (isSuccess, res) => {
		if(isSuccess){
			alert(workingRno+"번 댓글이 삭제완료되었습니다.");
			workingPage = $('.active').data().page; //삭제 후에도 현재 페이지에 그대로 있음(페이징 처리 후에 적용하세요~)
			listPage(workingPage);
			closeMod();
		} else{
			console.debug("Error on removeReply>>",res);
		}
	}, 'DELETE');
}

//test.js


function listPage(page){
	...
	
	sendAjax(listUrl, (isSuccess, res)=>{
		if(isSuccess){
			...
            
			printPage(pageMaker);
		}
	});
}

function printPage(pageMaker){
	let str = "";
		tempPage = 0;
	if(pageMaker.prev){
		tempPage = pageMaker.startPage - 1;
		str = `<li><a href="#" onclick="listPage(tempPage)" data-page="${tmpPage}">&lt;&lt;</a></li>`;
	}
	//현재 페이지
	let currentPage = pageMaker.cri.page;
	
	for(let i = pageMaker.startPage; i <= pageMaker.endPage; i++){
		str += `<li><a href="#" onclick="listPage(${i})" class="${currentPage === i ? "active" : ""}" data-page="${i}">${i}</a></li>`;
	}
	
	if(pageMaker.next){
		tempPage = pageMaker.nextPage +1;
		str += `<li><a href="#" onclick="listPage(tempPage)" data-page="${tempPage}">&gt;&gt;</a></li>`;
	}
	
	$('ul#pagination').html(str);
}