<%
/**
 * <pre>
 * @Class Name : lisNotifications.jsp
 * 
 * @Description : 알림 목록을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 9. 6.     KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 9. 6.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">알림</c:set>

 <!DOCTYPE html>
 <html lang="ko">
 <head>
 <title>${pageTitle}</title>

 <!-- GRID -->
 <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.css" />
 <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid-theme.css" />
 <script src="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.js"></script>

 <script type="text/javaScript" language="javascript">
 var GRID_INDEX_OF_READYN = 5;
 
 $( document ).ready(function() {
     
     //=======================================================
     // 그리드 생성 환경설정 
     //=======================================================
     $("#jsGrid").jsGrid({
         pageSize : $("#pageSize").val(),
         scrollOffset:0,
         controller: {
             loadData: function (filter) { // 그리드에 데이터를 가져올 때 실팽되는 함수 
                 var data = $.Deferred();
                 //======================================
                 // 요청 정보 구성 : 시작  (각 요청에 맞게 조정)
                 //======================================
                 var reqUrl = "${pageContext.request.contextPath}/cmm/listNotificationsAjax.do";
                 var pageIndex = ( filter && filter.pageIndex ? filter.pageIndex : $("#pageIndex").val());
                 var pageSize  = ( filter && filter.pageSize  ? filter.pageSize  : $("#pageSize").val());
                 
                 $("#pageIndex").val(pageIndex);

                 var inputData = {
                           "pageIndex" : pageIndex
                         , "pageSize": pageSize};
                 
                 
                 //--------------------------------------
                 // 요청 처리 
                 //--------------------------------------
                 $.ajax({
                     type: "post",
                     contentType: "application/json; charset=utf-8",
                     url: reqUrl,
                     dataType: "json",
                     data: JSON.stringify(inputData),
                 }).done(function(response){
                     <%
                     // 그리드 데이터 예시 : 
                     // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
                     // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
                     %>
                     var jsonObj = JSON.parse(response);
                     //$("#itemsCount").val(jsonOjb.itemsCount);
                     console.log(jsonObj.itemsCount);
                     
                     if(jsonObj.itemsCount == undefined) $("#itemsCount").val("0");
                     else $("#itemsCount").val(jsonObj.itemsCount);
                     
                     data.resolve(jsonObj);
                 });
                 return data.promise();
             } // loadData
         },
         
         rowClick: function(args) { // 행 클릭 시, 실행되는 이벤트 함수 
             
             // 클릭된 행의 자료 객체 
             var getData = args.item;
             
             // 추출할 컬럼의 데이터 가져오기 
             var notiId = getData["notiId"];
             var selectedRow = $("#jsGrid").find('table tr.jsgrid-selected-row');
             
             // 상세 내용 보기 
             fn_viewDetail(notiId, selectedRow);
         },
           
         //======================================
         // 그리드 컬럼 정의  (각 요청에 맞게 조정)
         //======================================
         fields: [
             { title:"ID",   name: "notiId" , type: "text", width: 200, align: "left" },
             { title:"알림방법",   name: "notiMethod" , type: "text", width: 100, align: "center"},
             { title:"구분코드",   name: "notiTypeCd" , type: "text", width: 100, align: "center"},
             { title:"구분",   name: "notiTypeNm" , type: "text", width: 100, align: "center"},
             { title:"제목",   name: "title"      , type: "text", width: 200, align: "left" },
             { title:"확인여부",   name: "readYn"      , type: "text", width: 100, align: "center"},
             { title:"날짜",   name: "regDd"      , type: "text", width: 100, align: "center"}
         ]
     });

     // 검색 버튼 클릭 
     $("#btnSearch").on("click", function(e) {
         fn_searchArticle($("#pageSize").val(), 1);
     });
     
     //초기 자료 조회 
     fn_searchArticle();
     
 }); // document ready


 // 선택한 글 상세 보기로 이동
 function fn_viewDetail(notiId, selectedRow) {

     var $selectedRow = $(selectedRow);
     var reqUrl = "${pageContext.request.contextPath}/cmm/selectNotificationAjax.do";
     var inputData = { "notiId" : notiId };
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.ajax({
         type: "post",
         contentType: "application/json; charset=utf-8",
         url: reqUrl,
         dataType: "json",
         data: JSON.stringify(inputData),
     }).done(function(response){
         var jsonObj = JSON.parse(response);
         $("#jsGrid").find('table tr.answer').remove();
         //alert("DDDDDDDD remove = " + $("#jsGrid")[0].scrollHeight);
         
        $("#jsGrid").jsGrid("rowByItem", $selectedRow).data("JSGridItem")["readYn"] = jsonObj.data.readYn;
        $selectedRow.find('td').eq(GRID_INDEX_OF_READYN).text(jsonObj.data.readYn);
        
        $selectedRow.after("<tr class='answer'><td colspan='7'>" + jsonObj.data.content
                 + "<br/>" + jsonObj.data.content
                 + "<br/>" + jsonObj.data.content
                 + "<br/>" + jsonObj.data.content
                 + "<br/>알림확인여부=" + jsonObj.data.readYn
                 + "<br/>알림일자=" + jsonObj.data.regDd
                 + "</td></tr>");
     });
     
     $("#jsGrid").closest('.ui-jqgrid-bdiv').width($("#jsGrid").closest('.ui-jqgrid-bdiv').width() + 1);
     
 }
 
 // 그리드 데이터 조회 호출 
 function fn_searchArticle(pageSize, pageIndex) {
     $("#jsGrid").jsGrid("search"
             , {'pageSize'  : (pageSize  ? pageSize  : fn_getIntValue("pageSize", ${pageSize}) ), 
                'pageIndex' : (pageIndex ? pageIndex : fn_getIntValue("pageIndex", 1))
               }
     );
 }
 
 </script>
 </head>

 <body>

 <h1>${pageTitle }</h1>

 메시지 : ${message} 
 
 
 &nbsp;<br/>
 <form name="articleForm" id="articleForm"  
       action="${pageContext.request.contextPath}/cmm/listAlerts.do" 
       method="post"> 
     
     <!-- 검색조건 -->
     <input type="text" name="pageSize" id="pageSize" value="${pageSize }" />
     <input type="text" name="itemsCount" id="itemsCount" value="0" />
     
     <input type="text" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" size="5" maxlength="5" />
     <input type="button" name="btnSearch" id="btnSearch" title="새로고침" value="새로고침" />
     
     <br/>
          
     <div id="jsGrid" name="jsGrid" style="height: 100%"></div>
     
     
     <input type="text" name="articleNo" id="articleNo" value="" title="선택글번호" readonly />

 </form>

 </body>
 </html>

