1. 수정 버튼 만들기
1-1) 수정 버튼 만들기
1-1)-1. TA_status.jsp
<!--출근시간이 null이 아니면 수정 버튼 보이기-->
<td>
<c:if test="${list.WORK_TIME ne null }">
<div class="col-4 btn_pagination"
style="margin: 0px 25px 0px 0px; float: right; ">
<a href="#none" onclick="fn_BtnDetail( ${list.MENT_IDX} );"
class="btn btn-sm btn-dark"
style="color: white; padding: 0px 5px;">
수정
</a>
</div>
</c:if>
</td>
1-1)-2. href”#, #none, javascript:void(0)”
// # : 이 태그를 누르면 스크롤이 어디에 있든 최상단으로 이동함
<a href="#" a/>
// #none : #뒤에 아이디로 쓰지 않는 텍스트를 넣음.
// 어느 오브젝트로도 이동하지 않고 스크롤 이동도 없음.
<a href="#none" a/>
// 스크롤 이동도 없고 undefined 발생도 없음.
<a href="javascript:;" a/>
// void 안에 0말고 영문, 숫자도 가능함.
// 이 또한 a 태그의 이동기능을 무력화 시킴
// void는 underfined를 리턴하는 연산자임.
<a href="javascript:void(0);" a/>
// a 태그의 기본 기능도 사용하지 않고, 자바스크립트에게도 명확하게
// 어떠한 기능을 하지 않게끔 함.
<a href="#" onclick="return false;">nothing happened</a>
1-1)-3. 수정 버튼 만들기
2. 수정 클릭시 출/퇴근 시간 데이터 가져오기
2-1) 수정 클릭시 출/퇴근 시간 데이터 가져오기
2-2) mngMent_SQL.xml
<!-- 멘토 출퇴근 시간 조회 -->
<select id="mentWorkTimeDetail" parameterType="hashmap"
resultType="hashmap">
<![CDATA[
SELECT TOP(1)
--REALTIME_IDX(PK 실시간 멘토링 인덱스)
A.REALTIME_IDX AS REALTIME_IDX, --PK 실시간 멘토링 인덱스
A.MENT_IDX AS MENT_IDX, --멘토 인덱스
A.MENT_WORK_TIME AS MENT_WORK_TIME, --출근시간
A.MENT_WORK_TIME_OUT AS MENT_WORK_TIME_OUT, --퇴근시간
A.SYS_REG_ID AS SYS_REG_ID, --등록자
(SELECT MNG_NM FROM SDIJ_MNG_DATA --이름/관리자
WHERE MNG_ID = A.SYS_REG_ID) AS SYS_REG_NM, --아이디/등록자
A.SYS_REG_DTM AS SYS_REG_DTM, --등록일
A.SYS_MOD_ID AS SYS_MOD_ID, --수정자
(SELECT MNG_NM FROM SDIJ_MNG_DATA --이름/관리자
WHERE MNG_ID = A.SYS_MOD_ID) AS SYS_MOD_NM, --
A.SYS_MOD_DTM AS SYS_MOD_DTM --수정일
FROM SDIJ_REALTIME_MENT_DATA A --실시간 멘토링
WHERE 1=1
]]>
<if test="mentIdx not in {null, ''}" >
<![CDATA[
AND MENT_IDX = '${mentIdx}'
]]>
</if>
<![CDATA[
ORDER BY SYS_REG_DTM DESC --등록일
]]>
</select>
2-2) mngMentorDAO
2-3) mngMentorService
2-4) mngMentorServiceImpl
2-5) mngMentorController
2-6) TA_status.jsp(HTML)
<!--수정 팝업 메뉴-->
<div id="popup_commute_time" class="popup_wrap">
<div class="popup_layer">
<div class="popup_inner">
<div class="popup_header">
<h1 class="title">출/퇴근 관리</h1>
<button class="btn btn_close_pop" data-action="popup_hide"
onclick="fn_BtnCancel();">닫기</button>
</div>
<div class="dialog_content">
<div class="scroll_area">
<div class="tbl_view mt20">
<table class="view_tbl01" summary="">
<tbody>
<tr>
<th>출근</th>
<td>
<input type="text" maxlength="2"
name="MENT_WORK_TIME_F"
style="width:50px;height:30px;"> :
<input type="text" maxlength="2"
name="MENT_WORK_TIME_E"
style="width:50px;height:30px;">
</td>
</tr>
<tr>
<th>퇴근</th>
<td>
<input type="text" maxlength="2"
name="MENT_WORK_TIME_OUT_F"
style="width:50px;height:30px;"> :
<input type="text" maxlength="2"
name="MENT_WORK_TIME_OUT_E"
style="width:50px;height:30px;">
</td>
</tr>
</tbody>
</table>
<c:choose>
<c:when test="${flag ne null }">
<p id="REG_DTM_DETAIL" style="text-align:center;"></p>
</c:when>
<c:otherwise>
<p id="MOD_DTM_DETAIL" style="text-align:center;"></p>
</c:otherwise>
</c:choose>
<input name="REALTIME_IDX" type="hidden" value=""/>
<input name="MENT_WORK_TIME" type="hidden" value=""/>
<input name="MENT_WORK_TIME_OUT" type="hidden" value=""/>
<input name="mentDateTime" type="hidden" value=""/>
</div>
<!--// End 팝업 컨텐츠 -->
<div class="btn_wrap">
<a href="#" class="btn btn-md btn-secondary"
onclick="fn_BtnEdit();">수정</a>
<a class="btn btn-md btn-secondary"
data-action="popup_hide" style="color: white;" >취소</a>
</div>
<!--// End 팝업 컨텐츠 -->
</div>
<!--// End scroll_area -->
</div>
<!--// End dialog_content -->
</div>
<!--// End popup_inner -->
</div>
<!--// End popup_layer -->
</div>
2-7) TA.status.jsp(Javascript)
function fn_BtnDetail(MENT_IDX) {
// 1. 유효성 검사를 위한 파라미터값
var params = new Object();
params.mentIdx = MENT_IDX;
params.status = "DETAIL";
// 2. 유효성 검사 서비스로 이동
var result = ${unit
.ajax("/mng/mentoring/TA_status", "TA_status", "params")};
if (unit_isComplete(result)) {
// $('변결할 부분').val(값)
$('[name=MENT_IDX_EDIT]').val(MENT_IDX);
var jsonDetail = result.out.worktimes.data;
/* $.each : object와 배열 모두에서 사용할 수 있는 일반적인 반복함수
$.each(object, function(index, item) {}
*/
$.each(jsonDetail, function( key, val) {
$('[name=REALTIME_IDX]').val( val.REALTIME_IDX );
$('[name=MENT_IDX]').val( val.MENT_IDX );
var str = val.MENT_WORK_TIME; //출근시간
var str2 = val.MENT_WORK_TIME_OUT; //퇴근시간
if (str != null || "") {
$('[name=MENT_WORK_TIME_F]').val( val.MENT_WORK_TIME.substring(8,10) );
$('[name=MENT_WORK_TIME_E]').val( val.MENT_WORK_TIME.substring(10,12) );
}
if (str2 != null || "") {
$('[name=MENT_WORK_TIME_OUT_F]').val( val.MENT_WORK_TIME_OUT.substring(8,10) );
$('[name=MENT_WORK_TIME_OUT_E]').val( val.MENT_WORK_TIME_OUT.substring(10,12) );
}
var REG_DTM_DETAIL = val.SYS_REG_DTM.substring(0,4) + "." + val.SYS_REG_DTM.substring(4,6) + "." + val.SYS_REG_DTM.substring(6,8) + " " + val.SYS_REG_DTM.substring(8,10) + ":" + val.SYS_REG_DTM.substring(10,12) + " " + val.SYS_REG_NM + "(" + val.SYS_REG_ID + ")";
var MOD_DTM_DETAIL = val.SYS_MOD_DTM.substring(0,4) + "." + val.SYS_MOD_DTM.substring(4,6) + "." + val.SYS_MOD_DTM.substring(6,8) + " " + val.SYS_MOD_DTM.substring(8,10) + ":" + val.SYS_MOD_DTM.substring(10,12) + " " + val.SYS_MOD_NM + "(" + val.SYS_MOD_ID + ")";
// jstl flag
var flag = val.SYS_MOD_DTM;
$('#REG_DTM_DETAIL').text( REG_DTM_DETAIL );
$('#MOD_DTM_DETAIL').text( MOD_DTM_DETAIL );
var mentDateTime = $('#toYear').text().substr(0,10).replace(/\\./g,"");
$('[name=mentDateTime]').val( mentDateTime );
});
}
popupShow('400','250','popup_commute_time');
}
3. 등록 클릭시 출/퇴근 시간 수정 하기
3-1) mngMentor_SQL.xml
<!-- 출/퇴근 수정 -->
<update id="updateWorkTime" parameterType="hashmap">
<![CDATA[
UPDATE SDIJ_REALTIME_MENT_DATA SET
MENT_WORK_TIME = CASE WHEN ('${dbWorkTime}' = '')
THEN NULL
ELSE '${dbWorkTime}'
END,
MENT_WORK_TIME_OUT = CASE WHEN ('${dbWorkTimeOut}' = '')
THEN NULL
ELSE '${dbWorkTimeOut}'
END,
SYS_MOD_ID = '${loginMngId}',
SYS_MOD_DTM = Convert(varchar(8),Getdate(),112) + REPLACE(Convert(varchar(8),GETDATE()+'0:00:00',108),':','')
WHERE
REALTIME_IDX = '${mentRealIdx}'
]]>
</update>
3-2) mngMentorDAO
3-3) mngMentorService
3-4) mngMentorServiceImpl
3-5) TA_status.jsp
3-5)-1. view
<!--수정 팝업 메뉴-->
<div id="popup_commute_time" class="popup_wrap">
<div class="popup_layer">
<div class="popup_inner">
<div class="popup_header">
<h1 class="title">출/퇴근 관리</h1>
<button class="btn btn_close_pop" data-action="popup_hide"
onclick="fn_BtnCancel();">닫기
</button>
</div>
<div class="dialog_content">
<div class="scroll_area">
<div class="tbl_view mt20">
<table class="view_tbl01" summary="">
<tbody>
<tr>
<th>출근</th>
<td>
<input type="text" maxlength="2"
name="MENT_WORK_TIME_F"
style="width:50px;height:30px;"> :
<input type="text" maxlength="2"
name="MENT_WORK_TIME_E"
style="width:50px;height:30px;">
</td>
</tr>
<tr>
<th>퇴근</th>
<td>
<input type="text" maxlength="2"
name="MENT_WORK_TIME_OUT_F"
style="width:50px;height:30px;"> :
<input type="text" maxlength="2"
name="MENT_WORK_TIME_OUT_E"
style="width:50px;height:30px;">
</td>
</tr>
</tbody>
</table>
<c:choose>
<c:when test="${flag ne null }">
<p id="REG_DTM_DETAIL" style="text-align:center;"></p>
</c:when>
<c:otherwise>
<p id="MOD_DTM_DETAIL" style="text-align:center;"></p>
</c:otherwise>
</c:choose>
<input name="REALTIME_IDX" type="hidden" value=""/>
<input name="MENT_WORK_TIME" type="hidden" value=""/>
<input name="MENT_WORK_TIME_OUT" type="hidden" value=""/>
<input name="mentDateTime" type="hidden" value=""/>
</div>
<!--// End 팝업 컨텐츠 -->
<div class="btn_wrap">
<a href="#" class="btn btn-md btn-secondary"
onclick="fn_BtnEdit();">수정</a>
<a class="btn btn-md btn-secondary"
data-action="popup_hide" style="color: white;" >취소</a>
</div>
<!--// End 팝업 컨텐츠 -->
</div>
<!--// End scroll_area -->
</div>
<!--// End dialog_content -->
</div>
<!--// End popup_inner -->
</div>
<!--// End popup_layer -->
</div>
3-5)-2. javascript
function fn_BtnEdit( ) {
// 1. 유효성 검사를 위한 파라미터값
var params = new Object();
params.mentRealIdx = $('[name=REALTIME_IDX]').val();
var mentWorkTime1 = $('[name=MENT_WORK_TIME_F]').val();
var mentWorkTime2 = $('[name=MENT_WORK_TIME_E]').val();
var mentWorkTimeOut1 = $('[name=MENT_WORK_TIME_OUT_F]').val();
var mentWorkTimeOut2 = $('[name=MENT_WORK_TIME_OUT_E]').val();
var mentDateTime = $('[name=mentDateTime]').val();
if (mentWorkTime1.length < 2) {
mentWorkTime1 = "0" + mentWorkTime1
} else if (mentWorkTime2.length < 2) {
mentWorkTime2 = "0" + mentWorkTime2
} else if (mentWorkTimeOut1.length < 2) {
mentWorkTimeOut1 = "0" + mentWorkTimeOut1
} else if (mentWorkTimeOut2.length < 2) {
mentWorkTimeOut2 = "0" + mentWorkTimeOut2
}
var workTime = mentDateTime + mentWorkTime1 + mentWorkTime2
var workTimeOut = mentDateTime + mentWorkTimeOut1 + mentWorkTimeOut2
params.status = "EDIT";
if (mentWorkTime2 > 59 || mentWorkTimeOut2 > 59)
return alert("59분까지 입력이 가능합니다.");
if (mentWorkTime1 > 23 || mentWorkTimeOut1 > 23)
return alert("24시까지 입력이 가능합니다.");
if (Number(mentWorkTime1 + mentWorkTime2) == 0 && Number(mentWorkTimeOut1 + mentWorkTimeOut2) != 0 )
return alert("퇴근시간이 있을 경우 출근 시간을 삭제 할 수 없습니다.");
if (Number(mentWorkTimeOut1 + mentWorkTimeOut2) != 0 && Number(mentWorkTime1 + mentWorkTime2) > Number(mentWorkTimeOut1+mentWorkTimeOut2))
return alert("출근시간이 퇴근시간 보다 앞설 수 없습니다.");
params.workTime = workTime
params.workTimeOut = workTimeOut
// 2. 유효성 검사 서비스로 이동
var result = ${unit.ajax("/mng/mentoring/TA_status", "TA_status", "params")};
if (unit_isComplete(result)) {
location.href='/mng/mentoring/TA_status';
} else {
alert("입력사항을 다시 확인해주세요.");
}
}