idcjp/trafficmonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

trafficmonitor init...1

Browse Source
This commit is contained in:
choi.jh 2025-11-13 16:39:25 +09:00
parent fedcc0158b
commit e476b87fd9
1 changed files with 14 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/Views/admin/traffic/dashboard.php
View File

@ -44,39 +44,20 @@
<body class="p-4 p-md-5">
<div id="app" class="container-fluid" style="max-width: 1200px;">
<header class="text-center mb-5">
<h1 class="display-5 fw-bold text-dark mb-2"><?= $title ?? '트래픽 데이터 시각화 대시보드' ?></h1>
</header>
<!-- Configuration Card -->
<div class="card shadow-lg mb-5 dashboard-card">
<div class="card-body p-4 p-md-5">
<h2 class="h5 card-title text-dark mb-4"><?= $viewDatas['entity']->getCustomTitle() ?>데이터 조회 설정</h2>
<div class="row g-3 align-items-end">
<!-- 1. Start Date Picker -->
<div class="col-12 col-md-3">
<label for="startDate" class="form-label text-muted">시작 날짜</label>
<input type="date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>">
</div>
<!-- 2. End Date Picker -->
<div class="col-12 col-md-3">
<label for="endDate" class="form-label text-muted">종료 날짜</label>
<input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>">
</div>
</div>
<button onclick="fetchDataAndDrawChart()" id="viewChartBtn" class="mt-4 btn btn-primary btn-lg w-100 w-md-auto shadow-sm">
차트 보기
</button>
</div>
</div>
<!-- Chart Card -->
<div class="card shadow-lg dashboard-card">
<div class="card-body p-4 p-md-5">
<!-- 동적으로 업데이트될 메인 제목 영역 -->
<h2 id="chartTitle" class="h5 card-title text-dark mb-1">트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
<h2 id="chartTitle" class="h5 card-title text-dark mb-1"><?= $viewDatas['entity']->getCustomTitle() ?>트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
<!-- 동적으로 업데이트될 날짜 정보 영역 (시작일, 종료일) -->
<p id="dateRangeInfo" class="text-secondary mb-4"></p>
<div class="row g-3 text-end">
<div class="col-6">
기간: <input type=" date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"> ~ <input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>">까지
</div>
<div class="col-6">
<button onclick=" fetchDataAndDrawChart()" id="viewChartBtn" class="mt-4 btn btn-primary btn-lg w-100 w-md-auto shadow-sm">차트 보기</button>
</div>
</div>
<!-- 로딩 인디케이터 -->
<div id="loadingIndicator" class="text-center p-5 hidden" style="display: none;">
<div class="spinner-border text-primary" role="status">
@ -84,12 +65,10 @@
</div>
<p class="mt-3 text-primary fw-bold">데이터를 불러오는 중입니다... 잠시만 기다려 주세요.</p>
</div>
<!-- 오류 메시지 영역 -->
<div id="errorMessage" class="alert alert-danger text-center hidden" role="alert" style="display: none;">
데이터를 불러오는데 실패했습니다. (서버 오류)
</div>
<!-- 데이터 없음 메시지 영역 -->
<div id="noDataMessage" class="alert alert-warning text-center hidden" role="alert" style="display: none;">
선택하신 기간에는 조회된 트래픽 데이터가 없습니다. 기간을 다시 설정해주세요.
@ -127,9 +106,9 @@
const endpoint = `${baseEndpoint}?${params.toString()}`;
// ** 디버깅: 요청 정보 로깅 **
console.log("--- API 요청 시작 (Debugging) ---");
console.log(`요청 기간: ${startDate} ~ ${endDate}`);
console.log(`요청 URL: ${endpoint}`);
// console.log("--- API 요청 시작 (Debugging) ---");
// console.log(`요청 기간: ${startDate} ~ ${endDate}`);
// console.log(`요청 URL: ${endpoint}`);
const maxRetries = 3;
let delay = 1000;
@ -147,8 +126,8 @@
const result = await response.json();
// ** 디버깅: 서버 응답 로깅 **
console.log("서버 응답 JSON (Raw Result):", result);
console.log("--- API 요청 종료 (Debugging) ---");
// console.log("서버 응답 JSON (Raw Result):", result);
// console.log("--- API 요청 종료 (Debugging) ---");
if (result.status === 'error') {
@ -183,7 +162,6 @@
const endDate = document.getElementById('endDate').value;
const chartTitleElement = document.getElementById('chartTitle');
const dateRangeInfoElement = document.getElementById('dateRangeInfo');
const loadingIndicator = document.getElementById('loadingIndicator');
const errorMessage = document.getElementById('errorMessage');
const noDataMessage = document.getElementById('noDataMessage');
@ -199,8 +177,6 @@
// 제목 및 기간 정보 업데이트
chartTitleElement.textContent = `트래픽 속도 추이 (IN/OUT Kbit/s)`;
dateRangeInfoElement.textContent = `기간: ${startDate} 부터 ${endDate} 까지`;
try {
const aggregatedData = await fetchAggregatedData(startDate, endDate);