LifeCenter/src/main/webapp/WEB-INF/jsp/push/send.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script src="/resources/js/common/jquery.tablesorter.min.js"></script>
<script>
$( function(){
    setEventInit();
    setTargetSelect();
    setSendSelect();
    
    $( "#sendForm" ).validate({
        rules: {
            sendDate : {
                date : true
            }
        },
        messages : {
            targetPreview : {
                required : "대상자를 1명 이상 선택해주세요"
            }
        },
        onfocusout: function (element) {
            $( element ).val( $.trim( $( element ).val() ) );
            $( element ).valid();
        },
        submitHandler: function(form) {
            console.log( $( form ).serialize() );
            
            alertBox({ 
                txt: "등록 하시겠습니까?",
                type : "confirm",
                callBack : function( result ){
                    if( result ) {
                        form.submit();
                    }
                }
            })
        }
    });
    
    $( "input.date" ).daterangepicker({
        singleDatePicker : true,
//         timePicker: true,
        showDropdowns : true,
        locale : {
            format : "YYYY-MM-DD"
        },
//         maxDate : ,
        minDate : new Date()
    }).on('apply.daterangepicker', function(ev, picker) {
        
        // 예약발송 -> 오늘날짜면 minDate 재설정
        $( "input.date-time-r" ).daterangepicker({
            singleDatePicker : true,
            showDropdowns : true,
            timePicker: true,
            locale: {
                format: 'HH:mm'
            },
            minDate : new Date()
        }).on('show.daterangepicker', function(ev, picker) {
            picker.container.find(".calendar-table").hide();
        });
        
        if( new Date().format( "yyyy-MM-dd" ) < $( this ).val() ) {
            $( "input.date-time-r" ).data( 'daterangepicker' ).minDate = "";
        }
    });
    
    // 예약 발송
    $( "input.date-time-r" ).daterangepicker({
        singleDatePicker : true,
        showDropdowns : true,
        timePicker: true,
        locale: {
            format: 'HH:mm',
            applyLabel: "적용",
            cancelLabel: "닫기"
        },
        minDate : new Date()
    }).on('show.daterangepicker', function(ev, picker) {
        picker.container.find(".calendar-table").hide();
    });
    
    
    // 매일 반복 발송
    $( "input.date-time-e" ).daterangepicker({
        singleDatePicker : true,
        showDropdowns : true,
        timePicker: true,
        locale: {
            format: 'HH:mm',
            applyLabel: "적용",
            cancelLabel: "닫기"
        }
    }).on('show.daterangepicker', function(ev, picker) {
        picker.container.find(".calendar-table").hide();
    });
    
    
    // checkbox 전체선택, 해제 이벤트 처리
    $( "#allCheck" ).click( function(){
        $( "#patientList" ).find( "input[name='patientIdx']" ).prop( "checked", $( this ).prop( "checked" ) );
    });
    $( "#patientList" ).find( "input[name='patientIdx']" ).click( function(){
        if( $( "#patientList" ).find( "input[name='patientIdx']:not(:checked)" ).length > 0 ){
            $( "#allCheck" ).prop( "checked", false );
        } else {
            $( "#allCheck" ).prop( "checked", true );
        }
    });
});

