GGWEB/src/main/webapp/WEB-INF/jsp/map/requestView.jsp

<%@ 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"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<form:form commandName="useRequestVO" name="frm" method="POST" action="/map/updateReq" id="updateFrm">
  <input type="hidden" name="idx" value="${useRequestVO.idx}" />
  <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" />

    <c:choose>
      <c:when test="${useRequestVO.status eq '99' }">
        <table class="detail_table">
          <tbody>
          <tr>
            <th colspan="2">작업명</th>
            <td><input type="text" class="form-control" id="title" name="title" value="${useRequestVO.title}" /></td>
          </tr>
          <tr>
            <th colspan="2">기간</th>
            <td>
              <input type="text" class="form-control input-datepicker" id="startDate" name="s_date" onchange="dateChange('start');" readonly value="${useRequestVO.s_date}"> ~
              <input type="text" class="form-control input-datepicker" id="endDate" name="e_date" onchange="dateChange('end');" readonly value="${useRequestVO.e_date}">
            </td>
          </tr>
          <tr>
            <th colspan="2">장소</th>
            <td id="area_select_td">
              <div>
                <select class="form-control input-area-select" id="city" name="city" onchange="changeAreaList(this.value, this.name)">
                  <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 class="form-control input-area-select" id="county" name="county" onchange="changeAreaList(this.value, this.name);">
                  <option value="0">::선택::</option>
                </select>
                <select class="form-control input-area-select" id="town" name="town">
                  <option value="0">::선택::</option>
                </select>
                <span class="glyphicon glyphicon-plus point-cursor" onclick="addAreaBtn();"></span>
              </div>
              <div id="addedArea" class="addedArea">
                <c:forEach var="item" items="${selectArea}" varStatus="status">
                  <span id="addedAreaWrap${status.index}" class="addedAreaWrap">
                      <c:out value="${item.name}" />
                      <span class="glyphicon glyphicon-remove point-cursor" onclick="removeAreaBtn(${status.index});"></span>
                      <input type="hidden" name="selectArea" value="${item.code}" />
                  </span>
                </c:forEach>
              </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'}">
                  <c:set var="faciltySize" value="${faciltySize+1}" />
                  <label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                    <c:if test="${item.layer eq item2}">
                      checked
                    </c:if>
                  </c:forEach>
                  />${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}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                    <c:if test="${item.layer eq item2}">
                      checked
                    </c:if>
                  </c:forEach>
                  />${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}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                    <c:if test="${item.layer eq item2}">
                      checked
                    </c:if>
                  </c:forEach>
                  />${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">${useRequestVO.user_msg}</textarea></td>
          </tr>
          </tbody>
        </table>
        <div class="section_btn">
          <p class="search_p1">
            <input class="btn btn-secondary" type="button" value="닫기" data-bs-dismiss="modal"/>
          </p>
          <p class="search_p2">
            <input class="btn btn-danger" type="button" value="취소" onclick="deleteReqBtn(); return false;" />
            <input class="btn btn-success" type="button" value="수정" onclick="updateReqBtn(); return false;" />
          </p>
        </div>
      </c:when>
      <c:otherwise>
        <table class="detail_table">
          <tbody>
          <tr>
            <th colspan="2">작업명</th>
            <td class="title-td">${useRequestVO.title}</td>
            <th colspan="1">상태</th>
            <td colspan="1" class="text-center" >
              <c:if test="${useRequestVO.status ne '99' }">
                <c:choose>
                  <c:when test="${useRequestVO.status eq '0' }"><span class="label label-success">
                                                    <c:out value='사용중' /></span></c:when>
                  <c:otherwise><span class="label label-danger">
                                                    <c:out value='사용불가' /></span></c:otherwise>
                </c:choose>
              </c:if>
            </td>
          </tr>
          <tr>
            <th colspan="2">기간</th>
            <td colspan="3">${useRequestVO.s_date} ~ ${useRequestVO.e_date}</td>
          </tr>
          <tr>
            <th rowspan="1" colspan="2">장소</td>
            <td colspan="4">
              <c:forEach var="item" items="${selectArea}" varStatus="status">
                <div id="addedBlock${status.index}">
                    ${item.name}
                </div>
              </c:forEach>
            </td>
          </tr>
          <tr>
            <th rowspan="3" colspan="1">레이어</th>
            <th><label>지하시설물</label></th>
              <td colspan="4">
<%--              <div  class="setting_content2" class="facility">--%>
                <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" class="me-2" name="${item.code}" id="${item.code}" disabled="disabled" value="${item.layer}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                        <c:if test="${item.layer eq item2}">
                          checked
                        </c:if>
                      </c:forEach>
                      />${item.name}
                    </label>
                  </c:if>
                </c:forEach>
              </div>
            </td>
          </tr>
          <tr>
            <th>지하구조물</th>
            <td colspan="4">
              <div class="setting_content2" class="structure">
                <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}" disabled="disabled" value="${item.layer}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                      <c:if test="${item.layer eq item2}">
                        checked
                      </c:if>
                    </c:forEach>
                    /> ${item.name}</label>
                  </c:if>
                </c:forEach>
              </div>
            </td>
          </tr>
          <tr>
            <th><label>지반</label></th>
            <td colspan="4">
              <div class="setting_content2" class="ground">
                <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}" disabled="disabled" value="${item.layer}" <c:forEach var="item2" items="${layers}" varStatus="status2">
                      <c:if test="${item.layer eq item2}">
                        checked
                      </c:if>
                    </c:forEach>
                    />${item.name}</label>
                  </c:if>
                </c:forEach>
              </div>
            </td>
          </tr>
          <tr>
            <th>요청 내용</th>
            <td colspan="4">${useRequestVO.user_msg}</td>
          </tr>
          <tr>
            <th>전달 메세지</th>
            <td colspan="4">${useRequestVO.admin_msg}</td>
          </tr>
          </tbody>
        </table>

        <div class="section_btn">
          <p class="search_p1">
            <input class="btn btn-secondary" type="button" value="닫기" data-bs-dismiss="modal"/>
          </p>
        </div>
      </c:otherwise>
    </c:choose>
  </div>
</form:form>

<script type="text/javascript">
  var areaAddCount = ${selectArea.size()};
  $(function(){
    $("#startDate").datepicker({
      dateFormat: 'yy-mm-dd',
      prevText: '이전 달',
      nextText: '다음 달',
      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: ['일', '월', '화', '수', '목', '금', '토'],
      showMonthAfterYear: true,
      yearSuffix: '년'
    });

    $("#endDate").datepicker({
      dateFormat: 'yy-mm-dd',
      prevText: '이전 달',
      nextText: '다음 달',
      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: ['일', '월', '화', '수', '목', '금', '토'],
      showMonthAfterYear: true,
      yearSuffix: '년'
    });

    $("input[name=facility]").each(function(){
      if(this.checked){
        $("#facility_all").prop("checked", true);
      }else{
        $("#facility_all").prop("checked", false);
        return false;
      }
    });

    $("input[name=structure]").each(function(){
      if(this.checked){
        $("#structure_all").prop("checked", true);
      }else{
        $("#structure_all").prop("checked", false);
        return false;
      }
    });

    $("input[name=ground]").each(function(){
      if(this.checked){
        $("#ground_all").prop("checked", true);
      }else{
        $("#ground_all").prop("checked", false);
        return false;
      }
    });

    //전체선택 체크박스 클릭
    $("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>