apitester view 수정
This commit is contained in:
현성필
@@ -16,7 +16,8 @@
|
||||
</div>
|
||||
<!-- new collection button -->
|
||||
<div class="pt-new-collection 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_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>
|
||||
</div>
|
||||
<div class="collapse pt-links" id="side_menubar" aria-label="sidebar menu">
|
||||
<ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
|
||||
@@ -16,7 +16,13 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
<div class="api_request">
|
||||
<ul class="nav nav-tabs" role="tablist" id="apiRequestTabTitle">
|
||||
</ul>
|
||||
<div class="tab-content" id="apiRequestTabContent">
|
||||
</div>
|
||||
</div>
|
||||
<div id="apiRequestTemplate" style="display: none;">
|
||||
<div class="tab-pane fade mt-1">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="form-floating col-md-2 me-1">
|
||||
<select name="method" class="form-select method">
|
||||
@@ -30,49 +36,47 @@
|
||||
<option value="TRACE">TRACE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Method</label>
|
||||
<label class="form-label must">Method</label>
|
||||
</div>
|
||||
<div class="form-floating col-md-3 me-1">
|
||||
<select name="server" class="form-select server">
|
||||
<option th:each="server : ${servers}" th:value="${server.id}"
|
||||
th:text="${server.name}"></option>
|
||||
<select class="form-select server" name="server">
|
||||
<option th:each="server : ${servers}" th:value="${server.id}" th:text="${server.name}"></option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Server</label>
|
||||
<label class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="input-group col-md">
|
||||
<div class="form-floating col-md">
|
||||
<input type="text" name="path" class="form-control path" placeholder="호출할 경로 (/부터 입력)"
|
||||
required>
|
||||
<label for="path" class="must">Path</label>
|
||||
<label class="must">Path</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" data-bs-toggle="tab"
|
||||
data-bs-target="#requestParamTab" type="button" role="tab" aria-controls="paramTab"
|
||||
<button class="nav-link active btn_request_param_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="paramTab"
|
||||
aria-selected="true">Param
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestHeaderTab" type="button" role="tab"
|
||||
aria-controls="requestHeader"
|
||||
<button class="nav-link btn_request_header_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestHeader"
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestBodyTab" type="button" role="tab" aria-controls="requestBody"
|
||||
<button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestBody"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 300px;">
|
||||
<div class="tab-pane fade show active" id="requestParamTab" role="tabpanel"
|
||||
<div class="tab-pane fade show active request_param_tab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table" id="requestMatcherParamTable">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
@@ -87,7 +91,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestHeaderTab" role="tabpanel"
|
||||
<div class="tab-pane fade request_header_tab" role="tabpanel"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
@@ -104,7 +108,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestBodyTab" role="tabpanel"
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel"
|
||||
aria-labelledby="requestBody-tab">
|
||||
<textarea class="form-control request_body" style="height: 200px;"></textarea>
|
||||
</div>
|
||||
@@ -133,7 +137,7 @@
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<textarea style="height: 200px;" id="responseBody"></textarea>
|
||||
<textarea style="height: 200px;" class="response_body"></textarea>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="responseHeaderTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
@@ -151,7 +155,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="inputTemplate" style="visibility: hidden; height: 0;">
|
||||
<div id="inputTemplate" style="display: none;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -168,7 +172,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="responseHeaderTemplate" style="visibility: hidden; height: 0;">
|
||||
<div id="responseHeaderTemplate" style="display: none;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -188,33 +192,13 @@
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
$(function () {
|
||||
let model = {
|
||||
server: null,
|
||||
method: 'POST',
|
||||
path: '',
|
||||
headers: [],
|
||||
queryParams: [],
|
||||
requestBody: ''
|
||||
};
|
||||
let responseModel = {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
body: ''
|
||||
};
|
||||
|
||||
let apiRequests = [];
|
||||
|
||||
let view = {
|
||||
requestBody: null,
|
||||
responseBody: null,
|
||||
currentIdx: 0,
|
||||
responses: [],
|
||||
init: function () {
|
||||
$('.btn_add_header').click(function () {
|
||||
controller.addHeader();
|
||||
});
|
||||
$('.btn_add_query').click(function () {
|
||||
controller.addQueryParam('', '');
|
||||
});
|
||||
|
||||
$("#cancel-ajax").on("click", function () {
|
||||
if (controller.currentAjaxRequest) {
|
||||
controller.currentAjaxRequest.abort();
|
||||
@@ -222,87 +206,45 @@
|
||||
}
|
||||
});
|
||||
|
||||
model.server = $('.api_request').find('.server').val();
|
||||
model.method = $('.api_request').find('.method').val();
|
||||
|
||||
$('.api_request').find('.server').on('change', function () {
|
||||
model.server = $(this).val();
|
||||
$('#new_request').on('click', function () {
|
||||
controller.addAPIRequest();
|
||||
});
|
||||
|
||||
|
||||
$('.api_request').find('.method').on('change', function () {
|
||||
model.method = $(this).val();
|
||||
});
|
||||
|
||||
$('.api_request').find('.path').on('input', function () {
|
||||
model.path = $(this).val();
|
||||
model.queryParams = [];
|
||||
let queryString = model.path.split('?')[1];
|
||||
if (queryString) {
|
||||
let queryParamArray = queryString.split('&');
|
||||
for (let i = 0; i < queryParamArray.length; i++) {
|
||||
let queryParam = queryParamArray[i].split('=');
|
||||
controller.addQueryParam(queryParam[0], queryParam[1]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.api_request').find('.request_headers').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeHeader($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
$('.api_request').find('.query_params').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeQueryParam($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
$('.api_request').find('.send').click(function () {
|
||||
controller.send();
|
||||
});
|
||||
|
||||
this.requestBody = CodeMirror.fromTextArea($('.api_request').find(".request_body")[0], {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
extraKeys: {
|
||||
"Ctrl-Enter": function (cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||||
},
|
||||
"Esc": function (cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.requestBody.on('change', function(cm, change) {
|
||||
model.requestBody = cm.getValue();
|
||||
})
|
||||
|
||||
this.responseBody = CodeMirror.fromTextArea(document.getElementById('responseBody'), {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
readOnly: true,
|
||||
noCursor: true,
|
||||
extraKeys: {
|
||||
"Ctrl-Enter": function (cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||||
},
|
||||
"Esc": function (cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.render();
|
||||
if (apiRequests.length === 0)
|
||||
controller.addAPIRequest();
|
||||
// this.render();
|
||||
},
|
||||
render: function () {
|
||||
$('.api_request').find('.request_headers').empty();
|
||||
$('.api_request').find('.query_params').empty();
|
||||
renderParam: function (tabIdx) {
|
||||
let target = $('#api_request_' + tabIdx);
|
||||
target.find('.query_params').empty();
|
||||
|
||||
$('.api_request').find('.path').val(model.path);
|
||||
let model = apiRequests[tabIdx];
|
||||
for (let i = 0; i < model.queryParams.length; i++) {
|
||||
let template = $('#inputTemplate').children().find('tr').clone();
|
||||
template.find('input[name="key"]').val(model.queryParams[i].key);
|
||||
template.find('input[name="value"]').val(model.queryParams[i].value);
|
||||
template.find('button').attr("data-id", i);
|
||||
|
||||
template.find('input[name="key"]').on('focusout', function () {
|
||||
model.queryParams[i].key = $(this).val();
|
||||
controller.buildPath(tabIdx);
|
||||
});
|
||||
template.find('input[name="value"]').on('focusout', function () {
|
||||
model.queryParams[i].value = $(this).val();
|
||||
controller.buildPath(tabIdx);
|
||||
});
|
||||
|
||||
target.find('.query_params').append(template);
|
||||
}
|
||||
|
||||
target.find('.path').val(model.path);
|
||||
|
||||
},
|
||||
renderHeaders: function (tabIdx) {
|
||||
let target = $('#api_request_' + tabIdx);
|
||||
target.find('.request_headers').empty();
|
||||
|
||||
let model = apiRequests[tabIdx];
|
||||
for (let i = 0; i < model.headers.length; i++) {
|
||||
let template = $('#inputTemplate').children().find('tr').clone();
|
||||
template.find('input[name="key"]').val(model.headers[i].key);
|
||||
@@ -316,45 +258,165 @@
|
||||
model.headers[i].value = $(this).val();
|
||||
});
|
||||
|
||||
$('.api_request').find('.request_headers').append(template);
|
||||
target.find('.request_headers').append(template);
|
||||
}
|
||||
|
||||
for (let i = 0; i < model.queryParams.length; i++) {
|
||||
let template = $('#inputTemplate').children().find('tr').clone();
|
||||
template.find('input[name="key"]').val(model.queryParams[i].key);
|
||||
template.find('input[name="value"]').val(model.queryParams[i].value);
|
||||
template.find('button').attr("data-id", i);
|
||||
|
||||
template.find('input[name="key"]').on('focusout', function () {
|
||||
model.queryParams[i].key = $(this).val();
|
||||
controller.buildPath();
|
||||
});
|
||||
template.find('input[name="value"]').on('focusout', function () {
|
||||
model.queryParams[i].value = $(this).val();
|
||||
controller.buildPath();
|
||||
});
|
||||
|
||||
$('.api_request').find('.query_params').append(template);
|
||||
}
|
||||
|
||||
},
|
||||
renderResponse: function () {
|
||||
$('.api_request').find('.response_headers').empty();
|
||||
$('.api_request').find(".response_status").empty();
|
||||
renderTab: function(idx){
|
||||
let apiRequestTabContent = $('#apiRequestTabContent');
|
||||
let apiRequestTabTitle = $('#apiRequestTabTitle');
|
||||
|
||||
view.responseBody.setValue(responseModel.body);
|
||||
let model = apiRequests[idx];
|
||||
|
||||
for (let i = 0; i < responseModel.headers.length; i++) {
|
||||
let tabButton = $('<button>').attr('class', 'nav-link')
|
||||
.attr('data-bs-toggle', 'tab')
|
||||
.attr('type', 'button')
|
||||
.attr('data-bs-target', '#api_request_' + idx)
|
||||
.attr('role', 'tab')
|
||||
.attr('aria-controls', 'api_request_' + idx)
|
||||
.attr('aria-selected', 'false')
|
||||
.text(apiRequests[idx].name);
|
||||
|
||||
let li = $('<li>').attr('class', 'nav-item')
|
||||
.attr('role', 'presentation')
|
||||
.append(tabButton);
|
||||
|
||||
apiRequestTabTitle.append(li);
|
||||
|
||||
let template = $('#apiRequestTemplate').children().clone();
|
||||
|
||||
template.attr('id', 'api_request_' + idx);
|
||||
template.attr("data-id", idx);
|
||||
template.attr('class', 'tab-pane fade mt-1' + (idx === this.currentIdx ? ' show active' : ''));
|
||||
template.find('.btn_request_param_tab').attr('data-bs-target', "#requestParamTab_"+ idx);
|
||||
template.find('.btn_request_header_tab').attr('data-bs-target', "#requestHeaderTab_"+ idx);
|
||||
template.find('.btn_request_body_tab').attr('data-bs-target', "#requestBodyTab_"+ idx);
|
||||
|
||||
template.find('.request_param_tab').attr('id', "requestParamTab_"+ idx);
|
||||
template.find('.request_header_tab').attr('id', "requestHeaderTab_"+ idx);
|
||||
template.find('.request_body_tab').attr('id', "requestBodyTab_"+ idx);
|
||||
|
||||
|
||||
apiRequestTabContent.append(template);
|
||||
let target = $('#api_request_' + idx);
|
||||
|
||||
target.find('.btn_add_header').click(function () {
|
||||
controller.addHeader(idx);
|
||||
});
|
||||
target.find('.btn_add_query').click(function () {
|
||||
controller.addQueryParam(idx, '', '');
|
||||
});
|
||||
|
||||
model.server = target.find('select[name="server"]').val();
|
||||
|
||||
target.find('.server').on('change', function () {
|
||||
model.server = $(this).val();
|
||||
});
|
||||
|
||||
target.find('.method').on('change', function () {
|
||||
model.method = $(this).val();
|
||||
});
|
||||
|
||||
target.find('.request_headers').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeHeader(idx, $(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
target.find('.query_params').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeQueryParam(idx, $(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
target.find('.path').on('input', function () {
|
||||
model.path = $(this).val();
|
||||
model.queryParams = [];
|
||||
let queryString = model.path.split('?')[1];
|
||||
if (queryString) {
|
||||
let queryParamArray = queryString.split('&');
|
||||
for (let i = 0; i < queryParamArray.length; i++) {
|
||||
let queryParam = queryParamArray[i].split('=');
|
||||
controller.addQueryParam(idx, queryParam[0], queryParam[1]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
target.find('.send').click(function () {
|
||||
controller.send(idx);
|
||||
});
|
||||
|
||||
let requestBody = CodeMirror.fromTextArea(target.find(".request_body")[0], {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
extraKeys: {
|
||||
"Ctrl-Enter": function (cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||||
},
|
||||
"Esc": function (cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||||
}
|
||||
}
|
||||
});
|
||||
requestBody.setValue(model.requestBody);
|
||||
|
||||
requestBody.on('change', function (cm, change) {
|
||||
model.requestBody = cm.getValue();
|
||||
})
|
||||
|
||||
let responseBody = CodeMirror.fromTextArea(target.find(".response_body")[0], {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
readOnly: true,
|
||||
noCursor: true,
|
||||
extraKeys: {
|
||||
"Ctrl-Enter": function (cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||||
},
|
||||
"Esc": function (cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.responses.push(responseBody);
|
||||
target.find('.path').val(model.path);
|
||||
target.find('.method').val(model.method);
|
||||
this.renderParam(idx);
|
||||
this.renderHeaders(idx);
|
||||
|
||||
|
||||
$('#apiRequestTabTitle li:eq(' + view.currentIdx + ') button').tab('show');
|
||||
},
|
||||
render: function () {
|
||||
let apiRequestTabContent = $('#apiRequestTabContent');
|
||||
let apiRequestTabTitle = $('#apiRequestTabTitle');
|
||||
apiRequestTabTitle.empty();
|
||||
apiRequestTabContent.empty();
|
||||
|
||||
this.responses = [];
|
||||
|
||||
for (let idx = 0; idx < apiRequests.length; idx++) {
|
||||
this.renderTab(idx);
|
||||
}
|
||||
},
|
||||
renderResponse: function (tabIdx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
let target = $('#api_request_' + tabIdx);
|
||||
target.find('.response_headers').empty();
|
||||
target.find(".response_status").empty();
|
||||
|
||||
this.responses[tabIdx].setValue(model.responseModel.body);
|
||||
|
||||
for (let i = 0; i < model.responseModel.headers.length; i++) {
|
||||
let template = $('#responseHeaderTemplate').children().find('tr').clone();
|
||||
template.find('input[name="key"]').val(responseModel.headers[i].key);
|
||||
template.find('input[name="value"]').val(responseModel.headers[i].value);
|
||||
$('.api_request').find('.response_headers').append(template);
|
||||
template.find('input[name="key"]').val(model.responseModel.headers[i].key);
|
||||
template.find('input[name="value"]').val(model.responseModel.headers[i].value);
|
||||
target.find('.response_headers').append(template);
|
||||
}
|
||||
|
||||
//show response status
|
||||
$('.api_request').find(".response_status").text("status: " + responseModel.status);
|
||||
$('.api_request').find(".response_time").text("time: " + responseModel.time + "ms");
|
||||
$('.api_request').find(".response_size").text("size: " + responseModel.size + "bytes");
|
||||
target.find(".response_status").text("status: " + model.responseModel.status);
|
||||
target.find(".response_time").text("time: " + model.responseModel.time + "ms");
|
||||
target.find(".response_size").text("size: " + model.responseModel.size + "bytes");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -363,25 +425,29 @@
|
||||
init: function () {
|
||||
view.init();
|
||||
},
|
||||
addHeader: function () {
|
||||
addHeader: function (tabIdx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
model.headers.push({
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
view.render();
|
||||
view.renderHeaders(tabIdx);
|
||||
},
|
||||
removeHeader: function (idx) {
|
||||
removeHeader: function (tabIdx, idx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
model.headers.splice(idx, 1);
|
||||
view.render();
|
||||
view.renderHeaders(idx);
|
||||
},
|
||||
addQueryParam: function (key, value) {
|
||||
addQueryParam: function (tabIdx, key, value) {
|
||||
let model = apiRequests[tabIdx];
|
||||
model.queryParams.push({
|
||||
key: key,
|
||||
value: value
|
||||
});
|
||||
view.render();
|
||||
view.renderParam(tabIdx);
|
||||
},
|
||||
buildPath: function () {
|
||||
buildPath: function (tabIdx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
let queryString = model.path.split('?')[0];
|
||||
if (model.queryParams.length > 0) {
|
||||
queryString += '?';
|
||||
@@ -393,12 +459,13 @@
|
||||
}
|
||||
}
|
||||
model.path = queryString;
|
||||
view.render();
|
||||
view.renderParam(tabIdx);
|
||||
},
|
||||
removeQueryParam: function (idx) {
|
||||
removeQueryParam: function (tabIdx, idx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
model.queryParams.splice(idx, 1);
|
||||
this.buildPath();
|
||||
view.render();
|
||||
this.buildPath(tabIdx);
|
||||
view.renderParam(tabIdx);
|
||||
},
|
||||
showLoadingOverlay: function () {
|
||||
$("#loading-overlay").show();
|
||||
@@ -406,10 +473,11 @@
|
||||
hideLoadingOverlay: function () {
|
||||
$("#loading-overlay").hide();
|
||||
},
|
||||
send: function () {
|
||||
console.log(model);
|
||||
$('.api_request').find('.response_headers').empty();
|
||||
view.responseBody.setValue('');
|
||||
send: function (tabIdx) {
|
||||
let model = apiRequests[tabIdx];
|
||||
let target = $('#api_request_' + tabIdx);
|
||||
target.find('.response_headers').empty();
|
||||
view.responses[tabIdx].setValue('');
|
||||
let startTime = new Date().getTime();
|
||||
if (model.path !== '') {
|
||||
controller.showLoadingOverlay();
|
||||
@@ -419,10 +487,10 @@
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(model),
|
||||
success: function (data) {
|
||||
responseModel.status = data.status;
|
||||
responseModel.body = data.body;
|
||||
responseModel.headers = data.headers;
|
||||
responseModel.size = data.size;
|
||||
model.responseModel.status = data.status;
|
||||
model.responseModel.body = data.body;
|
||||
model.responseModel.headers = data.headers;
|
||||
model.responseModel.size = data.size;
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
console.error(textStatus, errorThrown);
|
||||
@@ -430,8 +498,8 @@
|
||||
},
|
||||
complete: function () {
|
||||
let endTime = new Date().getTime();
|
||||
responseModel.time = endTime - startTime;
|
||||
view.renderResponse();
|
||||
model.responseModel.time = endTime - startTime;
|
||||
view.renderResponse(tabIdx);
|
||||
controller.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
@@ -444,16 +512,33 @@
|
||||
|
||||
},
|
||||
addAPIRequest: function () {
|
||||
|
||||
apiRequests.push({
|
||||
server: null,
|
||||
method: 'GET',
|
||||
name: 'New Request',
|
||||
path: '',
|
||||
headers: [],
|
||||
queryParams: [],
|
||||
requestBody: '',
|
||||
responseModel: {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
body: ''
|
||||
}
|
||||
});
|
||||
view.currentIdx = apiRequests.length - 1;
|
||||
view.renderTab(view.currentIdx);
|
||||
},
|
||||
removeAPIRequest: function () {
|
||||
|
||||
removeAPIRequest: function (idx) {
|
||||
apiRequests.splice(idx, 1);
|
||||
view.render();
|
||||
}
|
||||
}
|
||||
|
||||
controller.init();
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="template" style="visibility: hidden; height: 0;">
|
||||
<div id="template" style="display: none;">
|
||||
<div class="tab-pane" role="tabpanel">
|
||||
<div class="row mt-1">
|
||||
<div class="col-md condition">
|
||||
@@ -157,7 +157,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="conditionTemplate" style="visibility: hidden; height: 0;">
|
||||
<div id="conditionTemplate" style="display: none;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -182,7 +182,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="responseHeaderTemplate" style="visibility: hidden; height: 0;">
|
||||
<div id="responseHeaderTemplate" style="display: none;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -311,7 +311,7 @@
|
||||
if (model.responses[i].defaultResponse) {
|
||||
nodeCopy.find('.condition_name').text('기본 응답');
|
||||
nodeCopy.find('.condition').attr('class', 'condition')
|
||||
nodeCopy.find('.condition').attr('style', 'visibility: hidden; height: 0; width:0;')
|
||||
nodeCopy.find('.condition').attr('style', 'display: none;')
|
||||
}else {
|
||||
nodeCopy.find('.condition_name').text('조건 ' + (i + 1));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user