변수 보기
This commit is contained in:
현성필
@@ -16,7 +16,7 @@ class APITester {
|
||||
this.preRequestEditors = [];
|
||||
this.postRequestEditors = [];
|
||||
|
||||
this.variables = {};
|
||||
// this.variables = {};
|
||||
this.apiClient = new APIClient();
|
||||
}
|
||||
|
||||
@@ -94,12 +94,6 @@ class APITester {
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_variables_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="variables" data-bs-target="#variablesTab_${apiRequest.id}"
|
||||
aria-selected="false">Variables
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_prerequest_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="preScrit" data-bs-target="#preRequestTab_${apiRequest.id}"
|
||||
@@ -112,7 +106,6 @@ class APITester {
|
||||
aria-selected="false">Post-Request
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 300px;">
|
||||
<div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}"
|
||||
@@ -151,25 +144,6 @@ class APITester {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade variables_tab" role="tabpanel" id="variablesTab_${apiRequest.id}"
|
||||
aria-labelledby="variables-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<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">
|
||||
${this.renderVariables(apiRequest.variables)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}"
|
||||
aria-labelledby="requestBody-tab">
|
||||
<select class="form-select mt-1 request_body_type" name="request_type">
|
||||
@@ -246,26 +220,26 @@ class APITester {
|
||||
`;
|
||||
}
|
||||
|
||||
variableTemplate(variable, index) {
|
||||
return `
|
||||
<tr data-index="${index}">
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="variables[${index}].enabled" ${variable.enabled ? 'checked' : ''} />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input class="form-control" type="text" name="variables[${index}].key" value="${variable.key}"/>
|
||||
</td>
|
||||
<td>
|
||||
<input class="form-control" type="text" name="variables[${index}].value" value="${variable.value}"/>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_remove_variable">제거</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
// variableTemplate(variable, index) {
|
||||
// return `
|
||||
// <tr data-index="${index}">
|
||||
// <td>
|
||||
// <div class="form-check">
|
||||
// <input class="form-check-input" type="checkbox" name="variables[${index}].enabled" ${variable.enabled ? 'checked' : ''} />
|
||||
// </div>
|
||||
// </td>
|
||||
// <td>
|
||||
// <input class="form-control" type="text" name="variables[${index}].key" value="${variable.key}"/>
|
||||
// </td>
|
||||
// <td>
|
||||
// <input class="form-control" type="text" name="variables[${index}].value" value="${variable.value}"/>
|
||||
// </td>
|
||||
// <td>
|
||||
// <button type="button" class="btn btn-secondary btn-sm btn_remove_variable">제거</button>
|
||||
// </td>
|
||||
// </tr>
|
||||
// `;
|
||||
// }
|
||||
|
||||
headerTemplate(header, index) {
|
||||
return `
|
||||
@@ -353,8 +327,8 @@ class APITester {
|
||||
{selector: '.btn_remove_header', action: this.removeHeader.bind(this)},
|
||||
{selector: '.btn_add_query', action: this.addQueryParam.bind(this)},
|
||||
{selector: '.btn_remove_query', action: this.removeQueryParam.bind(this)},
|
||||
{selector: '.btn_add_variables', action: this.addVariable.bind(this)},
|
||||
{selector: '.btn_remove_variable', action: this.removeVariable.bind(this)},
|
||||
// {selector: '.btn_add_variables', action: this.addVariable.bind(this)},
|
||||
// {selector: '.btn_remove_variable', action: this.removeVariable.bind(this)},
|
||||
|
||||
{selector: '.send', action: this.handleSendAPIRequest.bind(this)},
|
||||
{selector: '.save', action: this.saveAPIRequest.bind(this)},
|
||||
@@ -384,7 +358,7 @@ class APITester {
|
||||
$(document).on('change', '.query_params input', this.buildPath.bind(this));
|
||||
$(document).on('input', '.path', this.parseParam.bind(this));
|
||||
$(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.variables input', this.handleUIUpdate.bind(this));
|
||||
// $(document).on('change', '.variables input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
|
||||
$(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this));
|
||||
|
||||
@@ -566,9 +540,25 @@ class APITester {
|
||||
return params.map((param, index) => this.queryParamTemplate(param, index)).join('');
|
||||
}
|
||||
|
||||
renderVariables(variables) {
|
||||
return variables.map((variable, index) => this.variableTemplate(variable, index)).join('');
|
||||
}
|
||||
// renderGlobalVariables() {
|
||||
// let globalVaraibes = '';
|
||||
// if (window.globals) {
|
||||
// //for each key in globals
|
||||
// Object.keys(window.globals).map((key, index) => {
|
||||
// globalVaraibes += this.variableTemplate({
|
||||
// enabled: true,
|
||||
// key: key,
|
||||
// value: window.globals[key]
|
||||
// }, index);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// return globalVaraibes;
|
||||
// }
|
||||
|
||||
// renderVariables(variables) {
|
||||
// return variables.map((variable, index) => this.variableTemplate(variable, index)).join('');
|
||||
// }
|
||||
|
||||
renderHeaders(headers) {
|
||||
return headers.map((header, index) => this.headerTemplate(header, index)).join('');
|
||||
@@ -809,34 +799,34 @@ class APITester {
|
||||
target.find('.query_params').append(this.renderParams(model.queryParams));
|
||||
}
|
||||
|
||||
addVariable(event) {
|
||||
//console.log('addVariable');
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.variables.push({
|
||||
enabled: true,
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
this.renderVariablesView(tabIndex);
|
||||
}
|
||||
|
||||
removeVariable(event) {
|
||||
//console.log('removeVariable');
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
const index = $(event.currentTarget).closest('tr').data('index');
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.variables.splice(index, 1);
|
||||
this.renderVariablesView(tabIndex);
|
||||
}
|
||||
|
||||
renderVariablesView(tabIndex) {
|
||||
let model = this.apiRequests[tabIndex];
|
||||
//console.log(model);
|
||||
let target = $('#api_request_' + model.id);
|
||||
target.find('.variables').empty();
|
||||
target.find('.variables').append(this.renderVariables(model.variables));
|
||||
}
|
||||
// addVariable(event) {
|
||||
// //console.log('addVariable');
|
||||
// const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
// let model = this.apiRequests[tabIndex];
|
||||
// model.variables.push({
|
||||
// enabled: true,
|
||||
// key: '',
|
||||
// value: ''
|
||||
// });
|
||||
// this.renderVariablesView(tabIndex);
|
||||
// }
|
||||
//
|
||||
// removeVariable(event) {
|
||||
// //console.log('removeVariable');
|
||||
// const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
// const index = $(event.currentTarget).closest('tr').data('index');
|
||||
// let model = this.apiRequests[tabIndex];
|
||||
// model.variables.splice(index, 1);
|
||||
// this.renderVariablesView(tabIndex);
|
||||
// }
|
||||
//
|
||||
// renderVariablesView(tabIndex) {
|
||||
// let model = this.apiRequests[tabIndex];
|
||||
// //console.log(model);
|
||||
// let target = $('#api_request_' + model.id);
|
||||
// target.find('.variables').empty();
|
||||
// target.find('.variables').append(this.renderVariables(model.variables));
|
||||
// }
|
||||
|
||||
parseParam(event) {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
<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">
|
||||
@@ -59,10 +60,61 @@
|
||||
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');
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
container.classList.remove('full-screen');
|
||||
// layoutManager.resize();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -149,6 +149,36 @@
|
||||
</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 -->
|
||||
|
||||
Reference in New Issue
Block a user