541 lines
20 KiB
Plaintext
541 lines
20 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
||
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<script src="${pageContext.request.contextPath}/js/jquery/jquery-1.10.2.min.js"></script>
|
||
<script src="${pageContext.request.contextPath}/js/admins/user.js"></script>
|
||
<script src="${pageContext.request.contextPath}/js/admins/common.js"></script>
|
||
<link rel="stylesheet" HREF="${pageContext.request.contextPath}/css/admins/style.css" type="text/css">
|
||
|
||
<script>
|
||
var context = "${pageContext.request.contextPath}";
|
||
|
||
let xhr;
|
||
if(window.XMLHttpRequest) {
|
||
xhr = new XMLHttpRequest();
|
||
} else {
|
||
// IE5, IE6 일때
|
||
xhr = new ActiveXObject("Microsoft.XMLHTTP");
|
||
}
|
||
|
||
function unixTimestampToFormattedDate(unixTimestamp) {
|
||
const date = new Date(unixTimestamp);
|
||
|
||
const year = date.getFullYear();
|
||
const month = ('0' + (date.getMonth() + 1)).slice(-2); // 월은 0부터 시작하므로 1을 더하고, 두 자리로 만들기 위해 0을 앞에 붙인 후 마지막 두 자리만 취함
|
||
const day = ('0' + date.getDate()).slice(-2); // 일도 두 자리로 만들기 위해 0을 앞에 붙인 후 마지막 두 자리만 취함
|
||
|
||
const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토'];
|
||
const dayOfWeek = daysOfWeek[date.getDay()];
|
||
|
||
return year + '-' + month + '-' + day + '(' + dayOfWeek + ')';
|
||
}
|
||
|
||
|
||
function formatUnixTimestamp(unixTimestamp) {
|
||
const date = new Date(unixTimestamp);
|
||
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더합니다.
|
||
const day = date.getDate();
|
||
let hours = date.getHours();
|
||
const minutes = date.getMinutes();
|
||
|
||
let ampm = "오전";
|
||
if (hours >= 12) {
|
||
ampm = "오후";
|
||
hours = hours - 12;
|
||
}
|
||
if (hours === 0) {
|
||
hours = 12; // 자정은 12시로 표시
|
||
}
|
||
|
||
return year+"년 " + month +"월 " + day + "일 " + ampm + " " + hours + "시";
|
||
}
|
||
|
||
function onClickDeleteCourseItem(e) {
|
||
|
||
const whtRegIdEle = document.querySelector('input[name="wht-reg-id"]:checked');
|
||
if( whtRegIdEle == false ) {
|
||
alert('삭제할 교육을 선택하십시오');
|
||
return false;
|
||
}
|
||
|
||
|
||
const whtRegId = whtRegIdEle.getAttribute('data-seq');
|
||
const trainingName = whtRegIdEle.getAttribute('data-training-name');
|
||
|
||
if(confirm("아래 집합교육을 삭제 하시겠습니까? \n\n " + trainingName + "[" + whtRegId + "]")) {
|
||
} else {
|
||
return false;
|
||
}
|
||
var jsonData = new Array();
|
||
jsonData.push({whtRegId});
|
||
|
||
console.log('%o', jsonData);
|
||
|
||
|
||
xhr.open('POST', 'home-training-index/item/delete.do', true);
|
||
xhr.setRequestHeader('Content-type', 'application/json');
|
||
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||
// 요청 성공 시 처리
|
||
console.log(xhr.responseText);
|
||
const obj = JSON.parse(xhr.responseText);
|
||
updateList();
|
||
alert(obj.message);
|
||
} else if (xhr.readyState === 4) {
|
||
// 요청 실패 시 처리
|
||
console.error('요청 실패:', xhr.status);
|
||
}
|
||
};
|
||
|
||
xhr.send(JSON.stringify(jsonData));
|
||
}
|
||
|
||
|
||
function getCurrentTimeFormatted() {
|
||
const now = new Date();
|
||
|
||
const year = now.getFullYear();
|
||
const month = ('0' + (now.getMonth() + 1)).slice(-2); // 월은 0부터 시작하므로 1을 더하고, 두 자리로 만들기 위해 0을 앞에 붙인 후 마지막 두 자리를 가져옵니다.
|
||
const day = ('0' + now.getDate()).slice(-2);
|
||
const hours = ('0' + now.getHours()).slice(-2);
|
||
const minutes = ('0' + now.getMinutes()).slice(-2);
|
||
const seconds = ('0' + now.getSeconds()).slice(-2);
|
||
|
||
return year + month + day + "_" + hours + minutes + seconds;
|
||
}
|
||
|
||
|
||
function downloadTableAsCSV(tableId) {
|
||
|
||
let filename = getCurrentTimeFormatted() + '_' + String(document.getElementById('home-visit-item-training-name').innerHTML).replace(/ /g, "_") + '.csv';
|
||
|
||
|
||
// 테이블 요소 가져오기
|
||
var table = document.getElementById(tableId);
|
||
|
||
// CSV 문자열 생성
|
||
var csv = [];
|
||
var rows = table.querySelectorAll("tr");
|
||
|
||
for (var i = 0; i < rows.length; i++) {
|
||
var row = [], cols = rows[i].querySelectorAll("td, th");
|
||
|
||
for (var j =
|
||
0; j < cols.length; j++) {
|
||
// 특수 문자 처리 및 공백 제거
|
||
var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, "").replace(/(\s\s)/gm, " ");
|
||
data = data.replace(/"/g, '""'); // 큰따옴표 이스케이프
|
||
row.push('"' + data + '"');
|
||
}
|
||
|
||
csv.push(row.join(","));
|
||
}
|
||
|
||
var csvString = csv.join("\n");
|
||
|
||
// CSV 파일 다운로드
|
||
var link = document.createElement("a");
|
||
link.style.display = "none";
|
||
link.setAttribute("target", "_blank");
|
||
link.setAttribute("href", 'data:text/csv;charset=utf-8,' + encodeURIComponent(
|
||
csvString));
|
||
link.setAttribute("download", filename);
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body
|
||
.removeChild(link);
|
||
}
|
||
|
||
function onClickCourseItem(e) {
|
||
const wvtRegId = e.getAttribute('data-seq');
|
||
const trainingName = e.getAttribute('data-training-name');
|
||
|
||
|
||
// 클릭된 행에서 input radio 요소 찾기
|
||
const radioInput = e.querySelector('input[type="radio"][name="wht-reg-id"]');
|
||
|
||
// input radio 요소 체크
|
||
if (radioInput) {
|
||
radioInput.checked = true;
|
||
}
|
||
|
||
xhr.open('GET', 'home-training-index/item/list.do?wvtRegId=' + wvtRegId, true);
|
||
xhr.setRequestHeader('Content-type', 'application/json');
|
||
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||
// 요청 성공 시 처리
|
||
const obj = JSON.parse(xhr.responseText);
|
||
const data = obj.data;
|
||
|
||
// 명단 보여주기
|
||
document.getElementById('home-visit-item').style.display = "block";
|
||
|
||
// 교육명 설정
|
||
document.getElementById('home-visit-item-training-name').innerHTML = trainingName;
|
||
|
||
// 목록 생성
|
||
{
|
||
const homeVisitItemListEle = document.getElementById('home-visit-item-list');
|
||
let homeVisitItemListHTML = '';
|
||
let actualEducationParticipants = 0;
|
||
for( idx in data ) {
|
||
|
||
|
||
//A:신청함, D:삭제, C:취소, T:출첵 완료
|
||
if( data[idx].stateCode === 'D' ) {
|
||
continue;
|
||
} else if( data[idx].stateCode === 'C' ) {
|
||
continue;
|
||
}
|
||
actualEducationParticipants ++;
|
||
|
||
homeVisitItemListHTML +=
|
||
`
|
||
<tr onClick="onClickCourseItem(this)" data-seq="` + data[idx].whtRegId +`" data-training-name="` + data[idx].trainingName +`" >
|
||
<td>` + data[idx].reqName + `</td>
|
||
<td>` + data[idx].companyName + `</td>
|
||
<td>` + data[idx].reqDept + `</td>
|
||
<td>` + data[idx].reqPosition + `</td>
|
||
<td>` + data[idx].reqTel + `</td>
|
||
<td>` + data[idx].reqEmail + `</td>
|
||
<td>` + `` + `</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
//<td>` + formatUnixTimestamp(data[idx].trainingDatetime) + `</td>
|
||
if( actualEducationParticipants === 0 ) {
|
||
homeVisitItemListHTML =
|
||
`
|
||
<tr>
|
||
<td colspan="7">참여한 인원이 없습니다.</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
homeVisitItemListEle.innerHTML = homeVisitItemListHTML;
|
||
}
|
||
|
||
} else if (xhr.readyState === 4) {
|
||
// 요청 실패 시 처리
|
||
console.error('요청 실패:', xhr.status);
|
||
}
|
||
};
|
||
|
||
xhr.send();
|
||
}
|
||
|
||
function getNameByStateCodeHomeVisitList(stateCode) {
|
||
//A:접수중,D:삭제,C:취소,P:예정,F:마감
|
||
if( stateCode === 'A' ) {
|
||
return '접수중';
|
||
} else if( stateCode === 'D' ) {
|
||
return '삭제됨';
|
||
} else if( stateCode === 'C' ) {
|
||
return '취소됨';
|
||
} else if( stateCode === 'P' ) {
|
||
return '오픈전';
|
||
} else if( stateCode === 'F' ) {
|
||
return '마감됨';
|
||
}
|
||
}
|
||
|
||
function updateList() {
|
||
xhr.open('GET', 'home-training-index/list.do', true);
|
||
xhr.setRequestHeader('Content-type', 'application/json');
|
||
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||
// 요청 성공 시 처리
|
||
const obj = JSON.parse(xhr.responseText);
|
||
const data = obj.data;
|
||
|
||
const homeVisitListEle = document.getElementById('home-visit-list');
|
||
let homeVisitListHTML = '';
|
||
|
||
let aliveEducationsCount = 0;
|
||
for( idx in data ) {
|
||
|
||
////A:접수중,D:삭제,C:취소,P:예정,F:마감
|
||
if( data[idx].stateCode === 'D' ) {
|
||
continue;
|
||
} else if( data[idx].stateCode === 'C' ) {
|
||
continue;
|
||
}
|
||
aliveEducationsCount++;
|
||
|
||
homeVisitListHTML +=
|
||
`
|
||
<tr onClick="onClickCourseItem(this)" data-seq="` + data[idx].whtRegId +`" data-training-name="` + data[idx].trainingName +`" >
|
||
<td><input type="radio" name="wht-reg-id" value="` + data[idx].whtRegId +`" data-seq="` + data[idx].whtRegId +`" data-training-name="` + data[idx].trainingName +`"></td>
|
||
<td>` + data[idx].whtRegId + `</td>
|
||
<td>` + data[idx].trainingName + `</td>
|
||
<td>` + formatUnixTimestamp(data[idx].trainingDatetime) + `</td>
|
||
<td>` + data[idx].trainingLocation + `</td>
|
||
<td>` + unixTimestampToFormattedDate(data[idx].regStartDate) + `~` + unixTimestampToFormattedDate(data[idx].regEndDate) + `</td>
|
||
<td>` + data[idx].attendance + `명 ` + getNameByStateCodeHomeVisitList(data[idx].stateCode) + `</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
if( aliveEducationsCount === 0 ) {
|
||
homeVisitListHTML =
|
||
`
|
||
<tr>
|
||
<td colspan="7">등록된 집합교육이 없습니다.</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
homeVisitListEle.innerHTML = homeVisitListHTML;
|
||
|
||
} else if (xhr.readyState === 4) {
|
||
// 요청 실패 시 처리
|
||
console.error('요청 실패:', xhr.status);
|
||
}
|
||
};
|
||
|
||
xhr.send();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
|
||
const addBtnEle = document.getElementById('add-btn');
|
||
if( addBtnEle ) {
|
||
addBtnEle.addEventListener('click', function () {
|
||
var contentAddTable = document.getElementById('ContentAdd');
|
||
if (contentAddTable.style.display === 'none' || contentAddTable.style.display === '') {
|
||
contentAddTable.style.display = 'block';
|
||
} else {
|
||
contentAddTable.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
const rows = document.querySelectorAll('.table-contents tbody tr td:nth-child(7)');
|
||
|
||
rows.forEach(function (cell) {
|
||
|
||
const text = cell.textContent;
|
||
const number = parseInt(text.match(/\d+/));
|
||
|
||
if (number >= 100) {
|
||
cell.style.color = 'red';
|
||
} else {
|
||
cell.style.color = 'blue';
|
||
}
|
||
});
|
||
|
||
|
||
const requestRegistryButtonEle = document.getElementById('request-registry-button');
|
||
if( requestRegistryButtonEle ) {
|
||
requestRegistryButtonEle.addEventListener('click', function () {
|
||
|
||
var dataIndexValue;
|
||
|
||
var jsonData = new Array();
|
||
for (var i = 0; i < 1 ; i++) { // 여러 개를 한 번에 입력받는다면 입력받는 레코드만큼 loop를 순환하도록 수정되어야 한다.
|
||
var jsonItem = {};
|
||
//dataIndexValue = tableDataElements[i].getAttribute('data-index');
|
||
|
||
// 집합교육명
|
||
var trainingNameEle = document.getElementById('training-name');
|
||
if (trainingNameEle) {
|
||
jsonItem.trainingName = trainingNameEle.value;
|
||
}
|
||
// 교육일시
|
||
var trainingDatetimeEle = document.getElementById('training-datetime');
|
||
if (trainingDatetimeEle) {
|
||
jsonItem.trainingDatetime = trainingDatetimeEle.value;
|
||
}
|
||
// 교육장소
|
||
var trainingLocationEle = document.getElementById('training-location');
|
||
if (trainingLocationEle) {
|
||
jsonItem.trainingLocation = trainingLocationEle.value;
|
||
}
|
||
// 접수기간 - 시작
|
||
var regStartDateEle = document.getElementById('reg-start-date');
|
||
if (regStartDateEle) {
|
||
jsonItem.regStartDate = regStartDateEle.value;
|
||
}
|
||
// 접수기간 - 종료
|
||
var regEndDateEle = document.getElementById('reg-end-date');
|
||
if (regEndDateEle) {
|
||
jsonItem.regEndDate = regEndDateEle.value;
|
||
}
|
||
jsonData.push(jsonItem);
|
||
}
|
||
|
||
console.log('%o', jsonData);
|
||
|
||
|
||
|
||
xhr.open('POST', 'home-training-index/add.do', true);
|
||
xhr.setRequestHeader('Content-type', 'application/json');
|
||
|
||
xhr.onreadystatechange = function() {
|
||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||
// 요청 성공 시 처리
|
||
console.log(xhr.responseText);
|
||
const obj = JSON.parse(xhr.responseText);
|
||
updateList();
|
||
alert(obj.message);
|
||
} else if (xhr.readyState === 4) {
|
||
// 요청 실패 시 처리
|
||
console.error('요청 실패:', xhr.status);
|
||
}
|
||
};
|
||
|
||
xhr.send(JSON.stringify(jsonData));
|
||
});
|
||
}
|
||
|
||
const trainingDatetimeInput = document.getElementById('training-datetime');
|
||
const regEndDateInput = document.getElementById('reg-end-date');
|
||
|
||
trainingDatetimeInput.addEventListener('change', function() {
|
||
const selectedDatetime = new Date(this.value);
|
||
const year = selectedDatetime.getFullYear();
|
||
const month = ('0' + (selectedDatetime.getMonth() + 1)).slice(-2);
|
||
const day = ('0' + selectedDatetime.getDate()).slice(-2);
|
||
const formattedDate = year + '-' + month + '-' + day;
|
||
|
||
regEndDateInput.value = formattedDate;
|
||
|
||
|
||
let [date, time] = this.value.split('T');
|
||
time = time.split(':');
|
||
time[1] = '00'; // 분을 00으로 설정
|
||
const newDatetime = date + 'T' + time.join(':');
|
||
this.value = newDatetime;
|
||
|
||
});
|
||
|
||
|
||
|
||
{
|
||
const regStartDateInput = document.getElementById('reg-start-date');
|
||
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = ('0' + (today.getMonth() + 1)).slice(-2);
|
||
const day = ('0' + today.getDate()).slice(-2);
|
||
const formattedDate = year + '-' + month + '-' + day;
|
||
|
||
regStartDateInput.value = formattedDate;
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
updateList();
|
||
});
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>집합교육</h1>
|
||
<div class="home-trainning">
|
||
<div class="contentBtn">
|
||
<button class="modify" onClick="alert('기능 준비중');">수정</button>
|
||
<button class="delete" onClick="onClickDeleteCourseItem(this);">삭제</button>
|
||
</div>
|
||
<table class="Table_Main course-list-table table-contents" id="course-list-table">
|
||
<colgroup>
|
||
<col style="width:40px;">
|
||
<col style="width:40px;">
|
||
<col style="width:280px;">
|
||
<col style="width:200px;">
|
||
<col style="width:215px;">
|
||
<col style="width:265px;">
|
||
<col style="width:90px;">
|
||
</colgroup>
|
||
<thead class="Table_List">
|
||
<tr>
|
||
<th></th>
|
||
<th>번호</th>
|
||
<th>집합교육명</th>
|
||
<th>교육일시</th>
|
||
<th>교육장소</th>
|
||
<th>접수기간</th>
|
||
<th>신청</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="home-visit-list">
|
||
</tbody>
|
||
</table>
|
||
<button class="AddBtn" id="add-btn">추가</button>
|
||
|
||
<!-- 추가 버튼 눌렸을 경우 -->
|
||
<table class="Table_Main new-course-creation-table" id="ContentAdd">
|
||
<colgroup>
|
||
<col style="width:340px;">
|
||
<col style="width:200px;">
|
||
<col style="width:250px;">
|
||
<col style="width:270px;">
|
||
<col style="width:100px;">
|
||
</colgroup>
|
||
<thead class="Table_List">
|
||
<tr>
|
||
<th>집합교육명</th>
|
||
<th>교육일시</th>
|
||
<th>교육장소</th>
|
||
<th>접수기간</th>
|
||
<th>신청</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="new-course-creation-tbody">
|
||
<tr>
|
||
<td><input type="text" id="training-name" name="training-name" class="training-name" placeholder="교육명을 입력하세요" /></td>
|
||
<td><input type="datetime-local" id="training-datetime" name="training-datetime" class="training-datetime" placeholder="" /></td>
|
||
<td><input type="text" id="training-location" name="training-location" class="training-location" placeholder="교육장소를 입력하세요" /></td>
|
||
<td><input type="date" id="reg-start-date" name="reg-start-date" class="reg-start-date reg-start-end-date" placeholder="" /> ~ <input type="date" value="2024-11-04" id="reg-end-date" name="reg-end-date" class="reg-end-date reg-start-end-date" placeholder="" /></td>
|
||
<td><button id="request-registry-button" class="register">등록</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
|
||
<!-- 명단 클릭 했을 경우 -->
|
||
<div class="home-visit-item" id="home-visit-item">
|
||
<h2 class="DateTitle">교육 대상자 명단</h2>
|
||
<span class="DateText">⁕ 신청 집합교육명 : <span id="home-visit-item-training-name" class="home-visit-item-training-name"></span>
|
||
<button onClick="downloadTableAsCSV('home-visit-item-table')" id="export-list-of-participants-attending-the-education" class="export-list-of-participants-attending-the-education" style="float: right; margin-bottom: 10px;">교육 대상자 명단 내보내기</button>
|
||
</span>
|
||
<table class="Table_Main table-contents" id="home-visit-item-table">
|
||
<colgroup>
|
||
<col style="width:80px;">
|
||
<col style="width:230px;">
|
||
<col style="width:200px;">
|
||
<col style="width:200px;">
|
||
<col style="width:150px;">
|
||
<col style="width:70px;">
|
||
<col style="width:120px;">
|
||
</colgroup>
|
||
<thead class="Table_List">
|
||
<tr>
|
||
<th>신청자</th>
|
||
<th>소속기관</th>
|
||
<th>부서</th>
|
||
<th>직급</th>
|
||
<th>연락처</th>
|
||
<th>이메일</th>
|
||
<th>비고</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="home-visit-item-list">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|