변수 보기
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'));
|
||||
|
||||
Reference in New Issue
Block a user