LifeCenter/src/main/webapp/WEB-INF/jsp/mobile/health/health2.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
<script>
$.validator.addMethod( "rangePulseRate",  function( value, element ) {
    var result = true;
    if( value > 999 || value < 0 ) {
        result = false;
    }
    return this.optional(element) || result;
}, "맥박수는 [0 ~ 999] 사이의 숫자만 입력해주세요" );

$.validator.addMethod( "rangeBloodPressure",  function( value, element ) {
    var result = true;
    if( value > 999 || value < 0 ) {
        result = false;
    }
    return this.optional(element) || result;
}, "혈압은 [0 ~ 999] 사이의 숫자만 입력해주세요" );

$( function(){
    $( "#healthForm" ).validate({
        rules : {
            pulseRate : {
                floatNum : true,
                floatNumOne : true,
                rangePulseRate : true
            },
            bloodPressure : {
                floatNum : true,
                floatNumOne : true,
                rangeBloodPressure : true
            },
            bloodPressure2 : {
                floatNum : true,
                floatNumOne : true,
                rangeBloodPressure : true
            }
        },
        onkeyup: function( element, event ) {
//             $( "div.error-msg" ).text( "" );
            $( element ).valid();
        },
        onfocusout: function (element) {
//             $( "div.error-msg" ).text( "" );
            $( element ).valid();
        },
        errorPlacement: function(error, element) {
            $( "div.error-msg" ).empty().append( error );
        },
        submitHandler: function(form) {
            /*
             * 혈압과 맥박은 둘중 하나만 입력하면 입력한 항목은 입력되도록 처리 (둘중하나만 입력하거나, 모두입력하거나)
             */
             $( "div.error-msg" ).text( "" );
            //맥박수
            var pulseRate = $.trim( $( "input[name='pulseRate']" ).val() );
            
            //혈압
            var bloodPressure = $.trim( $( "input[name='bloodPressure']" ).val() );
            var bloodPressure2 = $.trim( $( "input[name='bloodPressure2']" ).val() );
            
            var flag = true;
            
            //혈압
            if( pulseRate.length == 0 &&  bloodPressure.length == 0 &&  bloodPressure.length == 0 ) {
                $( "div.error-msg" ).text( "혈압과 맥박수를 입력해주세요 (Please enter your blood pressure and heart rate)" );
                flag = false;
            }
            
//             if( pulseRate.length == 0 ) {
//                 $( "div.error-msg" ).text( "맥박수를 입력해주세요 (Please enter your heart rate)" );
//             } else if( bloodPressure.length == 0 ) {
//                 $( "div.error-msg" ).text( "수축기 혈압을 입력해주세요 (Please enter your systolic blood pressure)" );
//             } else if( bloodPressure2.length == 0 ) {
//                 $( "div.error-msg" ).text( "이완기 혈압을  입력해주세요  (Please enter your diastole blood pressure)" );
//             }
            $( "#phrValue" ).val( "" );
            $( "#phrValueAnother1" ).val( "" );
            $( "#phrValueAnother2" ).val( "" );
            $( "#phrType" ).val( "" );
            $( "#phrTypeAnother" ).val( "" );
            $( "#phrTypeAnother2" ).val( "" );
            
            if( pulseRate.length > 0 ) {
                $( "#phrType" ).val( "pulseRate" );
                $( "#phrValue" ).val( pulseRate );
            } 
            
            if( bloodPressure.length > 0 ) {
                if( bloodPressure2.length == 0 ){
                    $( "div.error-msg" ).text( "이완기 혈압을  입력해주세요  (Please enter your diastole blood pressure)" );
                    flag = false;
                } else {
                    $( "#phrValueAnother" ).val( bloodPressure );
                }
            }
            
            if( bloodPressure2.length > 0 ) {
                if( bloodPressure.length == 0 ) {
                    $( "div.error-msg" ).text( "수축기 혈압을 입력해주세요 (Please enter your systolic blood pressure)" );
                    flag = false;
                } else {
                    $( "#phrValueAnother2" ).val( bloodPressure2 );
                }
            }
            
            if( bloodPressure.length > 0 && bloodPressure2.length > 0 ){
                if( Number( bloodPressure2 ) >= Number( bloodPressure ) ) {
                    $( "div.error-msg" ).text( "수축기 혈압값은 이완기 혈압값 보다 높아야합니다 (The systolic blood pressure value must be higher than the diastolic blood pressure value)" );
                    flag = false;
                }
                $( "#phrTypeAnother" ).val( "bloodPressure" );
            }
            
            if( flag ){
                $( "button[type='submit'].confirm" ).prop( "disabled", true ).css("background", "#DBDBDB");
                form.submit();
            }
            
        }
    });
})

