현성필
163 lines
6.9 KiB
HTML
163 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
|
|
|
|
|
<head th:replace="fragment/head :: headFragment">
|
|
<meta charset="utf-8">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- header -->
|
|
<header th:replace="fragment/header :: headerFragment"></header>
|
|
<th:block th:replace="fragment/header :: headerScript"></th:block>
|
|
<nav th:replace="fragment/header :: navFragment"></nav>
|
|
|
|
|
|
|
|
<!-- csrf -->
|
|
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; left: 0;">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">알림</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
</div>
|
|
</div>
|
|
<div class="api-tester-layout">
|
|
<div class="tester-toolbar">
|
|
<button type="button" class="btn btn-primary btn-sm" id="toggle_tester">시나리오 보기</button>
|
|
<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>
|
|
<button type="button" class="btn btn-primary btn-sm" id="new_scenario"><i class="fa fa-plus"></i> 새로운 시나리오
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-sm" id="full_screen"><i class="fa-solid fa-display"></i> 전체화면</button>
|
|
<button type="button" class="btn btn-primary btn-sm" id="show_variable"><i class="fa-solid fa-list"></i> 변수 보기</button>
|
|
</div>
|
|
<div class="tester">
|
|
<section th:replace="page/tester/apiScenario :: scenarioFragment">
|
|
</section>
|
|
<aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
|
|
<section class="api-tester" layout:fragment="contentFragment">
|
|
</section>
|
|
<section th:replace="page/tester/apiScenario :: scenarioScript">
|
|
|
|
</section>
|
|
</div>
|
|
<th:block th:replace="page/tester/apiCollection :: collectionScript">
|
|
|
|
</th:block>
|
|
<th:block layout:fragment="contentScript">
|
|
</th:block>
|
|
<link th:href="@{/css/resizable.css}" rel="stylesheet" />
|
|
<script>
|
|
$(function () {
|
|
const container = document.querySelector('.api-tester-layout');
|
|
$('#full_screen').on('click', function () {
|
|
container.classList.toggle('full-screen');
|
|
});
|
|
|
|
function populateVariablesTable() {
|
|
var tbody = $('.variables');
|
|
tbody.empty(); // Clear existing rows
|
|
|
|
$.each(window.globals, function(key, value) {
|
|
var row = $('<tr>');
|
|
var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input').val(key);
|
|
var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input').val(value);
|
|
var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
|
|
|
|
row.append($('<td>').append(keyInput));
|
|
row.append($('<td>').append(valueInput));
|
|
row.append($('<td>').append(deleteButton));
|
|
tbody.append(row);
|
|
});
|
|
|
|
// Event listener for changes in key
|
|
$('.key-input').on('change', function() {
|
|
var oldKey = $(this).closest('tr').find('.value-input').attr('data-old-key');
|
|
var newKey = $(this).val();
|
|
var value = window.globals[oldKey];
|
|
|
|
delete window.globals[oldKey];
|
|
window.globals[newKey] = value;
|
|
$(this).closest('tr').find('.value-input').attr('data-old-key', newKey);
|
|
});
|
|
|
|
// Event listener for changes in value
|
|
$('.value-input').on('change', function() {
|
|
var key = $(this).closest('tr').find('.key-input').val();
|
|
var newValue = $(this).val();
|
|
window.globals[key] = newValue;
|
|
});
|
|
|
|
$('.delete-variable').on('click', function() {
|
|
var key = $(this).closest('tr').find('.key-input').val();
|
|
delete window.globals[key];
|
|
$(this).closest('tr').remove();
|
|
});
|
|
|
|
// Set data-old-key attribute for tracking key changes
|
|
$('.value-input').each(function() {
|
|
var key = $(this).closest('tr').find('.key-input').val();
|
|
$(this).attr('data-old-key', key);
|
|
});
|
|
}
|
|
|
|
$('#show_variable').on('click', function () {
|
|
populateVariablesTable();
|
|
$('#variable_modal').modal('show');
|
|
});
|
|
|
|
$('.btn_add_variables').on('click', function() {
|
|
var tbody = $('.variables');
|
|
|
|
// Create a new row with empty key and value inputs
|
|
var newRow = $('<tr>');
|
|
var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input');
|
|
var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input');
|
|
var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
|
|
|
|
newRow.append($('<td>').append(keyInput));
|
|
newRow.append($('<td>').append(valueInput));
|
|
newRow.append($('<td>').append(deleteButton));
|
|
tbody.append(newRow);
|
|
|
|
// Event listeners for the new inputs
|
|
keyInput.on('change', function() {
|
|
var newKey = $(this).val();
|
|
window.globals[newKey] = ''; // Initialize the key with an empty value
|
|
valueInput.attr('data-old-key', newKey);
|
|
});
|
|
|
|
valueInput.on('change', function() {
|
|
var key = $(this).closest('tr').find('.key-input').val();
|
|
var newValue = $(this).val();
|
|
window.globals[key] = newValue;
|
|
});
|
|
|
|
deleteButton.on('click', function() {
|
|
var key = $(this).closest('tr').find('.key-input').val();
|
|
delete window.globals[key];
|
|
$(this).closest('tr').remove();
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') {
|
|
container.classList.remove('full-screen');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!--<footer th:replace="fragment/footer :: footerFragment"></footer>-->
|
|
|
|
</body>
|
|
</html>
|