이지우 - 체험교실 차시별 운영계획 기본 3차시로 수정

This commit is contained in:
jiwoo 2024-02-27 15:47:31 +09:00
parent 5925f3eb8a
commit b0b2fa627e
3 changed files with 370 additions and 27 deletions

View File

@ -376,7 +376,7 @@
return flag = false;
}
if($(this).find('input[name=strtTm]').val() == ''){
/* if($(this).find('input[name=strtTm]').val() == ''){
alert('교육시작 시간을 입력해주세요.');
$('input[name=strtTm]:eq('+idx+')').focus();
return flag = false;
@ -399,7 +399,7 @@
alert('교육종료 시간을 입력해주세요.');
$('input[name=endTm]:eq('+idx+')').focus();
return flag = false;
}
} */
if($(this).find('input[name=lrnSbjct]').val() == ''){
alert('학습주제를 입력해주세요.');
@ -421,6 +421,13 @@
return true;
}
function chasiCntSetting(){
var cahsiRow = $(".addClassRow > tbody > tr")
cahsiRow.each(function(index){
$(this).find('th:first').html(index+1);
})
}
</script>
<form:form id="listForm" name="listForm" commandName="vEEduAplctVO" onsubmit="return false;" method="post">
@ -783,14 +790,14 @@
<span class="cf_text2" style="display:block; padding-left:0; padding-top: 6px;">※ 운영지원금 지원을 위한 계획서(계획은 운영에 따라 변경 가능)<br/>※ 담당교사의 재량으로 자율 편성하되, 1일 최대 2차시까지만 운영 가능</span>
</div>
<div class="btn_wrap">
<button type="button" class="btnType05" title="교육차시 입력테이블 추가생성" onclick="addEduClassCopyTngr('addClassRow')">교육추가</button>
<button type="button" class="btnType05" title="교육차시 입력테이블 추가생성" onclick="addEduClassCopyExprn('addClassRow'); chasiCntSetting();">교육추가</button>
</div>
</div>
<c:choose>
<c:when test="${fn:length(chasiList) ne 0}">
<div class="tb_type02 tb_type02_write">
<table class="addClassRow" rowLimit="1" >
<table class="addClassRow" rowLimit="3" >
<colgroup>
<col style="width: 13%;">
<col style="width: 25%;">
@ -801,8 +808,8 @@
</colgroup>
<thead>
<tr>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>교육희망일</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>시간</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>차시</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>일자</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>학습주제</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>지도내용</th>
<th scope="col">비고</th>
@ -812,12 +819,15 @@
<tbody>
<c:forEach var="list" items="${chasiList}" varStatus="status">
<tr>
<th class="calendar_th">
<th>
${status.count}
</th>
<td class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt" value="${list.eduHopeDt}"></duet-date-picker>
</div>
</th>
<td>
</td>
<%-- <td>
<div class="table_time_wrap">
<div class="time_wrap time_select_wrap">
<fmt:parseDate value="${list.strtTm}" var="strtTm" pattern="kkmm"/>
@ -944,7 +954,7 @@
</div>
</div>(<input type="text" readonly="readonly" value="${list.lrnTm}" class="input_time" name="lrnTm" title="교육 시간">분)
</div>
</td>
</td> --%>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
@ -958,7 +968,7 @@
<label for="text" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" value="${list.rmrks}"maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this)" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
</c:forEach>
</tbody>
@ -969,7 +979,7 @@
</c:when>
<c:otherwise>
<div class="tb_type02 tb_type02_write">
<table class="addClassRow" rowLimit="1" >
<table class="addClassRow" rowLimit="3" >
<colgroup>
<col style="width: 13%;">
<col style="width: 25%;">
@ -980,8 +990,8 @@
</colgroup>
<thead>
<tr>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>교육희망일</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>시간</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>차시</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>일자</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>학습주제</th>
<th scope="col"><p class="req_text"><span>필수입력 항목</span>*</p>지도내용</th>
<th scope="col">비고</th>
@ -990,12 +1000,15 @@
</thead>
<tbody>
<tr>
<th class="calendar_th">
<th>
1
</th>
<td class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt"></duet-date-picker>
</div>
</th>
<td>
</td>
<%-- <td>
<div class="table_time_wrap">
<div class="time_wrap time_select_wrap">
<input type="text" class="time" name="strtTm" title="시작 시간 입력" readonly>
@ -1116,7 +1129,7 @@
</div>
</div>(<input type="text" readonly="readonly" class="input_time" name="lrnTm" title="교육 시간">분)
</div>
</td>
</td> --%>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
@ -1130,7 +1143,53 @@
<label for="text" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this)" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
<tr>
<th>
2
</th>
<td class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt"></duet-date-picker>
</div>
</td>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
<input type="text" id="lrnSbjct" name="lrnSbjct" maxlength="50" placeholder="">
</td>
<td>
<label for="lrnCn" class="label">지도내용</label>
<input type="text"" id="lrnCn" name="lrnCn" maxlength="50">
</td>
<td>
<label for="text" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting()" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
<tr>
<th>
3
</th>
<td class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt"></duet-date-picker>
</div>
</td>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
<input type="text" id="lrnSbjct" name="lrnSbjct" maxlength="50" placeholder="(예시) 교육 후 저작권 의식조사">
</td>
<td>
<label for="lrnCn" class="label">지도내용</label>
<input type="text"" id="lrnCn" name="lrnCn" maxlength="50">
</td>
<td>
<label for="text" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting()" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
</tbody>
</table>
@ -1151,7 +1210,7 @@
</div>
</div>
<div class="tb_type02">
<table class="addClassRow" rowLimit="1" >
<table class="addClassRow" rowLimit="3" >
<colgroup>
<col style="width: 10%;">
<col style="width: 15%;">