/*
 * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
 * 공통 이벤트 처리는 -> health.js
 */
var phrLocalStorageName = "bluetoothHealth2";
var phrCallBackType     = "bloodpressure";
</script>
<style>
/* Rounded sliders */
.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 26px;  width: 26px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2196F3;}
input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
div.bluetooth{font-size:18px;font-weight:600;padding:20px 0;border-bottom:1px solid #dddddd;text-align:center;}
div.bluetooth .switch {position: relative;display: inline-block;width: 60px;height: 34px;margin:0 10px;}
div.bluetooth .switch input {opacity: 0;width: 0;height: 0;}
div.bluetooth span.insert-type{cursor:pointer;vertical-align:middle;font-weight:600;}
div.bluetooth span.readonly{color:#999999;font-weight:500;}
.examination .history {text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    margin-top: 15px;}
.examination .history a {padding: 10px 15px}
</style>
</head>
<body>
    <div id="sub">
        <div class="container">
            <div class="header">
                <div class="previous">
                    <a href="/mobile/menu">이전</a>
                </div>
                <div class="title">건강정보기록</div>
            </div>
            <div class="device_tab">
                <ul>
                    <li>
                        <a href="./1" class="one">체온<span class="eng">body temperature</span></a>
                    </li>
                    <li>
                        <a href="./2" class="two active">혈압/맥박수<span class="eng">blood pressure/heart rate</span></a>
                    </li>
                    <li>
                        <a href="./3" class="three">산소포화도<span class="eng">oxygen</span></a>
                    </li>
                    <li>
                        <a href="./4" class="four">혈당<span class="eng">blood sugar</span></a>
                    </li>
                    <li>
                        <a href="./5" class="five">임상증상<span class="eng">symptom</span></a>
                    </li>
                </ul>
            </div>

            <div id="bluetoothBtn" class="examination">
                <div class="history">
                    <a href="javascript:;" onclick="phrValue( 'getPhrValue', phrCallBackType );">블루투스 기기 연동</a>
                </div>
            </div>
            
<!--             <div class="bluetooth"> -->
<!--                 <span class="insert-type direct">직접입력</span> -->
<!--                 <label class="switch"> -->
<!--                   <input type="checkbox" class="checkbt" id="bluetooth-checkbox"> -->
<!--                   <span class="slider round"></span> -->
<!--                 </label> -->
<!--                 <span class="insert-type device">기기연동</span> -->
<!--             </div> -->
            
            <form id="healthForm" method="post" action="./insert">
                <div class="health">
                    <div class="part">
                        <div class="title">날짜(Date)</div>
                        <div class="input day">
<!--                             <a href="javascript:;" data-popup-open="popup-calendar">d</a> -->
                            <input type="text" class="datePicker form-control" placeholder="현재 날짜" readonly>
                        </div>
                    </div>
                    <div class="part">
                        <div class="title">측정시간(Time)</div>
                        <div class="input time">
<!--                             <a href="javascript:;" data-popup-open="popup-time">d</a> -->
                            <input type="text" class="timePicker" placeholder="현재 시간" readonly>
                        </div>
                    </div>
                    
                    <div class="part tac mt30">
                        <div class="title">혈압과 맥박수를 입력해주세요</div>
                        <div class="title">(Please enter your blood pressure and heart rate)</div>
                        <div class="input time">
                        </div>
                    </div>
                    
                    <div class="data link">
                        <div class="table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>수축기/최고 혈압</br>(Systolic)</th>
                                        <th>이완기/최저 혈압</br>(Diastole)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="number" name="bloodPressure" placeholder="--"><span class="mini">mmHg</span></td>
                                        <td><input type="number" name="bloodPressure2" placeholder="--"><span class="mini">mmHg</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="point">
                            <div style="font-size:13px;color:#8EB8FF;font-weight:600;">맥박수 (heart rate)</div>
                            <input type="number" name="pulseRate" placeholder="--"><span class="mini">bpm</span>
                        </div>

                    </div>
                    
                    <div class="error-msg tac mt20 error"></div>
                </div>
                
                <div class="btn_group">
                    <ul>
                        <li> 
                            <!-- 맥박 pulseRate -->
                            <input type="hidden" id="phrType" name="phrType" value="">
                            <input type="hidden" id="phrValue" name="phrValue" value="">
                            
                            <!-- 혈압 bloodPressure -->
                            <input type="hidden" id="phrTypeAnother" name="phrTypeAnother" value="">
                            <input type="hidden" id="phrValueAnother" name="phrValueAnother" value="">
                            <input type="hidden" id="phrValueAnother2" name="phrValueAnother2" value="">
                            
                            <button type="submit" class="confirm"><span class="check">기록하기(Submit)</span></button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</body>
</html>