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

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<link rel="stylesheet" href="/resources/bower_components/mdi/css/materialdesignicons.min.css">
<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;

function getReloadIntervalTime() {
	// console.log("getReloadIntervalTime");
	return localStorage.getItem('reloadIntervalTime') || "30";
}

function setReloadIntervalTime(value) {
	// console.log("setReloadIntervalTime" + value);
	localStorage.setItem('reloadIntervalTime', value);
}

// function getPlayOnOff() {
// 	console.log("getPlayOnOff");
// 	console.log(localStorage.getItem('isPlaying'));
// 	return localStorage.getItem('isPlaying') || "off";
// }

// function setPlayOnOff(value) {
// 	console.log("setPlayOnOff" + value);
// 	localStorage.setItem('isPlaying', value);
// }

function ajaxErrorHandler(request, status, error){
	if (request.status === 0) {
        alert('Not connect.\n Verify Network.');
    } 
    else if (request.status == 400) {
        alert('Server understood the request, but request content was invalid. [400]' + '\n\n' + request.responseText);
    } 
    else if (request.status == 401) {
        alert('Unauthorized access. [401]' + '\n\n' + request.responseText);
    } 
    else if (request.status == 403) {
        alert('Forbidden resource can not be accessed. [403]' + '\n\n' + request.responseText);
    } 
    else if (request.status == 404) {
        alert('Requested page not found. [404]' + '\n\n' + request.responseText);
    } 
    else if (request.status == 500) {
        alert('Internal server error. [500]' + '\n\n' + request.responseText);
    } 
    else if (request.status == 503) {
        alert('Service unavailable. [503]' + '\n\n' + request.responseText);
    } 
    else if (status === 'parsererror') {
        alert('Requested JSON parse failed. [Failed]' + '\n\n' + request.responseText);
    } 
    else if (status === 'timeout') {
        alert('Time out error. [Timeout]' + '\n\n' + request.responseText);
    } 
    else if (status === 'abort') {
        alert('Ajax request aborted. [Aborted]' + '\n\n' + request.responseText);
    } 
    else {
        alert('Uncaught Error.' + '\n\n' + request.responseText);
    }
}

function changeReloadInterval() {
	var value = $("#reloadIntervalSelect option:selected").val();

	setReloadIntervalTime(value);
}

function activeReloadTimer() {	
	if (reloadTimer) {
		deactiveReloadTimer();
	}
	
	reloadTimer = setInterval(function() {
			nextPage();
	}, getReloadIntervalTime() * 1000);

	return true;
}

function deactiveReloadTimer() {	
	if (reloadTimer) {
		clearInterval(reloadTimer);
		reloadTimer = null;
	}
}

function searchPatients() {
	var keyword = $("#searchKeyword").val();

	location.href = "./state?searchText="+encodeURIComponent(keyword);
}

function retrieveStateData(page) {

	var searchText = '<c:out value="${searchText}" />';
	var ignoreCache = moment().unix();
	var params = {page: page, searchText: searchText, ignoreCache:ignoreCache};

	$.ajax({
        url      : "./api/state",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( datas ){
            
           	var html = '<div class="blankItem">표시할 데이터가 없습니다.</div>';
						if (datas.length > 0) {
							html = "";
							datas.forEach(function(d) {
								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";
								var oxygenSaturationStep = d.isOxygenSaturationeWarning ? "step_two" : "step_one";
								var temperatureCheck = d.needTemperatureCheck ? "timeover" : "";
								var bloodPressureCheck = d.needBloodPressCheck ? "timeover" : "";
								var oxygenSaturationCheck = d.needOxygenSaturationCheck ? "timeover" : "";
								
								var temperature = d.temperature ? parseFloat(d.temperature).toFixed(1) : "--";
								temperature += ' ℃ ';
								var bloodPressure = (d.bloodPressureDisplay) + " ";
								var oxygenSaturation = (d.oxygenSaturation || "--") + " % ";
								html += '<div class="col-lg-2 col-md-6 mb-4">';
								html += '	<div class="patients-stats" data-url="./info?patientIdx='+d.patientIdx+'">';
								html += '		<div class="name">';
								html += '			'+(d.wardNumber !== "" ? d.wardNumber+'/' : '')+d.roomNumber+'('+d.patientName+')';
								html += '			<div class="check">';
								html += '				<ul>';
								if (d.memoCount > 0) {
								html += '					<li><a href="javscript:;" class="memo"><i class="align-middle ml-2 fas fa-fw fa-edit"></i></a></li>';
								}
								if (d.hasTodaySymptom) {
								html += '					<li><a href="javscript:;" class="symptom"><i class="align-middle ml-2 fas fa-fw fa-user-plus"></i></a></li>';
								}
								html += '				</ul>';
								html += '			</div>';
								html += '		</div>';
								html += '      <div class="stats '+danger+'">';
								html += '			<ul>';
								html += '				<li class="fever '+temperatureStep+' '+temperatureCheck+'">'+temperature+'</li>';
								html += '				<li class="bloodPressure '+bloodPressureStep+' '+bloodPressureCheck+'">'+bloodPressure+'</li>';
								html += '				<li class="oxygen '+oxygenSaturationStep+' '+oxygenSaturationCheck+'">'+oxygenSaturation+'</li>';
								html += '			</ul>';
								html += '		</div>';
								html += '	</div>';
								html += '</div>';
							});
						};

						$(".patients-list").fadeOut('fast',function(){
							$(".patients-list").html(html).fadeIn('fast');
						});
        },
        error : ajaxErrorHandler
    }).done( function(){

    });
}

