|
|
|
|
@ -70,12 +70,13 @@
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="th">구조지수</th>
|
|
|
|
|
<td>
|
|
|
|
|
<select id="strctIdxCd" name="strctIdxCd" class="input" style="width: 180px;">
|
|
|
|
|
<option value="">선택하세요</option>
|
|
|
|
|
<c:forEach var="code" items="${strctIdxCdList}">
|
|
|
|
|
<option value="${code.cdId}" <c:if test="${data.strctIdxCd eq code.cdId}">selected</c:if>>${code.cdNm}</option>
|
|
|
|
|
</c:forEach>
|
|
|
|
|
</select>
|
|
|
|
|
<div class="strct-idx-dropdown-container">
|
|
|
|
|
<input type="text" id="strctIdxNm" name="strctIdxNm" class="input" style="width: 200px;" placeholder="구조명을 입력하거나 선택하세요" autocomplete="off" value="${data.strctIdxCdNm}"/>
|
|
|
|
|
<input type="hidden" id="strctIdxCd" name="strctIdxCd" value="${data.strctIdxCd}"/>
|
|
|
|
|
<div id="strctIdxDropdown" class="strct-idx-dropdown">
|
|
|
|
|
<!-- 드롭다운 목록이 여기에 동적으로 생성됩니다 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
<th class="th">용도지수</th>
|
|
|
|
|
<td>
|
|
|
|
|
@ -124,6 +125,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
/**
|
|
|
|
|
* 불법행위정보 등록/수정 팝업 JavaScript
|
|
|
|
|
@ -150,9 +152,222 @@
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 구조지수 드롭다운 초기화
|
|
|
|
|
initStrctIdxDropdown();
|
|
|
|
|
|
|
|
|
|
console.log('불법행위정보 팝업이 초기화되었습니다. 모드:', mode);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 구조지수 드롭다운 관련 변수
|
|
|
|
|
var strctIdxData = []; // 전체 구조지수 데이터
|
|
|
|
|
var filteredStrctIdxData = []; // 필터링된 구조지수 데이터
|
|
|
|
|
var selectedIndex = -1; // 현재 선택된 항목 인덱스
|
|
|
|
|
var isDropdownOpen = false; // 드롭다운 열림 상태
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 구조지수 드롭다운 초기화
|
|
|
|
|
* 중요한 로직 주석: 전체 구조지수 데이터를 로드하고 이벤트를 바인딩한다.
|
|
|
|
|
*/
|
|
|
|
|
function initStrctIdxDropdown() {
|
|
|
|
|
// 전체 구조지수 데이터 로드
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '<c:url value="/crdn/crndRegistAndView/crdnActInfo/getAllStrctIdx.ajax"/>',
|
|
|
|
|
type: 'POST',
|
|
|
|
|
success: function(response) {
|
|
|
|
|
if (response.success) {
|
|
|
|
|
strctIdxData = response.data;
|
|
|
|
|
filteredStrctIdxData = strctIdxData;
|
|
|
|
|
} else {
|
|
|
|
|
console.error('구조지수 데이터를 가져오는데 실패했습니다.');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: function() {
|
|
|
|
|
console.error('구조지수 데이터 로드 중 오류가 발생했습니다.');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 이벤트 바인딩
|
|
|
|
|
bindStrctIdxEvents();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 구조지수 드롭다운 이벤트 바인딩
|
|
|
|
|
* 중요한 로직 주석: input 필드의 클릭, 키보드 이벤트 등을 처리한다.
|
|
|
|
|
*/
|
|
|
|
|
function bindStrctIdxEvents() {
|
|
|
|
|
var $input = $('#strctIdxNm');
|
|
|
|
|
var $dropdown = $('#strctIdxDropdown');
|
|
|
|
|
|
|
|
|
|
// input 클릭 시 드롭다운 열기
|
|
|
|
|
$input.on('click', function() {
|
|
|
|
|
showStrctIdxDropdown();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// input 포커스 시 드롭다운 열기
|
|
|
|
|
$input.on('focus', function() {
|
|
|
|
|
showStrctIdxDropdown();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// input 키보드 입력 시 실시간 필터링
|
|
|
|
|
$input.on('input', function() {
|
|
|
|
|
filterStrctIdxData($(this).val());
|
|
|
|
|
showStrctIdxDropdown();
|
|
|
|
|
selectedIndex = -1;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 키보드 네비게이션
|
|
|
|
|
$input.on('keydown', function(e) {
|
|
|
|
|
if (!isDropdownOpen) return;
|
|
|
|
|
|
|
|
|
|
switch (e.keyCode) {
|
|
|
|
|
case 38: // 위 화살표
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
navigateDropdown(-1);
|
|
|
|
|
break;
|
|
|
|
|
case 40: // 아래 화살표
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
navigateDropdown(1);
|
|
|
|
|
break;
|
|
|
|
|
case 13: // 엔터
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
selectCurrentItem();
|
|
|
|
|
break;
|
|
|
|
|
case 27: // ESC
|
|
|
|
|
hideStrctIdxDropdown();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 문서 클릭 시 드롭다운 닫기
|
|
|
|
|
$(document).on('click', function(e) {
|
|
|
|
|
if (!$(e.target).closest('.strct-idx-dropdown-container').length) {
|
|
|
|
|
hideStrctIdxDropdown();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 구조지수 데이터 필터링
|
|
|
|
|
* 중요한 로직 주석: 입력된 텍스트를 기준으로 구조명을 필터링한다.
|
|
|
|
|
*/
|
|
|
|
|
function filterStrctIdxData(searchTerm) {
|
|
|
|
|
var term = searchTerm.trim().toLowerCase();
|
|
|
|
|
if (term === '') {
|
|
|
|
|
filteredStrctIdxData = strctIdxData;
|
|
|
|
|
} else {
|
|
|
|
|
filteredStrctIdxData = strctIdxData.filter(function(item) {
|
|
|
|
|
return item.strctNm && item.strctNm.toLowerCase().indexOf(term) > -1;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 구조지수 드롭다운 표시
|
|
|
|
|
* 중요한 로직 주석: 필터링된 데이터를 기반으로 드롭다운 리스트를 생성하고 표시한다.
|
|
|
|
|
*/
|
|
|
|
|
function showStrctIdxDropdown() {
|
|
|
|
|
var $dropdown = $('#strctIdxDropdown');
|
|
|
|
|
var html = '';
|
|
|
|
|
|
|
|
|
|
if (filteredStrctIdxData.length === 0) {
|
|
|
|
|
html = '<div class="strct-idx-item no-results">검색 결과가 없습니다.</div>';
|
|
|
|
|
} else {
|
|
|
|
|
filteredStrctIdxData.forEach(function(item, index) {
|
|
|
|
|
var strctIdx = item.strctIdx ? parseFloat(item.strctIdx).toFixed(2) : '-';
|
|
|
|
|
var rdvlrtCnYrCnt = item.rdvlrtCnYrCnt ? parseFloat(item.rdvlrtCnYrCnt).toFixed(0) : '-';
|
|
|
|
|
var lastYrRdvlrt = item.lastYrRdvlrt ? parseFloat(item.lastYrRdvlrt).toFixed(2) : '-';
|
|
|
|
|
var dprt = item.dprt ? parseFloat(item.dprt).toFixed(2) : '-';
|
|
|
|
|
|
|
|
|
|
html += '<div class="strct-idx-item" data-index="' + index + '" data-code="' + item.strctIdxCd + '" data-name="' + item.strctNm + '">';
|
|
|
|
|
html += ' <div class="strct-idx-main">' + item.strctNm + '</div>';
|
|
|
|
|
html += ' <div class="strct-idx-details">';
|
|
|
|
|
html += ' <span class="strct-idx-value">구조지수: ' + strctIdx + '</span>';
|
|
|
|
|
html += ' <span class="strct-idx-value">잔가율연수: ' + rdvlrtCnYrCnt + '</span>';
|
|
|
|
|
html += ' <span class="strct-idx-value">최종연도잔가율: ' + lastYrRdvlrt + '</span>';
|
|
|
|
|
html += ' <span class="strct-idx-value">감가상각률: ' + dprt + '</span>';
|
|
|
|
|
html += ' </div>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$dropdown.html(html);
|
|
|
|
|
$dropdown.show();
|
|
|
|
|
isDropdownOpen = true;
|
|
|
|
|
|
|
|
|
|
// 마우스 클릭 이벤트 바인딩
|
|
|
|
|
$dropdown.find('.strct-idx-item').on('click', function() {
|
|
|
|
|
if (!$(this).hasClass('no-results')) {
|
|
|
|
|
var index = parseInt($(this).attr('data-index'));
|
|
|
|
|
selectDropdownItem(index);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 구조지수 드롭다운 숨기기
|
|
|
|
|
*/
|
|
|
|
|
function hideStrctIdxDropdown() {
|
|
|
|
|
$('#strctIdxDropdown').hide();
|
|
|
|
|
isDropdownOpen = false;
|
|
|
|
|
selectedIndex = -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 드롭다운 네비게이션
|
|
|
|
|
* 중요한 로직 주석: 화살표 키로 드롭다운 항목들을 네비게이션한다.
|
|
|
|
|
*/
|
|
|
|
|
function navigateDropdown(direction) {
|
|
|
|
|
var $items = $('#strctIdxDropdown .strct-idx-item:not(.no-results)');
|
|
|
|
|
if ($items.length === 0) return;
|
|
|
|
|
|
|
|
|
|
// 이전 선택 항목 하이라이트 제거
|
|
|
|
|
$items.removeClass('selected');
|
|
|
|
|
|
|
|
|
|
// 새로운 인덱스 계산
|
|
|
|
|
selectedIndex += direction;
|
|
|
|
|
if (selectedIndex < 0) selectedIndex = $items.length - 1;
|
|
|
|
|
if (selectedIndex >= $items.length) selectedIndex = 0;
|
|
|
|
|
|
|
|
|
|
// 새로운 항목 하이라이트
|
|
|
|
|
$items.eq(selectedIndex).addClass('selected');
|
|
|
|
|
|
|
|
|
|
// 스크롤 조정
|
|
|
|
|
var $dropdown = $('#strctIdxDropdown');
|
|
|
|
|
var $selectedItem = $items.eq(selectedIndex);
|
|
|
|
|
var dropdownHeight = $dropdown.height();
|
|
|
|
|
var itemHeight = $selectedItem.outerHeight();
|
|
|
|
|
var scrollTop = $dropdown.scrollTop();
|
|
|
|
|
var itemTop = $selectedItem.position().top + scrollTop;
|
|
|
|
|
|
|
|
|
|
if (itemTop < scrollTop) {
|
|
|
|
|
$dropdown.scrollTop(itemTop);
|
|
|
|
|
} else if (itemTop + itemHeight > scrollTop + dropdownHeight) {
|
|
|
|
|
$dropdown.scrollTop(itemTop + itemHeight - dropdownHeight);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 현재 선택된 항목 선택
|
|
|
|
|
*/
|
|
|
|
|
function selectCurrentItem() {
|
|
|
|
|
if (selectedIndex >= 0 && selectedIndex < filteredStrctIdxData.length) {
|
|
|
|
|
selectDropdownItem(selectedIndex);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 드롭다운 항목 선택
|
|
|
|
|
* 중요한 로직 주석: 선택된 구조지수를 input 필드에 설정하고 드롭다운을 닫는다.
|
|
|
|
|
*/
|
|
|
|
|
function selectDropdownItem(index) {
|
|
|
|
|
var selectedItem = filteredStrctIdxData[index];
|
|
|
|
|
if (selectedItem) {
|
|
|
|
|
$('#strctIdxNm').val(selectedItem.strctNm);
|
|
|
|
|
$('#strctIdxCd').val(selectedItem.strctIdxCd);
|
|
|
|
|
hideStrctIdxDropdown();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 불법행위정보 저장 함수
|
|
|
|
|
* 중요한 로직 주석: validation 체크 후 mode에 따라 등록/수정 API를 호출한다.
|
|
|
|
|
|
박성영
4 months ago