<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="../include/header.jsp" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시글 화면</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 화면</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value="${vo.bno }" readonly="readonly"/>
</div>
<div class="form-group">
<label>글 제목</label>
<input class="form-control" name="title" value="${vo.title }" readonly="readonly">
</div>
<div class="form-group">
<label>글 내용</label>
<textarea class="form-control" rows="3" name="content" readonly="readonly">${vo.content }</textarea>
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value="${vo.writer}" readonly="readonly">
</div>
<sec:authentication property="principal" var="pinfo"/>
<sec:authorize access="isAuthenticated()"> <!-- 비회원 수정 버튼 누르지 못하게 -->
<c:if test="${pinfo.username eq vo.writer}"> <!-- 작성자와 로그인 계정이 같으면 -->
<button data-oper="modify" class="btn btn-primary">수정</button>
</c:if>
</sec:authorize>
<button data-oper="list" class="btn btn-danger">목록</button>
<form action="/board/modify" method="get" id="operForm">
<input type="hidden" name="bno" id="bno" value="${vo.bno }">
<input type="hidden" name="pageNum" id="bno" value="${cri.pageNum}">
<input type="hidden" name="amount" id="bno" value="${cri.amount}">
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class = 'row'>
<div class = "col-lg-12">
<!-- /.panel -->
<div class = "panel panel-default">
<div class= "panel-heading">
<i class = "fa fa-comments fa-fw"></i> 댓글
<sec:authorize access="isAuthenticated()"> <!-- 댓글버튼 활성화/비활성화 -->
<button id="addReplyBtn" class="btn btn-primary btn-xs pull-right">댓글 달기</button>
</sec:authorize>
</div>
<!-- /.panel-heading -->
<div class = "panel-body">
<ul class = "chat">
<!-- start reply --> <!-- 삭제해도 무방 -->
<li class = "left clearfix" data-rno = '12'>
<div>
<div class = "header">
<strong class = "primary-font">user00</strong>
<small class = "pull-right text-muted">2018-01-01 13:13</small>
</div>
<p>Good job!</p>
</div>
</li>
<!-- end reply -->
</ul>
<!-- ./ end ul -->
</div>
<!-- /.panel .chat-panel -->
</div>
</div>
<!-- ./end row -->
</div>
<!-- Modal -->
<div class="modal fade" id = "MyModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal"
ari-hidden = "true">×</button>
<h4 class = "modal-title" id = "myModalLabel">새 게시글 등록</h4>
</div>
<div class = "modal-body">
<div class = "form-group">
<label>댓글</label>
<input class = "form-control" name = 'reply' value = 'New Reply!!!!'>
</div>
<div class = "form-group">
<label>작성자</label>
<input class = "form-control" name = 'replyer' value = 'replyer'>
</div>
<div class = "form-group">
<label>등록 날짜</label>
<input class = "form-control" name = 'replyDate' value = '' >
</div>
</div>
<div class = "modal-footer">
<button id = 'modalModBtn' type = "button" class = "btn btn-warning">수정</button>
<button id = 'modalRemoveBtn' type = "button" class = "btn btn-danger">삭제</button>
<button id = 'modalRegisterBtn' type = "button" class = "btn btn-primary">등록</button>
<button id = 'modalCloseBtn' type = "button" class = "btn btn-default">취소</button>
</div>
</div>
</div>
</div>
<!-- 첨부파일 -->
<div class = "row">
<div class = "col-lg-12">
<div class = "panel panel-default">
<div class = "panel-heading">파일 첨부</div>
<!-- /.panel-heading -->
<div class = "panel-body">
<div class = "panel-body">
<div class = 'uploadResult'>
<ul></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/resources/js/reply.js"> </script>
<script type="text/javascript">
$(function () {
// ajax로 파일 목록 받아오기
// 받아 온 리스트를 반복하여 동적 태그 생성 후 uploadResult ul 내부에 저장
$.ajax({
type : 'get',
url : '/board/getAttachList' ,
data : {bno : bnoValue },
contentType : 'application/json; chatset=utf-8',
success : function(uploadResultArr) {
var str = '';
$(uploadResultArr).each(function (i, obj) {
// 파일다운
var fileCallPath = encodeURIComponent(obj.uploadPath + //경로
"/" + obj.uuid +
"_" + obj.fileName);
str += '<li>';
str += '<a href="/download?fileName=' + fileCallPath + '">';
str += '<img src="/resources/img/attach.png" style="width:15px">' + obj.fileName;
str += '</a>';
str += '</li>';
});
$(".uploadResult ul").html(str);
}
});
});
</script>
<script type="text/javascript"> <!-- 화면 이동 스크립트 -->
$(function () {
var operForm = $("#operForm");
// 수정화면 이동 버튼 클릭 시 bno 값을 같이 전달 --> 기존 내부 input 태그 그대로 전달
$("button[data-oper='modify']").on('click', function() {
operForm.submit();
});
// 목록 화면 이동 버튼 클릭 시 bno 값 없이 이동 -> 기존 내부 input 태그 삭제 후 이동
$("button[data-oper='list']").on('click', function() {
operForm.find('#bno').remove();
operForm.attr('action', '/board/list');
operForm.submit();
});
});
</script>
<script type="text/javascript"> <!--댓글 & 모달 스크립트 -->
console.log("=============");
console.log("JS TEST");
var bnoValue = '${vo.bno}';
$(function(){ //onload body쪽 실행되면
var replyUL = $(".chat"); // 댓글 리스트UL
showList(); // 댓글 리스트 바인딩 함수 호출
// 댓글 리스트 바인딩 함수
function showList(){
// restController 로 부터 댓글 리스트를 받아 와
// 위 댓글 ul 태그 내에 댓글 리스트 바인딩
replyService.getList(
{bno:bnoValue, page:1}, // page 1로 고정
function (result) {
var str = '';
if(result == null || result.length == 0){
// 댓글 리스트가 없으면
replyUL.html('');
}else{
// 댓글 리스트가 있으면
for(var i=0; i<result.length; i++){
str += '<li class = "left clearfix" data-rno = "' + result[i].rno + '">';
str += '<div>';
str += '<div class = "header">';
str += '<strong class = "primary-font">'+ result[i].replyer + '</strong>';
str += '<small class = "pull-right text-muted">'+ displayTime(result[i].replyDate) + ' </small>';
str += '</div>';
str += '<p>'+ result[i].reply + '</p>';
str += '</div>';
str += '</li>';
}
replyUL.html(str);
}
}
);
} // end showList()
// 모달 창 관련 스크립트
var modal = $(".modal");
var modalInputReply = modal.find("input[name='reply']"); // 댓글 내용 input
var modalInputReplyer = modal.find("input[name='replyer']"); // 댓글 작성자 input
var modalInputReplyDate = modal.find("input[name='replyDate']"); // 댓글 날짜 input
var modalModBtn = $("#modalModBtn"); // 댓글 수정 버튼
var modalRemoveBtn = $("#modalRemoveBtn"); // 댓글 삭제 버튼
var modalRegisterBtn = $("#modalRegisterBtn"); // 댓글 등록 버튼
var modalCloseBtn = $("#modalCloseBtn"); // 댓글 취소 버튼
var tmp = '${vo.writer}';
// <sec:authorize access="isAuthenticated()"> <!-- 비회원 수정 버튼 누르지 못하게 -->
var principal = '<sec:authentication property="principal.username"/>'; // 권한이 있을때
// </sec:authorize>
// 댓글 달기 버튼 클릭 이벤트
$("#addReplyBtn").on('click', function () {
modal.find("input").val(''); // 입력 창 비우기
modalInputReplyDate.closest('div').hide(); // 등록 날짜 입력 창 숨기기
modalModBtn.closest('button').hide(); // 댓글 수정 버튼 숨기기
modalRemoveBtn.closest('button').hide(); // 댓글 삭제 버튼 숨기기
modalRegisterBtn.closest("button").show(); // 댓글 등록 버튼 보이기
modalInputReplyer.val(principal);
modalInputReplyer.attr("readonly",true);
modal.modal('show'); // 모달 창 보이기
// ㄴ> 객체. ㄴ> 뒤에껀 함수
});
// 댓글 입력 버튼 클릭 이벤트
$("#modalRegisterBtn").on('click', function () {
replyService.add(
{reply: modalInputReply.val(),
replyer:modalInputReplyer.val(),
bno:bnoValue},
function (result) {
showList(); // 댓글 목록에 댓글 등록 실시간 반영
modal.modal('hide'); // 모달 창 숨기기
}
);
});
//댓글 취소 버튼 클릭 이벤트
modalCloseBtn.on('click', function () {
modal.find("input").val(''); // 입력 창 비우기
modal.modal('hide'); // 모달 창 숨기기
});
// chat 클래스(UL) 내의 li 객체 클릭 이벤트
// 클릭이 되면 눌려진 객체(this)가 가지고 있는 rno를 통해서 get 함수 호출
// 데이터 가져온 뒤 모달 창에 내용 출력
// * click() , on('click') 함수 차이
// click() - 동적 데이터 이벤트 바인딩 불가능
// on('click') - 동적 데이터 이벤트 바인딩 가능
var rno;
$('.chat').on('click','li', function () {
rno = $(this).data('rno');
replyService.get(
rno,
function (result) {
modalInputReply.val(result.reply); // 내용(수정 가능)
modalInputReplyer.val(result.replyer); // 작성자(수정 블가능)
modalInputReplyDate.val(displayTime(result.replyDate)); // 작성일(수정 블가능)
// 작성일(수정 블가능) - readonly, 날짜 포맷 변경(이상하게 나와있는 날짜)
modalInputReplyer.attr("readonly",true); // 작성자 수정 불가
// ㄴ> or modalInputReplyDate.val(displayTime(result.replyDate).attr('readonly' , true);
modalInputReplyDate.attr("readonly",true); // 작성일 수정 불가
// 수정, 삭제 버튼 보이기
modalModBtn.show();
modalRemoveBtn.show();
// 등록 버튼 숨기기
modalRegisterBtn.closest('button').hide();
// 날짜 input 보이기
modalInputReplyDate.closest('div').show(); // 작성일 보이기
modal.modal('show'); // 모달 창 보이기
}
);
});
// 댓글 삭제 버튼 클릭 이벤트
modalRemoveBtn.on('click', function () {
replyService.remove(
rno, // 또다른 {rno:rno}
function (result) {
showList();
modal.modal('hide');
}
);
});
// 댓글 수정 버튼 클릭 이벤트
modalModBtn.on('click', function () {
replyService.modify(
{reply:modalInputReply.val(), rno:rno},
function (result) {
showList();
modal.modal('hide');
}
);
});
});
/*replyService.getList(
{bno:bnoValue, page:1}, // page 1로 고정
function (result) {
console.log(result);
}
);*/
/*
replyService.get(
{rno: 61},
function (result) {
console.log(result);
}
);
*/
/*replyService.add(
{reply:"JS TEST", replyer:"tester", bno:bnoValue},
function (result) {
alert("result : " + result);
}
);*/
/*
replyService.remove(
{rno: 61},
function (result) {
console.log(result);
}
);
*/
/* replyService.modify(
{rno:62, reply:"1232131", replyer:"456"},
function (result) {
alert("result : " + result);
}
); */
</script>
<%@include file="../include/footer.jsp" %>
