dbmsv4 init...1
This commit is contained in:
parent
063757a672
commit
bc2a8e8d0e
@ -45,14 +45,20 @@ abstract class AuthController extends AbstractWebController
|
||||
final public function login(): RedirectResponse
|
||||
{
|
||||
try {
|
||||
echo "TEST";
|
||||
exit;
|
||||
$this->login_process();
|
||||
$redirect_url = $this->getAuthContext()->popPreviousUrl() ?? implode(DIRECTORY_SEPARATOR, $this->getActionPaths());
|
||||
return redirect()->to($redirect_url)->with('message', MESSAGES['LOGIN']);
|
||||
} catch (ValidationException $e) {
|
||||
echo $e->getMessage();
|
||||
exit;
|
||||
// 검증 실패 시 폼으로 돌아가서 오류 메시지 표시
|
||||
log_message('error', $e->getMessage());
|
||||
return redirect()->back()->withInput()->with('message', $e->getMessage());
|
||||
} catch (\Exception $e) {
|
||||
echo $e->getMessage();
|
||||
exit;
|
||||
log_message('error', $e->getMessage());
|
||||
return redirect()->back()->withInput()->with('message', $e->getMessage());
|
||||
// return redirect()->to($this->getMyAuth()->popPreviousUrl())->with('message', $e->getMessage());
|
||||
|
||||
@ -15,11 +15,4 @@ class GoogleDTO extends AuthDTO
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function toArray(): array
|
||||
{
|
||||
return [
|
||||
'access_code' => $this->access_code,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,12 +16,4 @@ class LocalDTO extends AuthDTO
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function toArray(): array
|
||||
{
|
||||
return [
|
||||
'id' => $this->id,
|
||||
'passwd' => $this->passwd,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,287 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= $title ?? '대시보드' ?></title>
|
||||
<!-- Bootstrap 5 CSS CDN 로드 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Chart.js CDN 로드 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
/* 커스텀 스타일 및 색상 변수 설정 */
|
||||
:root {
|
||||
--bs-primary: #0d6efd;
|
||||
/* 기본 Bootstrap Primary */
|
||||
--bs-success: #198754;
|
||||
/* IN 트래픽 색상 (Chart.js) */
|
||||
--bs-danger: #dc3545;
|
||||
/* OUT 트래픽 색상 (Chart.js) */
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
/* 차트 높이 고정 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" class="container-fluid">
|
||||
<!-- 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"><?= $viewDatas['entity']->getCustomTitle() ?>트래픽 속도 추이 (IN/OUT Kbit/s)</h2>
|
||||
<!-- 동적으로 업데이트될 날짜 정보 영역 (시작일, 종료일) -->
|
||||
<div class="row g-3">
|
||||
<div class="col-5"><input type="date" id="startDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
|
||||
<div class="col-5"><input type="date" id="endDate" class="form-control" value="<?= date('Y-m-d') ?>"></div>
|
||||
<div class="col-2"><button onclick="fetchDataAndDrawChart()" id="viewChartBtn" class="btn btn-primary">차트 보기</button></div>
|
||||
</div>
|
||||
|
||||
<!-- 로딩 인디케이터 -->
|
||||
<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>
|
||||
</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;">
|
||||
선택하신 기간에는 조회된 트래픽 데이터가 없습니다. 기간을 다시 설정해주세요.
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="trafficChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap 5 JS Bundle 로드 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 전역 변수 설정
|
||||
let trafficChart = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// DOM 로드 후 바로 차트를 불러옵니다.
|
||||
fetchDataAndDrawChart();
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// 1. CI4 백엔드 엔드포인트를 호출하여 데이터 가져오기 (AJAX)
|
||||
// -----------------------------------------------------------
|
||||
|
||||
async function fetchAggregatedData(startDate, endDate) {
|
||||
const baseEndpoint = '<?= base_url("/admin/traffic/data/{$viewDatas['entity']->getPK()}") ?>';
|
||||
|
||||
const params = new URLSearchParams({
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
});
|
||||
|
||||
const endpoint = `${baseEndpoint}?${params.toString()}`;
|
||||
|
||||
// ** 디버깅: 요청 정보 로깅 **
|
||||
// console.log("--- API 요청 시작 (Debugging) ---");
|
||||
// console.log(`요청 기간: ${startDate} ~ ${endDate}`);
|
||||
// console.log(`요청 URL: ${endpoint}`);
|
||||
|
||||
const maxRetries = 3;
|
||||
let delay = 1000;
|
||||
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
try {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// ** 디버깅: 서버 응답 로깅 **
|
||||
// console.log("서버 응답 JSON (Raw Result):", result);
|
||||
// console.log("--- API 요청 종료 (Debugging) ---");
|
||||
|
||||
|
||||
if (result.status === 'error') {
|
||||
throw new Error(result.message || "서버에서 오류 상태를 반환했습니다.");
|
||||
}
|
||||
|
||||
// 데이터가 비어있는 경우
|
||||
if (!result.data || result.data.length === 0) {
|
||||
return []; // 빈 배열 반환하여 데이터 없음 처리
|
||||
}
|
||||
|
||||
return result.data;
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Attempt ${i + 1} failed:`, error);
|
||||
if (i === maxRetries - 1) {
|
||||
throw new Error("서버에서 데이터를 가져오는데 실패했습니다. 콘솔을 확인하세요.");
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
delay *= 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------
|
||||
// 2. 차트 그리기 및 업데이트 로직
|
||||
// -----------------------------------------------------------
|
||||
|
||||
async function fetchDataAndDrawChart() {
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const endDate = document.getElementById('endDate').value;
|
||||
|
||||
const chartTitleElement = document.getElementById('chartTitle');
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const noDataMessage = document.getElementById('noDataMessage');
|
||||
const canvas = document.getElementById('trafficChart');
|
||||
const viewChartBtn = document.getElementById('viewChartBtn');
|
||||
|
||||
// UI 초기화 및 로딩 표시
|
||||
loadingIndicator.style.display = 'block';
|
||||
errorMessage.style.display = 'none';
|
||||
noDataMessage.style.display = 'none';
|
||||
canvas.style.opacity = '0';
|
||||
viewChartBtn.disabled = true;
|
||||
|
||||
// 제목 및 기간 정보 업데이트
|
||||
chartTitleElement.textContent = `트래픽 속도 추이 (IN/OUT Kbit/s)`;
|
||||
try {
|
||||
const aggregatedData = await fetchAggregatedData(startDate, endDate);
|
||||
|
||||
if (aggregatedData.length === 0) {
|
||||
// 데이터가 비어 있을 경우
|
||||
noDataMessage.style.display = 'block';
|
||||
if (trafficChart) {
|
||||
trafficChart.destroy(); // 기존 차트 파괴
|
||||
trafficChart = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 데이터 추출 및 Number 변환 (데이터가 유효함을 가정)
|
||||
const labels = aggregatedData.map(d => d.created_at);
|
||||
const inData = aggregatedData.map(d => Number(d.in_kbits));
|
||||
const outData = aggregatedData.map(d => Number(d.out_kbits));
|
||||
|
||||
drawChart(labels, inData, outData);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Chart data processing error:", error);
|
||||
errorMessage.textContent = `데이터 로딩 실패: ${error.message}`;
|
||||
errorMessage.style.display = 'block';
|
||||
|
||||
} finally {
|
||||
loadingIndicator.style.display = 'none';
|
||||
canvas.style.opacity = (trafficChart || noDataMessage.style.display === 'block') ? '1' : '0';
|
||||
viewChartBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function drawChart(labels, inData, outData) {
|
||||
const ctx = document.getElementById('trafficChart').getContext('2d');
|
||||
|
||||
// 기존 차트가 있으면 파괴
|
||||
if (trafficChart) {
|
||||
trafficChart.destroy();
|
||||
}
|
||||
|
||||
try {
|
||||
trafficChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'IN Kbit/s',
|
||||
data: inData,
|
||||
borderColor: '#198754', // Bootstrap Success Color (Green)
|
||||
backgroundColor: 'rgba(25, 135, 84, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
{
|
||||
label: 'OUT Kbit/s',
|
||||
data: outData,
|
||||
borderColor: '#dc3545', // Bootstrap Danger Color (Red)
|
||||
backgroundColor: 'rgba(220, 53, 69, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 6,
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Kbit/s', // Y축 레이블에 Kbit/s 명시
|
||||
font: {
|
||||
weight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '기간',
|
||||
font: {
|
||||
weight: 'bold'
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Chart.js Initialization Failed:", e);
|
||||
document.getElementById('errorMessage').textContent = `차트 생성 실패: ${e.message}. 브라우저의 콘솔을 확인하세요.`;
|
||||
document.getElementById('errorMessage').style.display = 'block';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -21,4 +21,5 @@
|
||||
<?php if (session('message')): ?><div class="alert alert-info text-start"><?= session('message') ?></div><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?= $this->endSection() ?>
|
||||
Loading…
Reference in New Issue
Block a user