Home Explore Help
Register Sign In
dbs289
/
LifeCenter
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

huiwon.seo 4 years ago
parent
4474358dfb
commit
03eb996174
6 changed files with 241 additions and 5 deletions
Unified View Show Diff Stats
  1. 33 2
      src/main/webapp/WEB-INF/jsp/mobile/health/health1.jsp
  2. 31 0
      src/main/webapp/WEB-INF/jsp/mobile/health/health2.jsp
  3. 31 0
      src/main/webapp/WEB-INF/jsp/mobile/health/health3.jsp
  4. 31 0
      src/main/webapp/WEB-INF/jsp/mobile/health/health4.jsp
  5. 4 1
      src/main/webapp/WEB-INF/jsp/mobile/login/login.jsp
  6. 111 2
      src/main/webapp/resources/js/mobile/health.js

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

@@ -22,7 +22,7 @@ $( function(){
 
             }

             }

         },

         },

         messages : {

         messages : {

-        	temperature : {

+            temperature : {

                 floatNum : "숫자형식으로 입력해주세요"

                 floatNum : "숫자형식으로 입력해주세요"

             }

             }

         },

         },

@@ -49,8 +49,30 @@ $( function(){
 
             }

             }

         }

         }

     });

     });

-})

+});

+

+/*

+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의

+ * 공통 이벤트 처리는 -> health.js

+ */

+var phrLocalStorageName = "bluetoothHealth1";

+var phrCallBackType     = "temperature";

 </script>

 </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>

 </head>

 <body>

 <body>

     <div id="sub">

     <div id="sub">

@@ -81,6 +103,15 @@ $( function(){
 
                 </ul>

                 </ul>

             </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">

             <form id="healthForm" method="post" action="./insert">

                 <div class="health">

                 <div class="health">

                     <div class="part">

                     <div class="part">

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

@@ -123,7 +123,29 @@ $( function(){
 
         }
 
         }
 
     });
 
     });
 
 })
 
 })
 
+
 
+/*
 
+ * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
 
+ * 공통 이벤트 처리는 -> health.js
 
+ */
 
+var phrLocalStorageName = "bluetoothHealth2";
 
+var phrCallBackType     = "bloodPressure";
 
 </script>
 
 </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>
 
 </head>
 
 <body>
 
 <body>
 
     <div id="sub">
 
     <div id="sub">
 
@@ -154,6 +176,15 @@ $( function(){
 
                 </ul>
 
                 </ul>
 
             </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">
 
             <form id="healthForm" method="post" action="./insert">
 
                 <div class="health">
 
                 <div class="health">
 
                     <div class="part">
 
                     <div class="part">

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

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

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

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

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

@@ -47,7 +47,10 @@ $( function(){
 
                 var redirectUrl = data.redirectUrl;

                 var redirectUrl = data.redirectUrl;

                 

                 

                 if( data.code == "00" ) {

                 if( data.code == "00" ) {

-                    localStorage.clear();

+                    localStorage.removeItem( "id" );

+                    localStorage.removeItem( "pw" );

+                    localStorage.removeItem( "cc" );

+                    

                     localStorage.id = data.id;

                     localStorage.id = data.id;

                     localStorage.pw = $( "#pw" ).val();

                     localStorage.pw = $( "#pw" ).val();

                     localStorage.cc = data.cc;

                     localStorage.cc = data.cc;

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

@@ -9,11 +9,120 @@ $( function(){
 
     
     
     printClock();
 
     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() {
 
 function printClock() {
 
     var currentDate = new Date();                                     // 현재시간
 
     var currentDate = new Date();                                     // 현재시간
 
     var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜
 
     var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