현성필
217 lines
10 KiB
HTML
217 lines
10 KiB
HTML
<!doctype html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
|
|
<body>
|
|
<aside class="api-catalog border" th:fragment="collectionFragment">
|
|
<div style="background: rgba(0,0,0,.03);">
|
|
API 목록
|
|
</div>
|
|
<div class="pt-links" aria-label="sidebar menu">
|
|
<ul class="list-unstyled" id="side_menubar">
|
|
</ul>
|
|
</div>
|
|
<div class="modal fade" id="new_scenario_modal" tabindex="-1" aria-labelledby="new_scenario_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">새로운 시나리오 추가</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" id="new_scenario_name" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="scenario_name" required/>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary create_scenario">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="new_collection_modal" tabindex="-1" aria-labelledby="new_collection_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">새로운 컬렉션 추가</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" id="new_collection_name" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="collection_name" required/>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary save_collection">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="edit_name_modal" tabindex="-1" aria-labelledby="edit_name_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">새로운 이름</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="name" required/>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary change_name">저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="loading-overlay" style="display: none;">
|
|
<div class="d-flex justify-content-center align-items-center"
|
|
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
|
|
<div class="text-center">
|
|
<span class="sr-only">Loading...</span>
|
|
<br/>
|
|
<button id="cancel-ajax" class="btn btn-danger mt-3">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="new_api_request_modal" tabindex="-1" aria-labelledby="new_api_request_modal"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">새로운 API 추가</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<select class="form-select" id="modal_collection"></select>
|
|
<div class="input-group mt-2">
|
|
<span class="input-group-text">API 이름</span>
|
|
<input type="text" class="form-control" id="new_api_name">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary add_new_request">추가</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="confirm_delete_modal" tabindex="-1" aria-labelledby="confirm_delete_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">컬렉션 삭제</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>삭제 하시겠습니까?</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary confirm_delete">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="confirm_delete_scenario_modal" tabindex="-1" aria-labelledby="confirm_delete_scenario_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">시나리오 삭제</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>삭제 하시겠습니까?</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary confirm_delete_scenario">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="confirm_delete_api_modal" tabindex="-1" aria-labelledby="confirm_delete_api_modal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">API 삭제</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>삭제 하시겠습니까?</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
<button type="button" class="btn btn-primary confirm_delete_api">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="variable_modal" tabindex="-1" aria-labelledby="variable_modal" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">환경 변수</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>Globals</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">키</th>
|
|
<th scope="col">값</th>
|
|
<th scope="col">
|
|
<button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="variables">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- menu script -->
|
|
<th:block th:fragment="collectionScript">
|
|
<script th:inline="javascript">
|
|
$(document).ready(function () {
|
|
|
|
var showingScenario = false;
|
|
|
|
$('#toggle_tester').on('click', function () {
|
|
console.log(showingScenario);
|
|
showingScenario = !showingScenario;
|
|
if (showingScenario) {
|
|
$('.api-scenario').show();
|
|
$('.api-tester').hide();
|
|
$('#toggle_tester').text('테스터 보기');
|
|
} else {
|
|
$('#toggle_tester').text('시나리오 보기');
|
|
$('.api-scenario').hide();
|
|
$('.api-tester').show();
|
|
}
|
|
});
|
|
|
|
if (showingScenario) {
|
|
$('.api-scenario').show();
|
|
$('.api-tester').hide();
|
|
} else {
|
|
$('.api-scenario').hide();
|
|
$('.api-tester').show();
|
|
}
|
|
});
|
|
</script>
|
|
</th:block>
|
|
</body>
|
|
|
|
</html>
|