feat: 유량제어 그룹 관리 UI 개선

- 리스트/상세 화면에 그룹 ID 컬럼 추가 (상세는 수정 시에만 표시)
  - 현황 탭에 전체 인스턴스 합산 요약 추가 (활성 인스턴스 수, 초당/추가 임계치 합산)
  - 추가 임계치 시간단위에서 '초(SEC)' 옵션 제거
  - 신규 등록 시 저장 완료 후 목록 화면으로 이동, 수정 시 현재 화면 유지
  - 모달 열릴 때 버튼 포커스 해제하여 스페이스 키 중복 실행 방지
This commit is contained in:
daekuk
2025-12-11 13:14:34 +09:00
parent 1328ddc596
commit 35a737d505
2 changed files with 44 additions and 8 deletions
@@ -26,6 +26,7 @@
.datetime-display { font-size:11px; color:#666; } .datetime-display { font-size:11px; color:#666; }
.datetime-display .date { color:#333; } .datetime-display .date { color:#333; }
.datetime-display .time { color:rgba(0,128,128,0.9); font-weight:500; } .datetime-display .time { color:rgba(0,128,128,0.9); font-weight:500; }
.group-id-display { font-family:Consolas, monospace; font-size:11px; color:#666; }
</style> </style>
<script language="javascript" > <script language="javascript" >
var url ='<c:url value="/onl/admin/inflow/inflowGroupControlMan.json" />'; var url ='<c:url value="/onl/admin/inflow/inflowGroupControlMan.json" />';
@@ -77,6 +78,11 @@ function thresholdFormatter(cellValue, options, rowObject) {
return '<span class="threshold-display"><span class="num">' + Number(threshold).toLocaleString() + '</span>건 / <span class="unit">' + label + '</span><span class="code">' + timeUnit + '</span></span>'; return '<span class="threshold-display"><span class="num">' + Number(threshold).toLocaleString() + '</span>건 / <span class="unit">' + label + '</span><span class="code">' + timeUnit + '</span></span>';
} }
function groupIdFormatter(cellValue, options, rowObject) {
if (!cellValue) return '<span style="color:#ccc;">-</span>';
return '<span class="group-id-display">' + cellValue + '</span>';
}
$(document).ready(function() { $(document).ready(function() {
$('#grid').jqGrid({ $('#grid').jqGrid({
datatype:"json", datatype:"json",
@@ -91,8 +97,8 @@ $(document).ready(function() {
'수정일시' '수정일시'
], ],
colModel:[ colModel:[
{ name : 'GROUPID' , align:'left' , width:'100' , sortable:false, hidden:true }, { name : 'GROUPID' , align:'left' , width:'200' , sortable:false },
{ name : 'GROUPNAME' , align:'left' , width:'250'}, { name : 'GROUPNAME' , align:'left' , width:'280'},
{ name : 'THRESHOLDPERSECOND' , align:'center' , width:'100' , formatter:perSecondFormatter }, { name : 'THRESHOLDPERSECOND' , align:'center' , width:'100' , formatter:perSecondFormatter },
{ name : 'THRESHOLD' , align:'center' , width:'120' , formatter:thresholdFormatter }, { name : 'THRESHOLD' , align:'center' , width:'120' , formatter:thresholdFormatter },
{ name : 'USEYN' , align:'center' , width:'70' , formatter:useYnBadgeFormatter }, { name : 'USEYN' , align:'center' , width:'70' , formatter:useYnBadgeFormatter },
@@ -268,7 +268,8 @@ function detail(url, key) {
dataType: "json", dataType: "json",
data: {cmd: 'DETAIL', groupId: key}, data: {cmd: 'DETAIL', groupId: key},
success: function(json) { success: function(json) {
$("input[name=groupId]").val(json.GROUPID || json.groupId); var groupId = json.GROUPID || json.groupId;
$("input[name=groupId]").val(groupId);
$("input[name=groupName]").val(json.GROUPNAME || json.groupName); $("input[name=groupName]").val(json.GROUPNAME || json.groupName);
$("input[name=thresholdPerSecond]").val(json.THRESHOLDPERSECOND || json.thresholdPerSecond); $("input[name=thresholdPerSecond]").val(json.THRESHOLDPERSECOND || json.thresholdPerSecond);
$("input[name=threshold]").val(json.THRESHOLD || json.threshold); $("input[name=threshold]").val(json.THRESHOLD || json.threshold);
@@ -279,6 +280,12 @@ function detail(url, key) {
$('#useYnLabel').text(useYnVal === '1' ? '사용' : '미사용'); $('#useYnLabel').text(useYnVal === '1' ? '사용' : '미사용');
updateThresholdLabel(); updateThresholdLabel();
// 그룹 ID 표시 (수정 화면에서만)
if (groupId) {
$('#groupIdDisplay').text(groupId);
$('#groupIdRow').show();
}
// 수정일시 표시 // 수정일시 표시
var modifiedAt = json.MODIFIEDAT || json.modifiedAt; var modifiedAt = json.MODIFIEDAT || json.modifiedAt;
if (modifiedAt) { if (modifiedAt) {
@@ -355,7 +362,10 @@ function openIfModal() {
ifModalState.page = 1; ifModalState.page = 1;
ifModalState.selectedItem = null; ifModalState.selectedItem = null;
$('#ifSearchInput').val(''); $('#ifSearchInput').val('');
$('#ifModal').fadeIn(200); $('#ifModal').fadeIn(200, function() {
$('#ifSearchInput').focus();
});
$(document.activeElement).blur();
loadIfList(); loadIfList();
} }
@@ -716,6 +726,7 @@ $(document).ready(function() {
}); });
$("#btn_modify").click(function() { $("#btn_modify").click(function() {
$(this).blur();
if (!isValid()) return; if (!isValid()) return;
var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 그룹을 등록하시겠습니까?'; var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 그룹을 등록하시겠습니까?';
@@ -732,15 +743,28 @@ $(document).ready(function() {
postData.push({name: "interfaceListJson", value: getInterfaceListJson()}); postData.push({name: "interfaceListJson", value: getInterfaceListJson()});
var isInsert = !isDetail;
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: url, url: url,
data: postData, data: postData,
success: function(args) { success: function(args) {
showAlert("<%= localeMessage.getString("common.saveMsg") %>", { if (isInsert) {
type: 'success', // 신규 등록 시 목록으로 이동
title: '저장 완료' showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
}); type: 'success',
title: '저장 완료',
onClose: function() {
goNav(returnUrl);
}
});
} else {
// 수정 시 현재 화면 유지
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
type: 'success',
title: '저장 완료'
});
}
}, },
error: function(e) { error: function(e) {
showAlert(e.responseText, { type: 'error' }); showAlert(e.responseText, { type: 'error' });
@@ -751,6 +775,7 @@ $(document).ready(function() {
}); });
$("#btn_delete").click(function() { $("#btn_delete").click(function() {
$(this).blur();
var groupName = $('input[name=groupName]').val(); var groupName = $('input[name=groupName]').val();
showConfirm('<strong>[' + groupName + ']</strong> 그룹을 삭제하시겠습니까?<br/><span style="color:#999;font-size:11px;">매핑된 API 정보도 함께 삭제됩니다.</span>', { showConfirm('<strong>[' + groupName + ']</strong> 그룹을 삭제하시겠습니까?<br/><span style="color:#999;font-size:11px;">매핑된 API 정보도 함께 삭제됩니다.</span>', {
type: 'error', type: 'error',
@@ -845,6 +870,7 @@ $(document).ready(function() {
// 도움말 모달 // 도움말 모달
$("#btn_help").click(function() { $("#btn_help").click(function() {
$(document.activeElement).blur();
$("#helpModal").fadeIn(200); $("#helpModal").fadeIn(200);
}); });
$(".help-modal-close, .help-modal-overlay").click(function(e) { $(".help-modal-close, .help-modal-overlay").click(function(e) {
@@ -905,6 +931,10 @@ $(document).ready(function() {
<col /> <col />
</colgroup> </colgroup>
<tbody> <tbody>
<tr id="groupIdRow" style="display:none;">
<th>그룹 ID</th>
<td><span id="groupIdDisplay" style="font-family:Consolas, monospace; font-size:12px; color:#666;"></span></td>
</tr>
<tr> <tr>
<th>그룹명 <span style="color:red">*</span></th> <th>그룹명 <span style="color:red">*</span></th>
<td><input type="text" name="groupName" style="width:300px" /></td> <td><input type="text" name="groupName" style="width:300px" /></td>