지도사용요청 작성 페이지 모달화 작업중.

master
강석 최 2022-03-03 15:58:37 +09:00
parent 3c4096813a
commit 416a7380eb
6 changed files with 483 additions and 486 deletions

View File

@ -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();

View File

@ -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">

View File

@ -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>
@ -25,7 +31,6 @@
</thead>
<tbody>
<c:if test="${count >= 1}">
<c:forEach var="item" items="${useRequestList}" varStatus="idx">
<tr>
@ -48,77 +53,36 @@
</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">
<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>

View File

@ -14,9 +14,6 @@
<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>
@ -89,9 +86,6 @@
</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>
@ -101,192 +95,7 @@
<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({
@ -334,8 +143,8 @@
$(this).prop("checked", false);
}
}
}else if(id.indexOf("structure") != -1){
if(id == "structure_all"){
}else if(id.indexOf("structure") !== -1){
if(id === "structure_all"){
if($("#structure_all").prop("checked")) {
$("input[name=structure]").prop("checked", true);
} else {
@ -350,8 +159,8 @@
$(this).prop("checked", false);
}
}
}else if(id.indexOf("ground") != -1){
if(id == "ground_all"){
}else if(id.indexOf("ground") !== -1){
if(id === "ground_all"){
if($("#ground_all").prop("checked")) {
$("input[name=ground]").prop("checked", true);
} else {
@ -368,5 +177,4 @@
}
});
});
</script>

View File

@ -641,28 +641,13 @@ 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;
width:100px;
border: 1px solid #ccc;
background-color: #f8f8f8;
padding: 10px 5px;
text-align: left;
text-align: center;
}
.detail_table > tbody> tr >td {

View File

@ -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();
}
}