request body select 적용

src/main/resources/templates/page/apiTester.html

@@ -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){
+                renderTabHeader : function(){
-                    let apiRequestTabContent = $('#apiRequestTabContent');
                     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');
                 }
             }