function setEventInit(){
    // 그룹선택 or 환자개별선택
    $( "input.target-select" ).click( function(){
        setTargetSelect();
    });
    
    // 발송방식 선택
    $( "input.send-select" ).click( function(){
        setSendSelect();
    });
    
    // 그룹선택이나 환자개별선택시 초기화 해야할부분 처리
    $( "input[name='selectType']" ).on( "click", function(){
        var selectType = $( this ).val();
        
        if( selectType == "GROUP" ) {
            // 그룹 선택
            $('#radio-target-a').click();
            
            initPatientSelect();
        } else if( selectType == "PATIENT" ) {
            // 환자 개별 선택
            $('#radio-target-p').click();
        }
    });
    
    // 환자 개별 선택 팝업창 열때 현재 선택된 환자목록 기준으로 팝업창에서 선택한 환자 동기화
    $( "#selectPatientList" ).on( "show.bs.modal", function(){
        var $this               = $( this );
        var listPushTargetTemp  = $( "#pushTargetTemp" );
        var savedPushTargetTemp = listPushTargetTemp.find( "input[type='checkbox']:checked" ).serializeArray();
        
        $( "#patientList" ).find( "input[type='checkbox']:checked" ).prop( "checked", false );
        
        savedPushTargetTemp.forEach( function( item, index, arr2 ){
//             console.log(item,index,arr2[index+1]);
            $this.find( "input[type='checkbox']:input[value='"+ item.value +"']" ).prop( "checked", true );
        });
    });
    
    $( "#sortTable" ).tablesorter({
    	headers:{
            2:{sorter:"text"},
            3:{sorter:"text"}
    	}

    });
}

function setTargetSelect(){
    $( "tr.target-select" ).hide();
    $( "#" + $( "input.target-select:checked" ).prop( "accessKey" ) ).fadeIn( 100 );
};

function setSendSelect(){
    $( "tr.send-select" ).hide().find( "input" ).prop( "disabled", true );
    $( "#" + $( "input.send-select:checked" ).prop( "accessKey" ) ).fadeIn( 100 ).find( "input" ).prop( "disabled", false );
}

function initPatientSelect(){
	$( "#allCheck" ).prop( "checked", false );
    $( "#pushTargetTemp" ).empty();
    $( "#target-preview" ).val( "" );
    $( "#pushTargetTempTotal" ).text( "" ).hide();
}

function saveSelectedPatientList(){
    alertBox({
        txt : "선택된 환자를 발송 대상자로 적용할까요?",
        type : "confirm", 
        callBack : function( result ){
            if( result ) {
                addPatientToTargetTemp()
            } else {
                console.log( "취소 -> no event" );
            };
        }
    });
    
    $( "#selectPatientList" ).find( ".modal-title h3" ).remove();
}

