apitester view 수정

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

@@ -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">

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

@@ -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">
+                    <select class="form-select server" name="server">
-                        <option th:each="server : ${servers}" th:value="${server.id}"
+                        <option th:each="server : ${servers}" th:value="${server.id}" th:text="${server.name}"></option>
-                                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"
+                    <button class="nav-link active btn_request_param_tab" data-bs-toggle="tab"
-                            data-bs-target="#requestParamTab" type="button" role="tab" aria-controls="paramTab"
+                            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"
+                    <button class="nav-link btn_request_header_tab" data-bs-toggle="tab"
-                            data-bs-target="#requestHeaderTab" type="button" role="tab"
+                            type="button" role="tab" aria-controls="requestHeader"
-                            aria-controls="requestHeader"
                             aria-selected="false">Header
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" data-bs-toggle="tab"
+                    <button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
-                            data-bs-target="#requestBodyTab" type="button" role="tab" aria-controls="requestBody"
+                            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,
+            let apiRequests = [];
-                method: 'POST',
-                path: '',
-                headers: [],
-                queryParams: [],
-                requestBody: ''
-            };
-            let responseModel = {
-                status: 0,
-                time: 0,
-                size: 0,
-                headers: [],
-                body: ''
-            };
 
             let view = {
-                requestBody: null,
+                currentIdx: 0,
-                responseBody: null,
+                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();
+                    $('#new_request').on('click', function () {
-                    model.method = $('.api_request').find('.method').val();
+                        controller.addAPIRequest();
-
-                    $('.api_request').find('.server').on('change', function () {
-                        model.server = $(this).val();
                     });
 
-
+                    if (apiRequests.length === 0)
-                    $('.api_request').find('.method').on('change', function () {
+                        controller.addAPIRequest();
-                        model.method = $(this).val();
+                    // this.render();
-                    });
-
-                    $('.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();
                 },
-                render: function () {
+                renderParam: function (tabIdx) {
-                    $('.api_request').find('.request_headers').empty();
+                    let target = $('#api_request_' + tabIdx);
-                    $('.api_request').find('.query_params').empty();
+                    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 () {
+                renderTab: function(idx){
-                    $('.api_request').find('.response_headers').empty();
+                    let apiRequestTabContent = $('#apiRequestTabContent');
-                    $('.api_request').find(".response_status").empty();
+                    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="key"]').val(model.responseModel.headers[i].key);
-                        template.find('input[name="value"]').val(responseModel.headers[i].value);
+                        template.find('input[name="value"]').val(model.responseModel.headers[i].value);
-                        $('.api_request').find('.response_headers').append(template);
+                        target.find('.response_headers').append(template);
                     }
 
                     //show response status
-                    $('.api_request').find(".response_status").text("status: " + responseModel.status);
+                    target.find(".response_status").text("status: " + model.responseModel.status);
-                    $('.api_request').find(".response_time").text("time: " + responseModel.time + "ms");
+                    target.find(".response_time").text("time: " + model.responseModel.time + "ms");
-                    $('.api_request').find(".response_size").text("size: " + responseModel.size + "bytes");
+                    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();
+                    this.buildPath(tabIdx);
-                    view.render();
+                    view.renderParam(tabIdx);
                 },
                 showLoadingOverlay: function () {
                     $("#loading-overlay").show();
@@ -406,10 +473,11 @@
                 hideLoadingOverlay: function () {
                     $("#loading-overlay").hide();
                 },
-                send: function () {
+                send: function (tabIdx) {
-                    console.log(model);
+                    let model = apiRequests[tabIdx];
-                    $('.api_request').find('.response_headers').empty();
+                    let target = $('#api_request_' + tabIdx);
-                    view.responseBody.setValue('');
+                    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;
+                                model.responseModel.status = data.status;
-                                responseModel.body = data.body;
+                                model.responseModel.body = data.body;
-                                responseModel.headers = data.headers;
+                                model.responseModel.headers = data.headers;
-                                responseModel.size = data.size;
+                                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;
+                                model.responseModel.time = endTime - startTime;
-                                view.renderResponse();
+                                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>

src/main/resources/templates/page/routes/mockRouteEdit.html

@@ -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));
                         }