function nextPage() {

	if (totalPage === 1) {
		retrieveStateData(1);
		return;
	}
	
	var next = $("#pagination .active").next();

	if (!next.is(':visible') || next.hasClass("disabled")) {
		$("#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() {

	$("#reloadIntervalSelect").val(getReloadIntervalTime());

	// if (getPlayOnOff() === "on") {
	// 	if (activeReloadTimer()) {	
	// 		$(".playPause").attr('id','pauseButton');
	// 		$(".playPause").find('i').removeClass('fa-play').addClass('fa-pause');
	// 		$('#reloadIntervalSelect').prop('disabled',true);
	// 	}
	// }
	// else {
	// 	deactiveReloadTimer();
	// 	$(".playPause").attr('id','playButton');
	// 	$(".playPause").find('i').removeClass('fa-pause').addClass('fa-play');
	// 	$('#reloadIntervalSelect').prop('disabled',false);
	// }

	$(document).on("click", ".patients-stats", function() {
		var searchText = '<c:out value="${searchText}" />';
		var currentPage = $("#pagination .active").children("a").text();
		var url = $(this).attr("data-url");
		if (searchText !== "") {
			url += "&refererSearch="+encodeURIComponent(searchText);
		}
		url += "&refererPage="+currentPage;
		location.href = url;
	});

	// 반복 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();

	// 윈도우 폭 변경에 따른 반응형 목록 수 적용
	$(window).resize(function(){
		responsiblePagination();
	});
});
</script>
</head>

<body>
<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>
				</div>
				<div class="modal-body m-1">
					<h4>생체측정 알람 표시 기준</h4>
					<ul class="legend">
						<li class="row fever">
							<div class="col-lg-4">체온</div>
							<div class="col-lg-8">37.5 이상</div>
						</li>
						<li class="row bloodPressure">
							<div class="col-lg-4">고혈압</div>
							<div class="col-lg-8">수축기 149 이상<br>이완기 99 이상</div>
						</li>
						<li class="row bloodPressure">
							<div class="col-lg-4">저혈압</div>
							<div class="col-lg-8">수축기 90 이하<br>이완기 60 이하</div>
						</li>
						<li class="row oxygen">
							<div class="col-lg-4">산소포화도</div>
							<div class="col-lg-8">94% 이하</div>
						</li>
						<li class="row pulse">
							<div class="col-lg-4">맥박</div>
							<div class="col-lg-8">최저 55 이하<br>최고 110 이상</div>
						</li>
						<li class="row sugar">
							<div class="col-lg-4">고혈당</div>
							<div class="col-lg-8">200 이상</div>
						</li>
						<li class="row sugar">
							<div class="col-lg-4">저혈당</div>
							<div class="col-lg-8">70 이하 </div>
						</li>
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">닫기</button>
				</div>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<jsp:include page="${data._INCLUDE}/sidebar.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">- 상태현황<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 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="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()}">
											<button id="searchKeywordBtn" class="btn btn-primary" onclick="searchPatients()">검색</button>
										</div>
									</div>
								</div>
								<div class="card-body">
									<div class="row patients-list">
										<c:choose>
										<c:when test="${total == 0}">
										<div class="blankItem">표시할 데이터가 없습니다.</div>
										</c:when>
										<c:otherwise>
										<c:forEach var="patient" items="${items}" varStatus="status">
											<c:set var="title" value="${patient.wardNumber != '' ? patient.wardNumber : ''}${patient.wardNumber != '' ? '/' : ''}${patient.roomNumber}(${patient.patientName})" />
											<c:set var="viewLink" value="./info?patientIdx=${patient.patientIdx}" />
											<c:set var="temperatureStep" value="${patient.isTemperatureWarning ? 'step_two' : 'step_one'}" />
											<c:set var="bloodPressureStep" value="${patient.isBloodPressureWarning ? 'step_two' : 'step_one'}" />
											<c:set var="oxygenSaturationStep" value="${patient.isOxygenSaturationeWarning ? 'step_two' : 'step_one'}" />
											<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">
												<div class="patients-stats" data-url="${viewLink}">
													<div class="name">
														<c:out value="${title}" />
														<div class="check">
															<ul>
																<c:if test="${patient.memoCount > 0}">
																<li><a href="javscript:;" class="memo"><i class="align-middle ml-2 fas fa-fw fa-edit"></i></a></li>
																</c:if>
																<c:if test="${patient.hasTodaySymptom}">
																<li><a href="javscript:;" class="symptom"> <i class="align-middle ml-2 fas fa-fw fa-user-plus"></i></a></li>
																</c:if>
															</ul>
														</div>
													</div>
													<div class="stats ${patient.isTemperatureWarning || patient.isBloodPressureWarning || patient.isOxygenSaturationeWarning ? 'danger' : '' }">
														<ul>
															<li class="fever ${temperatureStep} ${temperatureCheck}"><c:out value="${patient.temperature != null ? patient.temperature : '--'} ℃ " /></li>
															<li class="bloodPressure ${bloodPressureStep} ${bloodPressureCheck}"><c:out value='${patient.bloodPressureDisplay} ' /></li>
															<li class="oxygen ${oxygenSaturationStep} ${oxygenSaturationCheck}"><c:out value="${patient.oxygenSaturation != null ? patient.oxygenSaturation : '--'} %" />
														</ul>
													</div>
												</div>
											</div>
										</c:forEach>
										</c:otherwise>
										</c:choose>
									</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>
</body>
</html>