175 lines
5.4 KiB
Plaintext
175 lines
5.4 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
|
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<!-- MUI + Chart.js + jQuery -->
|
|
<link href="https://cdn.jsdelivr.net/npm/@mui/material@5.15.14/dist/material.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
<style>
|
|
body { font-family: 'Pretendard', 'Roboto', sans-serif; background-color: #f5f6fa; margin: 0; padding: 20px; }
|
|
|
|
/* 로그 테이블 */
|
|
.table-container {
|
|
margin-top: 25px; background: #fff; border-radius: 12px; padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
thead { background: #f0f3f8; }
|
|
th, td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
|
|
th { color: #555; font-weight: 600; }
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 15px;
|
|
}
|
|
.pagination button {
|
|
border: none;
|
|
background-color: #e2e8f0;
|
|
color: #334155;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.pagination button.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
.pagination button:hover:not(.active) {
|
|
background-color: #cbd5e1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- API 신청 테이블 -->
|
|
<div class="table-container home-trainning">
|
|
<h3>API 신청 내역</h3>
|
|
<table class="Table_Main course-list-table">
|
|
<colgroup>
|
|
<col style="width: 3%">
|
|
<col style="width: 10%">
|
|
<col style="width: 10%">
|
|
<col style="width: auto">
|
|
<col style="width: 15%">
|
|
<col style="width: 15%">
|
|
<col style="width: 8%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>No.</th>
|
|
<th>사용자 ID</th>
|
|
<th>사용자 구분</th>
|
|
<th>API KEY</th>
|
|
<th>신청일</th>
|
|
<th>만료일</th>
|
|
<th>승인상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apiKeyBody">
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 페이징 영역 -->
|
|
<div id="pagination" class="pagination"></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
// API 호출 통제 목록 조회
|
|
getMgmtApiKeyList();
|
|
});
|
|
|
|
// API 호출 통제 목록 조회
|
|
function getMgmtApiKeyList(){
|
|
$.ajax({
|
|
type : "POST",
|
|
url : "/admins/mgmtApiKey/list.do" ,
|
|
data : {},
|
|
dataType :"json",
|
|
success : function(res){ // res.code, res.msg, res.data
|
|
if (res.code == "SUCCESS") {
|
|
let procList = res.data; //Array List
|
|
const $listContainer = $("#apiKeyBody");
|
|
$listContainer.empty(); // 기존 내용 제거
|
|
// 데이터 반복
|
|
$.each(res.data, function(i, item) {
|
|
// DOM에 추가
|
|
$listContainer.append(drawApiKeyList(item));
|
|
});
|
|
} else {
|
|
alert("관리 API 목록 조회중 오류가 발생하였습니다. 다시 시도해주세요.");
|
|
}
|
|
},
|
|
error : function(response){
|
|
alert("관리 API 목록 조회중 내부 오류가 발생하였습니다. 다시 시도해주세요.");
|
|
}
|
|
});
|
|
}
|
|
function drawApiKeyList(item) {
|
|
// 승인 상태에 따른 표시
|
|
let approveHtml = "";
|
|
if (item.approveYn == "Y") {
|
|
approveHtml = "승인";
|
|
} else {
|
|
approveHtml = `<button class="approve-btn" data-id="\${item.apiSeq}" onclick="approveKey(this);">승인</button>`;
|
|
}
|
|
// HTML 문자열 생성
|
|
const html = `
|
|
<tr data-idx="\${item.apiSeq}">
|
|
<td>\${item.rn}</td>
|
|
<td>\${item.userid}</td>
|
|
<td>\${item.userType}</td>
|
|
<td>\${item.apiKey}</td>
|
|
<td>\${item.startDt}</td>
|
|
<td>\${item.endDt}</td>
|
|
<td>\${approveHtml}</td>
|
|
</tr>
|
|
`;
|
|
return html;
|
|
}
|
|
|
|
// 승인처리하기
|
|
function approveKey(e) {
|
|
let apiSeq = $(e).data("id")
|
|
$.ajax({
|
|
type : "POST",
|
|
url : "/admins/mgmtApiKey/approve.do" ,
|
|
data : {apiSeq:apiSeq},
|
|
traditional: true,
|
|
dataType :"json",
|
|
success : function(res){ // res.code, res.msg, res.data
|
|
if (res.code == "SUCCESS") {
|
|
let procList = res.data; //Array List
|
|
const $listContainer = $("#apiKeyBody");
|
|
$listContainer.empty(); // 기존 내용 제거
|
|
// 데이터 반복
|
|
$.each(res.data, function(i, item) {
|
|
// DOM에 추가
|
|
$listContainer.append(drawApiKeyList(item));
|
|
});
|
|
} else {
|
|
alert("승인처리 중 오류가 발생했습니다. 다시 시도해주세요");
|
|
}
|
|
},
|
|
error : function(response){
|
|
alert("승인처리 중 내부 오류가 발생했습니다. 다시 시도해주세요");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|