View File

@ -399,6 +399,15 @@
linkForm.action = "<c:url value='/web/ve/aplct/otsdCprtnPrcs/lctrAplct/lctrAplctReg.do'/>"
linkForm.submit();
}
function chasiCntSetting(){
var cahsiRow = $(".addClassRow > tbody > tr")
cahsiRow.each(function(index){
$(this).find('th:first').html(index+1);
/* $(this).find('input').eq(2).attr('placeholder'); */
})
}
</script>
<div class="mask2" onclick="timeLayerUtil()"></div>
<form:form id="listForm" name="listForm" commandName="vEEduAplctVO" onsubmit="return false;" method="post">
@ -572,14 +581,14 @@
<span class="cf_text2" style="display:block; padding-left:0; padding-top: 6px;">※ 운영지원금 지원을 위한 계획서(계획은 운영에 따라 변경 가능)<br/>※ 담당교사의 재량으로 자율 편성하되, 1일 최대 2차시까지만 운영 가능</span>
</div>
<div class="btn_wrap">
<button type="button" class="btnType05" title="교육차시 입력테이블 추가생성" onclick="addEduClassCopyTngr('addClassRow')">교육추가</button>
<button type="button" class="btnType05" title="교육차시 입력테이블 추가생성" onclick="addEduClassCopyExprn('addClassRow'); chasiCntSetting();">교육추가</button>
</div>
</div>
<c:choose>
<c:when test="${fn:length(chasiList) ne 0}">
<div class="tb_type02 tb_type02_write">
<table class="addClassRow" rowLimit="1" >
<table class="addClassRow" rowLimit="3" >
<colgroup>
<col style="width: 13%;">
<col style="width: 25%;">
@ -602,7 +611,7 @@
<c:forEach var="list" items="${chasiList}" varStatus="status">
<tr>
<th>
자동생성
${status.count}
</th>
<th class="calendar_th">
<div class="calendar_wrap">
@ -750,7 +759,7 @@
<label for="rmrks" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks"value="${list.rmrks}" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this)" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
</c:forEach>
</tbody>
@ -760,7 +769,7 @@
</c:when>
<c:otherwise>
<div class="tb_type02 tb_type02_write">
<table class="addClassRow" rowLimit="1" >
<table class="addClassRow" rowLimit="3" >
<colgroup>
<col style="width: 14%;">
<col style="width: 25%;">
@ -780,9 +789,10 @@
</tr>
</thead>
<tbody>
<!-- 1차시 -->
<tr>
<th>
자동생성
1
</th>
<th class="calendar_th">
<div class="calendar_wrap">
@ -925,7 +935,57 @@
<label for="rmrks" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this)" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
<!-- 2차시 -->
<tr>
<th>
2
</th>
<th class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt"></duet-date-picker>
<script src="<c:url value='/visitEdu/usr/publish/script/duetdatepicker2.js' /> "></script>
</div>
</th>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
<input type="text" id="lrnSbjct" name="lrnSbjct" maxlength="50" placeholder="">
</td>
<td>
<label for="lrnCn" class="label">지도내용</label>
<input type="text"" id="lrnCn" name="lrnCn" maxlength="50">
</td>
<td>
<label for="rmrks" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
<!-- 3차시 -->
<tr>
<th>
3
</th>
<th class="calendar_th">
<div class="calendar_wrap">
<duet-date-picker identifier="date" class="startDate" name="eduHopeDt"></duet-date-picker>
<script src="<c:url value='/visitEdu/usr/publish/script/duetdatepicker2.js' /> "></script>
</div>
</th>
<td>
<label for="lrnSbjct" class="label">학습주제</label>
<input type="text" id="lrnSbjct" name="lrnSbjct" maxlength="50" placeholder="(예시) 교육 후 저작권 의식조사">
</td>
<td>
<label for="lrnCn" class="label">지도내용</label>
<input type="text"" id="lrnCn" name="lrnCn" maxlength="50">
</td>
<td>
<label for="rmrks" class="label">비고</label>
<input type="text" id="rmrks" name="rmrks" maxlength="50" >
</td>
<td><button type="button" class="table_del" onclick="tableDel(this); chasiCntSetting();" title="해당 교육차시 정보 삭제"><img alt="" src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/del_btn.png"></button></td>
</tr>
</tbody>
</table>

