Spring-MVC 게시판 예제 12 - 댓글처리(프레젠테이션 계층 구현)

var articleNo = 1000;
$.getJSON("/replies/all/" + articleNo, function (data) {
   console.log(data);
});

// 1000번째 게시글
var articleNo = 1000;

// 댓글 목록 호출
getReplies();

// 댓글 목록 출력 함수
function getReplies() {

    $.getJSON("/replies/all/" + articleNo, function (data) {

        console.log(data);

        var str = "";

        $(data).each(function () {
            str += "<li data-replyNo='" + this.replyNo + "' class='replyLi'>"
                +   "<p class='replyText'>" + this.replyText + "</p>"
                +   "<p class='replyWriter'>" + this.replyWriter + "</p>"
                +   "<button type='button' class='btn btn-xs btn-success' data-toggle='modal' data-target='#modifyModal'>댓글 수정</button>"
                + "</li>"
                + "<hr/>";

        });

        $("#replies").html(str);

    });

}

var articleNo = 1000;

// 댓글 목록 출력 함수 ...

// 댓글 저장 버튼 클릭 이벤트 발생시
$("#replyAddBtn").on("click", function () {

    // 화면으로부터 입력 받은 변수값의 처리
    var replyText = $("#newReplyText");
    var replyWriter = $("#newReplyWriter");

    var replyTextVal = replyText.val();
    var replyWriterVal = replyWriter.val();

    // AJAX 통신 : POST
    $.ajax({
        type : "post",
        url : "/replies",
        headers : {
            "Content-type" : "application/json",
            "X-HTTP-Method-Override" : "POST"
        },
        dataType : "text",
        data : JSON.stringify({
            articleNo : articleNo,
            replyText : replyTextVal,
            replyWriter : replyWriterVal
        }),
        success : function (result) {
            // 성공적인 댓글 등록 처리 알림
            if (result == "regSuccess") {
                alert("댓글 등록 완료!");
            }
            getReplies(); // 댓글 목록 출력 함수 호출
            replyText.val(""); // 댓글 내용 초기화
            replyWriter.val(""); // 댓글 작성자 초기화
        }
    });
});

$("#replies").on("click", ".replyLi button", function () {
    var reply = $(this).parent();

    var replyNo = reply.attr("data-replyNo");
    var replyText = reply.find(".replyText").text();
    var replyWriter = reply.find(".replyWriter").text();

    $("#replyNo").val(replyNo);
    $("#replyText").val(replyText);
    $("#replyWriter").val(replyWriter);

});

$(".modalDelBtn").on("click", function () {

    // 댓글 번호
    var replyNo = $(this).parent().parent().find("#replyNo").val();

    // AJAX통신 : DELETE
    $.ajax({
        type : "delete",
        url : "/replies/" + replyNo,
        headers : {
            "Content-type" : "application/json",
            "X-HTTP-Method-Override" : "DELETE"
        },
        dataType : "text",
        success : function (result) {
            console.log("result : " + result);
            if (result == "delSuccess") {
                alert("댓글 삭제 완료!");
                $("#modifyModal").modal("hide"); // Modal 닫기
                getAllList(); // 댓글 목록 갱신
            }
        }
    });

});

$(".modalModBtn").on("click", function () {

    // 댓글 선택자
    var reply = $(this).parent().parent();
    // 댓글번호
    var replyNo = reply.find("#replyNo").val();
    // 수정한 댓글내용
    var replyText = reply.find("#replyText").val();

    // AJAX통신 : PUT
    $.ajax({
        type : "put",
        url : "/replies/" + replyNo,
        headers : {
            "Content-type" : "application/json",
            "X-HTTP-Method-Override" : "PUT"
        },
        data : JSON.stringify(
            {replyText : replyText}
        ),
        dataType : "text",
        success : function (result) {
            console.log("result : " + result);
            if (result == "modSuccess") {
                alert("댓글 수정 완료!");
                $("#modifyModal").modal("hide"); // Modal 닫기
                getReplies(); // 댓글 목록 갱신
            }
        }
    });

});

// 댓글 목록 페이징 함수
function getRepliesPaging(page) {

    $.getJSON("/replies/" + articleNo + "/" + page, function (data) {
        console.log(data);

        var str = "";

        $(data.replies).each(function () {
            str += "<li data-replyNo='" + this.replyNo + "' class='replyLi'>"
                +  "<p class='replyText'>" + this.replyText + "</p>"
                +  "<p class='replyWriter'>" + this.replyWriter + "</p>"
                +  "<button type='button' class='btn btn-xs btn-success' data-toggle='modal' data-target='#modifyModal'>댓글 수정</button>"
                +  "</li>"
                +  "<hr/>";
        });

        $("#replies").html(str);

        // 페이지 번호 출력 호출
        printPageNumbers(data.pageMaker);

    });

}

// 댓글 목록 페이지 번호 출력 함수
function printPageNumbers(pageMaker) {

    var str = "";

    // 이전 버튼 활성화
    if (pageMaker.prev) {
        str += "<li><a href='"+(pageMaker.startPage-1)+"'>이전</a></li>";
    }

    // 페이지 번호
    for (var i = pageMaker.startPage, len = pageMaker.endPage; i <= len; i++) {
        var strCalss = pageMaker.criteria.page == i ? 'class=active' : '';
        str += "<li "+strCalss+"><a href='"+i+"'>"+i+"</a></li>";
    }

    // 다음 버튼 활성화
    if (pageMaker.next) {
        str += "<li><a href='"+(pageMaker.endPage + 1)+"'>다음</a></li>";
    }

    $(".pagination-sm").html(str);
}

// 목록페이지 번호 변수 선언, 1로 초기화(첫번째 페이지)
var replyPageNum = 1;

// 목록페이지 번호 클릭 이벤트
$(".pagination").on("click", "li a", function (event) {

    event.preventDefault();
    replyPageNum = $(this).attr("href"); // 목록 페이지 번호 추출
    getRepliesPaging(replyPageNum); // 목록 페이지 호출

});

