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>

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");
	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){
  //로그인 페이지 redirect 처리
  var contentType = request.getResponseHeader("Content-Type");
  if (request.status === 200 && contentType.toLowerCase().indexOf("text/html") >= 0) {
      // assume that our login has expired - reload our current page
      window.location.reload();
  }
	else 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 (mReloadTimer) {
		deactiveReloadTimer();
	}
	
	mReloadTimer = setInterval(function() {
			nextPage();
	}, getReloadIntervalTime() * 1000);

	return true;
}

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

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

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

function retrieveStateData(page, needInitPagination) {

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

	$.ajax({
        url      : "./api/state",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( result ){
            
            mTotalCount = result.count;
           	var html = '<div class="blankItem">표시할 데이터가 없습니다.</div>';
						if (result.items.length > 0) {
							html = "";
							result.items.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');
              if (needInitPagination) {
                initPagination(page, getTotalPage())
              }
						});
        },
        error : ajaxErrorHandler
    }).done( function(){
      
    });
}

function nextPage() {

	if (getTotalPage() === 1) {
		retrieveStateData(1, false);
		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
		});
	}
}

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() {

  setTimeout(function () {
    $(".preloader").fadeOut("fast");
  }, 1000);

  $("#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()) {	
	// 		$(".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");
    }
  });

	// 윈도우 폭 변경에 따른 반응형 목록 수 적용
	$(window).resize(function(){
		responsiblePagination();
	});
});
</script>
</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>
				</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-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()">
													<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">
									<ul class="row patients-list">
										<c:choose>
										<c:when test="${total == 0}">
										<li 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' : ''}" />
											<li class="col-lg-2 col-md-4 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>
											</li>
										</c:forEach>
										</c:otherwise>
										</c:choose>
									</ul>
								</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>