지도사용요청 작성 페이지 모달화 작업중.
parent
3c4096813a
commit
416a7380eb
|
|
@ -214,7 +214,7 @@ public class MapController {
|
|||
|
||||
model.addAttribute("layersVO", layersVO);
|
||||
model.addAttribute("cityList", cityList);
|
||||
return "map/requestWrite";
|
||||
return "map/html/requestWrite";
|
||||
} catch (Exception e) {
|
||||
// TODO Auto-generated catch block
|
||||
e.printStackTrace();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
|
||||
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||||
<script src="../../../js/admin/request.js"></script>
|
||||
<script src="/js/admin/request.js"></script>
|
||||
|
||||
|
||||
<div class="section_content">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||||
|
||||
<script src="<c:url value='/js/map/request.js' />"></script>
|
||||
<script type="text/javascript">
|
||||
var start = "${b_start}";
|
||||
var end = "${b_end}";
|
||||
var now = "${current_page}";
|
||||
</script>
|
||||
<div class="section_title">
|
||||
<!-- <p>현장 지원 시스템</p> -->
|
||||
</div>
|
||||
|
|
@ -14,111 +20,69 @@
|
|||
<form:form commandName="useRequestSearchVO" id="searchForm" name="searchForm" method="get" >
|
||||
<div class="row justify-content-between bg-white mx-3 py-2">
|
||||
<input type="hidden" name="id" />
|
||||
<table class="table table-hover text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th>작업명</th>
|
||||
<th>날짜</th>
|
||||
<th>상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="table table-hover text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th>작업명</th>
|
||||
<th>날짜</th>
|
||||
<th>상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<c:if test="${count >= 1}">
|
||||
<c:forEach var="item" items="${useRequestList}" varStatus="idx">
|
||||
<tr>
|
||||
<td>${idx.count}</td>
|
||||
<td class="title-td" style="width:70%;"><a href="/map/request/<c:out value='${item.idx}' />">${item.title}</a></td>
|
||||
<td class="td_date">${item.r_date}</td>
|
||||
<td>
|
||||
<c:choose>
|
||||
<c:when test="${item.status eq '99'}"><span class="card-warning"><c:out value='승인대기' /></span></c:when>
|
||||
<c:when test="${item.status eq '0'}"><span class="card-success"><c:out value='승인' /></span></c:when>
|
||||
<c:when test="${item.status eq '-1'}"><span class="card-default"><c:out value='반려' /></span></c:when>
|
||||
</c:choose>
|
||||
</td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</c:if>
|
||||
<c:if test="${count == 0}">
|
||||
<tr><td colspan="4">요청한 목록이 없습니다.</td></tr>
|
||||
</c:if>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="div_write">
|
||||
<p>
|
||||
<input class="btn btn-secondary" type="button" value="작성" onclick="location.href='/map/reqWrite'" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-page">
|
||||
<form:hidden path="pageIndex" />
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_link_page" />
|
||||
</ul>
|
||||
</nav>
|
||||
<c:if test="${count >= 1}">
|
||||
<c:forEach var="item" items="${useRequestList}" varStatus="idx">
|
||||
<tr>
|
||||
<td>${idx.count}</td>
|
||||
<td class="title-td" style="width:70%;"><a href="/map/request/<c:out value='${item.idx}' />">${item.title}</a></td>
|
||||
<td class="td_date">${item.r_date}</td>
|
||||
<td>
|
||||
<c:choose>
|
||||
<c:when test="${item.status eq '99'}"><span class="card-warning"><c:out value='승인대기' /></span></c:when>
|
||||
<c:when test="${item.status eq '0'}"><span class="card-success"><c:out value='승인' /></span></c:when>
|
||||
<c:when test="${item.status eq '-1'}"><span class="card-default"><c:out value='반려' /></span></c:when>
|
||||
</c:choose>
|
||||
</td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</c:if>
|
||||
<c:if test="${count == 0}">
|
||||
<tr><td colspan="4">요청한 목록이 없습니다.</td></tr>
|
||||
</c:if>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row justify-content-between mx-3 py-2">
|
||||
<div class="col-auto"></div>
|
||||
<div class="col-auto">
|
||||
<form:hidden path="pageIndex" />
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_link_page" />
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input class="btn btn-secondary" id="mapRequestModalBtn" type="button" value="작성"/>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
</div>
|
||||
<div class="section_btn">
|
||||
<!-- <p><input class="btn" type="button" value="관리" onclick="location.href='fieldDetail.html'" /></p> -->
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var start = "${b_start}";
|
||||
var end = "${b_end}";
|
||||
var now = "${current_page}";
|
||||
|
||||
$(function(){
|
||||
viewPaging();
|
||||
$(".r_date").each(function(){
|
||||
var r_date = $(this).text();
|
||||
var nowDate = new Date();
|
||||
var r_date = new Date(r_date);
|
||||
var getDay = getFormatDate(r_date);
|
||||
var nowDay = getFormatDate(nowDate);
|
||||
<div class="modal fade" id="mapRequestModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="mapRequestModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="mapRequestModalLabel">지도 사용 요청</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="mapRequestModalBody">
|
||||
|
||||
if(getDay === nowDay){
|
||||
$(this).html(getFormatTime(r_date));
|
||||
}else{
|
||||
$(this).html(getDay);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* 날짜포맷 yyyy-MM-dd 변환 */
|
||||
function getFormatDate(date){
|
||||
var year = date.getFullYear();
|
||||
var month = (1 + date.getMonth());
|
||||
month = month >= 10 ? month : '0' + month;
|
||||
var day = date.getDate();
|
||||
day = day >= 10 ? day : '0' + day;
|
||||
return year + '-' + month + '-' + day;
|
||||
}
|
||||
|
||||
function getFormatTime(date){
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
return hours + ':' + minutes;
|
||||
}
|
||||
|
||||
function viewPaging(){
|
||||
for (step = start; step < end; step++) {
|
||||
if(step == now){
|
||||
$("#paging").append("<strong>"+step+"</strong>");
|
||||
}else{
|
||||
$("#paging").append("<a href='userPermissionList.do?&page="+ step +"'>"+step+"</a>");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fn_link_page(pageNo) {
|
||||
document.searchForm.pageIndex.value = pageNo;
|
||||
document.searchForm.action = "<c:url value='/map/request' />";
|
||||
document.searchForm.submit();
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,369 +4,177 @@
|
|||
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||||
|
||||
<form:form commandName="useRequestVO" name="frm" method="POST" action="/map/insertReq" id="insertFrm">
|
||||
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
|
||||
<div class="section_title">
|
||||
<!-- <p>현장 지원 시스템</p> -->
|
||||
</div>
|
||||
<div class="section_content">
|
||||
<input type="hidden" id="layers" name="layers"/>
|
||||
<input type="hidden" id="places" name="places"/>
|
||||
|
||||
<table class="detail_table">
|
||||
<thead>
|
||||
<tr><th colspan="5" style="text-align: center;">지도 사용 요청</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">작업명</th>
|
||||
<td><input type="text" class="form-control" id="title" name="title" autocomplete="off"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">기간</th>
|
||||
<td>
|
||||
<input type="text" class="form-control input-datepicker" readonly id="startDate" name= "s_date" onchange="dateChange('start');"> ~
|
||||
<input type="text" class="form-control input-datepicker" readonly id="endDate" name="e_date" onchange="dateChange('end');">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">장소</th>
|
||||
<td id="area_select_td">
|
||||
<div>
|
||||
<select id="city" name="city" onchange="changeAreaList(this.value, this.name)" class="form-control input-area-select">
|
||||
<option value="0">::시/도::</option>
|
||||
<c:forEach var="item" items="${cityList}" varStatus="status">
|
||||
<option value="${item.code}"><c:out value="${item.area}"/></option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
<select id="county" name="county" onchange="changeAreaList(this.value, this.name);" class="form-control input-area-select">
|
||||
<option value="0">::선택::</option>
|
||||
</select>
|
||||
<select id="town" name="town" class="form-control input-area-select">
|
||||
<option value="0">::선택::</option>
|
||||
</select>
|
||||
<span class="btn btn-outline-primary" onclick="addAreaBtn();">추가</span>
|
||||
</div>
|
||||
<div id="addedArea" class="addedArea">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="3">레이어</th>
|
||||
<th><label>지하시설물</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'facility'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label>지하구조물</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'structure'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label>지반</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'ground'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">요청 내용</th>
|
||||
<td><textarea class="form-control" rows="3" style="resize:none;" name=user_msg></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section_btn">
|
||||
<p class="search_p1">
|
||||
<input class="btn btn-primary" type="button" value="목록" onclick="location.href='/map/request'" />
|
||||
</p>
|
||||
<p class="search_p2">
|
||||
<input class="btn btn-success" type="button" value="요청" onclick="insertReqBtn(); return false;" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
|
||||
<script type="text/javascript">
|
||||
var areaAddCount = 0;
|
||||
/*
|
||||
* 지역 추가
|
||||
*/
|
||||
function addAreaBtn(){
|
||||
var addedAreaWrapCnt = $(".addedAreaWrap").length;
|
||||
|
||||
if(addedAreaWrapCnt < 3){
|
||||
if($("#city").val() != "0"){
|
||||
areaAddCount++;
|
||||
var selectAreaCode = null;
|
||||
var selectAreaName = null;
|
||||
if($("#town").val() == "0"){
|
||||
selectArea = $("#county").val();
|
||||
selectAreaName = $("#city option:selected").text() +" "+ $("#county option:selected").text();
|
||||
if($("#county").val() == "0"){
|
||||
selectArea = $("#city").val();
|
||||
selectAreaName = $("#city option:selected").text();
|
||||
}
|
||||
}else{
|
||||
selectArea = $("#town").val();
|
||||
selectAreaName = $("#city option:selected").text()+" "+$("#county option:selected").text()+" "+$("#town option:selected").text();
|
||||
}
|
||||
var overLapArea = false;
|
||||
$("input[name=selectArea]").each(function(){
|
||||
if($(this).val() == selectArea){
|
||||
overLapArea = true;
|
||||
}
|
||||
});
|
||||
if(overLapArea){
|
||||
alert('이미 등록된 장소 입니다.');
|
||||
return false;
|
||||
}else{
|
||||
var tag = '';
|
||||
tag += '<span id="addedAreaWrap'+areaAddCount+'" class="addedAreaWrap">';
|
||||
tag += selectAreaName;
|
||||
tag += '<span class="glyphicon glyphicon-remove point-cursor" onclick="removeAreaBtn('+areaAddCount+');"></span>';
|
||||
tag += '<input type="hidden" name="selectArea" value="'+selectArea+'" />';
|
||||
tag += '</span>';
|
||||
$("#addedArea").append(tag);
|
||||
}
|
||||
}else{
|
||||
alert('지역을 선택해주세요.');
|
||||
}
|
||||
}else{
|
||||
alert('더 이상 추가 하실 수 없습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 변경
|
||||
*/
|
||||
function changeAreaList(code, area){
|
||||
var target = null
|
||||
if(area == "city"){
|
||||
target = $("#county");
|
||||
}else{
|
||||
target = $("#town");
|
||||
}
|
||||
resetSelectBox(area);
|
||||
if(code != 0){
|
||||
$.ajax({
|
||||
url : "<c:url value='/selectAreaList' />",
|
||||
type : "GET",
|
||||
dataType : "json",
|
||||
data:{
|
||||
"code" : code,
|
||||
"area" : area
|
||||
},
|
||||
success : function(data){
|
||||
if(data){
|
||||
if(area == "city"){
|
||||
for(var idx in data){
|
||||
target.append("<option value='"+data[idx].code+"'>"+data[idx].area+"</option>");
|
||||
}
|
||||
}else{
|
||||
for(var idx in data){
|
||||
target.append("<option value='"+data[idx].code+"'>"+data[idx].area+"</option>");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 삭제
|
||||
* removeNum : 삭제할 태그 번호
|
||||
*/
|
||||
function removeAreaBtn(removeNum){
|
||||
$("#addedAreaWrap"+removeNum).remove();
|
||||
}
|
||||
|
||||
function resetSelectBox(area){
|
||||
var baseOption = "<option value='0'>::전체::</option>";
|
||||
if(area == "county"){
|
||||
$("#town").empty();
|
||||
$("#town").append(baseOption);
|
||||
}else if(area == "city"){
|
||||
$("#county").empty();
|
||||
$("#town").empty();
|
||||
$("#county").append(baseOption);
|
||||
$("#town").append(baseOption);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 날짜 변경
|
||||
* state : 시작 또는 종료
|
||||
*/
|
||||
function dateChange(state){
|
||||
var startDate = $("#startDate").val();
|
||||
var endDate = $("#endDate").val();
|
||||
if(endDate != "" && startDate > endDate){
|
||||
if(state == "start"){
|
||||
$("#endDate").val(startDate);
|
||||
}else{
|
||||
$("#startDate").val(endDate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 유효성 검사
|
||||
*/
|
||||
function areaCheck(){
|
||||
var selectArr = [];
|
||||
$("input[name=selectArea]").each(function(){
|
||||
selectArr.push($(this).val());
|
||||
});
|
||||
$("#places").val(selectArr);
|
||||
|
||||
if($("#places").val() == ""){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 레이어 유효성 검사
|
||||
*/
|
||||
function layersCheck(){
|
||||
var checkArr = []; // 배열 초기화
|
||||
$('input:checkbox[name="facility"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
$('input:checkbox[name="structure"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
$('input:checkbox[name="ground"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
|
||||
$('#layers').val(checkArr);
|
||||
|
||||
if($('#layers').val() == ""){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function insertReqBtn(){
|
||||
if($("#title").val() == ""){
|
||||
alert('작업명을 입력해주세요.');
|
||||
$("#title").focus();
|
||||
return;
|
||||
}else if($("#startDate").val() == ""){
|
||||
alert('시작 기간을 입력해주세요.');
|
||||
$("#startDate").focus();
|
||||
return;
|
||||
}else if($("#endDate").val() == ""){
|
||||
alert('종료 기간을 입력해주세요.');
|
||||
$("#endDate").focus();
|
||||
return;
|
||||
}else if(!areaCheck()){
|
||||
alert('지역을 추가해주세요.');
|
||||
return;
|
||||
}else if(!layersCheck()){
|
||||
alert('레이어를 선택해주세요.');
|
||||
return;
|
||||
}else{
|
||||
$("#insertFrm").submit();
|
||||
}
|
||||
}
|
||||
|
||||
$(function(){
|
||||
$("#startDate").datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
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월'],
|
||||
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
yearSuffix: '년',
|
||||
showMonthAfterYear:true,
|
||||
changeYear : true,
|
||||
changeMonth : true
|
||||
});
|
||||
|
||||
$("#endDate").datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
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월'],
|
||||
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
yearSuffix: '년',
|
||||
showMonthAfterYear:true,
|
||||
changeYear : true,
|
||||
changeMonth : true
|
||||
});
|
||||
|
||||
//전체선택 체크박스 클릭
|
||||
$("input[type=checkbox]").click(function() {
|
||||
var id = this.id;
|
||||
|
||||
if(id.indexOf("facility") != -1){
|
||||
if(id == "facility_all"){
|
||||
if($("#facility_all").prop("checked")) {
|
||||
$("input[name=facility]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=facility]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#facility_all").prop("checked", false);
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}else if(id.indexOf("structure") != -1){
|
||||
if(id == "structure_all"){
|
||||
if($("#structure_all").prop("checked")) {
|
||||
$("input[name=structure]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=structure]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#structure_all").prop("checked", false);
|
||||
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}else if(id.indexOf("ground") != -1){
|
||||
if(id == "ground_all"){
|
||||
if($("#ground_all").prop("checked")) {
|
||||
$("input[name=ground]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=ground]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#ground_all").prop("checked", false);
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
<form:form commandName="useRequestVO" name="frm" method="POST" action="/map/insertReq" id="insertFrm">
|
||||
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
|
||||
<div class="section_title">
|
||||
<!-- <p>현장 지원 시스템</p> -->
|
||||
</div>
|
||||
<div class="section_content">
|
||||
<input type="hidden" id="layers" name="layers"/>
|
||||
<input type="hidden" id="places" name="places"/>
|
||||
|
||||
</script>
|
||||
<table class="detail_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">작업명</th>
|
||||
<td><input type="text" class="form-control" id="title" name="title" autocomplete="off"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">기간</th>
|
||||
<td>
|
||||
<input type="text" class="form-control input-datepicker" readonly id="startDate" name= "s_date" onchange="dateChange('start');"> ~
|
||||
<input type="text" class="form-control input-datepicker" readonly id="endDate" name="e_date" onchange="dateChange('end');">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">장소</th>
|
||||
<td id="area_select_td">
|
||||
<div>
|
||||
<select id="city" name="city" onchange="changeAreaList(this.value, this.name)" class="form-control input-area-select">
|
||||
<option value="0">::시/도::</option>
|
||||
<c:forEach var="item" items="${cityList}" varStatus="status">
|
||||
<option value="${item.code}"><c:out value="${item.area}"/></option>
|
||||
</c:forEach>
|
||||
</select>
|
||||
<select id="county" name="county" onchange="changeAreaList(this.value, this.name);" class="form-control input-area-select">
|
||||
<option value="0">::선택::</option>
|
||||
</select>
|
||||
<select id="town" name="town" class="form-control input-area-select">
|
||||
<option value="0">::선택::</option>
|
||||
</select>
|
||||
<span class="btn btn-outline-primary" onclick="addAreaBtn();">추가</span>
|
||||
</div>
|
||||
<div id="addedArea" class="addedArea">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="3">레이어</th>
|
||||
<th><label>지하시설물</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'facility'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label>지하구조물</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'structure'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label>지반</label></th>
|
||||
<td>
|
||||
<c:forEach var="item" items="${layersVO}" varStatus="status">
|
||||
<c:if test="${item.code eq 'ground'}">
|
||||
<label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">요청 내용</th>
|
||||
<td><textarea class="form-control" rows="3" style="resize:none;" name=user_msg></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section_btn">
|
||||
<p class="search_p2">
|
||||
<input class="btn btn-success" type="button" value="요청" onclick="insertReqBtn(); return false;" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form:form>
|
||||
|
||||
<script type="text/javascript">
|
||||
var areaAddCount = 0;
|
||||
|
||||
|
||||
$(function(){
|
||||
$("#startDate").datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
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월'],
|
||||
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
yearSuffix: '년',
|
||||
showMonthAfterYear:true,
|
||||
changeYear : true,
|
||||
changeMonth : true
|
||||
});
|
||||
|
||||
$("#endDate").datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
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월'],
|
||||
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
|
||||
yearSuffix: '년',
|
||||
showMonthAfterYear:true,
|
||||
changeYear : true,
|
||||
changeMonth : true
|
||||
});
|
||||
|
||||
//전체선택 체크박스 클릭
|
||||
$("input[type=checkbox]").click(function() {
|
||||
var id = this.id;
|
||||
|
||||
if(id.indexOf("facility") != -1){
|
||||
if(id == "facility_all"){
|
||||
if($("#facility_all").prop("checked")) {
|
||||
$("input[name=facility]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=facility]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#facility_all").prop("checked", false);
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}else if(id.indexOf("structure") !== -1){
|
||||
if(id === "structure_all"){
|
||||
if($("#structure_all").prop("checked")) {
|
||||
$("input[name=structure]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=structure]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#structure_all").prop("checked", false);
|
||||
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}else if(id.indexOf("ground") !== -1){
|
||||
if(id === "ground_all"){
|
||||
if($("#ground_all").prop("checked")) {
|
||||
$("input[name=ground]").prop("checked", true);
|
||||
} else {
|
||||
$("input[name=ground]").prop("checked", false);
|
||||
}
|
||||
}else{
|
||||
$("#ground_all").prop("checked", false);
|
||||
if($(this).prop("checked")) {
|
||||
$(this).prop("checked", true);
|
||||
}else{
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -641,29 +641,14 @@ a {
|
|||
width:100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.detail_table > thead>tr:first-child>th {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #337ab7;
|
||||
padding: 10px 5px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
}
|
||||
.detail_table > thead>tr:first-child>th {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #337ab7;
|
||||
padding: 10px 5px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail_table > tbody> tr >th {
|
||||
text-align:center;
|
||||
height:auto;
|
||||
width:120px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px 5px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
width:100px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.detail_table > tbody> tr >td {
|
||||
border:1px solid #ccc;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
let mapRequestModal;
|
||||
$(function(){
|
||||
viewPaging();
|
||||
$(".r_date").each(function(){
|
||||
var r_date = $(this).text();
|
||||
var nowDate = new Date();
|
||||
var r_date = new Date(r_date);
|
||||
var getDay = getFormatDate(r_date);
|
||||
var nowDay = getFormatDate(nowDate);
|
||||
|
||||
if(getDay === nowDay){
|
||||
$(this).html(getFormatTime(r_date));
|
||||
}else{
|
||||
$(this).html(getDay);
|
||||
}
|
||||
});
|
||||
mapRequestModal = new bootstrap.Modal(document.getElementById('mapRequestModal'));
|
||||
});
|
||||
|
||||
$(document).on('click', '#mapRequestModalBtn', function (){
|
||||
$.ajax({
|
||||
url: '/map/reqWrite',
|
||||
type: 'GET',
|
||||
dataType:"html",
|
||||
success: function(html){
|
||||
$("#mapRequestModalBody").empty().append(html);
|
||||
mapRequestModal.show();
|
||||
},
|
||||
error:function(){
|
||||
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
/* 날짜포맷 yyyy-MM-dd 변환 */
|
||||
function getFormatDate(date){
|
||||
var year = date.getFullYear();
|
||||
var month = (1 + date.getMonth());
|
||||
month = month >= 10 ? month : '0' + month;
|
||||
var day = date.getDate();
|
||||
day = day >= 10 ? day : '0' + day;
|
||||
return year + '-' + month + '-' + day;
|
||||
}
|
||||
|
||||
function getFormatTime(date){
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
return hours + ':' + minutes;
|
||||
}
|
||||
|
||||
function viewPaging(){
|
||||
for (step = start; step < end; step++) {
|
||||
if(step == now){
|
||||
$("#paging").append("<strong>"+step+"</strong>");
|
||||
}else{
|
||||
$("#paging").append("<a href='userPermissionList.do?&page="+ step +"'>"+step+"</a>");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fn_link_page(pageNo) {
|
||||
document.searchForm.pageIndex.value = pageNo;
|
||||
document.searchForm.action = '/map/request';
|
||||
document.searchForm.submit();
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 추가
|
||||
*/
|
||||
function addAreaBtn(){
|
||||
var addedAreaWrapCnt = $(".addedAreaWrap").length;
|
||||
|
||||
if(addedAreaWrapCnt < 3){
|
||||
if($("#city").val() != "0"){
|
||||
areaAddCount++;
|
||||
var selectAreaCode = null;
|
||||
var selectAreaName = null;
|
||||
if($("#town").val() == "0"){
|
||||
selectArea = $("#county").val();
|
||||
selectAreaName = $("#city option:selected").text() +" "+ $("#county option:selected").text();
|
||||
if($("#county").val() == "0"){
|
||||
selectArea = $("#city").val();
|
||||
selectAreaName = $("#city option:selected").text();
|
||||
}
|
||||
}else{
|
||||
selectArea = $("#town").val();
|
||||
selectAreaName = $("#city option:selected").text()+" "+$("#county option:selected").text()+" "+$("#town option:selected").text();
|
||||
}
|
||||
var overLapArea = false;
|
||||
$("input[name=selectArea]").each(function(){
|
||||
if($(this).val() == selectArea){
|
||||
overLapArea = true;
|
||||
}
|
||||
});
|
||||
if(overLapArea){
|
||||
alert('이미 등록된 장소 입니다.');
|
||||
return false;
|
||||
}else{
|
||||
var tag = '';
|
||||
tag += '<span id="addedAreaWrap'+areaAddCount+'" class="addedAreaWrap">';
|
||||
tag += selectAreaName;
|
||||
tag += '<span class="glyphicon glyphicon-remove point-cursor" onclick="removeAreaBtn('+areaAddCount+');"></span>';
|
||||
tag += '<input type="hidden" name="selectArea" value="'+selectArea+'" />';
|
||||
tag += '</span>';
|
||||
$("#addedArea").append(tag);
|
||||
}
|
||||
}else{
|
||||
alert('지역을 선택해주세요.');
|
||||
}
|
||||
}else{
|
||||
alert('더 이상 추가 하실 수 없습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 변경
|
||||
*/
|
||||
function changeAreaList(code, area){
|
||||
var target = null
|
||||
if(area == "city"){
|
||||
target = $("#county");
|
||||
}else{
|
||||
target = $("#town");
|
||||
}
|
||||
resetSelectBox(area);
|
||||
if(code != 0){
|
||||
$.ajax({
|
||||
url : '/selectAreaList',
|
||||
type : "GET",
|
||||
dataType : "json",
|
||||
data:{
|
||||
"code" : code,
|
||||
"area" : area
|
||||
},
|
||||
success : function(data){
|
||||
if(data){
|
||||
if(area == "city"){
|
||||
for(var idx in data){
|
||||
target.append("<option value='"+data[idx].code+"'>"+data[idx].area+"</option>");
|
||||
}
|
||||
}else{
|
||||
for(var idx in data){
|
||||
target.append("<option value='"+data[idx].code+"'>"+data[idx].area+"</option>");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 삭제
|
||||
* removeNum : 삭제할 태그 번호
|
||||
*/
|
||||
function removeAreaBtn(removeNum){
|
||||
$("#addedAreaWrap"+removeNum).remove();
|
||||
}
|
||||
|
||||
function resetSelectBox(area){
|
||||
var baseOption = "<option value='0'>::전체::</option>";
|
||||
if(area === "county"){
|
||||
$("#town").empty().append(baseOption);
|
||||
}else if(area === "city"){
|
||||
$("#county").empty().append(baseOption);
|
||||
$("#town").empty().append(baseOption);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 날짜 변경
|
||||
* state : 시작 또는 종료
|
||||
*/
|
||||
function dateChange(state){
|
||||
var startDate = $("#startDate");
|
||||
var endDate = $("#endDate");
|
||||
if(endDate.val() !== "" && startDate.val() > endDate.val()){
|
||||
if(state === "start"){
|
||||
endDate.val(startDate.val());
|
||||
}else{
|
||||
startDate.val(endDate.val());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 지역 유효성 검사
|
||||
*/
|
||||
function areaCheck(){
|
||||
var selectArr = [];
|
||||
$("input[name=selectArea]").each(function(){
|
||||
selectArr.push($(this).val());
|
||||
});
|
||||
const places = $("#places");
|
||||
places.val(selectArr);
|
||||
|
||||
return places.val() !== "";
|
||||
}
|
||||
|
||||
/*
|
||||
* 레이어 유효성 검사
|
||||
*/
|
||||
function layersCheck(){
|
||||
var checkArr = []; // 배열 초기화
|
||||
$('input:checkbox[name="facility"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
$('input:checkbox[name="structure"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
$('input:checkbox[name="ground"]:checked').each(function(index, item) {
|
||||
checkArr.push($(item).val());
|
||||
});
|
||||
const layers = $('#layers');
|
||||
layers.val(checkArr);
|
||||
|
||||
return layers.val() !== "";
|
||||
}
|
||||
|
||||
function insertReqBtn(){
|
||||
const endDate = $("#endDate");
|
||||
const startDate = $("#startDate");
|
||||
const title = $("#title");
|
||||
if(title.val() === ""){
|
||||
alert('작업명을 입력해주세요.');
|
||||
title.focus();
|
||||
}else if(startDate.val() === ""){
|
||||
alert('시작 기간을 입력해주세요.');
|
||||
startDate.focus();
|
||||
}else if(endDate.val() === ""){
|
||||
alert('종료 기간을 입력해주세요.');
|
||||
endDate.focus();
|
||||
}else if(!areaCheck()){
|
||||
alert('지역을 추가해주세요.');
|
||||
}else if(!layersCheck()){
|
||||
alert('레이어를 선택해주세요.');
|
||||
}else{
|
||||
$("#insertFrm").submit();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue