dbs289
/
LifeCenter


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<%@ 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( "rangeOxygenSaturation",  function( value, element ) {
    var result = true;
    if( value > 100 || value < 0 ) {
        result = false;
    }
    return this.optional(element) || result;
}, "산소포화도는 [0 ~ 100] 사이의 숫자만 입력해주세요" );

$( function(){
    $( "#healthForm" ).validate({
        rules : {
            oxygenSaturation : {
                floatNum : true,
                floatNumOne : true,
                rangeOxygenSaturation : 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) {
            var oxygenSaturation = $.trim( $( "input[name='oxygenSaturation']" ).val() );
            
            if( oxygenSaturation.length == 0 ) {
                $( "div.error-msg" ).text( "산소포화도 % 를 입력하세요 (Please enter your oxygen saturation)" );
            } else {
                $( "#phrValue" ).val( oxygenSaturation );
                $( "button[type='submit'].confirm" ).prop( "disabled", true ).css("background", "#DBDBDB");
                form.submit();
            }
        }
    });
})

/*
 * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
 * 공통 이벤트 처리는 -> health.js
 */
var phrLocalStorageName = "bluetoothHealth3";
var phrCallBackType     = "oxysaturation";
</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">혈압/맥박수<span class="eng">blood pressure/heart rate</span></a>
                    </li>
                    <li>
                        <a href="./3" class="three active">산소포화도<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 oxygen saturation)</div>
                        <div class="input time">
                        </div>
                    </div>
                    
                    <div class="data unlink">
                        <div class="point">
                            <span>
                                <input type="number" name="oxygenSaturation" placeholder="--"> %
                            </span>
                        </div>
                    </div>
                    
                    <div class="error-msg tac mt20 error"></div>
                </div>
                
                <div class="btn_group">
                    <ul>
                        <li>
                            <input type="hidden" name="phrType" value="oxygenSaturation">
                            <input type="hidden" id="phrValue" name="phrValue" value="">
<!--                             <input type="hidden" id="phrValue2" name="phrValue2" value=""> -->
                            
                            <button type="submit" class="confirm"><span class="check">기록하기(Submit)</span></button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</body>
</html>