변수 보기

src/main/resources/static/js/APITester.js

@@ -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) {
+    // variableTemplate(variable, index) {
-        return `
+    //     return `
-            <tr data-index="${index}">
+    //         <tr data-index="${index}">
-                <td>
+    //             <td>
-                    <div class="form-check">
+    //                 <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="variables[${index}].enabled" ${variable.enabled ? 'checked' : ''} />
+    //                     <input class="form-check-input" type="checkbox" name="variables[${index}].enabled" ${variable.enabled ? 'checked' : ''} />
-                    </div>
+    //                 </div>
-                </td>
+    //             </td>
-                <td>
+    //             <td>
-                    <input class="form-control" type="text" name="variables[${index}].key" value="${variable.key}"/>
+    //                 <input class="form-control" type="text" name="variables[${index}].key" value="${variable.key}"/>
-                </td>
+    //             </td>
-                <td>
+    //             <td>
-                    <input class="form-control" type="text" name="variables[${index}].value" value="${variable.value}"/>
+    //                 <input class="form-control" type="text" name="variables[${index}].value" value="${variable.value}"/>
-                </td>
+    //             </td>
-                <td>
+    //             <td>
-                    <button type="button" class="btn btn-secondary btn-sm btn_remove_variable">제거</button>
+    //                 <button type="button" class="btn btn-secondary btn-sm btn_remove_variable">제거</button>
-                </td>
+    //             </td>
-            </tr>
+    //         </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_add_variables', action: this.addVariable.bind(this)},
-            {selector: '.btn_remove_variable', action: this.removeVariable.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) {
+    // renderGlobalVariables() {
-        return variables.map((variable, index) => this.variableTemplate(variable, index)).join('');
+    //     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) {
+    // addVariable(event) {
-        //console.log('addVariable');
+    //     //console.log('addVariable');
-        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
+    //     const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-        let model = this.apiRequests[tabIndex];
+    //     let model = this.apiRequests[tabIndex];
-        model.variables.push({
+    //     model.variables.push({
-            enabled: true,
+    //         enabled: true,
-            key: '',
+    //         key: '',
-            value: ''
+    //         value: ''
-        });
+    //     });
-        this.renderVariablesView(tabIndex);
+    //     this.renderVariablesView(tabIndex);
-    }
+    // }
-
+    //
-    removeVariable(event) {
+    // removeVariable(event) {
-        //console.log('removeVariable');
+    //     //console.log('removeVariable');
-        const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
+    //     const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
-        const index = $(event.currentTarget).closest('tr').data('index');
+    //     const index = $(event.currentTarget).closest('tr').data('index');
-        let model = this.apiRequests[tabIndex];
+    //     let model = this.apiRequests[tabIndex];
-        model.variables.splice(index, 1);
+    //     model.variables.splice(index, 1);
-        this.renderVariablesView(tabIndex);
+    //     this.renderVariablesView(tabIndex);
-    }
+    // }
-
+    //
-    renderVariablesView(tabIndex) {
+    // renderVariablesView(tabIndex) {
-        let model = this.apiRequests[tabIndex];
+    //     let model = this.apiRequests[tabIndex];
-        //console.log(model);
+    //     //console.log(model);
-        let target = $('#api_request_' + model.id);
+    //     let target = $('#api_request_' + model.id);
-        target.find('.variables').empty();
+    //     target.find('.variables').empty();
-        target.find('.variables').append(this.renderVariables(model.variables));
+    //     target.find('.variables').append(this.renderVariables(model.variables));
-    }
+    // }
 
     parseParam(event) {
         const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));

src/main/resources/templates/layout/api_tester_layout.html

@@ -35,6 +35,7 @@
         <button type="button" class="btn btn-primary btn-sm" id="new_scenario"><i class="fa fa-plus"></i> 새로운 시나리오
         </button>
         <button type="button" class="btn btn-primary btn-sm" id="full_screen"><i class="fa-solid fa-display"></i> 전체화면</button>
+        <button type="button" class="btn btn-primary btn-sm" id="show_variable"><i class="fa-solid fa-list"></i> 변수 보기</button>
     </div>
     <div class="tester">
         <section th:replace="page/tester/apiScenario :: scenarioFragment">
@@ -59,10 +60,61 @@
                 container.classList.toggle('full-screen');
             });
 
+            function populateVariablesTable() {
+                var tbody = $('.variables');
+                tbody.empty(); // Clear existing rows
+
+                $.each(window.globals, function(key, value) {
+                    var row = $('<tr>');
+                    var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input').val(key);
+                    var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input').val(value);
+                    var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
+
+                    row.append($('<td>').append(keyInput));
+                    row.append($('<td>').append(valueInput));
+                    row.append($('<td>').append(deleteButton));
+                    tbody.append(row);
+                });
+
+                // Event listener for changes in key
+                $('.key-input').on('change', function() {
+                    var oldKey = $(this).closest('tr').find('.value-input').attr('data-old-key');
+                    var newKey = $(this).val();
+                    var value = window.globals[oldKey];
+
+                    delete window.globals[oldKey];
+                    window.globals[newKey] = value;
+                    $(this).closest('tr').find('.value-input').attr('data-old-key', newKey);
+                });
+
+                // Event listener for changes in value
+                $('.value-input').on('change', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    var newValue = $(this).val();
+                    window.globals[key] = newValue;
+                });
+
+                $('.delete-variable').on('click', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    delete window.globals[key];
+                    $(this).closest('tr').remove();
+                });
+
+                // Set data-old-key attribute for tracking key changes
+                $('.value-input').each(function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    $(this).attr('data-old-key', key);
+                });
+            }
+
+            $('#show_variable').on('click', function () {
+                populateVariablesTable();
+                $('#variable_modal').modal('show');
+            });
+
             document.addEventListener('keydown', (event) => {
                 if (event.key === 'Escape') {
                     container.classList.remove('full-screen');
-                    // layoutManager.resize();
                 }
             });
 

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

@@ -149,6 +149,36 @@
             </div>
         </div>
     </div>
+    <div class="modal fade" id="variable_modal" tabindex="-1" aria-labelledby="variable_modal" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">환경 변수</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div>Globals</div>
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <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">
+                        </tbody>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </aside>
 
 <!-- menu script -->