geoinfo_admin/old/home-training-index.jsp

541 lines
20 KiB
Plaintext
Raw Normal View History

2024-11-06 07:22:29 +00:00
<%@ 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>