[사용자]기반강화 강의목록 캘린더 추가 - 강의 상세 신청버튼 추가

This commit is contained in:
hylee 2023-10-18 10:43:55 +09:00
parent 1e257024f7
commit 5cb78771a4
5 changed files with 337 additions and 144 deletions

View File

@ -457,6 +457,45 @@ public class FndtnEnhanceTrnController {
}
/**
* 교육 list select
*/
@RequestMapping("/web/ve/aplct/fndtnEnhanceTrn/eduSelectAjax.do")
public ModelAndView eduSelectAjax(
@ModelAttribute("vEPrcsDetailVO") VEPrcsDetailVO vEPrcsDetailVO
, ModelMap model
, HttpServletRequest request
) throws Exception {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("jsonView");
//로그인 처리====================================
//로그인 정보 가져오기
String s_oprtnLoginCheckNInfo = checkLoginUtil.oprtnCheckNInfo(model);
if (!"".equals(s_oprtnLoginCheckNInfo)) {
modelAndView.addObject("result", "loginFail");
return modelAndView;
}
//로그인 처리====================================
LoginVO loginVO = checkLoginUtil.getAuthLoginVO(); //권한에 따른 로그인 정보 가져오기
SsoLoginVO ssoLoginVO = checkLoginUtil.getSSOLoginVO(request); //SSO 로그인 정보 가져오기
// 페이징 없이 select를 하기 위한
vEPrcsDetailVO.setRecordCountPerPage(10000);
vEPrcsDetailVO.setFirstIndex(0);
List<VEPrcsDetailVO> vEPrcsDetailVOList = vEPrcsAplctPrdService.selectPagingList4Fndth(vEPrcsDetailVO);
modelAndView.addObject("data", vEPrcsDetailVOList);
modelAndView.addObject("result", "success");
return modelAndView;
}
private String dateChk(VEPrcsDetailVO vEPrcsDetailVO , LocalDate currentDate) {

View File

@ -33,6 +33,9 @@
function ddlnCdSttsChk(){
var $ddlnCdStts = $("#ddlnCdStts");
// 상태에따라 싱천버튼 활성화 비활성화
var regStatus = true;
// 텍스트가 비어있는지 확인
if ($ddlnCdStts.text().trim() === "") {
@ -41,15 +44,18 @@
var strtPnttm = new Date(dateText.split("~")[0].trim().replace(/\./g, '-'));
var endPnttm = new Date(dateText.split("~")[1].trim().replace(/\./g, '-'));
var currentDate = new Date();
if (currentDate < strtPnttm) {
$ddlnCdStts.text("접수전");
} else if (currentDate >= strtPnttm && currentDate <= endPnttm) {
$ddlnCdStts.text("접수중");
regStatus = false;
} else if (currentDate > endPnttm) {
$ddlnCdStts.text("접수종료");
}
console.log('regStatus :: ', regStatus);
}
$('#regBtn').prop('disabled', regStatus); // 버튼 비활성화
}
function fncGoList(){
@ -223,5 +229,15 @@
</tbody>
</table>
</div>
<div class="btn_wrap btn_layout01">
<div class="btn_left">
</div>
<div class="btn_center">
</div>
<div class="btn_right">
<button type="button" id="regBtn" class="btnType04" onclick="fncEduReg('<c:out value="${list.prcsAplctPrdOrd}"/>');">신청</button>
</div>
</div>
</div>

View File

@ -17,6 +17,67 @@
$(document).ready(function(){
$('.tab_button').click(function(){
var type = $(this).data('info');
// list 타입이면 return;
if(type === 'list')
return false;
var data = fncEduSelect();
console.log('data : ', data);
// 월 하이라이트 체크
fn_MonthHL();
// 현재 날짜를 가져옵니다.
var today = new Date();
var currentMonth = today.getMonth() + 1;
// 데이터 추가 전 촐기화
$(".edu_program tbody").empty();
// 반복시작
$.each(data, function(index, item) {
var prcsNm = item.prcsNm;
var startDt = item.eduStrtPnttm;
// 교육 일수 구하기
var dayDiff = fn_dayDiff(item);
var newRow = $("<tr></tr>");
// prcsNm 값을 추가합니다.
newRow.append('<td class="edup_title">' + prcsNm + '</td>');
// dayDiff 값을 추가합니다.
newRow.append('<td class="edup_days">' + dayDiff + '</td>');
// 교육일정 칼럼을 초기화합니다.
for (var i = 1; i <= 12; i++) {
// 다음 월 class
var cellClass = "edup_pass"; // 기본값
// 전 월 class
if (i < currentMonth) {
cellClass = "edup_pre";
// 현재 월
} else if (i === currentMonth) {
cellClass = "edup_this";
}
if (i === parseInt(startDt.split('.')[1])) {
newRow.append('<td class="' + cellClass + '" onclick="fncGoDetail(\'' + item.prcsAplctPrdOrd + '\')" style="cursor:pointer;">' + parseInt(startDt.split('.')[2]) + '</td>');
} else {
newRow.append('<td class="' + cellClass + '"></td>');
}
}
// 테이블에 새로운 행을 추가합니다.
$(".edu_program tbody").append(newRow);
});
//-- /반복끝
});
// 상태값 확인
$(".ddlnCdStts").each(function() {
var $thisCell = $(this);
@ -38,9 +99,6 @@ $(document).ready(function(){
var ddlnCdText = '';
console.log('currentDate : ', currentDate);
console.log('strtPnttm : ', strtPnttm);
console.log('endPnttm : ', endPnttm);
console.log('');
if (currentDate < strtPnttm) {
ddlnCdText = "접수전";
@ -63,6 +121,69 @@ $(document).ready(function(){
});
function fn_dayDiff(item){
var startDt = item.eduStrtPnttm;
var endDt = item.eduDdlnPnttm;
// 날짜 문자열을 Date 객체로 변환합니다.
var startDate = new Date(startDt.split('.').join('-'));
var endDate = new Date(endDt.split('.').join('-'));
// 두 날짜 사이의 밀리초 차이를 구합니다.
var differenceInMilliseconds = endDate - startDate;
// 밀리초를 일수로 변환합니다. (1일 = 24시간 = 24 * 60분 = 24 * 60 * 60초 = 24 * 60 * 60 * 1000 밀리초)
var differenceInDays = differenceInMilliseconds / (24 * 60 * 60 * 1000);
// 시작 날짜와 종료 날짜를 모두 포함하여 계산
differenceInDays += 1;
return differenceInDays;
}
function fn_MonthHL(){
var today = new Date();
// 현재 달을 가져옵니다. (0부터 시작하므로 1을 더해줍니다.)
var currentMonth = today.getMonth() + 1;
// 해당하는 달의 <th> 요소에 'edup_this' 클래스를 추가합니다.
$("#monthTemp th:nth-child(" + currentMonth + ")").addClass("edup_this");
}
function fncEduSelect(){
var returnVal = '';
var data = new FormData(document.getElementById("selectForm"));
var url = "${pageContext.request.contextPath}/web/ve/aplct/fndtnEnhanceTrn/eduSelectAjax.do";
console.log(data);
$.ajax({
type:"POST",
url: url,
data: data,
dataType:'json',
async: false,
processData: false,
contentType: false,
cache: false,
success:function(returnData){
if(returnData.result == "success"){
console.log('returnData : ', returnData);
returnVal = returnData.data;
}
},
error:function(request , status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
return returnVal;
}
function fncEduReg(prcsAplctPrdOrd){
var regForm = document.regForm;
regForm.prcsAplctPrdOrd.value = prcsAplctPrdOrd;
@ -100,14 +221,12 @@ $(document).ready(function(){
listForm.submit();
}
function fncGoDetail(prcsAplctPrdOrd){
var viewForm = document.viewForm ;
viewForm.prcsAplctPrdOrd.value = prcsAplctPrdOrd ;
viewForm.action = "<c:url value='/web/ve/aplct/sspnIdtmt/eduAplctDetail.do'/>";
viewForm.action = "<c:url value='/web/ve/aplct/fndtnEnhanceTrn/eduAplctDetail.do'/>";
viewForm.submit();
}
function fncGoList(){
linkPage(1);
@ -140,6 +259,9 @@ $(document).ready(function(){
<form name="regForm" id="regForm">
<input type="hidden" name="prcsAplctPrdOrd">
</form>
<form name="selectForm" id="selectForm">
<input type="hidden" name="lctrDivCd" value="50">
</form>
<form name="viewForm" id="viewForm">
<input type="hidden" name="prcsAplctPrdOrd">
</form>
@ -151,7 +273,7 @@ $(document).ready(function(){
<input type="hidden" name="eduAplctOrd" id="eduAplctOrd" value="" />
<div class="cont_tit">
<h2>교육신청목록</h2>
<h2>강의목록</h2>
<div class="sns_go">
<button type="button" title="새창열림"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/facebook_icon.png" alt="페이스북 바로가기"></button>
<button type="button" title="새창열림"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/twitter_icon.png" alt="트위터 바로가기"></button>
@ -204,143 +326,14 @@ $(document).ready(function(){
<!-- tab -->
<ul class="tab tab_02">
<li class="tab_li on"><button type="button" class="tab_button">캘린더형</button></li>
<li class="tab_li"><button type="button" class="tab_button">리스트형</button></li>
<li class="tab_li on"><button type="button" class="tab_button" data-info="list">리스트형</button></li>
<li class="tab_li"><button type="button" class="tab_button" data-info="cal">캘린더형</button></li>
</ul>
<div class="tab_content on">
<div class="list_top">
<div class="list_top_left">
<label for="" class="label">교육과정 선택</label>
<select class="selType1">
<option for="">전체</option>
<option for="">지난교육일정</option>
<option for="">당월교육일정</option>
<option for="">교육예정일정</option>
</select>
</div>
<div class="btn_wrap">
<div class="calendar_wrap">
<duet-date-picker identifier="date" name="searchStartDt" class="startDate hydrated" value=""></duet-date-picker>
</div>
~
<div class="calendar_wrap">
<duet-date-picker identifier="date" name="searchEndDt" class="endDate hydrated" value=""></duet-date-picker>
</div>
<script src="/offeduadvc/visitEdu/usr/publish/script/duetdatepicker.js"></script>
<button type="button" class="btnType01">검색</button>
</div>
</div>
<div class="edup_result">
<div>총 <span>6</span>개의 검색결과가 있습니다.</div>
<ul>
<li class="pass">지난교육일정</li>
<li class="this">당월교육일정</li>
<li class="pre">교육예정일정</li>
</ul>
</div>
<div class="edu_program">
<table>
<caption>교육일정표</caption>
<colgroup>
<col style="width: ;">
<col style="width: ;">
<col style="width: ;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
</colgroup>
<thead>
<tr>
<th class="first" rowspan="2">교육과정명<br/><span class="ep_text">(상세 내용을 보시려면 과정을 클릭하세요)</span></th>
<th rowspan="2">일수</th>
<th rowspan="2">시간</th>
<th colspan="12">교육일정<sapn class="ep_text">(교육 시작일)</sapn></th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th class="edup_this">9</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_time">14</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr>
<tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_time">14</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr>
<tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_time">14</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab_content">
<div class="tab_content on">
<div class="list_top">
<div class="list_top_left">
<label for="searchStatus2" class="label">신청상태 선택</label>
@ -453,5 +446,136 @@ $(document).ready(function(){
<ui:pagination paginationInfo = "${paginationInfo}" type="image" jsFunction="linkPage" />
</div>
</div>
<div class="tab_content">
<!--
<div class="list_top">
<div class="list_top_left">
<label for="" class="label">교육과정 선택</label>
<select class="selType1">
<option for="">전체</option>
<option for="">지난교육일정</option>
<option for="">당월교육일정</option>
<option for="">교육예정일정</option>
</select>
</div>
<div class="btn_wrap">
<div class="calendar_wrap">
<duet-date-picker identifier="date" name="searchStartDt" class="startDate hydrated" value=""></duet-date-picker>
</div>
~
<div class="calendar_wrap">
<duet-date-picker identifier="date" name="searchEndDt" class="endDate hydrated" value=""></duet-date-picker>
</div>
<script src="/offeduadvc/visitEdu/usr/publish/script/duetdatepicker.js"></script>
<button type="button" class="btnType01">검색</button>
</div>
</div>
-->
<div class="edup_result">
<div>총 <span>6</span>개의 검색결과가 있습니다.</div>
<ul>
<li class="pass">지난교육일정</li>
<li class="this">당월교육일정</li>
<li class="pre">교육예정일정</li>
</ul>
</div>
<div class="edu_program">
<table>
<caption>교육일정표</caption>
<colgroup>
<col style="width: ;">
<col style="width: ;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
<col style="width:4%;">
</colgroup>
<thead>
<tr>
<th class="first" rowspan="2">교육과정명<br/><span class="ep_text">(상세 내용을 보시려면 과정을 클릭하세요)</span></th>
<th rowspan="2">일수</th>
<th colspan="12">교육일정<sapn class="ep_text">(교육 시작일)</sapn></th>
</tr>
<tr id="monthTemp">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<!-- <th class="edup_this">9</th> -->
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr>
<tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr>
<tr>
<td class="edup_title"><a href="#">[경영기획] 경영기획기본</a></td>
<td class="edup_days">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">15,22</td>
<td class="edup_pass"></td>
<td class="edup_pass">2</td>
<td class="edup_pass"></td>
<td class="edup_pass">24</td>
<td class="edup_pass"></td>
<td class="edup_pass">22</td>
<td class="edup_this">8</td>
<td class="edup_pre">14</td>
<td class="edup_pre">27</td>
<td class="edup_pre"></td>
</tr> -->
</tbody>
</table>
</div>
</div>
</form:form>
</div>

View File

@ -33,7 +33,10 @@
function ddlnCdSttsChk(){
var $ddlnCdStts = $("#ddlnCdStts");
// 상태에따라 싱천버튼 활성화 비활성화
var regStatus = true;
// 텍스트가 비어있는지 확인
if ($ddlnCdStts.text().trim() === "") {
var dateText = $ddlnCdStts.closest('table').find("td:eq(2)").text().trim();
@ -46,10 +49,12 @@
$ddlnCdStts.text("접수전");
} else if (currentDate >= strtPnttm && currentDate <= endPnttm) {
$ddlnCdStts.text("접수중");
regStatus = false;
} else if (currentDate > endPnttm) {
$ddlnCdStts.text("접수종료");
}
}
$('#regBtn').prop('disabled', regStatus); // 버튼 비활성화
}
function fncGoList(){
@ -223,5 +228,14 @@
</tbody>
</table>
</div>
<div class="btn_wrap btn_layout01">
<div class="btn_left">
</div>
<div class="btn_center">
</div>
<div class="btn_right">
<button type="button" id="regBtn" class="btnType04" onclick="fncEduReg('<c:out value="${list.prcsAplctPrdOrd}"/>');">신청</button>
</div>
</div>
</div>

View File

@ -216,7 +216,7 @@ $(document).ready(function(){
<input type="hidden" name="eduAplctOrd" id="eduAplctOrd" value="" />
<div class="cont_tit">
<h2>교육신청목록1</h2>
<h2>강의목록</h2>
<div class="sns_go">
<button type="button" title="새창열림"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/facebook_icon.png" alt="페이스북 바로가기"></button>
<button type="button" title="새창열림"><img src="${pageContext.request.contextPath}/visitEdu/usr/publish/images/content/twitter_icon.png" alt="트위터 바로가기"></button>