request body select 적용
This commit is contained in:
현성필
@@ -112,7 +112,12 @@
|
||||
</div>
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel"
|
||||
aria-labelledby="requestBody-tab">
|
||||
<textarea class="form-control request_body" style="height: 200px;"></textarea>
|
||||
<select class="form-select mt-1 request_body_type" name="request_type">
|
||||
<option value="json">json</option>
|
||||
<option value="xml">xml</option>
|
||||
<option value="text/plain">raw</option>
|
||||
</select>
|
||||
<textarea class="form-control request_body mt-1" style="height: 200px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
@@ -205,6 +210,7 @@
|
||||
let view = {
|
||||
currentIdx: 0,
|
||||
responses: [],
|
||||
requests: [],
|
||||
init: function () {
|
||||
$("#cancel-ajax").on("click", function () {
|
||||
if (controller.currentAjaxRequest) {
|
||||
@@ -230,9 +236,11 @@
|
||||
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);
|
||||
|
||||
if(model.queryParams[i].enabled){
|
||||
template.find('input[name="enabled"]').prop("checked",model.queryParams[i].enabled);
|
||||
}
|
||||
|
||||
template.find('button').attr("data-id", i);
|
||||
|
||||
template.find('input[name="enabled"]').on('change', function () {
|
||||
@@ -259,10 +267,8 @@
|
||||
target.find('.request_headers').empty();
|
||||
|
||||
let model = apiRequests[tabIdx];
|
||||
console.log(model);
|
||||
for (let i = 0; i < model.headers.length; i++) {
|
||||
let template = $('#inputTemplate').children().find('tr').clone();
|
||||
console.log(model.headers[i]);
|
||||
if(model.headers[i].enabled){
|
||||
template.find('input[name="enabled"]').prop("checked",model.headers[i].enabled);
|
||||
}
|
||||
@@ -283,27 +289,40 @@
|
||||
target.find('.request_headers').append(template);
|
||||
}
|
||||
},
|
||||
renderTab: function(idx){
|
||||
let apiRequestTabContent = $('#apiRequestTabContent');
|
||||
renderTabHeader : function(){
|
||||
let apiRequestTabTitle = $('#apiRequestTabTitle');
|
||||
apiRequestTabTitle.empty();
|
||||
for (let idx = 0; idx < apiRequests.length; idx++) {
|
||||
let $span = $('<span>')
|
||||
.html(' <i class="fa fa-light fa-close" data-id="'+ idx +'"></i>');
|
||||
|
||||
$span.on('click', function(event) {
|
||||
event.stopPropagation();
|
||||
controller.removeAPIRequest(idx);
|
||||
});
|
||||
|
||||
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);
|
||||
tabButton.append($span);
|
||||
|
||||
let li = $('<li>').attr('class', 'nav-item')
|
||||
.attr('role', 'presentation')
|
||||
.append(tabButton);
|
||||
|
||||
apiRequestTabTitle.append(li);
|
||||
}
|
||||
},
|
||||
renderTabContent: function(idx){
|
||||
let apiRequestTabContent = $('#apiRequestTabContent');
|
||||
|
||||
let model = apiRequests[idx];
|
||||
|
||||
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);
|
||||
@@ -317,7 +336,6 @@
|
||||
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);
|
||||
|
||||
@@ -380,11 +398,18 @@
|
||||
}
|
||||
});
|
||||
requestBody.setValue(model.requestBody);
|
||||
this.requests.push(requestBody);
|
||||
let me = this;
|
||||
target.find('.request_body_type').on('change', function () {
|
||||
console.log($(this).val());
|
||||
me.requests[idx].setOption('mode', $(this).val());
|
||||
});
|
||||
|
||||
requestBody.on('change', function (cm, change) {
|
||||
model.requestBody = cm.getValue();
|
||||
})
|
||||
|
||||
|
||||
let responseBody = CodeMirror.fromTextArea(target.find(".response_body")[0], {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
@@ -416,8 +441,9 @@
|
||||
|
||||
this.responses = [];
|
||||
|
||||
this.renderTabHeader();
|
||||
for (let idx = 0; idx < apiRequests.length; idx++) {
|
||||
this.renderTab(idx);
|
||||
this.renderTabContent(idx);
|
||||
}
|
||||
},
|
||||
renderResponse: function (tabIdx) {
|
||||
@@ -539,10 +565,11 @@
|
||||
|
||||
},
|
||||
addAPIRequest: function () {
|
||||
let name = 'New Request ' + (apiRequests.length + 1);
|
||||
apiRequests.push({
|
||||
server: null,
|
||||
method: 'GET',
|
||||
name: 'New Request',
|
||||
name: name,
|
||||
path: '',
|
||||
headers: [],
|
||||
queryParams: [],
|
||||
@@ -556,11 +583,13 @@
|
||||
}
|
||||
});
|
||||
view.currentIdx = apiRequests.length - 1;
|
||||
view.renderTab(view.currentIdx);
|
||||
view.renderTabHeader();
|
||||
view.renderTabContent(view.currentIdx);
|
||||
},
|
||||
removeAPIRequest: function (idx) {
|
||||
apiRequests.splice(idx, 1);
|
||||
view.render();
|
||||
$('#apiRequestTabTitle li:eq(0) button').tab('show');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user