Explorar el Código

모바일 건강정보기록 기기연동 화면, 로직 추가

huiwon.seo hace 4 años
padre
commit
03eb996174

+ 33 - 2
src/main/webapp/WEB-INF/jsp/mobile/health/health1.jsp

@@ -22,7 +22,7 @@ $( function(){
             }
         },
         messages : {
-        	temperature : {
+            temperature : {
                 floatNum : "숫자형식으로 입력해주세요"
             }
         },
@@ -49,8 +49,30 @@ $( function(){
             }
         }
     });
-})
+});
+
+/*
+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
+ * 공통 이벤트 처리는 -> health.js
+ */
+var phrLocalStorageName = "bluetoothHealth1";
+var phrCallBackType     = "temperature";
 </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;}
+</style>
 </head>
 <body>
     <div id="sub">
@@ -81,6 +103,15 @@ $( function(){
                 </ul>
             </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">

+ 31 - 0
src/main/webapp/WEB-INF/jsp/mobile/health/health2.jsp

@@ -123,7 +123,29 @@ $( function(){
         }
     });
 })
+
+/*
+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
+ * 공통 이벤트 처리는 -> 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;}
+</style>
 </head>
 <body>
     <div id="sub">
@@ -154,6 +176,15 @@ $( function(){
                 </ul>
             </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">

+ 31 - 0
src/main/webapp/WEB-INF/jsp/mobile/health/health3.jsp

@@ -45,7 +45,29 @@ $( function(){
         }
     });
 })
+
+/*
+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
+ * 공통 이벤트 처리는 -> health.js
+ */
+var phrLocalStorageName = "bluetoothHealth3";
+var phrCallBackType     = "oxygenSaturation";
 </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;}
+</style>
 </head>
 <body>
     <div id="sub">
@@ -76,6 +98,15 @@ $( function(){
                 </ul>
             </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">

+ 31 - 0
src/main/webapp/WEB-INF/jsp/mobile/health/health4.jsp

@@ -45,7 +45,29 @@ $( function(){
         }
     });
 })
+
+/*
+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
+ * 공통 이벤트 처리는 -> health.js
+ */
+var phrLocalStorageName = "bluetoothHealth4";
+var phrCallBackType     = "bloodSugar";
 </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;}
+</style>
 </head>
 <body>
     <div id="sub">
@@ -76,6 +98,15 @@ $( function(){
                 </ul>
             </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">

+ 4 - 1
src/main/webapp/WEB-INF/jsp/mobile/login/login.jsp

@@ -47,7 +47,10 @@ $( function(){
                 var redirectUrl = data.redirectUrl;
                 
                 if( data.code == "00" ) {
-                    localStorage.clear();
+                    localStorage.removeItem( "id" );
+                    localStorage.removeItem( "pw" );
+                    localStorage.removeItem( "cc" );
+                    
                     localStorage.id = data.id;
                     localStorage.pw = $( "#pw" ).val();
                     localStorage.cc = data.cc;

+ 111 - 2
src/main/webapp/resources/js/mobile/health.js

@@ -9,11 +9,120 @@ $( function(){
     
     printClock();
     
-    $( "input[type='tel']" ).on("keydown", function() {
-        onlyNumber();
+    
+    
+    /*
+     * 블루투스 기기연동 공통 이벤트 처리 health1, 2, 3, 4.jsp
+     */
+    
+    $( "span.insert-type" ).on( "click", function(){
+        var $this = $( this );
+        
+        if( !$this.hasClass( "readonly" ) ) {
+            return false;
+        }
+        
+        var checkbt = $this.siblings('.switch').find('.checkbt');
+        
+        if( $this.hasClass( "device" ) ){
+            checkbt.prop('checked', true );
+        } else if ( $this.hasClass( "direct" ) ) {
+            checkbt.prop('checked', false );
+        }
+         
+        bluetoothCheck();
     });
+    
+    $( "#bluetooth-checkbox" ).on( "change", function(){
+        bluetoothCheck();
+    });
+    
+    $( "span.insert-type" ).toggleClass( "readonly", true );
+    
+    if( typeof phrLocalStorageName != "undefined" ) {
+        if( localStorage.getItem( phrLocalStorageName ) == "true" ) {
+            $( "span.insert-type.device" ).click();
+        } else {
+            $( "span.insert-type.direct" ).click();
+        };
+    };
 });
 
+function bluetoothCheck(){
+    var bluetoothCheck = $( "#bluetooth-checkbox" ).is( ":checked" );
+    
+    $( "span.insert-type" ).toggleClass( "readonly", true );
+    
+    if( bluetoothCheck === true ){
+        //기기연동
+        $( "span.insert-type.device" ).toggleClass( "readonly", false );
+        $( "div.data input" ).prop( "readonly", true ).val( "" );
+        
+        localStorage.setItem( phrLocalStorageName, "true" );
+        
+        console.log( "기기연동 app 호출 : " + phrCallBackType );
+        phrValue( "getPhrValue", phrCallBackType );
+    } else {
+        //직접입력
+        $( "span.insert-type.direct" ).toggleClass( "readonly", false );
+        $( "div.data input" ).prop( "readonly", false ).val( "" );
+        
+        localStorage.setItem( phrLocalStorageName, "false" );
+    }
+}
+
+
+/*
+ * App에서 호출하는 callbackFunction   
+ *    ex)getPhrValue( "temperature", val1, val2, val3 )
+ *      앱에서 javascript 호출
+ *  - phrType :
+ *      == 기기 연동화면 ==
+ *      측정메뉴로 이동시 해당하는 메뉴 tonative 정의
+ *      currentDevice
+ *        혈당계       : bloodsugar
+ *        산소포화도 : oxysaturation
+ *        혈압계       : bloodpressure
+ *        체온계       : thermometer
+ *        * 혈압/맥박수에서는 phrType이 무조건 bloodPressure 임
+ *
+ *  - value1 : 체온, 산소포화도, 혈당, 혈압수축기
+ *  - value2 : 혈압이완기
+ *  - value3 : 맥박수
+ */
+function getPhrValue( phrType , value1, value2, value3 ) {
+    if( phrType == "thermometer" ) {
+        //체온
+        $( "input[name='temperature']" ).val( value1 ).prop( "readonly", true );
+        
+    } else if( phrType == "bloodpressure" ){
+        //혈압, 맥박수
+        $( "input[name='bloodPressure']" ).val( value1 ).prop( "readonly", true );
+        $( "input[name='bloodPressure2']" ).val( value2 ).prop( "readonly", true );
+        $( "input[name='pulseRate']" ).val( value3 ).prop( "readonly", true );
+        
+    } else if( phrType == "oxysaturation" ){
+        //산소포화도
+        $( "input[name='oxygenSaturation']" ).val( value1 ).prop( "readonly", true );
+        
+    } else if( phrType == "bloodsugar" ){
+        //혈당
+        $( "input[name='bloodSugar']" ).val( value1 ).prop( "readonly", true );
+    }
+}
+
+function phrValue(callbackFnName, phrType) {
+    var jsonMsg = {
+            "type":"command",
+            "functionType":"currentDevice",
+            "value" : {
+                "callbackFn" : callbackFnName,
+                "phrType" : phrType
+                }
+    }
+    toNative(jsonMsg);
+}
+
 function printClock() {
     var currentDate = new Date();                                     // 현재시간
     var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