View File

@ -842,6 +842,230 @@ function addEduClassCopyTngr(target) {
}, 100);
}
//교육신청 교육차시 정보 교육추가 버튼 클릭 시 tr추가
function addEduClassCopyExprn(target) {
var parent = $("." + target);
var tr = parent.find("tbody > tr:first");
var len = 0;
var chkIdx = tr.find("select[name=divCd] option:selected").index()
if (tr.length == 0) {
alert('오류가 발생하였습니다. 관리자에게 문의해주세요.');
return false;
}
var cloneObj = tr.clone(true);
//체험교실 행추가 시 placeholder 삭제 처리
cloneObj.html(cloneObj.html().replace('(예시) 교육 전 저작권 의식조사', ''));
cloneObj.html(cloneObj.html().replace('(예시) 교육 후 저작권 의식조사', ''));
/*cloneObj.find("input[name=eduHopeDt]").closest("th,td").empty().append($('<div/>').addClass('calendar_wrap').append(
$('<input/>').addClass('calendar').css({'width' : '80%'}).attr({'size' : '8', 'type' : 'text', 'name' : 'eduHopeDt'})
));*/
cloneObj.find("duet-date-picker").closest("th,td").children().remove();
/* 청소년 */
cloneObj.find('.ampm_select,.hours_select,.min_select').off("change");
cloneObj.find('input[name=strtTm]').val('');
cloneObj.find('input[name=endTm]').val('');
cloneObj.find('select[name=divCd] option:eq(' + chkIdx + ')').prop('selected', true);
cloneObj.find('input[name=trgt]').val('');
cloneObj.find('input[name=prsnl]').val('');
cloneObj.find('input[name=lrnTm]').val('');
var index = parent.find("tbody > tr").not('.calendar_wrap tr').length;
index = index + 1;
cloneObj.find('label[for=sel1]').attr('for', 'sel' + index);
cloneObj.find('select[name=divCd]').attr('id', 'sel' + index);
cloneObj.find('label[for=target]').attr('for', 'target' + index);
cloneObj.find('#target').attr('id', 'target' + index);
cloneObj.find('label[for=personnel]').attr('for', 'personnel' + index);
cloneObj.find('#personnel').attr('id', 'personnel' + index);
var duetdateleng = $("duet-date-picker").length + 1;
cloneObj.find(".calendar_th").append('<div class="calendar_wrap"><duet-date-picker identifier="date" class="startDate' + duetdateleng + '" name="eduHopeDt"></duet-date-picker></div>');
//웹접근성>달력 버튼 title추가
setTimeout(function(){
cloneObj.find(".duet-date__toggle").attr("title","달력팝업 열림");
},100)
if (target == 'addClassRowClsrm') {
len = parent.find('tbody > tr').not('.calendar_wrap tr').length;
cloneObj.find(">td:first").text(len + 1);
}
/* 운영신청서 */
cloneObj.find('input[name=lrnSbjct]').val('');
cloneObj.find('input[name=lrnCn]').val('');
cloneObj.find('input[name=rmrks]').val('');
parent.append(cloneObj);
calendarinputset();
timeInput();
$(".time_set_btn").click(function () {
$(this).next($(".time_layer")).addClass("on");
$(".mask2").show();
});
$(".time_close").keydown(function (e) {
if (e.keyCode == "9") {
if (e.shiftKey) {} else {
$(".time_layer").removeClass("on");
$(".mask2").hide();
}
} else {}
});
var startDate = [];
// 날짜 형식 YYYY.MM.DD 바꾸기
for (var i = 2; i <= duetdateleng; i++) {
startDate[i] = document.querySelector(".startDate" + duetdateleng);
var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
startDate[i].dateAdapter = {
parse: function parse() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
var createDate = arguments.length > 1 ? arguments[1] : undefined
var matches = value.match(DATE_FORMAT)
if (matches) {
return createDate(matches[3], matches[2], matches[1])
}
},
format: function format(date) {
if (date.getMonth() < 9) {
if (date.getDate() < 10) {
return ""
.concat(date.getFullYear(), ".")
.concat('0', date.getMonth() + 1, ".")
.concat('0', date.getDate())
} else {
return ""
.concat(date.getFullYear(), ".")
.concat('0', date.getMonth() + 1, ".")
.concat(date.getDate())
}
} else {
if (date.getDate() < 10) {
return ""
.concat(date.getFullYear(), ".")
.concat(date.getMonth() + 1, ".")
.concat('0', date.getDate())
} else {
return ""
.concat(date.getFullYear(), ".")
.concat(date.getMonth() + 1, ".")
.concat(date.getDate())
}
}
},
}
// 달력 플러그인 실행
startDate[i].localization = {
placeholder: '날짜를 입력하세요',
selectedDateMessage: 'Selected date is',
prevMonthLabel: '이전 달 보기',
nextMonthLabel: '다음 달 보기',
monthSelectLabel: '달 선택',
yearSelectLabel: '년도 선택',
closeLabel: '달력 닫기',
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
identifier: "searchStartDt",
name: "eduHopeDt"
}
startDate[i].addEventListener("duetOpen", function (e) {
$(this).find(".duet-date__prev").attr("onclick", "calendarPrev(this);");
$(this).find(".duet-date__next").attr("onclick", "calendarNext(this);");
});
startDate[i].addEventListener("duetClose", function (e) {
startDt = e.target;
startDtVal = e.target.value;
startSub = startDtVal.replace(/\-/g, '');
var startDate_name = $(this).attr("name");
$(".startDate").each(function (idx, itm) {
$(this).find(".duet-date__input").attr("id", startDate_name);
$(this).find(".duet-date__input").attr("name", startDate_name);
/*console.log('startDate_name : ', startDate_name);*/
$(this).find(".duet-date__input").attr("value", startSub);
$(this).find(".duet-date__input").next().attr("name", startDate_name + "_submit");
$(this).find(".duet-date__input").next().attr("value", startSub);
});
});
setTimeout(function () {
// $(".duet-date__input").each(function(idx,itm){
// $(itm).attr("name","eduHopeDt"+idx);
// $(itm).attr("id","eduHopeDt"+idx);
// $(itm).attr("title","교육희망일을 YYYY.MM.DD 형식으로 입력해주세요");
// idx+=1;
// });
$("duet-date-picker .duet-date__input").attr("title", "교육희망일을 YYYY.MM.DD 형식으로 입력해주세요");
$("duet-date-picker .duet-date__input").each(function (idx, itm) {
$(itm).attr("name", "eduHopeDt" + idx);
$(itm).attr("id", "eduHopeDt" + idx);
idx += 1;
});
$("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
}, 100);
startDate[i].addEventListener("duetFocus", function (e) {
calendarinputset();
});
}
calendarinputset();
setTimeout(function () {
$("duet-date-picker .duet-date__input").each(function (idx, itm) {
//이벤트 추가 2023-12-08
if ($(itm).attr('onblur') == "undefined" || $(itm).attr('onblur') == null) {
$(itm).attr('onblur', '_fncEduHopeDt(' + idx + ');');
//alert("inin");
} else {
//alert("outout");
}
idx += 1;
});
//이벤트 추가 2023-12-08
$("duet-date-picker .duet-date__dialog").each(function (idx, itm) {
if ($(itm).attr('onclick') == "undefined" || $(itm).attr('onclick') == null) {
$(itm).attr('onclick', '_fncEduHopeDt(' + idx + ');');
//alert("inin");
} else {
//alert("outout");
}
idx += 1;
});
}, 100);
}
function calendarPrev(itm) {
var monthText = $(itm).closest(".duet-date__dialog-content").find(".duet-date__select--month").val();
var yearText = $(itm).closest(".duet-date__dialog-content").find(".duet-date__select--year").val();