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 .date { color:#333; }
.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>
<script language="javascript" >
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>';
}
function groupIdFormatter(cellValue, options, rowObject) {
if (!cellValue) return '<span style="color:#ccc;">-</span>';
return '<span class="group-id-display">' + cellValue + '</span>';
}
$(document).ready(function() {
$('#grid').jqGrid({
datatype:"json",
@@ -91,8 +97,8 @@ $(document).ready(function() {
'수정일시'
],
colModel:[
{ name : 'GROUPID' , align:'left' , width:'100' , sortable:false, hidden:true },
{ name : 'GROUPNAME' , align:'left' , width:'250'},
{ name : 'GROUPID' , align:'left' , width:'200' , sortable:false },
{ name : 'GROUPNAME' , align:'left' , width:'280'},
{ name : 'THRESHOLDPERSECOND' , align:'center' , width:'100' , formatter:perSecondFormatter },
{ name : 'THRESHOLD' , align:'center' , width:'120' , formatter:thresholdFormatter },
{ name : 'USEYN' , align:'center' , width:'70' , formatter:useYnBadgeFormatter },
@@ -268,7 +268,8 @@ function detail(url, key) {
dataType: "json",
data: {cmd: 'DETAIL', groupId: key},
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=thresholdPerSecond]").val(json.THRESHOLDPERSECOND || json.thresholdPerSecond);
$("input[name=threshold]").val(json.THRESHOLD || json.threshold);
@@ -279,6 +280,12 @@ function detail(url, key) {
$('#useYnLabel').text(useYnVal === '1' ? '사용' : '미사용');
updateThresholdLabel();
// 그룹 ID 표시 (수정 화면에서만)
if (groupId) {
$('#groupIdDisplay').text(groupId);
$('#groupIdRow').show();
}
// 수정일시 표시
var modifiedAt = json.MODIFIEDAT || json.modifiedAt;
if (modifiedAt) {
@@ -355,7 +362,10 @@ function openIfModal() {
ifModalState.page = 1;
ifModalState.selectedItem = null;
$('#ifSearchInput').val('');
$('#ifModal').fadeIn(200);
$('#ifModal').fadeIn(200, function() {
$('#ifSearchInput').focus();
});
$(document.activeElement).blur();
loadIfList();
}
@@ -716,6 +726,7 @@ $(document).ready(function() {
});
$("#btn_modify").click(function() {
$(this).blur();
if (!isValid()) return;
var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 그룹을 등록하시겠습니까?';
@@ -732,15 +743,28 @@ $(document).ready(function() {
postData.push({name: "interfaceListJson", value: getInterfaceListJson()});
var isInsert = !isDetail;
$.ajax({
type: "POST",
url: url,
data: postData,
success: function(args) {
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
type: 'success',
title: '저장 완료'
});
if (isInsert) {
// 신규 등록 시 목록으로 이동
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
type: 'success',
title: '저장 완료',
onClose: function() {
goNav(returnUrl);
}
});
} else {
// 수정 시 현재 화면 유지
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
type: 'success',
title: '저장 완료'
});
}
},
error: function(e) {
showAlert(e.responseText, { type: 'error' });
@@ -751,6 +775,7 @@ $(document).ready(function() {
});
$("#btn_delete").click(function() {
$(this).blur();
var groupName = $('input[name=groupName]').val();
showConfirm('<strong>[' + groupName + ']</strong> 그룹을 삭제하시겠습니까?<br/><span style="color:#999;font-size:11px;">매핑된 API 정보도 함께 삭제됩니다.</span>', {
type: 'error',
@@ -845,6 +870,7 @@ $(document).ready(function() {
// 도움말 모달
$("#btn_help").click(function() {
$(document.activeElement).blur();
$("#helpModal").fadeIn(200);
});
$(".help-modal-close, .help-modal-overlay").click(function(e) {
@@ -905,6 +931,10 @@ $(document).ready(function() {
<col />
</colgroup>
<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>
<th>그룹명 <span style="color:red">*</span></th>
<td><input type="text" name="groupName" style="width:300px" /></td>