youna
102 lines
3.3 KiB
Plaintext
102 lines
3.3 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
|
<header>
|
|
<div class="header-title">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<h1>eLink 모니터링 대시보드</h1>
|
|
<div class="global-loading-indicator" id="global-loading-indicator"></div>
|
|
</div>
|
|
<div class="header-controls">
|
|
<div class="time-display" id="current-time"></div>
|
|
<div class="refresh-controls">
|
|
<span class="refresh-status active"></span>
|
|
<span class="refresh-label">자동 새로고침:</span>
|
|
<div class="btn-group">
|
|
<button class="btn refresh-btn btn-sm" data-interval="2">2초</button>
|
|
<button class="btn refresh-btn btn-sm" data-interval="5">5초</button>
|
|
<button class="btn refresh-btn btn-sm active" data-interval="10">10초</button>
|
|
<button class="btn refresh-btn btn-sm" data-interval="0">사용안함</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-sm" id="refresh-btn">
|
|
<i class="bi bi-arrow-clockwise"></i> 수동 새로고침
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
// 새로고침 간격 버튼 클릭 이벤트
|
|
$('.refresh-btn').click(function() {
|
|
// 버튼 활성화 상태 변경
|
|
$('.refresh-btn').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
// 새로고침 간격 설정
|
|
refreshInterval = parseInt($(this).data('interval'));
|
|
|
|
// 로컬 스토리지에 저장
|
|
localStorage.setItem('dashboardRefreshInterval', refreshInterval);
|
|
|
|
// 타이머 재시작
|
|
startRefreshTimer();
|
|
|
|
// 새로고침 상태 표시 업데이트
|
|
updateRefreshStatus();
|
|
});
|
|
|
|
// 수동 새로고침 버튼 클릭 이벤트
|
|
$('#refresh-btn').click(function() {
|
|
refreshDashboardData();
|
|
});
|
|
|
|
// 전역 로딩 인디케이터 제어 함수
|
|
function showGlobalLoadingIndicator() {
|
|
$('#global-loading-indicator').addClass('active');
|
|
}
|
|
|
|
function hideGlobalLoadingIndicator() {
|
|
$('#global-loading-indicator').removeClass('active');
|
|
}
|
|
|
|
// 문서 로드 완료 시 이벤트 리스너 등록
|
|
$(document).ready(function() {
|
|
// DashboardEventManager 이벤트 구독
|
|
if (window.DashboardEventManager) {
|
|
// 데이터 로딩 시작 이벤트
|
|
window.DashboardEventManager.on('loading-start', function() {
|
|
showGlobalLoadingIndicator();
|
|
});
|
|
|
|
// 데이터 로딩 완료 이벤트
|
|
window.DashboardEventManager.on('loading-end', function() {
|
|
hideGlobalLoadingIndicator();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* 전역 로딩 인디케이터 스타일 */
|
|
.global-loading-indicator {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-left: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
border-top-color: var(--color-primary);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.global-loading-indicator.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style> |