djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

시나리오 탭 처리

Browse Source
This commit is contained in:
현성필
2024-01-08 10:20:58 +09:00
parent b4c43a2138
commit 2861d3d393
7 changed files with 260 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/page/tester/apiCollection.html
+87 -6
View File
@@ -6,15 +6,31 @@
</head>
<body>
<aside class="pt-sidebar border" th:fragment="collectionFragment" style="min-width: 200px;">
<div class="p-1">
<button type="button" class="btn btn-primary btn-sm" id="new_collection"><i class="fa fa-plus"></i>새 컬렉션</button>
<button type="button" class="btn btn-primary btn-sm" id="new_request"><i class="fa fa-plus"></i>새 요청</button>
<aside class="api-catalog border" th:fragment="collectionFragment">
<div style="background: rgba(0,0,0,.03);">
API 목록
</div>
<div class="collapse pt-links" aria-label="sidebar menu">
<ul class="list-unstyled mb-0 py-3 pt-md-1" id="side_menubar">
<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 save_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">
@@ -49,6 +65,39 @@
</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">
@@ -88,6 +137,38 @@
<!-- menu script -->
<th:block th:fragment="collectionScript">
<script th:inline="javascript">
$(document).ready(function () {
var showingScenario = true;
$('#toggle_tester').on('click', function () {
console.log(showingScenario);
showingScenario = !showingScenario;
if (showingScenario) {
// Move .api-scenario off-screen to the left
// $('.api-scenario').css('transform', 'translateX(0)');
$('.api-scenario').show();
$('.api-tester').hide();
$('#toggle_tester').text('테스터 보기');
} else {
// Bring .api-scenario into view
// $('.api-scenario').css('transform', 'translateX(-100%)');
$('#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>