모달창

src/main/java/com/mca/cmmn/web/AdminController.java

@@ -188,7 +188,8 @@ public class AdminController {
 			model.addAttribute("selectArea", selectArea);
 			model.addAttribute("layers", layers);
 			model.addAttribute("layersVO", layersVO);
-			return "admin/requestView";
+//			return "admin/requestView";
+			return "admin/html/requestView";
 		} catch (Exception e) {
 			// TODO Auto-generated catch block
 			e.printStackTrace();

src/main/webapp/WEB-INF/jsp/admin/request.jsp

@@ -7,8 +7,8 @@
 <script src="<c:url value="/js/admin/request.js"/>"></script>
 
 <div class="section_content">
-<h1 class="h4 m-3">지도사용 요청</h1>
+    <h1 class="h4 m-3">지도사용 요청</h1>
-<form:form commandName="useRequestSearchVO" name="searchForm" action="/admin/request" method="get">
+    <form:form commandName="useRequestSearchVO" name="searchForm" action="/admin/request" method="get">
     <input type="hidden" name="status" value="<c:out value="${useRequestSearchVO.status}" />"/>
 
     <div class="row justify-content-between bg-white mx-3 py-2">
@@ -33,7 +33,7 @@
 
         <div class="col-auto row">
             <div class="col-auto">
-                <select class="form-select" name="searchCondition">
+                <select class="form-select " name="searchCondition">
                     <option <c:if test="${useRequestSearchVO.searchCondition eq 'all'}"><c:out value="selected"/></c:if>
                             value="all">통합검색
                     </option>
@@ -75,8 +75,8 @@
                 <c:forEach var="item" items="${useRequestList}" varStatus="idx">
                     <tr>
                         <td><c:out value="${item.idx}"/></td>
-                        <td><a href="/admin/request/<c:out value='${item.idx}' />"><c:out value="${item.title}"/></a>
+<%--                        <td ><a href="/admin/request/ <c:out value='${item.idx}' />"><c:out value="${item.title}"/></a>--%>
-                        </td>
+                        <td class="title-td" data-idx="${item.idx}">${item.title}</td>
                         <td><c:out value="${item.company}"/></td>
                         <td><c:out value="${item.name}"/></td>
                         <td class="td_date"><c:out value="${item.r_date}"/></td>
@@ -111,6 +111,22 @@
     </div>
 </div>
 
+
+<div class="modal fade" id="adminRequestModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="adminRequestModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="adminRequestModalLabel">지도 사용 요청</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="adminRequestModalBody">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
 <div class="section_title">
     <!-- <p>현장 지원 시스템</p> -->
 </div>

src/main/webapp/WEB-INF/jsp/admin/requestView.jsp

@@ -5,8 +5,6 @@
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 
-<script src="<c:url value="/js/admin/requestView.js"/>"></script>
-
 
 <form:form commandName="useRequestVO" name="frm" method="POST" action="/admin/updateReqConfirm" id="updateFrm">
     <input type="hidden" name="idx" value="<c:out value='${useRequestVO.idx}' />"/>
@@ -77,13 +75,12 @@
                 <th style="width:7%;" rowspan="3">레이어</th>
                 <th><label>지하시설물</label></th>
                 <td>
-                    <div class="facility">
+                    <div class="form-check">
                         <c:forEach var="item" items="${layersVO}" varStatus="status">
                             <c:if test="${item.code eq  'facility'}">
                                 <c:set var="faciltySize" value="${faciltySize+1}"/>
                                 <label class="layer-label">
-                                    <input type="checkbox" name="${item.code}" id="${item.code}" disabled="disabled"
+                                    <input type="checkbox" name="${item.code}" id="${item.code}" disabled="disabled" value="${item.layer}"
-                                           value="${item.layer}"
                                             <c:forEach var="item2" items="${layers}" varStatus="status2">
                                                 <c:if test="${item.layer eq item2}">
                                                     <c:out value='checked'/>
@@ -167,8 +164,7 @@
             <div class="row justify-content-between bg-white mx-3 py-2">
                 <div class="section_btn">
                     <p class="search_p1">
-                        <input class="btn btn-primary" type="button" value="목록"
+                        <input class="btn btn-secondary" type="button" value="닫기"  data-bs-dismiss="modal"/>
-                               onclick="location.href='/admin/request'"/>
                     </p>
                     <p class="search_p2">
                         <input class="btn btn-danger" type="button" value="거절"
@@ -195,7 +191,7 @@
 
             <div class="section_btn">
                 <p class="search_p1">
-                    <input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/request'"/>
+                    <input class="btn btn-secondary" type="button" value="닫기"  data-bs-dismiss="modal"/>
                 </p>
             </div>
 

src/main/webapp/css/style.css

@@ -707,3 +707,9 @@ a {
 .clickAbleObj:hover{
   cursor:pointer;
 }
+
+input[type=checkbox]:disabled {
+	background: blue;
+	outline-color: blue;
+	color: white;
+}

src/main/webapp/js/admin/request.js

@@ -1,5 +1,47 @@
+let adminRequestModal;
+
+$(function(){
+    adminRequestModal = new bootstrap.Modal(document.getElementById('adminRequestModal'));
+})
+
+$(document).on('click', '.title-td', function (){
+    adminRequestModalOpen('/admin/request/'+$(this).attr("data-idx"));
+})
+
+function adminRequestModalOpen(url){
+    $.ajax({
+        url: url,
+        type: 'GET',
+        dataType:"html",
+        success: function(html){
+            $("#adminRequestModalBody").empty().append(html);
+            adminRequestModal.show();
+        },
+        error:function(){
+            adminRequestModalBody
+        }
+    });
+}
+
 function fn_link_page(pageNo) {
     document.searchForm.pageIndex.value = pageNo;
     document.searchForm.action = '/admin/request';
     document.searchForm.submit();
 }
+
+function confirmReqBtn(val) {
+    $("#status").val(val);
+
+    var msg;
+    if (val == 0) {
+        msg = "승인";
+    } else {
+        msg = "거절";
+    }
+
+    if (confirm("지도사용요청을 " + msg + " 하시겠습니까?")) {
+        $("#updateFrm").submit();
+    } else {
+        return false;
+    }
+}

src/main/webapp/js/admin/requestView.js

@@ -1,17 +0,0 @@
-function confirmReqBtn(val) {
-    $("#status").val(val);
-
-    var msg;
-    if (val == 0) {
-        msg = "승인";
-    } else {
-        msg = "거절";
-    }
-
-    if (confirm("지도사용요청을 " + msg + " 하시겠습니까?")) {
-        $("#updateFrm").submit();
-    } else {
-        return false;
-    }
-}
-

src/main/webapp/js/map/request.js

@@ -1,4 +1,5 @@
 let mapRequestModal;
+
 $(function(){
   viewPaging();
   $(".r_date").each(function(){
@@ -33,7 +34,7 @@ function mapRequestModalOpen(url){
       mapRequestModal.show();
     },
     error:function(){
-
+      mapRequestModalBody
     }
   });
 }