325 lines
10 KiB
Plaintext
325 lines
10 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 -->
|
|
<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; }
|
|
|
|
.text-center {text-align: center}
|
|
|
|
/* 승인 토글스위치 */
|
|
/* 스위치들을 한 줄에 나란히 */
|
|
.switch-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px; /* 스위치 간 간격 */
|
|
}
|
|
.molit-g-switch,.mois-g-switch, .mof-g-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
/* 스위치 디자인 */
|
|
.mui-switch {
|
|
position: relative;
|
|
flex-shrink: 0; /* 스위치 크기 줄어들지 않게 */
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 26px;
|
|
}
|
|
|
|
.mui-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.mui-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: 0.4s;
|
|
border-radius: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: ${''}; /* 가운데 맞춤 */
|
|
}
|
|
|
|
.mui-slider:before {
|
|
position: absolute;
|
|
content: "OFF";
|
|
color: #fff;
|
|
font-size: 10px;
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: #999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
input:checked + .mui-slider {
|
|
background-color: #4A90E2;
|
|
}
|
|
|
|
input:checked + .mui-slider:before {
|
|
transform: translateX(22px);
|
|
content: "ON";
|
|
background-color: #1A73E8;
|
|
}
|
|
|
|
/* API 신청 내역 테이블 */
|
|
.table-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between; /* 제목 왼쪽, 스위치 오른쪽 */
|
|
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>
|
|
|
|
<div class="switch-group">
|
|
<div class="molit-g-switch">국토교통부
|
|
<label class="mui-switch">
|
|
<input type="checkbox" class="globalSwitch" data-otype="국토교통부" onchange="toggleApproveKey(this)" checked>
|
|
<span class="mui-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="mois-g-switch">행정안전부
|
|
<label class="mui-switch">
|
|
<input type="checkbox" class="globalSwitch" data-otype="행정안전부" onchange="toggleApproveKey(this)" checked>
|
|
<span class="mui-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="mof-g-switch">해양수산부
|
|
<label class="mui-switch">
|
|
<input type="checkbox" class="globalSwitch" data-otype="해양수산부" onchange="toggleApproveKey(this)" checked>
|
|
<span class="mui-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-container home-trainning">
|
|
<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%">
|
|
<col style="width: 8%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">No.</th>
|
|
<th>사용자 ID</th>
|
|
<th class="text-center">사용자 구분</th>
|
|
<th>API KEY</th>
|
|
<th class="text-center">신청일</th>
|
|
<th class="text-center">만료일</th>
|
|
<th class="text-center">승인상태</th>
|
|
<th class="text-center">삭제</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) {
|
|
|
|
// approveYn 이 "Y"이면 체크 상태, 아니면 체크 해제
|
|
const isChecked = item.approveYn === "Y" ? "checked" : "";
|
|
// HTML 문자열 생성
|
|
const html = `
|
|
<tr data-idx="\${item.apiSeq}">
|
|
<td class="text-center">\${item.rn}</td>
|
|
<td>\${item.userid}</td>
|
|
<td class="text-center">\${item.userType}</td>
|
|
<td>\${item.apiKey}</td>
|
|
<td class="text-center">\${item.startDt}</td>
|
|
<td class="text-center">\${item.endDt}</td>
|
|
<td class="text-center approve-switch">
|
|
<label class="mui-switch">
|
|
<input type="checkbox" class="key-toggle" data-seq="\${item.apiSeq}" onchange="toggleApproveKey(this)" \${isChecked}>
|
|
<span class="mui-slider"></span>
|
|
</label></td>
|
|
<td class="text-center"><button class="approve-btn" data-id="\${item.apiSeq}" onclick="revokeKey(this);">삭제</button></td>
|
|
</tr>
|
|
`;
|
|
return html;
|
|
}
|
|
|
|
// 승인처리하기
|
|
function toggleApproveKey(ele) {
|
|
let apiSeq = $(ele).data("seq")
|
|
let seqArr = [];
|
|
let otype = !$(ele).data("otype") ? '' : $(ele).data("otype"); // 일괄변경 스위치 클릭한 경우
|
|
let approve = $(ele).is(":checked") ? "Y" : "N";
|
|
|
|
if (otype == '') {
|
|
seqArr.push($(ele).data("seq"));
|
|
}
|
|
|
|
|
|
// if (btnType == 'globalSwitch') {
|
|
// $('.approve-switch').each(function(i, el) {
|
|
// const idx = $(el).data('seq');
|
|
// seqArr.push(idx);
|
|
// });
|
|
// } else {
|
|
// seqArr.push($(ele).data("seq"));
|
|
// }
|
|
$.ajax({
|
|
type : "POST",
|
|
url : "/admins/mgmtApiKey/approve.do" ,
|
|
data : {seqArr:seqArr, approveYn: approve, otype: otype},
|
|
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("승인처리 중 내부 오류가 발생했습니다. 다시 시도해주세요");
|
|
}
|
|
});
|
|
}
|
|
|
|
// 사용자 API 신청 삭제하기
|
|
function revokeKey(e) {
|
|
if(confirm("사용자의 API 신청을 삭제합니다.")) {
|
|
let apiSeq = $(e).data("id")
|
|
$.ajax({
|
|
type : "POST",
|
|
url : "/admins/mgmtApiKey/revoke.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>
|