$(document).ready(function () {

    var articleNo = "${article.articleNo}";  // 현재 게시글 번호
    var replyPageNum = 1; // 댓글 페이지 번호 초기화

    // 댓글 내용 : 줄바꿈/공백처리
    Handlebars.registerHelper("escape", function (replyText) {
        var text = Handlebars.Utils.escapeExpression(replyText);
        text = text.replace(/(\r\n|\n|\r)/gm, "<br/>");
        text = text.replace(/( )/gm, "&nbsp;");
        return new Handlebars.SafeString(text);
    });

    // 댓글 등록일자 : 날짜/시간 2자리로 맞추기
    Handlebars.registerHelper("prettifyDate", function (timeValue) {
        var dateObj = new Date(timeValue);
        var year = dateObj.getFullYear();
        var month = dateObj.getMonth() + 1;
        var date = dateObj.getDate();
        var hours = dateObj.getHours();
        var minutes = dateObj.getMinutes();
        // 2자리 숫자로 변환
        month < 10 ? month = '0' + month : month;
        date < 10 ? date = '0' + date : date;
        hours < 10 ? hours = '0' + hours : hours;
        minutes < 10 ? minutes = '0' + minutes : minutes;
        return year + "-" + month + "-" + date + " " + hours + ":" + minutes;
    });

    // 댓글 목록 함수 호출
    getReplies("/replies/" + articleNo + "/" + replyPageNum);

    // 댓글 목록 함수
    function getReplies(repliesUri) {
        $.getJSON(repliesUri, function (data) {
            printReplyCount(data.pageMaker.totalCount);
            printReplies(data.replies, $(".repliesDiv"), $("#replyTemplate"));
            printReplyPaging(data.pageMaker, $(".pagination"));
        });
    }

    // 댓글 갯수 출력 함수
    function printReplyCount(totalCount) {

        var replyCount = $(".replyCount");
        var collapsedBox = $(".collapsed-box");

        // 댓글이 없으면
        if (totalCount === 0) {
            replyCount.html(" 댓글이 없습니다. 의견을 남겨주세요");
            collapsedBox.find(".btn-box-tool").remove();
            return;
        }

        // 댓글이 존재하면
        replyCount.html(" 댓글목록 (" + totalCount + ")");
        collapsedBox.find(".box-tools").html(
            "<button type='button' class='btn btn-box-tool' data-widget='collapse'>"
            + "<i class='fa fa-plus'></i>"
            + "</button>"
        );

    }

    // 댓글 목록 출력 함수
    function printReplies(replyArr, targetArea, templateObj) {
        var replyTemplate = Handlebars.compile(templateObj.html());
        var html = replyTemplate(replyArr);
        $(".replyDiv").remove();
        targetArea.html(html);
    }

    // 댓글 페이징 출력 함수
    function printReplyPaging(pageMaker, targetArea) {
        var str = "";
        if (pageMaker.prev) {
            str += "<li><a href='" + (pageMaker.startPage - 1) + "'>이전</a></li>";
        }
        for (var i = pageMaker.startPage, len = pageMaker.endPage; i <= len; i++) {
            var strClass = pageMaker.criteria.page == i ? "class=active" : "";
            str += "<li " + strClass + "><a href='" + i + "'>" + i + "</a></li>";
        }
        if (pageMaker.next) {
            str += "<li><a href='" + (pageMaker.endPage + 1) + "'>다음</a></li>";
        }
        targetArea.html(str);
    }

    // 댓글 페이지 번호 클릭 이벤트
    $(".pagination").on("click", "li a", function (event) {
        event.preventDefault();
        replyPageNum = $(this).attr("href");
        getReplies("/replies/" + articleNo + "/" + replyPageNum);
    });
}

// 댓글 저장 버튼 클릭 이벤트
$(".replyAddBtn").on("click", function () {

    // 입력 form 선택자
    var replyWriterObj = $("#newReplyWriter");
    var replyTextObj = $("#newReplyText");
    var replyWriter = replyWriterObj.val();
    var replyText = replyTextObj.val();

    // 댓글 입력처리 수행
    $.ajax({
        type : "post",
        url : "/replies/",
        headers : {
            "Content-Type" : "application/json",
            "X-HTTP-Method-Override" : "POST"
        },
        dataType : "text",
        data : JSON.stringify({
            articleNo : articleNo,
            replyWriter : replyWriter,
            replyText : replyText
        }),
        success: function (result) {
            console.log("result : " + result);
            if (result === "regSuccess") {
                alert("댓글이 등록되었습니다.");
                replyPageNum = 1;  // 페이지 1로 초기화
                getReplies("/replies/" + articleNo + "/" + replyPageNum); // 댓글 목록 호출
                replyTextObj.val("");   // 댓글 입력창 공백처리
                replyWriterObj.val("");   // 댓글 입력창 공백처리
            }
        }
    });
});

// 댓글 수정을 위해 modal창에 선택한 댓글의 값들을 세팅
$(".repliesDiv").on("click", ".replyDiv", function (event) {
    var reply = $(this);
    $(".replyNo").val(reply.attr("data-replyNo"));
    $("#replyText").val(reply.find(".oldReplyText").text());
});

// modal 창의 댓글 수정버튼 클릭 이벤트
$(".modalModBtn").on("click", function () {
    var replyNo = $(".replyNo").val();
    var replyText = $("#replyText").val();
    $.ajax({
        type : "put",
        url : "/replies/" + replyNo,
        headers : {
            "Content-Type" : "application/json",
            "X-HTTP-Method-Override" : "PUT"
        },
        dataType : "text",
        data: JSON.stringify({
            replyText : replyText
        }),
        success: function (result) {
            console.log("result : " + result);
            if (result === "modSuccess") {
                alert("댓글이 수정되었습니다.");
                getReplies("/replies/" + articleNo + "/" + replyPageNum); // 댓글 목록 호출
                $("#modModal").modal("hide"); // modal 창 닫기
            }
        }
    })
});

// modal 창의 댓글 삭제버튼 클릭 이벤트
$(".modalDelBtn").on("click", function () {
    var replyNo = $(".replyNo").val();
    $.ajax({
        type: "delete",
        url: "/replies/" + replyNo,
        headers: {
            "Content-Type" : "application/json",
            "X-HTTP-Method-Override" : "DELETE"
        },
        dataType: "text",
        success: function (result) {
            console.log("result : " + result);
            if (result === "delSuccess") {
                alert("댓글이 삭제되었습니다.");
                getReplies("/replies/" + articleNo + "/" + replyPageNum); // 댓글 목록 호출
                $("#delModal").modal("hide"); // modal 창 닫기
            }
        }
    });
});