[진료관리 - 대시보드] 페이징 사이즈 조절 가능하도록 수정.

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

@@ -58,14 +58,13 @@ public class ClinicController extends LifeCenterController {
 
 	@Autowired
 	private PatientService patientService;
-
-	final int pageSize = 30;
 	
 	private final Logger logger = LoggerFactory.getLogger(this.getClass());
 
 	@RequestMapping("/state")
 	public ModelAndView clinicState(HttpServletRequest request,
 			@RequestParam(value = "page", required = true, defaultValue = "1") int page,
+			@RequestParam(value = "size", required = true, defaultValue = "30") int pageSize,
 			@RequestParam(value = "searchText", required = false, defaultValue = "") String searchText) {
 
 
@@ -78,18 +77,20 @@ public class ClinicController extends LifeCenterController {
 		dto.setSearchText(searchText);
 
 		int total = clinicService.selectPHRLatestCount(dto);
-		List<PatientPHRLatestDTO> result = new ArrayList<PatientPHRLatestDTO>();
 
-		if (total > 0) {
-			result = clinicService.selectPHRLatestList(dto);
-		}
+		// 서버사이드 렌더링 안함 
+//		List<PatientPHRLatestDTO> result = new ArrayList<PatientPHRLatestDTO>();
+//
+//		if (total > 0) {
+//			result = clinicService.selectPHRLatestList(dto);
+//		}
 
 		ModelAndView mv = setMV("clinic/state");
 
 		mv.addObject("page", page);
 		mv.addObject("searchText", searchText);
 		mv.addObject("total", total);
-		mv.addObject("items", result);
+//		mv.addObject("items", result);
 
 		return mv;
 	}
@@ -206,8 +207,9 @@ public class ClinicController extends LifeCenterController {
 	}
 
 	@RequestMapping("/api/state")
-	public @ResponseBody List<PatientPHRLatestDTO> getStateAPI(HttpServletRequest request,
+	public @ResponseBody String getStateAPI(HttpServletRequest request,
 			@RequestParam(value = "page", required = true, defaultValue = "1") int page,
+			@RequestParam(value = "size", required = true, defaultValue = "30") int pageSize,
 			@RequestParam(value = "searchText", required = false, defaultValue = "") String searchText) {
 
 		String centerCode = LifeCenterSessionController.getSession( request, "sesCenterCode" );
@@ -224,8 +226,13 @@ public class ClinicController extends LifeCenterController {
 		if (total > 0) {
 			result = clinicService.selectPHRLatestList(dto);
 		}
+		
+		JSONObject json = new JSONObject();
 
-		return result;
+		json.put("count", total);
+		json.put("items", result);
+		
+		return json.toString();
 	}
 
 	@RequestMapping("/api/phrDatas")

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

@@ -6,10 +6,21 @@
 <script src="/resources/bower_components/jquery-bootpag-master/lib/jquery.bootpag.min.js"></script>
 <script>
 
-var totalList = ${total}; // 저장된 데이터 항목 수
-var viewEntry = 30;		// 한 화면에 표시되는 갯수 
-var totalPage = Math.ceil(totalList / viewEntry);
-var reloadTimer = null;
+let mCurrentPage = ${page}
+let mTotalCount = 0;
+let mReloadTimer = null;
+
+function getPageSize() {
+  return localStorage.getItem('dashboardPageSize') || "30";
+}
+
+function setPageSize(value) {
+  localStorage.setItem('dashboardPageSize', value);
+}
+
+function getTotalPage() {
+  return Math.ceil(mTotalCount / getPageSize());
+}
 
 function getReloadIntervalTime() {
 	// console.log("getReloadIntervalTime");
@@ -81,11 +92,11 @@ function changeReloadInterval() {
 }
 
 function activeReloadTimer() {	
-	if (reloadTimer) {
+	if (mReloadTimer) {
 		deactiveReloadTimer();
 	}
 	
-	reloadTimer = setInterval(function() {
+	mReloadTimer = setInterval(function() {
 			nextPage();
 	}, getReloadIntervalTime() * 1000);
 
@@ -93,9 +104,9 @@ function activeReloadTimer() {
 }
 
 function deactiveReloadTimer() {	
-	if (reloadTimer) {
-		clearInterval(reloadTimer);
-		reloadTimer = null;
+	if (mReloadTimer) {
+		clearInterval(mReloadTimer);
+		mReloadTimer = null;
 	}
 }
 
@@ -105,23 +116,27 @@ function searchPatients() {
 	location.href = "./state?searchText="+encodeURIComponent(keyword);
 }
 
-function retrieveStateData(page) {
+function retrieveStateData(page, needInitPagination) {
 
+  mCurrentPage = page;
 	var searchText = '<c:out value="${searchText}" />';
 	var ignoreCache = moment().unix();
-	var params = {page: page, searchText: searchText, ignoreCache:ignoreCache};
+	var params = {page: page, size: getPageSize(), searchText: searchText, ignoreCache:ignoreCache};
 
 	$.ajax({
         url      : "./api/state",
         data     : params,
         method   : "GET",
         dataType : "json",
-        success  : function( datas ){
+        success  : function( result ){
             
+            console.log(result);
+            mTotalCount = result.count;
            	var html = '<div class="blankItem">표시할 데이터가 없습니다.</div>';
-						if (datas.length > 0) {
+						if (result.items.length > 0) {
 							html = "";
-							datas.forEach(function(d) {
+							result.items.forEach(function(d) {
+                console.log(d.wardNumber);
 								var danger = (d.isTemperatureWarning || d.isBloodPressureWarning || d.isOxygenSaturationeWarning) ? "danger" : "";
 								var temperatureStep = d.isTemperatureWarning ? "step_two" : "step_one";
 								var bloodPressureStep = d.isBloodPressureWarning ? "step_two" : "step_one";
@@ -162,19 +177,22 @@ function retrieveStateData(page) {
 						};
 
 						$(".patients-list").fadeOut('fast',function(){
-							$(".patients-list").html(html).fadeIn('fast');
+              $(".patients-list").html(html).fadeIn('fast');
+              if (needInitPagination) {
+                initPagination(page, getTotalPage())
+              }
 						});
         },
         error : ajaxErrorHandler
     }).done( function(){
-
+      
     });
 }
 
 function nextPage() {
 
-	if (totalPage === 1) {
-		retrieveStateData(1);
+	if (getTotalPage() === 1) {
+		retrieveStateData(1, false);
 		return;
 	}
 	
@@ -212,9 +230,52 @@ function responsiblePagination() {
 	}
 }
 
+function initPagination(initPage, totalPage) {
+  ////////////////////////////////////////////////////////////////////////////////
+  //// Pagination
+  ////////////////////////////////////////////////////////////////////////////////
+
+  // 페이지 네이션 실행
+  // Pagination  API -> http://botmonster.com/jquery-bootpag/#.XD2VElwzaUk
+  $('#pagination').bootpag({
+    // maxVisible: 3, // 한번에 보여지는 페이지수
+    // 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: initPage, // 초기 페이지
+    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'
+  })
+  .off("page")
+  .on("page", function(event, num){
+    retrieveStateData(num, false);
+  });
+  responsiblePagination();
+}
+
 $(document).ready(function() {
 
-	$("#reloadIntervalSelect").val(getReloadIntervalTime());
+  $("#viewEntry").val(getPageSize());
+  $(document).on("change", "#viewEntry", function() {
+		var viewEntry = $(this).find("option:selected").val();
+    setPageSize(viewEntry);
+    retrieveStateData(1, true);
+  });
+
+  retrieveStateData(mCurrentPage, true);
+
+  $("#reloadIntervalSelect").val(getReloadIntervalTime());
 
 	// if (getPlayOnOff() === "on") {
 	// 	if (activeReloadTimer()) {	
@@ -242,56 +303,26 @@ $(document).ready(function() {
 	});
 
 	// 반복 start/stop 클릭
-	$(document).on('click','.playPause',function () {
-       var thisID = $(this).attr('id');
-       if(thisID == 'playButton'){
-    	  if (activeReloadTimer()) {	
-          	$(this).attr('id','pauseButton');
-          	$(this).find('i').removeClass('fa-play').addClass('fa-pause');
-          	$('#reloadIntervalSelect').prop('disabled',true);
-
-						// setPlayOnOff("on");
-    	  }
-       }
-       else if(thisID == 'pauseButton'){
-    	   deactiveReloadTimer();
-          $(this).attr('id','playButton');
-          $(this).find('i').removeClass('fa-pause').addClass('fa-play');
-          $('#reloadIntervalSelect').prop('disabled',false);
-
-					// setPlayOnOff("off");
-       }
-    });
-
-	////////////////////////////////////////////////////////////////////////////////
-	//// 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: ${page}, // 초기 페이지
-		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();
+	$(document).on('click','.playPause', function () {
+    var thisID = $(this).attr('id');
+    if(thisID == 'playButton'){
+      if (activeReloadTimer()) {	
+        $(this).attr('id','pauseButton');
+        $(this).find('i').removeClass('fa-play').addClass('fa-pause');
+        $('#reloadIntervalSelect').prop('disabled',true);
+
+        // setPlayOnOff("on");
+      }
+    }
+    else if(thisID == 'pauseButton'){
+      deactiveReloadTimer();
+      $(this).attr('id','playButton');
+      $(this).find('i').removeClass('fa-pause').addClass('fa-play');
+      $('#reloadIntervalSelect').prop('disabled',false);
+
+      // setPlayOnOff("off");
+    }
+  });
 
 	// 윈도우 폭 변경에 따른 반응형 목록 수 적용
 	$(window).resize(function(){
@@ -302,12 +333,15 @@ $(document).ready(function() {
 </head>
 
 <body>
+	<div class="preloader">
+		<div class="loadingIcon"></div>
+	</div>
 <div class="modal fade" id="legendGuide" tabindex="-1" role="dialog" aria-hidden="true">
 		<div class="modal-dialog modal-sm" role="document">
 			<div class="modal-content">
 				<div class="modal-header">
 					<h5 class="modal-title">알람 표시 기준 안내</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 				</div>
 				<div class="modal-body m-1">
 					<h4>생체측정 알람 표시 기준</h4>
@@ -338,7 +372,7 @@ $(document).ready(function() {
 						</li>
 						<li class="row sugar">
 							<div class="col-lg-4">저혈당</div>
-							<div class="col-lg-8">70 이하 </div>
+							<div class="col-lg-8">70 이하</div>
 						</li>
 					</ul>
 				</div>
@@ -361,7 +395,7 @@ $(document).ready(function() {
 						<div class="col-12 col-lg-6">
 							<h1 class="h3 mb-3">진료관리</h1>
 						</div>
-						<div class="col-12 col-lg-6  text-right">
+						<div class="col-12 col-lg-6 text-right">
 							<nav aria-label="breadcrumb">
 								<ol class="breadcrumb">
 									<li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
@@ -375,29 +409,47 @@ $(document).ready(function() {
 							<div class="card">
 								<div class="card-header">
 									<div class="row">
-										<div class="col-lg-6">
-											<h1 class="h4">- 상태현황<span class="small showLegend ml-2" data-toggle="modal" data-target="#legendGuide"><i class="mdi mdi-comment-question-outline"></i> 알람 표시 기준</span></h1>
+										<div class="col-lg-12 mb-3">
+											<h1 class="h4">
+                        대시보드
+                        <span class="small showLegend ml-2" data-toggle="modal" data-target="#legendGuide"><i class="mdi mdi-comment-question-outline"></i> 알람 표시 기준</span>
+                      </h1>
 										</div>
+                    <div class="col-lg-6 entrySelect">
+                        <label>
+                          <select id="viewEntry" class="custom-select">
+                            <option value="18">18명</option>
+                            <option value="30" selected>30명</option>
+                            <option value="60">60명</option>
+                            <option value="120">120명</option>
+                            <option value="10000">전체</option>
+                          </select>
+                        </label>
+                        보기
+                      </div>
 										<div class="col-lg-6 search text-right">
-											<label> <select id="reloadIntervalSelect" class="custom-select" onchange="changeReloadInterval()">
+											<label>
+                        <select id="reloadIntervalSelect" class="custom-select" onchange="changeReloadInterval()">
 													<option value="10">10초</option>
 													<option value="30" selected>30초</option>
 													<option value="60">60초</option>
 											</select>
-											</label> <label>
+											</label>
+                      <label>
 												<button type="button" id="playButton" class="playPause btn btn-primary">
-                                          			<i class="fas fa-play"></i>
-                                    			</button>
-											</label> <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" value="${searchText}" onkeyup="if(event.keyCode===13){searchPatients()}">
+                          <i class="fas fa-play"></i>
+                        </button>
+											</label>
+                      <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" value="${searchText}" onkeyup="if(event.keyCode===13){searchPatients()}">
 											<button id="searchKeywordBtn" class="btn btn-primary" onclick="searchPatients()">검색</button>
 										</div>
 									</div>
 								</div>
 								<div class="card-body">
-									<div class="row patients-list">
+									<ul class="row patients-list">
 										<c:choose>
 										<c:when test="${total == 0}">
-										<div class="blankItem">표시할 데이터가 없습니다.</div>
+										<li class="blankItem">표시할 데이터가 없습니다.</div>
 										</c:when>
 										<c:otherwise>
 										<c:forEach var="patient" items="${items}" varStatus="status">
@@ -409,7 +461,7 @@ $(document).ready(function() {
 											<c:set var="temperatureCheck" value="${patient.needTemperatureCheck ? 'timeover' : ''}" />
 											<c:set var="bloodPressureCheck" value="${patient.needBloodPressCheck ? 'timeover' : ''}" />
 											<c:set var="oxygenSaturationCheck" value="${patient.needOxygenSaturationCheck ? 'timeover' : ''}" />
-											<div class="col-lg-2 col-md-6 mb-4">
+											<li class="col-lg-2 col-md-4 mb-4">
 												<div class="patients-stats" data-url="${viewLink}">
 													<div class="name">
 														<c:out value="${title}" />
@@ -432,11 +484,11 @@ $(document).ready(function() {
 														</ul>
 													</div>
 												</div>
-											</div>
+											</li>
 										</c:forEach>
 										</c:otherwise>
 										</c:choose>
-									</div>
+									</ul>
 								</div>
 								<div class="card-footer">
 									<div id="pagination" class="paginationContainer"></div>