From 9307603e42646e159dec65a8d209a2387b298579 Mon Sep 17 00:00:00 2001
From: "choi.jh" <choi.jh@prime-idc.jp>
Date: Thu, 13 Nov 2025 14:30:12 +0900
Subject: [PATCH] trafficmonitor init...1

---
 app/Config/Routes.php                       |  2 +-
 app/Controllers/Admin/TrafficController.php |  6 +-
 app/Views/admin/traffic/dashboard.php       | 78 ++++++---------------
 3 files changed, 26 insertions(+), 60 deletions(-)

diff --git a/app/Config/Routes.php b/app/Config/Routes.php
index 7612846..3f87761 100644
--- a/app/Config/Routes.php
+++ b/app/Config/Routes.php
@@ -53,7 +53,7 @@ $routes->group('admin', ['namespace' => 'App\Controllers\Admin', 'filter' => 'au
     $routes->post('batchjob_delete', 'TrafficController::batchjob_delete');
     $routes->get('download/(:alpha)', 'TrafficController::download/$1');
     $routes->get('dashboard', 'TrafficController::dashboard');
-    $routes->post('data', 'TrafficController::getAggregatedData');
+    $routes->get('data', 'TrafficController::getAggregatedData');
   });
   $routes->group('collector', ['namespace' => 'App\Controllers\Admin'], function ($routes) {
     $routes->get('/', 'CollectorController::index');
diff --git a/app/Controllers/Admin/TrafficController.php b/app/Controllers/Admin/TrafficController.php
index b535be3..9384d67 100644
--- a/app/Controllers/Admin/TrafficController.php
+++ b/app/Controllers/Admin/TrafficController.php
@@ -84,13 +84,13 @@ class TrafficController extends AdminController
      */
     public function getAggregatedData(): ResponseInterface
     {
-        $uid = $this->request->getPost('uid');
+        $uid = $this->request->getVar('uid');
         $entity    = $this->service->getEntity($uid);
         if (!$entity instanceof TrafficEntity) {
             throw new \Exception(__METHOD__ . "에서 오류발생:{$uid}에 해당하는 트래픽정보를 찾을수없습니다.");
         }
-        $startDate = $this->request->getPost('startDate');
-        $endDate   = $this->request->getPost('endDate');
+        $startDate = $this->request->getVar('startDate');
+        $endDate   = $this->request->getVar('endDate');
         // 입력값 검증 (실제 프로덕션에서는 반드시 수행해야 함)
         if (empty($startDate) || empty($endDate)) {
             return $this->response->setStatusCode(400)->setJSON([
diff --git a/app/Views/admin/traffic/dashboard.php b/app/Views/admin/traffic/dashboard.php
index d00ef70..66e6c47 100644
--- a/app/Views/admin/traffic/dashboard.php
+++ b/app/Views/admin/traffic/dashboard.php
@@ -34,15 +34,6 @@
       box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
     }
 
-    .aggregation-button.active {
-      background-color: var(--bs-primary);
-      color: white;
-    }
-
-    .aggregation-button {
-      transition: background-color 0.2s, box-shadow 0.2s;
-    }
-
     .chart-container {
       position: relative;
       height: 400px;
@@ -56,7 +47,7 @@
   <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>
-      <p class="text-secondary">기간 및 집계 기준을 선택하여 트래픽 추이를 확인하세요.</p>
+      <p class="text-secondary">기간을 선택하여 트래픽 추이를 확인하세요.</p>
     </header>
 
     <!-- Configuration Card -->
@@ -75,17 +66,6 @@
             <label for="endDate" class="form-label text-muted">종료 날짜</label>
             <input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>">
           </div>
-
-          <!-- 3. Aggregation Selector -->
-          <div class="col-12 col-md-6">
-            <label class="form-label text-muted">집계 기준</label>
-            <div id="aggregationSelector" class="d-flex flex-wrap gap-2">
-              <button type="button" data-period="hourly" class="aggregation-button btn btn-outline-secondary btn-sm">시간당</button>
-              <button type="button" data-period="daily" class="aggregation-button btn btn-outline-secondary btn-sm active">일일</button>
-              <button type="button" data-period="weekly" class="aggregation-button btn btn-outline-secondary btn-sm">주간</button>
-              <button type="button" data-period="monthly" class="aggregation-button btn btn-outline-secondary btn-sm">월간</button>
-            </div>
-          </div>
         </div>
 
         <button onclick="fetchDataAndDrawChart()" id="viewChartBtn" class="mt-4 btn btn-primary btn-lg w-100 w-md-auto shadow-sm">
@@ -98,15 +78,15 @@
     <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">트래픽 속도 추이 (Kbit/s)</h2>
-        <!-- 동적으로 업데이트될 날짜 정보 영역 -->
+        <h2 id="chartTitle" class="h5 card-title text-dark mb-1">트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
+        <!-- 동적으로 업데이트될 날짜 정보 영역 (시작일, 종료일) -->
         <p id="dateRangeInfo" class="text-secondary mb-4"></p>
 
         <div id="loadingIndicator" class="text-center p-5 hidden" style="display: none;">
           <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
           </div>
-          <p class="mt-3 text-primary fw-bold">데이터를 집계 중입니다... 잠시만 기다려 주세요.</p>
+          <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;">
@@ -128,30 +108,24 @@
     let trafficChart = null;
 
     document.addEventListener('DOMContentLoaded', () => {
-      // 초기 집계 기준 설정 이벤트 리스너
-      document.querySelectorAll('.aggregation-button').forEach(btn => {
-        btn.addEventListener('click', function() {
-          document.querySelectorAll('.aggregation-button').forEach(b => b.classList.remove('active'));
-          this.classList.add('active');
-        });
-      });
-
-      // 초기 로드 시 차트 그리기
       fetchDataAndDrawChart();
     });
 
     // -----------------------------------------------------------
-    // 1. CI4 백엔드 엔드포인트를 호출하여 데이터 가져오기 (AJAX)
+    // 1. CI4 백엔드 엔드포인트를 호출하여 데이터 가져오기 (AJAX) - GET 방식으로 변경됨
     // -----------------------------------------------------------
 
-    async function fetchAggregatedData(startDate, endDate, period) {
-      // PHP 코드가 JavaScript 문자열 값으로 올바르게 평가되도록 수정
-      const endpoint = '<?= base_url("traffic/data") ?>'; // CI4 라우트로 지정된 엔드포인트
+    async function fetchAggregatedData(startDate, endDate) {
+      const baseEndpoint = '<?= base_url("traffic/data") ?>'; // CI4 라우트로 지정된 기본 엔드포인트
 
-      const formData = new FormData();
-      formData.append('startDate', startDate);
-      formData.append('endDate', endDate);
-      formData.append('period', period);
+      // GET 요청을 위해 쿼리 파라미터를 생성합니다.
+      const params = new URLSearchParams({
+        startDate: startDate,
+        endDate: endDate
+      });
+
+      // 최종 엔드포인트 URL: /traffic/data?startDate=...&endDate=...
+      const endpoint = `${baseEndpoint}?${params.toString()}`;
 
       const maxRetries = 3;
       let delay = 1000;
@@ -159,8 +133,8 @@
       for (let i = 0; i < maxRetries; i++) {
         try {
           const response = await fetch(endpoint, {
-            method: 'POST',
-            body: formData,
+            method: 'GET', // GET 방식으로 변경
+            // GET 요청이므로 body는 포함하지 않습니다.
           });
 
           const result = await response.json();
@@ -169,7 +143,7 @@
             throw new Error(result.message || `HTTP error! Status: ${response.status}`);
           }
 
-          return result.data; // 모델에서 반환된 데이터 배열
+          return result.data; // Model에서 반환된 데이터 배열
 
         } catch (error) {
           console.error(`Attempt ${i + 1} failed:`, error);
@@ -190,10 +164,9 @@
     async function fetchDataAndDrawChart() {
       const startDate = document.getElementById('startDate').value;
       const endDate = document.getElementById('endDate').value;
-      const period = document.querySelector('.aggregation-button.active').dataset.period;
 
       const chartTitleElement = document.getElementById('chartTitle');
-      const dateRangeInfoElement = document.getElementById('dateRangeInfo'); // 날짜 정보 표시 영역
+      const dateRangeInfoElement = document.getElementById('dateRangeInfo');
       const loadingIndicator = document.getElementById('loadingIndicator');
       const errorMessage = document.getElementById('errorMessage');
       const canvas = document.getElementById('trafficChart');
@@ -205,25 +178,18 @@
       canvas.style.opacity = '0';
       viewChartBtn.disabled = true;
 
-      // 차트 제목 및 날짜 정보 업데이트
-      const periodMapKo = {
-        hourly: '시간당',
-        daily: '일일',
-        weekly: '주간',
-        monthly: '월간'
-      };
-
       // 메인 제목: Kbit/s 정보만
       chartTitleElement.textContent = `트래픽 속도 추이 (IN/OUT Kbit/s)`;
 
       // 시작일, 마지막일 정보 표시
-      dateRangeInfoElement.textContent = `기간: ${startDate} 부터 ${endDate} 까지 (${periodMapKo[period]} 집계)`;
+      dateRangeInfoElement.textContent = `기간: ${startDate} 부터 ${endDate} 까지`;
 
       try {
         // CI4 백엔드(Controller -> Model)에서 데이터 가져오기
-        const aggregatedData = await fetchAggregatedData(startDate, endDate, period);
+        const aggregatedData = await fetchAggregatedData(startDate, endDate);
 
         // --- IN, OUT Kbit/s 데이터만 추출 ---
+        // Model은 'created_at', 'in_kbits', 'out_kbits'를 반환해야 합니다.
         const labels = aggregatedData.map(d => d.created_at);
         const inData = aggregatedData.map(d => d.in_kbits);
         const outData = aggregatedData.map(d => d.out_kbits);