UI 조정

2026-09-01 10:07:32 +09:00
parent a1d2058bca
commit 5fd8334ea8
7 changed files with 200 additions and 42 deletions
@@ -26,6 +26,18 @@
 			border: 1px solid #ddd;
 			background: #fff;
 		}
+		.cssbtn.small {
+		    height: 24px;
+		    border-radius: 2px;
+		    min-width: 24px;
+		    box-shadow: none;
+		    border-color: #ebebec;
+		    font-size: 11px;
+		}
+		/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
+		#ui-datepicker-div {
+		    z-index: 9999 !important;
+		}
 	</style>
 	<jsp:include page="/jsp/common/include/script.jsp"/>
 	<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -203,7 +215,6 @@
 		function validateAndAdjustDateRange() {
 			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
 			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
-			var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
 			var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");

 			if (!startDate || !startTime) return null;
@@ -219,35 +230,43 @@
 				);
 			}

-			// UI 업데이트 헬퍼
-			function updateEndDateTime(dt) {
-				var d = dt.getFullYear() +
+			// 종료일시(yyyyMMddHHmm) 포맷 헬퍼
+			function formatDateTime(dt) {
+				return dt.getFullYear() +
 					String(dt.getMonth() + 1).padStart(2, '0') +
-					String(dt.getDate()).padStart(2, '0');
-				var t = String(dt.getHours()).padStart(2, '0') +
+					String(dt.getDate()).padStart(2, '0') +
+					String(dt.getHours()).padStart(2, '0') +
 					String(dt.getMinutes()).padStart(2, '0');
-				$("input[name=searchEndDate]").val(d.substring(0, 4) + '-' + d.substring(4, 6) + '-' + d.substring(6, 8));
-				$("input[name=searchEndTime]").val(t.substring(0, 2) + ':' + t.substring(2, 4));
-				return d + t;
+			}
+
+			// 종료시각 UI 업데이트 헬퍼
+			function updateEndTime(dt) {
+				$("input[name=searchEndTime]").val(
+					String(dt.getHours()).padStart(2, '0') + ':' + String(dt.getMinutes()).padStart(2, '0'));
+				return formatDateTime(dt);
 			}

 			var start = parseDateTime(startDate, startTime);
 			var startDateTime = startDate + startTime;
 			var endDateTime;

-			if (endDate && endTime) {
-				var end = parseDateTime(endDate, endTime);
+			if (endTime) {
+				// 종료일은 시작일 기준. 종료시각이 시작시각보다 이르면 자정을 넘긴 것으로 보고 +1일
+				var end = parseDateTime(startDate, endTime);
+				if (end < start) {
+					end = new Date(end.getTime() + 24 * 60 * 60 * 1000);
+				}
 				var diffMinutes = (end - start) / (1000 * 60);

 				if (diffMinutes > 60) {
 					// 1시간 초과 시 시작 + 1시간으로 조정
-					endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
+					endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
 				} else {
-					endDateTime = endDate + endTime;
+					endDateTime = formatDateTime(end);
 				}
 			} else {
 				// 종료시간 미입력 시 시작 + 1시간으로 설정
-				endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
+				endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
 			}

 			return { start: startDateTime, end: endDateTime };
@@ -302,6 +321,44 @@
 			fetchChartData(range);
 		}

+		// 조회기간을 정시 단위 1시간 구간으로 이동 (direction: -1 이전, 1 이후)
+		// ex) 시작 08:35, 이전 클릭 -> 08:00~09:00, 다시 -> 07:00~08:00
+		// ex) 시작 08:35, 이후 클릭 -> 09:00~10:00, 다시 -> 10:00~11:00
+		function shiftTimeRange(direction) {
+			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
+			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
+			if (!startDate || !startTime) return;
+
+			var start = new Date(
+				parseInt(startDate.substring(0, 4)),
+				parseInt(startDate.substring(4, 6)) - 1,
+				parseInt(startDate.substring(6, 8)),
+				parseInt(startTime.substring(0, 2)),
+				parseInt(startTime.substring(2, 4))
+			);
+
+			if (direction < 0) {
+				// 분 단위가 있으면 정시로 내림, 이미 정시면 1시간 전
+				if (start.getMinutes() === 0) start.setHours(start.getHours() - 1);
+				else start.setMinutes(0);
+			} else {
+				// 분 단위가 있으면 다음 정시로 올림, 이미 정시면 1시간 후
+				start.setMinutes(0);
+				start.setHours(start.getHours() + 1);
+			}
+
+			var end = new Date(start.getTime() + 60 * 60 * 1000);
+
+			function pad(n) { return String(n).padStart(2, '0'); }
+
+			$("input[name=searchStartDate]").val(
+				start.getFullYear() + '-' + pad(start.getMonth() + 1) + '-' + pad(start.getDate()));
+			$("input[name=searchStartTime]").val(pad(start.getHours()) + ':' + pad(start.getMinutes()));
+			$("input[name=searchEndTime]").val(pad(end.getHours()) + ':' + pad(end.getMinutes()));
+
+			search();
+		}
+
 		function exportToExcel(isSummary) {
 			var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
 			console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -317,13 +374,10 @@
 				serviceType: '${param.serviceType}'
 			};

-			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
-			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
-			var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
-			var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
-			if (startDate && startTime) {
-				postData.searchStartDateTime = startDate + startTime;
-				postData.searchEndDateTime = endDate + endTime;
+			var range = validateAndAdjustDateRange();
+			if (range) {
+				postData.searchStartDateTime = range.start;
+				postData.searchEndDateTime = range.end;
 			}

 			console.log('[Excel Export] Request data:', postData);
@@ -474,7 +528,7 @@
 				mtype: 'POST',
 				postData: gridPostData,
 				colNames: [
-					'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
+					'통계시간', 'API ID', '인스턴스', '업무구분', '클라이언트ID',
 					'Inbound Adapter', 'Outbound Adapter',
 					'총건수', '성공', 'Timeout', '시스템오류',
 					'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
@@ -518,9 +572,11 @@

 		$(document).ready(function() {
 			// 날짜/시간 입력 마스크
-			$("input[name=searchStartDate], input[name=searchEndDate]").inputmask("9999-99-99", { 'autoUnmask': true });
+			$("input[name=searchStartDate]").inputmask("9999-99-99", { 'autoUnmask': true });
 			$("input[name=searchStartTime], input[name=searchEndTime]").inputmask("99:99", { 'autoUnmask': true });

+			$("input[name=searchStartDate]").datepicker();
+
 			// 기본값 설정 (현재 시간(분) 기준 1시간 전 ~ 현재 시간(분))
 			var now = new Date();
 			var oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
@@ -538,8 +594,7 @@
 				$("input[name=searchStartDate]").val(formatDate(oneHourAgo));
 				$("input[name=searchStartTime]").val(formatTime(oneHourAgo));
 			}
-			if (!$("input[name=searchEndDate]").val()) {
-				$("input[name=searchEndDate]").val(formatDate(now));
+			if (!$("input[name=searchEndTime]").val()) {
 				$("input[name=searchEndTime]").val(formatTime(now));
 			}

@@ -555,6 +610,14 @@
 				search();
 			});

+			$("#btnPrevTime").click(function() {
+				shiftTimeRange(-1);
+			});
+
+			$("#btnNextTime").click(function() {
+				shiftTimeRange(1);
+			});
+
 			$("#btn_excel_export_summary").click(function() {
 				exportToExcel(true);
 			});
@@ -569,8 +632,8 @@
 				}
 			});

-			// 종료일/시간 변경 시 1시간 초과 검증
-			$("input[name=searchEndDate], input[name=searchEndTime]").on('change blur', function() {
+			// 종료시각 변경 시 1시간 초과 검증
+			$("input[name=searchEndTime]").on('change blur', function() {
 				validateAndAdjustDateRange();
 			});

@@ -603,11 +666,12 @@
 				<tr>
 					<th style="width:100px;">조회기간</th>
 					<td style="width:400px">
-						<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:100px;">
-						<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:60px;">
+						<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:80px;">
+						<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:40px;">
 						~
-						<input type="text" name="searchEndDate" value="${param.searchEndDate}" style="width:100px;">
-						<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:60px;">
+						<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:40px;">
+						<button type="button" id="btnPrevTime" class="cssbtn small">&lt;</button>
+						<button type="button" id="btnNextTime" class="cssbtn small">&gt;</button>
 						<span style="color:#888; font-size:12px; margin-left:10px;">(최대 1시간, 초과시 자동 조정)</span>
 					</td>
 					<th style="width:100px;">API ID</th>