From 06bee094e364ca6b2da15a20abfa1de9ff86c619 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Wed, 10 Jan 2024 20:47:32 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B3=80=EC=88=98=20=EB=B3=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/js/APITester.js | 152 ++++++++---------- .../templates/layout/api_tester_layout.html | 54 ++++++- .../templates/page/tester/apiCollection.html | 30 ++++ 3 files changed, 154 insertions(+), 82 deletions(-) diff --git a/src/main/resources/static/js/APITester.js b/src/main/resources/static/js/APITester.js index 096155f..064d7ea 100644 --- a/src/main/resources/static/js/APITester.js +++ b/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 - -
-
- - - - - - - - - - - ${this.renderVariables(apiRequest.variables)} - -
#키값 - -
-
-
- - - - - - - - - - - - `; - } + // variableTemplate(variable, index) { + // return ` + // + // + //
+ // + //
+ // + // + // + // + // + // + // + // + // + // + // + // `; + // } 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_remove_variable', action: this.removeVariable.bind(this)}, + // {selector: '.btn_add_variables', action: this.addVariable.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) { - return variables.map((variable, index) => this.variableTemplate(variable, index)).join(''); - } + // renderGlobalVariables() { + // 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) { - //console.log('addVariable'); - const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request')); - let model = this.apiRequests[tabIndex]; - model.variables.push({ - enabled: true, - key: '', - value: '' - }); - this.renderVariablesView(tabIndex); - } - - removeVariable(event) { - //console.log('removeVariable'); - const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request')); - const index = $(event.currentTarget).closest('tr').data('index'); - let model = this.apiRequests[tabIndex]; - model.variables.splice(index, 1); - this.renderVariablesView(tabIndex); - } - - renderVariablesView(tabIndex) { - let model = this.apiRequests[tabIndex]; - //console.log(model); - let target = $('#api_request_' + model.id); - target.find('.variables').empty(); - target.find('.variables').append(this.renderVariables(model.variables)); - } + // addVariable(event) { + // //console.log('addVariable'); + // const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request')); + // let model = this.apiRequests[tabIndex]; + // model.variables.push({ + // enabled: true, + // key: '', + // value: '' + // }); + // this.renderVariablesView(tabIndex); + // } + // + // removeVariable(event) { + // //console.log('removeVariable'); + // const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request')); + // const index = $(event.currentTarget).closest('tr').data('index'); + // let model = this.apiRequests[tabIndex]; + // model.variables.splice(index, 1); + // this.renderVariablesView(tabIndex); + // } + // + // renderVariablesView(tabIndex) { + // let model = this.apiRequests[tabIndex]; + // //console.log(model); + // let target = $('#api_request_' + model.id); + // target.find('.variables').empty(); + // target.find('.variables').append(this.renderVariables(model.variables)); + // } parseParam(event) { const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request')); diff --git a/src/main/resources/templates/layout/api_tester_layout.html b/src/main/resources/templates/layout/api_tester_layout.html index a865a4d..f7c6e60 100644 --- a/src/main/resources/templates/layout/api_tester_layout.html +++ b/src/main/resources/templates/layout/api_tester_layout.html @@ -35,6 +35,7 @@ +
@@ -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 = $(''); + var keyInput = $('').attr('type', 'text').addClass('form-control key-input').val(key); + var valueInput = $('').attr('type', 'text').addClass('form-control value-input').val(value); + var deleteButton = $('
+