eapim-admin/WebContent/dashboard-modern/js/modern-dashboard.js

/**
 * eLink 모니터링 대시보드 JavaScript 라이브러리
 * 모듈화된 대시보드 핵심 기능 제공
 */

// 대시보드 공통 변수
var refreshTimer = null;
var refreshInterval = 10; // 기본값 10초

// 서버 목록 데이터를 저장할 전역 변수
var serverData = [];

// 대시보드 이벤트 관리자
const DashboardEventManager = {
    // 이벤트 리스너 저장소
    listeners: {
        'refresh': [],
        'init': [],
        'update': [],
        'loading-start': [],
        'loading-end': []
    },

    // 이벤트 리스너 등록
    on: function(eventName, callback) {
        if (this.listeners[eventName]) {
            this.listeners[eventName].push(callback);
            console.log(`이벤트 리스너 등록: ${eventName}, 현재 ${this.listeners[eventName].length}개`);
        }
    },

    // 이벤트 발생
    trigger: function(eventName, data) {
        console.log(`이벤트 발생: ${eventName}`);
        if (this.listeners[eventName]) {
            this.listeners[eventName].forEach(callback => {
                try {
                    callback(data);
                } catch (e) {
                    console.error(`이벤트 처리 중 오류 발생: ${eventName}`, e);
                }
            });
        }
    }
};

// 전역 스코프에 노출
window.DashboardEventManager = DashboardEventManager;

// 대시보드 초기화
function initDashboard(contextPath) {
    console.log('대시보드 초기화 시작');

    // API 초기화
    ModernDashboardApi.init(contextPath);

    // 초기화 이벤트 발생
    DashboardEventManager.trigger('init');

    // 수동 새로고침 버튼 이벤트 핸들러
    $('#refresh-btn').on('click', function() {
        console.log('수동 새로고침 버튼 클릭');
        refreshDashboardData();
    });

    console.log('대시보드 초기화 완료');
}

// 현재 시간 업데이트
function updateCurrentTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    const dateString = now.toLocaleDateString();
    $('#current-time').text(`${dateString} ${timeString}`);
}

// 대시보드 데이터 새로고침
function refreshDashboardData() {
    console.log("대시보드 데이터 새로고침 시작: " + new Date().toLocaleTimeString());

    // 현재 시간 업데이트
    updateCurrentTime();

    // 로딩 시작 이벤트 발생
    DashboardEventManager.trigger('loading-start');

    // 새로고침 이벤트 발생
    DashboardEventManager.trigger('refresh');

    // 약간의 지연 후 로딩 완료 이벤트 발생 (모든 컴포넌트가 데이터를 로드할 시간 제공)
    setTimeout(function() {
        DashboardEventManager.trigger('loading-end');
    }, 2000);

    console.log("대시보드 데이터 새로고침 완료: " + new Date().toLocaleTimeString());
}

// 자동 새로고침 타이머 시작
function startRefreshTimer() {
    // 기존 타이머가 있으면 중지
    if (window.refreshTimer) {
        clearInterval(window.refreshTimer);
        window.refreshTimer = null;
    }

    // 새로고침 간격이 0이 아니면 타이머 시작
    if (window.refreshInterval > 0) {
        window.refreshTimer = setInterval(refreshDashboardData, window.refreshInterval * 1000);
        console.log(`자동 새로고침 타이머 시작: ${window.refreshInterval}초 간격`);
    }
}

// 새로고침 상태 표시 업데이트
function updateRefreshStatus() {
    var statusIndicator = $('.refresh-status');
    if (window.refreshInterval > 0) {
        statusIndicator.addClass('active');
        statusIndicator.removeClass('inactive');
    } else {
        statusIndicator.removeClass('active');
        statusIndicator.addClass('inactive');
    }
}

// 문서 로드 완료 시 초기화
$(document).ready(function() {
    // 새로고침 간격 버튼 클릭 이벤트
    $('.refresh-btn').click(function() {
        // 버튼 활성화 상태 변경
        $('.refresh-btn').removeClass('active');
        $(this).addClass('active');

        // 새로고침 간격 설정
        window.refreshInterval = parseInt($(this).data('interval'));

        // 로컬 스토리지에 저장
        localStorage.setItem('dashboardRefreshInterval', window.refreshInterval);

        // 타이머 재시작
        startRefreshTimer();

        // 새로고침 상태 표시 업데이트
        updateRefreshStatus();
    });
});