[phr] 진료관리 목록 페이징 처리 추가.

src/main/java/com/lemon/lifecenter/controller/ClinicController.java

@@ -33,6 +33,8 @@ public class ClinicController extends LifeCenterController {
 	
 	@Autowired
 	private PatientService patientService;
+	
+	final int pageSize = 30;
 
     @RequestMapping("/state")
     public ModelAndView clinicState(
@@ -42,7 +44,6 @@ public class ClinicController extends LifeCenterController {
     	
     	System.err.println( "page : " + page );
     	
-    	final int pageSize = 30;
     	String centerCode = "0000";//LifeCenterSessionController.getSession( request, "sesCenterCode" );
         
     	PatientPHRLatestDTO dto = new PatientPHRLatestDTO();
@@ -95,6 +96,32 @@ public class ClinicController extends LifeCenterController {
         return mv;
     }
     
+    @RequestMapping("/api/state")
+    public @ResponseBody List<PatientPHRLatestDTO> state(
+    		HttpServletRequest request,
+    		@RequestParam(value="page", required=true, defaultValue="1") int page,
+    		@RequestParam(value="searchText", required=false, defaultValue="") String searchText) {
+    	
+    	System.err.println( "page : " + page );
+    	
+    	String centerCode = "0000";//LifeCenterSessionController.getSession( request, "sesCenterCode" );
+        
+    	PatientPHRLatestDTO dto = new PatientPHRLatestDTO();
+        dto.setLimit( ( Integer.valueOf( page ) - 1 ) * pageSize );
+        dto.setLimitMax( pageSize );
+        dto.setCenterCode(centerCode);
+        dto.setSearchText(searchText);
+        
+        int total = clinicService.selectPHRLatestCount(dto);
+        List<PatientPHRLatestDTO> result = new ArrayList<PatientPHRLatestDTO>();
+
+        if (total > 0) {
+            result = clinicService.selectPHRLatestList(dto);
+        }
+        
+        return result;
+    }
+    
     @RequestMapping("/api/phrDatas")
     public @ResponseBody List<PatientPHRHistoryDTO> phrDatas(
     		@RequestParam(value="patientIdx", required=true, defaultValue="") int patientIdx,

src/main/webapp/WEB-INF/jsp/clinic/state.jsp

@@ -4,12 +4,182 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script src="/resources/bower_components/jquery-bootpag-master/lib/jquery.bootpag.min.js"></script>
 <script>
 function searchPatients() {
 	const keyword = $("#searchKeyword").val();
 
 	location.href = "./state?searchText="+keyword;
 }
+
+function retrieveStateData(page) {
+
+	const searchText = $("#searchKeyword").val();
+	
+	var params = {page: page, searchText: searchText};
+
+	$.ajax({
+        url      : "./api/state",
+        data     : params,
+        method   : "GET",
+        dataType : "json",
+        success  : function( datas ){
+            console.log(datas);
+            
+           	var html = "데이터가 없습니다." ;
+			if (datas.length > 0) {
+				html = "";
+				datas.forEach(d => {
+					var danger = d.temperature > 37 ? "danger" : "";
+					var temperature_step_one = "";
+					var systolicBloodPressure_step_one = "";
+					var oxygenSaturation_step_one = "";
+					
+					var temperature = (d.temperature || "--") + '℃';
+					var bloodPressure = (d.systolicBloodPressure || "--") + " / " + (d.diastolicBloodPressure || "--");
+					var oxygenSaturation = (d.oxygenSaturation || "--") + "%";
+					html += '<div class="col-lg-2 col-md-6 mb-4">';
+					html += '	<div class="patients-stats">';
+					html += '		<div class="name">';
+					html += '			<a href="">'+d.roomNumber+'('+d.patientName+')</a>';
+					html += '			<div class="check">';
+					html += '				<ul><li>';
+					html += '					<a href="javscript:;" class="symptom"><i class="align-middle mr-2 fas fa-fw fa-user-plus"></i></a>';
+					html += '				</li></ul>';
+					html += '			</div>';
+					html += '		</div>';
+					html += '      <div class="stats '+danger+'">';
+					html += '			<ul>';
+					html += '				<li class="fever '+temperature_step_one+'">'+temperature+'</li>';
+					html += '				<li class="fever '+systolicBloodPressure_step_one+'">'+bloodPressure+'</li>';
+					html += '				<li class="fever '+oxygenSaturation_step_one+'">'+oxygenSaturation+'</li>';
+					html += '			</ul>';
+					html += '		</div>';
+					html += '	</div>';
+					html += '</div>';
+				});
+			};
+
+			$(".patients-list").fadeOut('fast',function(){
+				$(".patients-list").html(html).fadeIn('fast');
+			});
+        },
+        error : function(){
+            console.error('error!');
+        }
+    }).done( function(){
+        console.log('done!');
+    });
+}
+
+$(document).ready(function() {
+
+	// 반복 start/stop 클릭
+	$('#playButton').click(function () {
+		$('#playButton').addClass('disabled');
+		$('#pauseButton').removeClass('disabled');
+		nextPage();
+	});
+	$('#pauseButton').click(function () {
+		$('#playButton').removeClass('disabled');
+		$('#pauseButton').addClass('disabled');
+		nextPage();
+	});
+
+	////////////////////////////////////////////////////////////////////////////////
+	//// Pagination
+	////////////////////////////////////////////////////////////////////////////////
+	
+	function nextPage() {
+		var next = $("#pagination .active").next();
+		console.log(next);
+		if (!next.is(':visible')) {
+			$("#pagination .first").click();
+		}
+		else {
+			next.click();
+		}
+	}
+	
+	// 윈도우 폭에 따른 반응형 목록 수 분기 함수
+	function responsiblePagination() {
+		var window_width = $(window).width();
+
+		if(window_width >= 1200) {
+			$('#pagination').bootpag({
+				maxVisible: 10, // 한번에 보여지는 페이지수
+				firstLastUse: true
+			});
+		}
+		if(window_width < 1200 && window_width >= 600) {
+			$('#pagination').bootpag({
+				maxVisible: 5, // 한번에 보여지는 페이지수
+				firstLastUse: true
+			});
+		}
+		if(window_width < 600){
+			$('#pagination').bootpag({
+				maxVisible: 3, // 한번에 보여지는 페이지수
+				firstLastUse: false
+			});
+		}
+	}
+
+	// 페이지 네이션 함수(샘플)
+	function pagination(){
+		// Pagination  API -> http://botmonster.com/jquery-bootpag/#.XD2VElwzaUk
+		$('#pagination').bootpag({
+			// maxVisible: 10, // 한번에 보여지는 페이지수
+			// firstLastUse: true,
+			// href: 'URL',// template for pagination links (default javascript:void(0);)
+			// hrefVariable: false,// variable name in href template for page number (default {{number}})
+			total: totalPage, // 페이지 수
+			page: 1, // 초기 페이지
+			leaps: true,
+			first: '<i class="mdi mdi-chevron-double-left"></i>',
+			prev: '<i class="mdi mdi-chevron-left"></i>',
+			next: '<i class="mdi mdi-chevron-right"></i>',
+			last: '<i class="mdi mdi-chevron-double-right"></i>',
+			wrapClass: 'pagination',
+			activeClass: 'active',
+			disabledClass: 'disabled',
+			nextClass: 'next',
+			prevClass: 'prev',
+			lastClass: 'last',
+			firstClass: 'first'
+		}).on("page", function(event, num){
+			retrieveStateData(num);
+		});
+		responsiblePagination();
+	}
+
+	var totalList = ${total}; // 저장된 데이터 항목 수
+	var viewEntry; // 선택된 목록 보기 수
+	var totalPage; // 표시할 페이지 수
+
+	// 목록 수 초기값
+	viewEntry = 36;
+	// 초기 표시될 페이지 수 계산
+	totalPage = totalList / viewEntry;
+	// 페이지 네이션 실행
+	pagination();
+
+	// 목록 수 변경 시
+	$(document).on('change','#viewEntry',function(){
+		viewEntry = $(this).find('option:selected').val();
+		// 표시될 페이지 수 계산
+		totalPage = totalList / viewEntry;
+		// 페이지 네이션 실행
+		pagination();
+	});
+
+	// 윈도우 폭 변경에 따른 반응형 목록 수 적용
+	$(window).resize(function(){
+		responsiblePagination();
+	});
+
+	
+});
 </script>
 </head>
 
@@ -88,7 +258,7 @@ function searchPatients() {
 																						</ul>
 																					</div>
 																				</div>
-																				<div class="stats ${status.index % 4 == 0 ? 'danger' : '' }">
+																				<div class="stats ${patient.temperature > 37 ? 'danger' : '' }">
 																					<ul>
 																						<fmt:formatDate value="${patient.temperatureCreateDate}" pattern="yyyyMMdd" var="temperatureDateString" />
 																						<li class="fever ${temperatureDateString == nowDateString ? 'step_one' : ''}">
@@ -96,11 +266,11 @@ function searchPatients() {
 																						</li>
 																						<fmt:formatDate value="${patient.systolicBloodPressureCreateDate}" pattern="yyyyMMdd" var="systolicBloodPressureDateString" />
 																						<li class="bloodPressure ${systolicBloodPressureDateString == nowDateString ? 'step_one' : ''}">
-																							<c:out value="${patient.systolicBloodPressure != null ? patient.systolicBloodPressure : '--'} ℃" />
+																							<c:out value="${patient.systolicBloodPressure != null ? patient.systolicBloodPressure+' / '+patient.systolicBloodPressure  : '-- / --'}" />
 																						</li>
-																						<fmt:formatDate value="${patient.diastolicBloodPressureCreateDate}" pattern="yyyyMMdd" var="diastolicBloodPressureDateString" />
-																						<li class="oxygen ${diastolicBloodPressureDateString == nowDateString ? 'step_one' : ''}">
-																							<c:out value="${patient.diastolicBloodPressure != null ? patient.diastolicBloodPressure : '--'} ℃" />
+																						<fmt:formatDate value="${patient.oxygenSaturationCreateDate}" pattern="yyyyMMdd" var="oxygenSaturationDateString" />
+																						<li class="oxygen ${oxygenSaturationDateString == nowDateString ? 'step_one' : ''}">
+																							<c:out value="${patient.oxygenSaturation != null ? patient.oxygenSaturation : '--'} %" />
 																					</ul>
 																				</div>
 																			</div>