[phr] 진료관리 현황판 검색 기능 추가. 롤링 기능 추가.

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

@@ -61,6 +61,7 @@ public class ClinicController extends LifeCenterController {
 
         ModelAndView mv = setMV("clinic/state");
         
+        mv.addObject("searchText", searchText);
         mv.addObject("total", total);
         mv.addObject("items", result);
         

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

@@ -1,21 +1,63 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
-<%@ page language="java" contentType="text/html; charset=UTF-8"
-    pageEncoding="UTF-8"%>
+<%@ 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>
+
+var totalList = ${total}; // 저장된 데이터 항목 수
+var viewEntry = 30;		// 한 화면에 표시되는 갯수 
+var totalPage = totalList / viewEntry;
+var reloadIntervalTime = 30;	// 
+var reloadTimer = null;
+
+function changeReloadInterval() {
+	reloadIntervalTime = $("#reloadIntervalSelect option:selected").val();
+	alert(reloadIntervalTime + "초마다 반복 조회 합니다.");
+}
+
+function activeReloadTimer() {	
+	if (reloadIntervalTime) {
+		if (reloadTimer) {
+			alert("이미 반복 조회가 활성화되어 있어 반복 조회를 비활성화 합니다.");
+			deactiveReloadTimer();
+		}
+		
+		reloadTimer = setInterval(function() {
+			nextPage();
+		}, reloadIntervalTime * 1000);
+		alert("반복 조회가 활성화 되었습니다.");
+
+		return true;
+	}
+	else {
+		alert("반복 조회 주기를 설정해 주세요.");
+
+		return false;
+	}
+}
+
+function deactiveReloadTimer() {	
+	if (reloadTimer) {
+		clearInterval(reloadTimer);
+		reloadTimer = null;
+		alert("반복 조회가 비활성화 되었습니다.");
+	}
+	else {
+		alert("활성화된 반복 조회가 없습니다.");
+	}
+}
+
 function searchPatients() {
-	const keyword = $("#searchKeyword").val();
+	var keyword = $("#searchKeyword").val();
 
 	location.href = "./state?searchText="+keyword;
 }
 
 function retrieveStateData(page) {
 
-	const searchText = $("#searchKeyword").val();
-	
+	var searchText = '<c:out value="${searchText}" />';
 	var params = {page: page, searchText: searchText};
 
 	$.ajax({
@@ -51,8 +93,8 @@ function retrieveStateData(page) {
 					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 += '				<li class="bloodPressure '+systolicBloodPressure_step_one+'">'+bloodPressure+'</li>';
+					html += '				<li class="oxygen '+oxygenSaturation_step_one+'">'+oxygenSaturation+'</li>';
 					html += '			</ul>';
 					html += '		</div>';
 					html += '	</div>';
@@ -72,224 +114,193 @@ function retrieveStateData(page) {
     });
 }
 
+function nextPage() {
+
+	if (totalPage === 1) {
+		retrieveStateData(1);
+		return;
+	}
+	
+	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
+		});
+	}
+}
+
 $(document).ready(function() {
 
 	// 반복 start/stop 클릭
 	$('#playButton').click(function () {
-		$('#playButton').addClass('disabled');
-		$('#pauseButton').removeClass('disabled');
-		nextPage();
+		if (activeReloadTimer()) {	
+			$('#playButton').addClass('disabled');
+			$('#pauseButton').removeClass('disabled');
+		}
 	});
 	$('#pauseButton').click(function () {
+		deactiveReloadTimer();
 		$('#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();
+	// 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();
 
 	// 윈도우 폭 변경에 따른 반응형 목록 수 적용
 	$(window).resize(function(){
 		responsiblePagination();
 	});
-
-	
 });
 </script>
 </head>
 
 <body>
-    <div class="wrapper">
-        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
+	<div class="wrapper">
+		<jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
 
-        <div class="main">
-            <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>
+		<div class="main">
+			<jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>
 
-            <main class="content">
-                <div class="container-fluid p-0">
-                    <!-- 환자관리 : 신규환자 등록 START -->
-                    <div class="row">
-                        <div class="col-12 col-lg-6">
-                            <h1 class="h3 mb-3">
-                                진료관리
-                            </h1>
-                        </div>
-                        <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>
-                                    <li class="breadcrumb-item active">진료관리</li>
-                                </ol>
-                            </nav>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <div class="card">
-                                <div class="card-header">
-                                    <div class="row">
-                                        <div class="col-lg-6">
-                                            <h1 class="h4">- 상태현황</h1>
-                                        </div>
-                                        <div class="col-lg-6 search text-right">
-                                            <label>
-                                                <select class="custom-select">
-																									<option selected>화면주기</option>
-																									<option>10초</option>
-                                                	<option>30초</option>
-                                                  <option>60초</option>
-                                                </select>
-                                            </label>
-                                            <label>
-                                                <button type="button" id="playButton" class="btn btn-primary">
-                                                    <i class="fas fa-play"></i>
-                                                </button>
-                                                <button type="button" id="pauseButton" class="btn btn-primary disabled">
-                                                    <i class="fas fa-pause"></i>
-                                                </button>
-                                            </label>
-                                            <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" onkeypress="searchPatients()">
-                                            <button class="btn btn-primary" onclick="searchPatients()">검색</button>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="card-body">
-																	<div class="row patients-list">
-																	<jsp:useBean id="now" class="java.util.Date" />
-																	<fmt:formatDate value="${now}" pattern="yyyyMMdd" var="nowDateString" />
-									    	  						<c:forEach var="patient" items="${items}" varStatus="status">
-									    	  						<c:set var="viewLink" value="./info?patientIdx=${patient.patientIdx}" />
-																		<div class="col-lg-2 col-md-6 mb-4">
-																			<div class="patients-stats">
-																				<div class="name">
-																					<a href="${viewLink}"><c:out value="${patient.roomNumber}(${patient.patientName})" /></a>
-																					<div class="check">
-																						<ul>
-																							<li>
-																								<a href="javscript:;" class="symptom">
-																									<i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
-																								</a>
-																							</li>
-																						</ul>
-																					</div>
-																				</div>
-																				<div class="stats ${patient.temperature > 37 ? 'danger' : '' }">
-																					<ul>
-																						<fmt:formatDate value="${patient.temperatureCreateDate}" pattern="yyyyMMdd" var="temperatureDateString" />
-																						<li class="fever ${temperatureDateString == nowDateString ? 'step_one' : ''}">
-																							<c:out value="${patient.temperature != null ? patient.temperature : '--'} ℃" />
-																						</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+' / '+patient.systolicBloodPressure  : '-- / --'}" />
-																						</li>
-																						<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>
-																		</div>
-											  					</c:forEach>
-																	</div>
-									    					</div>
-									    					<div class="card-footer">
-																	<div id="pagination" class="paginationContainer"></div>
-									    					</div>
-									  				</div>
-												</div>
+			<main class="content">
+				<div class="container-fluid p-0">
+					<!-- 환자관리 : 신규환자 등록 START -->
+					<div class="row">
+						<div class="col-12 col-lg-6">
+							<h1 class="h3 mb-3">진료관리</h1>
+						</div>
+						<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>
+									<li class="breadcrumb-item active">진료관리</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<div class="row">
+										<div class="col-lg-6">
+											<h1 class="h4">- 상태현황</h1>
+										</div>
+										<div class="col-lg-6 search text-right">
+											<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>
+												<button type="button" id="playButton" class="btn btn-primary">
+													<i class="fas fa-play"></i>
+												</button>
+												<button type="button" id="pauseButton" class="btn btn-primary disabled">
+													<i class="fas fa-pause"></i>
+												</button>
+											</label> <input type="text" class="form-control w150" id="searchKeyword" placeholder="호실 or 환자명" onkeypress="searchPatients()">
+											<button class="btn btn-primary" onclick="searchPatients()">검색</button>
 										</div>
-                    <!-- 환자관리 : 신규환자 등록 END -->
-                </div>
-            </main>
+									</div>
+								</div>
+								<div class="card-body">
+									<div class="row patients-list">
+										<jsp:useBean id="now" class="java.util.Date" />
+										<fmt:formatDate value="${now}" pattern="yyyyMMdd" var="nowDateString" />
+										<c:forEach var="patient" items="${items}" varStatus="status">
+											<c:set var="viewLink" value="./info?patientIdx=${patient.patientIdx}" />
+											<div class="col-lg-2 col-md-6 mb-4">
+												<div class="patients-stats">
+													<div class="name">
+														<a href="${viewLink}"><c:out value="${patient.roomNumber}(${patient.patientName})" /></a>
+														<div class="check">
+															<ul>
+																<li><a href="javscript:;" class="symptom"> <i class="align-middle mr-2 fas fa-fw fa-user-plus"></i>
+																</a></li>
+															</ul>
+														</div>
+													</div>
+													<div class="stats ${patient.temperature > 37 ? 'danger' : '' }">
+														<ul>
+															<fmt:formatDate value="${patient.temperatureCreateDate}" pattern="yyyyMMdd" var="temperatureDateString" />
+															<li class="fever ${temperatureDateString == nowDateString ? 'step_one' : ''}"><c:out value="${patient.temperature != null ? patient.temperature : '--'} ℃" /></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+' / '+patient.systolicBloodPressure  : '-- / --'}" /></li>
+															<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>
+											</div>
+										</c:forEach>
+									</div>
+								</div>
+								<div class="card-footer">
+									<div id="pagination" class="paginationContainer"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- 환자관리 : 신규환자 등록 END -->
+				</div>
+			</main>
 
-            <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
-        </div>
-    </div>
+			<jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
+		</div>
+	</div>
 </body>
 </html>