function addPatientToTargetTemp(){
    $( "#selectPatientList" ).modal( "hide" );
    $( "#pushTargetTemp" ).empty();
    
    var appendData = $( "#patientList" ).find( "input[type='checkbox']:checked" ).clone();
    var name = appendData.map( function(){
        return $( this ).attr( "title" );
    }).get().join( ", " );
    
    console.log( name );
    
    appendData.appendTo( "#pushTargetTemp" );
    
    if( appendData.length > 0 ){
        $( "#pushTargetTempTotal" ).text( appendData.length ).show();
    } else {
        $( "#pushTargetTempTotal" ).text( "" ).hide();
    }
     
    $( "#target-preview" ).val( name ).valid();
}
</script>
</head>
<body>
    <div class="modal fade" id="selectPatientList" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">환자 선택</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body m-4">
                    <table class="table mobile-table table-striped text-center" id="sortTable">
                        <colgroup>
                            <col style="width: 5%">
                            <col style="width: 10%">
                            <col style="width: 15%">
                            <col style="width: 20%">
                            <col style="width: 10%">
                            <col style="width: 15%">
                            <col style="width: 10%">
                            <col style="width: 25%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="allCheck" style="width:20px;height:20px;" >
                                </th>
                                <th>번호 <i class="fa fa-fw fa-sort"></i></th>
                                <th>환자명 <i class="fa fa-fw fa-sort"></i></th>
                                <th>호실 <i class="fa fa-fw fa-sort"></i></th>
                                <th>성별 <i class="fa fa-fw fa-sort"></i></th>
                                <th>생년월일 <i class="fa fa-fw fa-sort"></i></th>
                                <th>나이 <i class="fa fa-fw fa-sort"></i></th>
                                <th>입소일자 <i class="fa fa-fw fa-sort"></i></th>
                            </tr>
                        </thead>
                        <tbody id="patientList">
                            <c:choose>
                                <c:when test="${total eq 0}">
                                    <tr>
                                        <td colspan="6">no data</td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach var="pl" items="${patientList}" varStatus="lStatus">
                                        <tr>
                                            <td class="no">
                                                <input type="checkbox" name="patientIdx" title="[<c:if test="${pl.wardNumber ne '' and pl.wardNumber ne null}">${pl.wardNumber}동</c:if> ${pl.roomNumber}호:${pl.patientName}]" value="${pl.patientIdx}" style="width:20px;height:20px;" >
                                            </td>
                                            <td class="no">
                                                <c:set var="pageNum" value="${total - lStatus.index}" />
                                                <fmt:formatNumber value="${pageNum}" pattern="#,###" />
                                            </td>
                                            <td class="name"><c:out value="${pl.patientName}" /></td>
                                            <td class="ward"><c:if test="${pl.wardNumber ne '' and pl.wardNumber ne null}">${pl.wardNumber}동</c:if> ${pl.roomNumber}호</td>
                                            <td class="gender"><c:out value="${pl.gender}" /></td>
                                            <td class="age"><c:out value="${pl.jumin}" /></td>
                                            <td class="age"><c:out value="${pl.age}" /></td>
                                            <td class="hospitalization-date"><c:out value="${pl.hospitalizationDate}" /></td>
                                        </tr>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn border" data-dismiss="modal">취소</button>
                    <button type="button" class="btn btn-primary" onclick="saveSelectedPatientList();">선택 완료</button>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="wrapper">
        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
        
        <div class="main">
            <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>

            <main class="content">
                <div class="container-fluid p-0">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h1 class="h3 mb-3">푸시 발송</h1>
                        </div>
                        <div class="col-12 col-lg-6  text-right">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
                                    <li class="breadcrumb-item">푸시서비스 관리</li>
                                    <li class="breadcrumb-item active">푸시 발송</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="alert alert-light text-info border p-3">
                                    <span style="font-size:14px;">· 발송 전체 대상자중 입소자만 푸시 발송 가능<br/>· 그룹선택 발송일 경우 발송시간기준으로 환자 실시간 조회 및 발송되므로 대상자가 현재와 달라질 수 있음</span>
                                </div>
                                
                                <form id="sendForm" action="./send/insert" method="post">
                                    <div class="card-body">
                                        <table class="table mobile-table">
                                            <colgroup>
                                                <col style="width:20%">
                                                <col style="width:80%">
                                            </colgroup>
                                            <tr>
                                                <th>생활치료센터명</th>
                                                <td><c:out value="${data._SES_CENTER_NAME}"/></td>
                                            </tr>
                                            <tr>
                                                <th>발송등록자</th>
                                                <td><c:out value="${data._SES_NAME}(${data._SES_ID})"/></td>
                                            </tr>
                                            <tr>
                                                <th rowspan="2"><span class="fix">*</span>발송 대상</th>
                                                <td>
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input target-select" accesskey="target-group" type="radio" name="selectType" value="GROUP" checked="checked">
                                                        <span class="form-check-label">그룹 선택</span>
                                                    </label>
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input target-select" accesskey="target-patient" type="radio" name="selectType" value="PATIENT">
                                                        <span class="form-check-label">환자 개별 선택</span>
                                                    </label>
                                                </td>
                                            </tr>
                                            <tr class="target-select" id="target-group" style="display:none;">
                                                <td>
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio-target-a" name="targetType" value="A" checked="checked" required>
                                                        <span class="form-check-label">전체 환자</span>
                                                    </label>
                                                    
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio-target-n" name="targetType" value="N" required>
                                                        <span class="form-check-label">건강정보 미입력 환자</span>
                                                    </label>
                                                    
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio-target-m" name="targetType" value="M" required>
                                                        <span class="form-check-label">본인 관리 환자</span>
                                                    </label>
                                                    
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio-target-t" name="targetType" value="T" required>
                                                        <span class="form-check-label">정신건강 자가진단 미입력 환자</span>
                                                    </label>
                                                </td>
                                            </tr>
                                            <tr class="target-select" id="target-patient" style="display:none;">
                                                <td>
                                                    <div class="form-row">
                                                        <div class="col-7">
                                                            <input class="form-check-input d-none" id="radio-target-p" type="radio" name="targetType" value="P">
                                                            <input type="text" value="" class="form-control" name="targetPreview" id="target-preview" readonly required>
                                                            
                                                            <!-- 발송대상 checkboc동적 추가 hidden 영역 -->
                                                            <div class="d-none" id="pushTargetTemp"></div>
                                                        </div>
                                                        <div class="col-4">
                                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#selectPatientList">환자 불러오기 <span id="pushTargetTempTotal" class="badge badge-danger" style="display:none;">2</span></button>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            
                                            <tr>
                                                <th rowspan="2"><span class="fix">*</span>발송 방식</th>
                                                <td>
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input send-select" accesskey="send-d" type="radio" name="sendType" value="D" checked="checked" required>
                                                        <span class="form-check-label">즉시 발송</span>
                                                    </label>
                                                    
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input send-select" accesskey="send-r" type="radio" name="sendType" value="R" required>
                                                        <span class="form-check-label">예약 발송</span>
                                                    </label>
                                                    
                                                    <label class="form-check form-check-inline">
                                                        <input class="form-check-input send-select" accesskey="send-e" type="radio" name="sendType" value="E" required>
                                                        <span class="form-check-label">매일 반복</span>
                                                    </label>
                                                </td>
                                            </tr>
                                            
                                            <tr class="send-select" id="send-d">
                                                <td><span>즉시 발송되며 취소가 불가능 합니다</span></td>
                                            </tr>
                                            
                                            <tr class="send-select" id="send-r">
                                                <td>
                                                    <span class="mr-2">예약</span>
                                                    <div class="form-check-inline calendar-bar mb-xl-0" style="width:120px;">
                                                        <input type="text" class="form-control date" value="" name="sendDate" autocomplete="off" placeholder="예약 일자" required>
                                                        <i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
                                                    </div>
                                                    <div class="form-check-inline calendar-bar mb-xl-0" style="width:80px;">
                                                        <input type="text" class="form-control date-time-r" value="" name="sendTime" autocomplete="off" placeholder="매일 반복 시간" required>
                                                        <i class="align-middle mr-2 fas fa-fw fa-clock"></i>
                                                    </div>
                                                    <span>에 발송됩니다</span>
                                                </td>
                                            </tr>
                                            
                                            <tr class="send-select" id="send-e">
                                                <td>
                                                    <span class="mr-2">매일</span>
                                                    <div class="form-check-inline calendar-bar mb-xl-0" style="width:80px;">
                                                        <input type="text" class="form-control date-time-e" value="" name="sendTime" autocomplete="off" placeholder="매일 반복 시간" required>
                                                        <i class="align-middle mr-2 fas fa-fw fa-clock"></i>
                                                    </div>
                                                    <span>선택 시간에 반복 발송됩니다</span>
                                                </td>
                                            </tr>
                                            
                                            <tr>
                                                <th><span class="fix">*</span>푸시(알림) 제목</th>
                                                <td>
                                                    <input type="text" name="pushTitle" class="form-control" placeholder="제목을 입력하세요" maxlength="80" required>
                                                </td>
                                            </tr>
                                            
                                            <tr>
                                                <th><span class="fix">*</span>푸시(알림) 내용</th>
                                                <td>
                                                    <textarea  class="form-control" rows="10" name="pushContent" placeholder="내용을 입력하세요" maxlength="1000" required></textarea>
                                                </td>
                                            </tr>
                                        </table>
                                        
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="text-right">
                                                    <button type="button" class="btn btn-outline-primary w100" onclick="history.back();">취소</button>
                                                    <button type="submit" class="btn btn-primary w100">등록</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

            <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
        </div>
    </div>
</body>
</html>