mplusDemo/mplus-fatima/WebContent/WEB-INF/view/admin/api.jsp

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" src="<c:url value='/resources/js/admin/api.js' />"></script>
<!-- API 관리 -->
<div class="main-wrapper">
	<div class="title-bar">
    	<span class="title">API 관리</span>
    </div>
	<div id="wrapper">
	    <div class="col-md-3">
	    	<div class="left-content">
	    		<div class="form-group text-center">
			    	<div class="btn-group" role="group" aria-label="...">
					  <button type="button" class="btn btn-default btn-sm" id="btnCreateNode" title="메뉴추가">
					  	<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
					  </button>
					  <button type="button" class="btn btn-default btn-sm" id="btnRemoveNode" title="메뉴삭제">
					  	<span class="glyphicon glyphicon-minus">&nbsp;삭제</span>
					  </button>
					  <button type="button" class="btn btn-default btn-sm" id="btnDeselectNode" title="선택해제">
					  	<span class="glyphicon glyphicon-remove">&nbsp;해제</span>
					  </button>
					</div>
				</div>
		    	<div id="apiTreeView">
		    	</div>
	    	</div>
	    </div>
	    <div class="col-md-9">
	    	<div class="right-content row">
	    		<div class="form-group col-md-12" id="apiMsg">
	    			* API를 선택해주세요.
	    		</div>
	    		<div id="apiContent" style="display: none">
		    		<div class="form-group col-md-12 text-right">
				    	<div class="btn-group" role="group" aria-label="...">
						  <button type="button" class="btn btn-default btn-sm" id="btnSaveNode" title="저장">
						  	<span class="glyphicon glyphicon-ok">&nbsp;저장</span>
						  </button>
						  <button type="button" class="btn btn-default btn-sm" id="btnCacheInit" title="캐시초기화">
						  	<span class="glyphicon glyphicon-refresh">&nbsp;초기화</span>
						  </button>
						</div>
					</div>
					<div class="col-md-12">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div class="form-group content-box-title">
										<label>정보</label>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label class="">아이디</label>
									</div>
									<div class="col-md-4">
										<input type="text" class="form-control input-sm" id="txtId" placeholder="아이디 자동생성" readonly/>
									</div>
									<div class="col-md-2 content-title text-right">
										<label>이름</label>
									</div>
									<div class="col-md-4">
										<input type="text" class="form-control input-sm" id="txtName" placeholder="">
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label>API URL</label>
									</div>
									<div class="col-md-10">
										<div class="input-group">
										  <span class="input-group-addon input-group-no-style" id="spanCatPathName">@</span>
										  <input type="text" class="form-control input-sm" aria-describedby="spanCatPathName" id="txtApiUrl">
										</div>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label>API타입</label>
									</div>
									<div class="col-md-3 pdr0">
										<select class="form-control input-sm" id="sltApiType">
											<option value="">선택</option>
					    					<c:forEach var="item" items="${apiTypes}">
												<option value="${item}">${item}</option>
											</c:forEach>
					    				</select>
									</div>
									<div class="col-md-1 text-right">
										<button type="button" class="btn btn-default btn-sm" id="btnApiTypeHelp" data-toggle="modal" data-target="#modal_apiTypeHelp" title="도움말">
					    					<span class="glyphicon glyphicon-question-sign"></span>
					    				</button>
									</div>
									<div class="col-md-2 content-title text-right">
										<label>연산유형</label>
									</div>
									<div class="col-md-4">
										<select class="form-control input-sm" id="sltHttpMethodType">
											<option value="">선택</option>
					    					<c:forEach var="item" items="${httpMethodTypes}">
												<option value="${item}">${item}</option>
											</c:forEach>
					    				</select>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label>응답결과 타입</label>
									</div>
									<div class="col-md-4">
										<select class="form-control input-sm" id="sltResultType">
											<option value="">선택</option>
						    				<c:forEach var="item" items="${resultTypes}">
												<option value="${item}">${item}</option>
											</c:forEach>
					    				</select>
									</div>
									<div class="col-md-2 content-title text-right">
										<label>데이터소스</label>
									</div>
									<div class="col-md-4">
										<select class="form-control input-sm" id="sltDataSourceName">
											<option value="">선택</option>
					    					<c:forEach var="item" items="${dataSourceNames}">
													<option value="${item}">${item}</option>
											</c:forEach>
					    				</select>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12" id="rowWebService" style="display:none">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div class="form-group content-box-title">
										<label>웹서비스 요청</label>
									</div>
									<div class="form-group col-md-12 pd0">
										<div class="col-md-2 content-title text-right">
											<label>URL</label>
										</div>
										<div class="col-md-10">
											<input type="text" class="form-control input-sm" id="txtTargetUrlAddr"/>
										</div>
									</div>
									<div class="form-group col-md-12 pd0">
										<div class="col-md-2 content-title text-right">
											<label>헤더정보</label>
										</div>
										<div class="col-md-10">
											<div class="text-right">
												<button type="button" class="btn btn-default btn-sm" id="btnHeaderInfo" title="편집">
													<span class="glyphicon glyphicon-edit">&nbsp;편집</span>
												</button>
											</div>
						    				<table class="table table-bordered table-hover">
						    					<thead>
						    						<tr>
						    							<td class="table-header">이름</td>
						    							<td class="table-header">값</td>
						    						</tr>
						    					</thead>
						    					<tbody id="table_header_view">
						    					</tbody>
						    				</table>		
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12" id="rowProcedure" style="display: none">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div class="form-group content-box-title">
										<label>Procedure</label>
									</div>
									<div class="form-group col-md-12 pd0">
										<div class="col-md-2 content-title text-right">
											<label>Procedure</label>
										</div>
										<div class="col-md-10">
											<input type="text" class="form-control input-sm" id="txtProcedure"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12" id="rowQueryMsg" style="display: none">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div class="form-group content-box-title">
										<label>SQL</label>
									</div>
									<div class="form-group col-md-12 pd0">
										<div class="col-md-2 content-title text-right">
											<label>SQL</label>
										</div>
										<div class="col-md-10">
											<textarea class="form-control input-sm" rows="3" id="txtQueryMsg"></textarea>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12">
									<div class="form-group content-box-title">
										<label>파라미터</label>
									</div>
									<div class="form-group col-md-12 pd0">
										<div class="col-md-2 content-title text-right">
											<label></label>
										</div>
										<div class="col-md-10">
											<div class="text-right">
												<button type="button" class="btn btn-default btn-sm" id="btnParameter" title="편집">
													<span class="glyphicon glyphicon-edit">&nbsp;편집</span>
												</button>
												<button type="button" class="btn btn-default btn-sm" id="btnTest" title="테스트">
													<span class="glyphicon glyphicon-expand">&nbsp;테스트</span>
												</button>
											</div>
						    				<table class="table table-bordered table-hover">
						    					<thead>
						    						<tr>
						    							<td class="table-header">no</td>
						    							<td class="table-header">이름</td>
						    							<td class="table-header">타입</td>
						    							<td class="table-header">샘플 파라미터</td>
						    							<td class="table-header">설명</td>
						    						</tr>
						    					</thead>
						    					<tbody id="table_param_view">
						    					</tbody>
						    				</table>	
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="form-group col-md-12 mgt5">
									<div class="col-md-2 content-title text-right">
										<label>결과샘플</label>
									</div>
									<div class="col-md-10">
										<textarea class="form-control input-sm" id="txtResSampleCl" rows="3"></textarea>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label>설명<br/>(<span id="descLength">0</span>/500bytes)</label>
									</div>
									<div class="col-md-10">
										<textarea class="form-control input-sm" id="txtApiDesc" rows="3"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="form-group col-md-12 mgt5">
									<div class="col-md-2 content-title text-right">
										<label class="">최초 생성일</label>
									</div>
									<div class="col-md-4">
										<span class="form-control input-sm" id="spanCreateDt"></span>
									</div>
									<div class="col-md-2 content-title text-right">
										<label>최초 생성자</label>
									</div>
									<div class="col-md-4">
										<span class="form-control input-sm" id="spanCreateId"></span>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="col-md-2 content-title text-right">
										<label class="">최종 변경일</label>
									</div>
									<div class="col-md-4">
										<span class="form-control input-sm" id="spanUpdateDt"></span>
									</div>
									<div class="col-md-2 content-title text-right">
										<label>최종 변경자</label>
									</div>
									<div class="col-md-4">
										<span class="form-control input-sm" id="spanUpdateId"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
	    	</div>
	    </div>
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addItemModal_header" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="width: 800px">
    <div class="modal-content">
      <div class="modal-header">
      	⊙ 헤더 정보
      </div>
      <div class="modal-body">
      		<div class="row">
	      		<div class="col-md-5 content-table">
		      		<table class="table table-bordered table-hover table-row-click">
						<thead>
							<tr>
								<td class="table-header">이름</td>
								<td class="table-header max-width-sm">값</td>
								<td class="table-header">
									<button type="button" class="btn btn-primary btn-xs" id="btnNewItem_header">
										<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
									</button>
								</td>
							</tr>
						</thead>
						<tbody id="table_header">
						</tbody>
					</table>
				</div>
				<div class="col-md-7">
					<div class="col-md-12 pd0">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12" id="modalHeaderDetailEmpty">
									<div class="form-group col-md-12 pd0">
										<div class="col-md-12 pd0">
											* 헤더 정보를 선택해주세요.
										</div>
									</div>
								</div>
								<div id="modalHeaderDetail">
									<div class="col-md-12">
										<div class="row content-box-title">
											<div class="col-md-12 detail-content-title">
												<label>정보</label>
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>이름</label>
											</div>
											<div class="col-md-9 pd0">
												<select class="form-control input-sm" id="sltHeader">
													<c:forEach var="item" items="${wsHeaderTypes}">
														<option value="${item.value}">${item.value}</option>
													</c:forEach>
												</select>
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>값</label>
											</div>
											<div class="col-md-9 pd0">
												<input type="text" class="form-control input-sm" id="txtHeaderValue" placeholder="">
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-12 pd0 text-center">
												<button type="button" class="btn btn-default btn-sm" id="saveItem_header">
													<span class="glyphicon glyphicon-ok">&nbsp;저장</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					
				</div>
			</div>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-default btn-sm" id="btnConfirmItem_header">
   			<span class="glyphicon glyphicon-ok-circle">&nbsp;적용</span>     
        </button>
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
			<span class="glyphicon glyphicon-remove-circle">&nbsp;취소</span>     
		</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addItemModal_param" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="width: 800px">
    <div class="modal-content">
      <div class="modal-header">
      	 ⊙ 파라미터 편집 &nbsp;&nbsp;
      	 	<button type="button" class="btn btn-default btn-sm btn-test" id="btnTest_inModal">
	   			<span class="glyphicon glyphicon-expand">&nbsp;테스트</span>
	        </button>
      </div>
      <div class="modal-body">
      		<div class="row">
	      		<div class="col-md-5 content-table">
		      		<table class="table table-bordered table-hover table-row-click">
						<thead>
							<tr>
								<td class="table-header">이름</td>
								<!-- <td class="table-header">타입</td> -->
								<td class="table-header">샘플 파라미터</td>
								<!-- <td class="table-header">설명</td> -->
								<td class="table-header">
									<button type="button" class="btn btn-primary btn-xs" id="btnNewItem_param">
										<span class="glyphicon glyphicon-plus">&nbsp;추가</span>   
									</button>
								</td>
							</tr>
						</thead>
						<tbody id="table_param">
						</tbody>
					</table>
				</div>
				<div class="col-md-7">
					<div class="col-md-12 pd0">
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="col-md-12" id="modalParamDetailEmpty">
									<div class="form-group col-md-12 pd0">
										<div class="col-md-12 pd0">
											* 파라미터 정보를 선택해주세요.
										</div>
									</div>
								</div>
								<div id="modalParamDetail">
									<div class="col-md-12">
										<div class="row content-box-title">
											<div class="col-md-12 detail-content-title">
												<label>정보</label>
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>이름</label>
											</div>
											<div class="col-md-9 pd0">
												<input type="text" class="form-control input-sm" id="txtParam" placeholder="">
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>타입</label>
											</div>
											<div class="col-md-9 pd0">
												<select class="form-control input-sm" id="sltParam">
													<c:forEach var="item" items="${reqParamTypes}">
											            <option value="${item}">${item}</option>
											        </c:forEach>
												</select>
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>샘플 파라미터</label>
											</div>
											<div class="col-md-9 pd0">
												<input type="text" class="form-control input-sm" id="txtSampleParam" placeholder="">
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-3 content-title">
												<label>설명</label>
											</div>
											<div class="col-md-9 pd0">
												<textarea class="form-control input-sm" rows="5" id="txtParamDesc"></textarea>
											</div>
										</div>
										<div class="form-group col-md-12 pd0">
											<div class="col-md-12 pd0 text-center">
												<button type="button" class="btn btn-default btn-sm" id="saveItem_param">
	   												<span class="glyphicon glyphicon-ok">&nbsp;저장</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-default btn-sm" id="btnConfirmItem_param">
   			<span class="glyphicon glyphicon-ok-circle">&nbsp;적용</span>     
        </button>
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
        	<span class="glyphicon glyphicon-remove-circle">&nbsp;취소</span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal_apiTypeHelp" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="width: 800px;">
    <div class="modal-content">
      <div class="modal-body" style="height: 600px; overflow: auto;">
      	<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="col-md-12">
						<div class="form-group content-box-title">
							<label>* WEB_SERVICE *</label>
						</div>
						<div class="form-group col-md-12 pd0">
							&nbsp;응답결과는 요청헤더의 Content-Type, Accept 순으로 확인해서 마지막으로 만나는 것이 최종 응답유형이된다. 
							예를들어 Content-Type이 XML이고, Accept는 JSON이라면 최종적으로 JSON이 응답유형이 된다.  <br/><br/>
							이 응답 유형이 JSON인 경우에 한해서 응답결과타입(MAP, LIST, INT)이 유효한데, INT는 사용되지 않는다. <br/><br/> 
							응답결과는 XML, JSON, URL-ENCODE가 준비되어 있으며 이외의 경우에는 Map에 key를 text로 하여 응답결과를 붙여서 반환한다. 
							응답결과가 XML이면 JSON객체로 반환한다. <br/><br/> 
							응답결과가 JSON이고, 응답결과타입이 LIST인 경우 리턴타입은 List&lt;Map&lt;String, Object&gt;&gt; 이다. <br/>
							응답결과가 JSON이고, 응답결과타입이 MAP인 경우 리턴타입은 Map&lt;String, Object&gt;이다. <br/>
							URL-ENCODE의 경우 리턴타입은 MultiValueMap&lt;String, String&gt; 이다.
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="col-md-12">
						<div class="form-group content-box-title">
							<label>* SQL *</label>
						</div>
						<div class="form-group col-md-12 pd0">
							&nbsp;HttpMethod타입에 따라서 질의문이 실행되는데 HttpMethod타입이 GET인 경우와 그렇지 않은 경우로 분류된다. <br/>
							GET인 경우 응답결과타입이 MAP인 경우, queryForMap형태로 질의문이 실행된다. 즉, 결과가 1개인 SELECT문이 적합하다. <br/>
							LIST인 경우에는 queryForList형태로 질의문이 실행되므로, 결과가 2개 이상인 SELECT문에 적합하다. INT는 부적절한 응답결과타입이다. <br/><br/>
							HttpMethod타입이 GET이 아닌경우, INT가 아니면 부적절한 응답결과 타입이며 질의문은 INSERT, UPDATE, DELETE문이 적합한다. 반환되는 값은 해당 질의문에 의해 영향받은 row의 갯수이다. 		
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="col-md-12">
						<div class="form-group content-box-title">
							<label>* PROCEDURE *</label>
						</div>
						<div class="form-group col-md-12 pd0">
							&nbsp;Procedure 입력란(Api.targetName) 작성이 필요한다. 지정하는 형태는 다음과 같다.<br/> 
							(1) {procedure name}<br/> 
							(2) {schema name}.{procedure name}<br/> 
							(3) {schema name}.{catalog name}.{procedure name}<br/> 
							이외의 경우는 부적절한 형태이다. 
							실행결과는 응답결과타입에 상관없이 Map&lt;String, Object&gt;이다. 
						</div>
					</div>
				</div>
			</div>
		</div>
      	<!-- <div class="row col-md-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="col-md-12">
						<div class="row content-box-title">
							<label>* myBatis *</label>
						</div>
						<div class="row col-md-12 pd0">
						</div>
					</div>
				</div>
			</div>
		</div> -->
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
        	<span class="glyphicon glyphicon-ok-circle">&nbsp;확인</span>   
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal_testResult" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       <div class="modal-header">
      	⊙ 테스트 결과
      </div>
      <div class="modal-body">
      		
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-default" data-dismiss="modal">
        	<span class="glyphicon glyphicon-ok-circle">&nbsp;확인</span>
        </button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	var api = new mplus_admin_api();
	api.init();	
});
</script>