Socket Client UI 기본 골격 작성
This commit is contained in:
현성필
@@ -28,35 +28,6 @@ class APIClient {
|
||||
return this.contextPath + this.CLIENT_URL;
|
||||
}
|
||||
|
||||
async sendAPIRequest(model, preProcessCallback, consoleOutput) {
|
||||
try {
|
||||
let variables = {};
|
||||
const updatedModel = await this.executePreRequestScript(model, variables, consoleOutput);
|
||||
let processedRequest = this.replacePlaceholdersWithVariables(updatedModel, variables);
|
||||
|
||||
if (preProcessCallback) {
|
||||
preProcessCallback(processedRequest);
|
||||
}
|
||||
const response = await this.makeAjaxRequest(processedRequest, model, consoleOutput);
|
||||
const responseData = await response.json(); // Parse the JSON response
|
||||
|
||||
if (!response.ok) {
|
||||
const errorMessage = responseData.error || 'Unknown error';
|
||||
throw new Error(`API 호출 중 오류가 발생했습니다. 사유[${errorMessage}]`);
|
||||
}
|
||||
|
||||
const finalResponse = this.formatResponse(responseData);
|
||||
return this.executePostRequestScript(model.postRequestScript, variables, processedRequest, finalResponse, consoleOutput).catch(error => {
|
||||
$('.toast-body').text(error);
|
||||
$('.toast').toast('show');
|
||||
return finalResponse; // Return the original response even if there's an error in the post-request script
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
formatResponse(data) {
|
||||
// Format response as needed before post-request script
|
||||
let response = {};
|
||||
@@ -99,6 +70,61 @@ class APIClient {
|
||||
}
|
||||
}
|
||||
|
||||
async processPreScriptAndVariables(model, value, consoleOutput){
|
||||
let variables = {};
|
||||
const updatedModel = await this.executePreRequestScript(model, variables, consoleOutput);
|
||||
return this.replacePlaceholderValueWithVariables(updatedModel, value, variables);
|
||||
}
|
||||
|
||||
replacePlaceholderValueWithVariables(model, originalValue, variables) {
|
||||
let mergedVariables = {};
|
||||
_.forEach(window.globals, (value, key) => {
|
||||
mergedVariables[key] = value;
|
||||
});
|
||||
|
||||
if (variables) {
|
||||
_.forEach(variables, (value, key) => {
|
||||
mergedVariables[key] = value;
|
||||
});
|
||||
}
|
||||
|
||||
_.forEach(mergedVariables, (value, key) => {
|
||||
const placeholder = `{{${key}}}`;
|
||||
// Replace in path
|
||||
originalValue = originalValue.replace(new RegExp(placeholder, 'g'), value);
|
||||
});
|
||||
return originalValue;
|
||||
}
|
||||
|
||||
async sendAPIRequest(model, preProcessCallback, consoleOutput) {
|
||||
try {
|
||||
let variables = {};
|
||||
const updatedModel = await this.executePreRequestScript(model, variables, consoleOutput);
|
||||
let processedRequest = this.replacePlaceholdersWithVariables(updatedModel, variables);
|
||||
|
||||
if (preProcessCallback) {
|
||||
preProcessCallback(processedRequest);
|
||||
}
|
||||
const response = await this.makeAjaxRequest(processedRequest, model, consoleOutput);
|
||||
const responseData = await response.json(); // Parse the JSON response
|
||||
|
||||
if (!response.ok) {
|
||||
const errorMessage = responseData.error || 'Unknown error';
|
||||
throw new Error(`API 호출 중 오류가 발생했습니다. 사유[${errorMessage}]`);
|
||||
}
|
||||
|
||||
const finalResponse = this.formatResponse(responseData);
|
||||
return this.executePostRequestScript(model.postRequestScript, variables, processedRequest, finalResponse, consoleOutput).catch(error => {
|
||||
$('.toast-body').text(error);
|
||||
$('.toast').toast('show');
|
||||
return finalResponse; // Return the original response even if there's an error in the post-request script
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
replacePlaceholdersWithVariables(original, variables) {
|
||||
let request = JSON.parse(JSON.stringify(original));
|
||||
|
||||
|
||||
+74
-499
@@ -1,9 +1,10 @@
|
||||
import * as monaco from 'monaco-editor';
|
||||
import APIClient from './APIClient';
|
||||
import EditableInput from './components/EditableInput';
|
||||
import {createPopper} from '@popperjs/core/lib/popper-lite';
|
||||
import PropertyTable from './components/PropertyTable';
|
||||
import VariableSnippet from './components/VariableSnippet';
|
||||
import HTTPClientView from './components/HTTPClientView';
|
||||
import TCPClientView from './components/TCPClientView';
|
||||
import ServerManager from './components/ServerManager';
|
||||
|
||||
class APITester {
|
||||
|
||||
@@ -25,6 +26,7 @@ class APITester {
|
||||
this.popperContent = document.getElementById('popperContent');
|
||||
this.popperInstance = null;
|
||||
this.contextPath = contextPath || '/';
|
||||
|
||||
}
|
||||
|
||||
getCollectionListURL() {
|
||||
@@ -51,281 +53,6 @@ class APITester {
|
||||
return this.contextPath + `mgmt/collections/${collectionId}/apis/delete.do`;
|
||||
}
|
||||
|
||||
renderServers(selectedServer) {
|
||||
const optionsHtml = this.servers.map(server => `<option value="${server.id}" ${selectedServer === server.id ? 'selected' : ''} data-path="${server.basePath}">${server.name}</option>`).join('');
|
||||
|
||||
return `<select class="form-select server" name="server" style="width: 180px; border-radius: 0;" required>
|
||||
<option value="">서버 선택</option>
|
||||
${optionsHtml}</select>`;
|
||||
}
|
||||
|
||||
basePath(serverId) {
|
||||
if (serverId === undefined || serverId === null || serverId === '') {
|
||||
return '';
|
||||
}
|
||||
return this.servers.filter(server => server.id == serverId)[0].basePath; // == : 타입 비교 없이 값만 비교
|
||||
}
|
||||
|
||||
httpApiRequestTemplate(apiRequest, index) {
|
||||
return `
|
||||
<div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
|
||||
<div><span class="collection_name">${apiRequest.collectionName}</span> > <span class="api_name">${apiRequest.name}</span></div>
|
||||
<div class="d-flex api_request_info">
|
||||
<div class="form-floating">
|
||||
<select name="method" class="form-select method" style="width: 90px; border-bottom-right-radius: 0;border-top-right-radius: 0;">
|
||||
<option value="POST" ${apiRequest.method === 'POST' ? 'selected' : ''}>POST</option>
|
||||
<option value="GET" ${apiRequest.method === 'GET' ? 'selected' : ''}>GET</option>
|
||||
<option value="PUT" ${apiRequest.method === 'PUT' ? 'selected' : ''}>PUT</option>
|
||||
<option value="DELETE" ${apiRequest.method === 'DELETE' ? 'selected' : ''}>DELETE</option>
|
||||
<option value="CONNECT" ${apiRequest.method === 'CONNECT' ? 'selected' : ''}>CONNECT</option>
|
||||
<option value="HEAD" ${apiRequest.method === 'HEAD' ? 'selected' : ''}>HEAD</option>
|
||||
<option value="OPTIONS" ${apiRequest.method === 'OPTIONS' ? 'selected' : ''}>OPTIONS</option>
|
||||
<option value="TRACE" ${apiRequest.method === 'TRACE' ? 'selected' : ''}>TRACE</option>
|
||||
<option value="PATCH" ${apiRequest.method === 'PATCH' ? 'selected' : ''}>PATCH</option>
|
||||
</select>
|
||||
<label class="form-label must">Method</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
${this.renderServers(apiRequest.server)}
|
||||
<label class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" name="basePath" class="form-control" style="width: 180px; border-radius: 0" value="${this.basePath(apiRequest.server)}" readonly>
|
||||
<label class="must">기본 경로</label>
|
||||
</div>
|
||||
<div class="form-floating editableInput me-1 path" data-name="path" data-label="Path">
|
||||
<label>Path</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send me-1">Send</button>
|
||||
<button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
|
||||
</div>
|
||||
<div class="api_request d-flex flex-column" style="height:100%;">
|
||||
<div class="api_request_body">
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_param_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="paramTab" data-bs-target="#requestParamTab_${apiRequest.id}"
|
||||
aria-selected="true">Param
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_header_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestHeader" data-bs-target="#requestHeaderTab_${apiRequest.id}"
|
||||
aria-selected="false">Header
|
||||
</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}"
|
||||
aria-selected="false">Pre-Request
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
|
||||
aria-selected="false">Post-Request
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="height: 100%;">
|
||||
<div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}" aria-labelledby="requestParams-tab">
|
||||
<div class="query_params">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade request_header_tab" role="tabpanel" id="requestHeaderTab_${apiRequest.id}"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
<div class="request_headers">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}" aria-labelledby="requestBody-tab">
|
||||
<div class="d-flex flex-column">
|
||||
<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</option>
|
||||
</select>
|
||||
<div class="request_body mt-1" style="width:100%;height: 300px; border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="pre-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="postScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="post-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api_response" style="flex: 1">
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_status"></span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</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" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#responseHeaderTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseHeader" aria-selected="false">Header</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="responseHeaderTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="response_headers">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="console-tab">
|
||||
<div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
tcpApiRequestTemplate(apiRequest, index) {
|
||||
return `
|
||||
<div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
|
||||
<div><span class="collection_name">${apiRequest.collectionName}</span> > <span class="api_name">${apiRequest.name}</span></div>
|
||||
<div class="d-flex api_request_info">
|
||||
<div class="form-floating">
|
||||
${this.renderServers(apiRequest.server)}
|
||||
<label class="form-label must">Server</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send me-1">Send</button>
|
||||
<button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
|
||||
</div>
|
||||
<div class="api_request d-flex flex-column" style="height:100%;">
|
||||
<div class="api_request_body">
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
|
||||
aria-selected="false">Body
|
||||
</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}"
|
||||
aria-selected="false">Pre-Request
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
|
||||
aria-selected="false">Post-Request
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="height: 100%;">
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}" aria-labelledby="requestBody-tab">
|
||||
<div class="d-flex flex-column">
|
||||
<select class="form-select mt-1 request_body_type" name="request_type">
|
||||
<option value="">text/plain</option>
|
||||
</select>
|
||||
<div class="request_body mt-1" style="width:100%;height: 300px; border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="pre-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="postScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="post-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api_response" style="flex: 1">
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_status"></span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</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" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="console-tab">
|
||||
<div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
headerTemplate(header, index) {
|
||||
return `
|
||||
<tr data-index="${index}">
|
||||
@@ -402,6 +129,7 @@ class APITester {
|
||||
$('.toast').toast('show');
|
||||
}
|
||||
}
|
||||
this.serverManager = new ServerManager(this.servers);
|
||||
this.bindEvents();
|
||||
this.loadCollections();
|
||||
}
|
||||
@@ -424,8 +152,7 @@ class APITester {
|
||||
{selector: '.delete_api_request', action: this.showDeleteApiRequestModal.bind(this)},
|
||||
{selector: '.open_api_request', action: this.openApiRequest.bind(this)},
|
||||
{selector: '.confirm_delete_api', action: this.deleteApiRequest.bind(this)},
|
||||
{selector: '.close_tab', action: this.closeTab.bind(this)}
|
||||
];
|
||||
{selector: '.close_tab', action: this.closeTab.bind(this)}];
|
||||
|
||||
for (let event of events) {
|
||||
$(document).on('click', event.selector, event.action);
|
||||
@@ -601,7 +328,7 @@ class APITester {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
let target = $('#api_request_' + model.id);
|
||||
target.find('input[name="basePath"]').val(this.basePath(model.server));
|
||||
target.find('input[name="basePath"]').val(this.serverManager.basePath(model.server));
|
||||
}
|
||||
|
||||
renderHeaders(headers) {
|
||||
@@ -633,12 +360,10 @@ class APITester {
|
||||
placement: 'bottom', // Popper below the element
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
name: 'offset', options: {
|
||||
offset: [0, 8] // Adjust the position if needed
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -655,87 +380,36 @@ class APITester {
|
||||
let apiRequestTabContent = $(this.apiTabContentTarget);
|
||||
let model = this.apiRequests[index];
|
||||
|
||||
if (model.type ==='HTTP'){
|
||||
apiRequestTabContent.append(this.httpApiRequestTemplate(model, index));
|
||||
let editableInput = new EditableInput({
|
||||
name: 'path',
|
||||
value: model.path
|
||||
});
|
||||
|
||||
let queryParamTable = new PropertyTable({
|
||||
propertyName: 'queryParams',
|
||||
properties: model.queryParams
|
||||
});
|
||||
|
||||
let headerTable = new PropertyTable({
|
||||
propertyName: 'headers',
|
||||
properties: model.headers
|
||||
});
|
||||
|
||||
apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function() {
|
||||
editableInput.init(this, (value) => {
|
||||
model.path = value;
|
||||
model.queryParams = me.parseParam(model.path);
|
||||
queryParamTable.setProperties(model.queryParams);
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => me.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => me.hidePopper(element));
|
||||
});
|
||||
});
|
||||
|
||||
$(this).append(`<label>Path</label>`);
|
||||
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
});
|
||||
queryParamTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.query_params')[0], (properties) => {
|
||||
model.queryParams = properties;
|
||||
console.log(model.queryParams);
|
||||
this.buildPath(model);
|
||||
editableInput.setValue(model.path);
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => me.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => me.hidePopper(element));
|
||||
});
|
||||
});
|
||||
|
||||
headerTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.request_headers')[0], (properties) => {
|
||||
model.headers = properties;
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => me.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => me.hidePopper(element));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (model.type ==='TCP'){
|
||||
apiRequestTabContent.append(this.tcpApiRequestTemplate(model, index));
|
||||
}
|
||||
|
||||
document.querySelectorAll('.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => me.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => me.hidePopper(element));
|
||||
});
|
||||
let language = model.type === 'HTTP' ? 'json' : 'text';
|
||||
|
||||
this.openTab(model.id);
|
||||
let target = $('#api_request_' + model.id);
|
||||
let language = model.type ==='TCP'? 'text': 'json';
|
||||
let target = null;
|
||||
let requestBodyEditor = null;
|
||||
|
||||
let requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
||||
value: model.requestBody,
|
||||
language: language,
|
||||
automaticLayout: true
|
||||
});
|
||||
if (model.type === 'HTTP') {
|
||||
let httpClientView = new HTTPClientView(me, this.serverManager, apiRequestTabContent, model);
|
||||
httpClientView.init();
|
||||
this.openTab(model.id);
|
||||
target = $('#api_request_' + model.id);
|
||||
requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
||||
value: model.requestBody, language: 'json', automaticLayout: true
|
||||
});
|
||||
}
|
||||
|
||||
if (model.type === 'TCP') {
|
||||
const tcpClientView = new TCPClientView(me, this.serverManager, apiRequestTabContent, model);
|
||||
tcpClientView.init();
|
||||
this.openTab(model.id);
|
||||
target = $('#api_request_' + model.id);
|
||||
requestBodyEditor = monaco.editor.create(target.find('.request_body')[0], {
|
||||
value: model.requestBody, language: 'text', automaticLayout: false
|
||||
});
|
||||
tcpClientView.setRequestBodyEditor(requestBodyEditor);
|
||||
}
|
||||
|
||||
requestBodyEditor.onMouseMove((e) => {
|
||||
let position = e.target.position;
|
||||
@@ -768,27 +442,19 @@ class APITester {
|
||||
});
|
||||
|
||||
let responseBodyEditor = monaco.editor.create(target.find('.response_body')[0], {
|
||||
value: '',
|
||||
language: language,
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
value: '', language: language, automaticLayout: true, quickSuggestions: false
|
||||
});
|
||||
|
||||
me.responseEditors.push(responseBodyEditor);
|
||||
|
||||
let consoleEditor = monaco.editor.create(target.find('.console')[0], {
|
||||
value: '',
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
value: '', automaticLayout: true, quickSuggestions: false
|
||||
});
|
||||
|
||||
me.consoleEditors.push(consoleEditor);
|
||||
|
||||
let preRequestEditor = monaco.editor.create(target.find('.pre-request')[0], {
|
||||
value: model.preRequestScript,
|
||||
language: 'javascript',
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
value: model.preRequestScript, language: 'javascript', automaticLayout: true, quickSuggestions: false
|
||||
});
|
||||
|
||||
const snippet1 = new VariableSnippet();
|
||||
@@ -804,10 +470,7 @@ class APITester {
|
||||
});
|
||||
|
||||
let postRequestEditor = monaco.editor.create(target.find('.post-request')[0], {
|
||||
value: model.postRequestScript,
|
||||
language: 'javascript',
|
||||
automaticLayout: true,
|
||||
quickSuggestions: false
|
||||
value: model.postRequestScript, language: 'javascript', automaticLayout: true, quickSuggestions: false
|
||||
});
|
||||
|
||||
const snippet2 = new VariableSnippet();
|
||||
@@ -874,12 +537,10 @@ class APITester {
|
||||
}
|
||||
|
||||
$('li .api_request_sortable').draggable({
|
||||
helper: this.customHelper,
|
||||
start: function(event, ui) {
|
||||
helper: this.customHelper, start: function(event, ui) {
|
||||
// You can add any additional data or styles you want when dragging starts
|
||||
$(this).addClass('dragging');
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
}, stop: function(event, ui) {
|
||||
// Clean up, e.g., remove styles or data
|
||||
$(this).removeClass('dragging');
|
||||
}
|
||||
@@ -907,9 +568,7 @@ class APITester {
|
||||
const tabIndex = $('#apiRequestTabContent').children().index($(event.currentTarget).closest('.api_request'));
|
||||
let model = this.apiRequests[tabIndex];
|
||||
model.headers.push({
|
||||
enabled: true,
|
||||
key: '',
|
||||
value: ''
|
||||
enabled: true, key: '', value: ''
|
||||
});
|
||||
this.renderHeaderView(tabIndex);
|
||||
}
|
||||
@@ -938,32 +597,14 @@ class APITester {
|
||||
let queryParam = queryParamArray[i].split('=');
|
||||
|
||||
queryParams.push({
|
||||
enabled: true,
|
||||
key: queryParam[0],
|
||||
value: (queryParam[1] === undefined ? '' : queryParam[1])
|
||||
enabled: true, key: queryParam[0], value: (queryParam[1] === undefined ? '' : queryParam[1])
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log(queryParams);
|
||||
return queryParams;
|
||||
}
|
||||
|
||||
buildPath(model) {
|
||||
let queryString = model.path.split('?')[0];
|
||||
if (model.queryParams.length > 0) {
|
||||
queryString += '?';
|
||||
}
|
||||
for (let i = 0; i < model.queryParams.length; i++) {
|
||||
if (!model.queryParams[i].enabled) {
|
||||
continue;
|
||||
}
|
||||
queryString += model.queryParams[i].key + '=' + model.queryParams[i].value;
|
||||
if (i < model.queryParams.length - 1) {
|
||||
queryString += '&';
|
||||
}
|
||||
}
|
||||
model.path = queryString;
|
||||
}
|
||||
|
||||
showLoadingOverlay() {
|
||||
$('#loading-overlay').show();
|
||||
}
|
||||
@@ -998,11 +639,7 @@ class APITester {
|
||||
model.responseModel.time = endTime - startTime;
|
||||
} else {
|
||||
model.responseModel = {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
body: ''
|
||||
status: 0, time: 0, size: 0, headers: [], body: ''
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1022,10 +659,7 @@ class APITester {
|
||||
message = JSON.stringify(message, null, 2);
|
||||
}
|
||||
var op = {
|
||||
identifier: id,
|
||||
range: range,
|
||||
text: message + '\n',
|
||||
forceMoveMarkers: true
|
||||
identifier: id, range: range, text: message + '\n', forceMoveMarkers: true
|
||||
};
|
||||
console.executeEdits('my-source', [op]);
|
||||
}
|
||||
@@ -1033,23 +667,18 @@ class APITester {
|
||||
loadCollections() {
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getCollectionListURL(),
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function(data) {
|
||||
url: this.getCollectionListURL(), type: 'GET', contentType: 'application/json', success: function(data) {
|
||||
me.collections = data.map(collection => {
|
||||
if (collection.apis) {
|
||||
collection.apis = collection.apis.map(api => ({...api, collectionId: collection.id}));
|
||||
}
|
||||
return collection;
|
||||
});
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.renderCollections();
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
@@ -1061,16 +690,11 @@ class APITester {
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getCollectionCreateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({name: name}),
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
url: this.getCollectionCreateURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({name: name}), error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.loadCollections();
|
||||
me.hideLoadingOverlay();
|
||||
$('#new_collection_modal').modal('hide');
|
||||
@@ -1082,16 +706,11 @@ class APITester {
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getCollectionUpdateURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({id: id, name: name}),
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
url: this.getCollectionUpdateURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: id, name: name}), error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.loadCollections();
|
||||
me.hideLoadingOverlay();
|
||||
$('#new_collection_modal').modal('hide');
|
||||
@@ -1104,18 +723,12 @@ class APITester {
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getCollectionDeleteURL(),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({id: collectionId}),
|
||||
success: function() {
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
url: this.getCollectionDeleteURL(), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: collectionId}), success: function() {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.loadCollections();
|
||||
me.hideLoadingOverlay();
|
||||
$('#confirm_delete_modal').modal('hide');
|
||||
@@ -1127,21 +740,15 @@ class APITester {
|
||||
const me = this;
|
||||
me.showLoadingOverlay();
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPISaveURL(model.collectionId),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(model),
|
||||
success: function(data) {
|
||||
url: this.getAPISaveURL(model.collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(model), success: function(data) {
|
||||
let message = '저장되었습니다.';
|
||||
$('.toast-body').text(message);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
@@ -1154,21 +761,15 @@ class APITester {
|
||||
me.showLoadingOverlay();
|
||||
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPISaveURL(model.collectionId),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(model),
|
||||
success: function(data) {
|
||||
url: this.getAPISaveURL(model.collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(model), success: function(data) {
|
||||
let message = '저장되었습니다.';
|
||||
$('.toast-body').text(message);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
}
|
||||
});
|
||||
@@ -1190,42 +791,26 @@ class APITester {
|
||||
})[0];
|
||||
let me = this;
|
||||
let newApi = {
|
||||
id: '',
|
||||
server: null,
|
||||
method: 'GET',
|
||||
name: newApiName,
|
||||
path: '',
|
||||
type : newApiType,
|
||||
headers: [],
|
||||
queryParams: [],
|
||||
requestBody: '',
|
||||
preRequestScript: '',
|
||||
postRequestScript: '',
|
||||
collectionId: collectionId,
|
||||
responseModel: {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
ody: ''
|
||||
id: '', server: null, method: 'GET', name: newApiName, path: '', type: newApiType, headers: [], queryParams: [], requestBody: '', preRequestScript: '', postRequestScript: '', collectionId: collectionId, responseModel: {
|
||||
status: 0, time: 0, size: 0, headers: [], ody: ''
|
||||
}
|
||||
};
|
||||
newApi.collectionName = collection.name;
|
||||
|
||||
if (newApiType === 'TCP') {
|
||||
newApi.layout = [];
|
||||
newApi.layout.push({layoutItems: []});
|
||||
}
|
||||
|
||||
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPISaveURL(collectionId),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(newApi),
|
||||
success: function(data) {
|
||||
url: this.getAPISaveURL(collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify(newApi), success: function(data) {
|
||||
newApi.id = data;
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
me.hideLoadingOverlay();
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
$('.toast').toast('show');
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.loadCollections();
|
||||
me.apiRequests.push(newApi);
|
||||
me.currentIndex = me.apiRequests.length - 1;
|
||||
@@ -1271,11 +856,7 @@ class APITester {
|
||||
|
||||
if (!selectedApi.responseModel) {
|
||||
selectedApi.responseModel = {
|
||||
status: 0,
|
||||
time: 0,
|
||||
size: 0,
|
||||
headers: [],
|
||||
body: ''
|
||||
status: 0, time: 0, size: 0, headers: [], body: ''
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1305,17 +886,11 @@ class APITester {
|
||||
}
|
||||
const me = this;
|
||||
this.currentAjaxRequest = $.ajax({
|
||||
url: this.getAPIDeleteURL(collectionId),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({id: apiId}),
|
||||
success: function(data) {
|
||||
},
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
url: this.getAPIDeleteURL(collectionId), type: 'POST', contentType: 'application/json', data: JSON.stringify({id: apiId}), success: function(data) {
|
||||
}, error: function(response, textStatus, errorThrown) {
|
||||
$('.toast-body').text(response.responseJSON.error);
|
||||
me.hideLoadingOverlay();
|
||||
},
|
||||
complete: function() {
|
||||
}, complete: function() {
|
||||
me.hideLoadingOverlay();
|
||||
me.loadCollections();
|
||||
$('#confirm_delete_api_modal').modal('hide');
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
import EditableInput from './EditableInput';
|
||||
import PropertyTable from './PropertyTable';
|
||||
|
||||
class HTTPClientView {
|
||||
constructor(parent, serverManager, apiRequestTabContent, model, index) {
|
||||
this.parent = parent;
|
||||
this.serverManager = serverManager;
|
||||
this.apiRequestTabContent = apiRequestTabContent;
|
||||
this.model = model;
|
||||
this.index = index;
|
||||
}
|
||||
|
||||
init() {
|
||||
let me = this;
|
||||
this.apiRequestTabContent.append(this.httpApiRequestTemplate(this.model, this.index));
|
||||
let editableInput = new EditableInput({
|
||||
name: 'path',
|
||||
value: this.model.path
|
||||
});
|
||||
let queryParamTable = new PropertyTable({
|
||||
propertyName: 'queryParams',
|
||||
properties: this.model.queryParams
|
||||
});
|
||||
|
||||
let headerTable = new PropertyTable({
|
||||
propertyName: 'headers',
|
||||
properties: this.model.headers
|
||||
});
|
||||
|
||||
this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.api_request_info').find('.path').each(function() {
|
||||
editableInput.init(this, (value) => {
|
||||
me.model.path = value;
|
||||
me.model.queryParams = me.parent.parseParam(me.model.path);
|
||||
queryParamTable.setProperties(me.model.queryParams);
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => this.parent.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => this.parent.hidePopper(element));
|
||||
});
|
||||
});
|
||||
|
||||
$(this).append(`<label>Path</label>`);
|
||||
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
});
|
||||
|
||||
queryParamTable.init(this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.query_params')[0], (properties) => {
|
||||
this.model.queryParams = properties;
|
||||
console.log(this.model.queryParams);
|
||||
this.buildPath(this.model);
|
||||
editableInput.setValue(this.model.path);
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => this.parent.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => this.parent.hidePopper(element));
|
||||
});
|
||||
});
|
||||
|
||||
headerTable.init(this.apiRequestTabContent.find(`#api_request_${this.model.id}`).find('.request_headers')[0], (properties) => {
|
||||
this.model.headers = properties;
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseout');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => this.parent.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => this.parent.hidePopper(element));
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
buildPath(model) {
|
||||
let queryString = model.path.split('?')[0];
|
||||
if (model.queryParams.length > 0) {
|
||||
queryString += '?';
|
||||
}
|
||||
for (let i = 0; i < model.queryParams.length; i++) {
|
||||
if (!model.queryParams[i].enabled) {
|
||||
continue;
|
||||
}
|
||||
queryString += model.queryParams[i].key + '=' + model.queryParams[i].value;
|
||||
if (i < model.queryParams.length - 1) {
|
||||
queryString += '&';
|
||||
}
|
||||
}
|
||||
model.path = queryString;
|
||||
}
|
||||
|
||||
httpApiRequestTemplate(apiRequest, index) {
|
||||
return `
|
||||
<div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
|
||||
<div><span class="collection_name">${apiRequest.collectionName}</span> > <span class="api_name">${apiRequest.name}</span></div>
|
||||
<div class="d-flex api_request_info">
|
||||
<div class="form-floating">
|
||||
<select name="method" class="form-select method" style="width: 90px; border-bottom-right-radius: 0;border-top-right-radius: 0;">
|
||||
<option value="POST" ${apiRequest.method === 'POST' ? 'selected' : ''}>POST</option>
|
||||
<option value="GET" ${apiRequest.method === 'GET' ? 'selected' : ''}>GET</option>
|
||||
<option value="PUT" ${apiRequest.method === 'PUT' ? 'selected' : ''}>PUT</option>
|
||||
<option value="DELETE" ${apiRequest.method === 'DELETE' ? 'selected' : ''}>DELETE</option>
|
||||
<option value="CONNECT" ${apiRequest.method === 'CONNECT' ? 'selected' : ''}>CONNECT</option>
|
||||
<option value="HEAD" ${apiRequest.method === 'HEAD' ? 'selected' : ''}>HEAD</option>
|
||||
<option value="OPTIONS" ${apiRequest.method === 'OPTIONS' ? 'selected' : ''}>OPTIONS</option>
|
||||
<option value="TRACE" ${apiRequest.method === 'TRACE' ? 'selected' : ''}>TRACE</option>
|
||||
<option value="PATCH" ${apiRequest.method === 'PATCH' ? 'selected' : ''}>PATCH</option>
|
||||
</select>
|
||||
<label class="form-label must">Method</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
${this.serverManager.renderHttpServers(apiRequest.server)}
|
||||
<label class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" name="basePath" class="form-control" style="width: 180px; border-radius: 0" value="${this.serverManager.basePath(apiRequest.server)}" readonly>
|
||||
<label class="must">기본 경로</label>
|
||||
</div>
|
||||
<div class="form-floating editableInput me-1 path" data-name="path" data-label="Path">
|
||||
<label>Path</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send me-1">Send</button>
|
||||
<button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
|
||||
</div>
|
||||
<div class="api_request d-flex flex-column" style="height:100%;">
|
||||
<div class="api_request_body">
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_param_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="paramTab" data-bs-target="#requestParamTab_${apiRequest.id}"
|
||||
aria-selected="true">Param
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_header_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestHeader" data-bs-target="#requestHeaderTab_${apiRequest.id}"
|
||||
aria-selected="false">Header
|
||||
</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}"
|
||||
aria-selected="false">Pre-Request
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
|
||||
aria-selected="false">Post-Request
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="height: 100%;">
|
||||
<div class="tab-pane fade show request_param_tab" role="tabpanel" id="requestParamTab_${apiRequest.id}" aria-labelledby="requestParams-tab">
|
||||
<div class="query_params">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade request_header_tab" role="tabpanel" id="requestHeaderTab_${apiRequest.id}"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
<div class="request_headers">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}" aria-labelledby="requestBody-tab">
|
||||
<div class="d-flex flex-column">
|
||||
<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</option>
|
||||
</select>
|
||||
<div class="request_body mt-1" style="width:100%;height: 300px; border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="pre-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="postScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="post-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api_response" style="flex: 1">
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_status"></span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</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" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#responseHeaderTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseHeader" aria-selected="false">Header</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="responseHeaderTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="response_headers">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="console-tab">
|
||||
<div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export default HTTPClientView;
|
||||
@@ -0,0 +1,44 @@
|
||||
class ServerManager {
|
||||
constructor(servers) {
|
||||
this.servers = servers ||[];
|
||||
}
|
||||
|
||||
basePath(serverId) {
|
||||
if (serverId === undefined || serverId === null || serverId === '') {
|
||||
return '';
|
||||
}
|
||||
return this.servers.filter(server => server.id == serverId)[0].basePath; // == : 타입 비교 없이 값만 비교
|
||||
}
|
||||
|
||||
getServer(serverId) {
|
||||
return this.servers.filter(server => server.id == serverId)[0];
|
||||
}
|
||||
|
||||
renderServers(selectedServer) {
|
||||
const optionsHtml = this.servers.map(server => `<option value="${server.id}" ${selectedServer === server.id ? 'selected' : ''} data-path="${server.basePath}">${server.name}</option>`).join('');
|
||||
|
||||
return `<select class="form-select server" name="server" style="width: 180px; border-radius: 0;" required>
|
||||
<option value="">서버 선택</option>
|
||||
${optionsHtml}</select>`;
|
||||
}
|
||||
|
||||
renderTcpServers(selectedServer) {
|
||||
const optionsHtml = this.servers.filter( server => server.scheme === 'tcp')
|
||||
.map(server => `<option value="${server.id}" ${selectedServer == server.id ? 'selected' : ''}>${server.name}</option>`).join('');
|
||||
|
||||
return `<select class="form-select server" name="server" style="width: 180px; border-radius: 0;" required>
|
||||
<option value="">서버 선택</option>
|
||||
${optionsHtml}</select>`;
|
||||
}
|
||||
|
||||
renderHttpServers(selectedServer) {
|
||||
const optionsHtml = this.servers.filter( server => server.scheme !== 'tcp')
|
||||
.map(server => `<option value="${server.id}" ${selectedServer === server.id ? 'selected' : ''} data-path="${server.basePath}">${server.name}</option>`).join('');
|
||||
|
||||
return `<select class="form-select server" name="server" style="width: 180px; border-radius: 0;" required>
|
||||
<option value="">서버 선택</option>
|
||||
${optionsHtml}</select>`;
|
||||
}
|
||||
}
|
||||
|
||||
export default ServerManager;
|
||||
@@ -0,0 +1,386 @@
|
||||
import EditableInput from './EditableInput';
|
||||
import APIClient from '../APIClient';
|
||||
|
||||
|
||||
class TCPClientView {
|
||||
|
||||
constructor(parent, serverManager, apiRequestTabContent, model, index) {
|
||||
this.parent = parent;
|
||||
this.serverManager = serverManager;
|
||||
this.apiRequestTabContent = apiRequestTabContent;
|
||||
this.model = model;
|
||||
this.index = index;
|
||||
this.server = this.serverManager.getServer(this.model.server);
|
||||
this.apiClient = new APIClient();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.apiRequestTabContent.append(this.tcpApiRequestTemplate(this.model, this.index));
|
||||
this.renderApiLayout(this.model.layout);
|
||||
}
|
||||
|
||||
setRequestBodyEditor(editor) {
|
||||
this.requestBodyEditor = editor;
|
||||
}
|
||||
|
||||
renderApiLayout(layout) {
|
||||
const requestContainer = this.apiRequestTabContent.find('.request_layout');
|
||||
requestContainer.empty();
|
||||
|
||||
const headerHtml = `
|
||||
<table class="table layout_table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 110px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 80px;">
|
||||
<col>
|
||||
<col style="width: 120px;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="text-align: center;width: 80px;">#</th>
|
||||
<th scope="col" style="text-align: center;width: 120px;">항목명(영문)</th>
|
||||
<th scope="col" style="text-align: center;width: 150px;">항목설명</th>
|
||||
<th scope="col" style="text-align: center;width: 80px;">깊이</th>
|
||||
<th scope="col" style="text-align: center;width: 110px;">아이템 유형</th>
|
||||
<th scope="col" style="text-align: center;width: 80px;">반복 횟수 </th>
|
||||
<th scope="col" style="text-align: center;width: 100px;">반복 참조 필드</th>
|
||||
<th scope="col" style="text-align: center;width: 120px;">데이터 타입</th>
|
||||
<th scope="col" style="text-align: center;width: 80px;">데이터 길이</th>
|
||||
<th scope="col" style="text-align: center;">값</th>
|
||||
<th scope="col" style="text-align: center;width: 120px;">비고 <button type="button" class="btn btn-sm btn-outline-secondary add-layout-item"><i class="fas fa-plus"></i></button></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
const footerHtml = `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
const fieldsHtml = layout.layoutItems ? layout.layoutItems.map((item, index) => {
|
||||
return this.renderApiLayoutItem(item, index);
|
||||
}).join('') : '';
|
||||
|
||||
requestContainer.append(headerHtml + fieldsHtml + footerHtml);
|
||||
|
||||
requestContainer.find('.editable').each((index, editableElement) => {
|
||||
const editableInput = new EditableInput({
|
||||
name: editableElement.dataset.name,
|
||||
value: editableElement.dataset.value
|
||||
});
|
||||
|
||||
editableInput.init(editableElement, (value) => {
|
||||
_.set(this.model.layout, editableElement.dataset.name, value);
|
||||
this.buildMessage();
|
||||
$('span.variable').off('mouseover');
|
||||
$('span.variable').off('mouseover');
|
||||
document.querySelectorAll('span.variable').forEach(element => {
|
||||
let text = element.innerText;
|
||||
element.addEventListener('mouseover', () => this.parent.showPopper(element, text));
|
||||
element.addEventListener('mouseout', () => this.parent.hidePopper(element));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
let totalLength = 0;
|
||||
this.model.layout.layoutItems.forEach(item => {
|
||||
totalLength += parseInt(item.loutItemLength);
|
||||
});
|
||||
this.apiRequestTabContent.find('.total_message_length').text(totalLength);
|
||||
this.setupListeners();
|
||||
}
|
||||
|
||||
|
||||
handleUIUpdate(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
const element = event.currentTarget;
|
||||
const fieldName = $(element).attr('name');
|
||||
const newValue = this.getFieldValue(element);
|
||||
if (fieldName !== '') {
|
||||
_.set(this.model.layout, fieldName, newValue);
|
||||
this.buildMessage();
|
||||
}
|
||||
}
|
||||
let totalLength = 0;
|
||||
this.model.layout.layoutItems.forEach(item => {
|
||||
totalLength += parseInt(item.loutItemLength);
|
||||
});
|
||||
this.apiRequestTabContent.find('.total_message_length').text(totalLength);
|
||||
}
|
||||
|
||||
getFieldValue(element) {
|
||||
if ($(element).is('select') || $(element).is('input[type="text"]') || $(element).is('input[type="number"]')) {
|
||||
return $(element).val();
|
||||
}
|
||||
if ($(element).is('input[type="checkbox"]')) {
|
||||
return $(element).is(':checked');
|
||||
}
|
||||
}
|
||||
|
||||
renderApiLayoutItem(item, index) {
|
||||
if (item.value === null)
|
||||
item.value = '';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td style="width: 80px; text-align: center;"><span style="width: 80px; text-align: center;">${item.loutItemSerno}</span></td>
|
||||
<td><input type="text" class="field" name="layoutItems[${index}].loutItemName" value="${item.loutItemName}"></td>
|
||||
<td><input type="text" class="field" name="layoutItems[${index}].loutItemDesc" value="${item.loutItemDesc}"></td>
|
||||
<td><input type="number" class="field" style="width: 80px;" name="layoutItems[${index}].loutItemDepth" min="1" value="${item.loutItemDepth}"></td>
|
||||
<td>
|
||||
<select name="layoutItems[${index}].loutItemType" class="field" id="loutItemType${index}">
|
||||
<option value="Field" ${item.loutItemType === 'Field' ? 'selected' : ''}>Field</option>
|
||||
<option value="Grid" ${item.loutItemType === 'Grid' ? 'selected' : ''}>Grid</option>
|
||||
<option value="Group" ${item.loutItemType === 'Group' ? 'selected' : ''}>Group</option>
|
||||
<option value="Attr" ${item.loutItemType === 'Attr' ? 'selected' : ''}>Attr</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="number" class="field" style="width: 80px;" name="layoutItems[${index}].loutItemOccCnt" min="0" value="${item.loutItemOccCnt}"></td>
|
||||
<td><input type="text" class="field" name="layoutItems[${index}].loutItemOccRef" value="${item.loutItemOccRef}"></td>
|
||||
<td>
|
||||
<select name="layoutItems[${index}].loutItemDataType" class="field" id="loutItemDataType${index}">
|
||||
<option value="BigDecimal" ${item.loutItemDataType === 'BigDecimal' ? 'selected' : ''}>BigDecimal</option>
|
||||
<option value="Int" ${item.loutItemDataType === 'Int' ? 'selected' : ''}>Int</option>
|
||||
<option value="Long" ${item.loutItemDataType === 'Long' ? 'selected' : ''}>Long</option>
|
||||
<option value="String" ${item.loutItemDataType === 'String' ? 'selected' : ''}>String</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="number" class="field" style="width: 80px;" name="layoutItems[${index}].loutItemLength" min="1" value="${item.loutItemLength}"></td>
|
||||
<td><!-- input type="text" class="field" name="layoutItems[${index}].value" value="${item.value !== undefined ? item.value : ''}" -->
|
||||
<div class="editable" data-name="layoutItems[${index}].value" data-value="${item.value !== undefined ? item.value : ''}"></div>
|
||||
</td>
|
||||
<td style="width: 120px; text-align: center;">
|
||||
<div style="width: 120px !important;">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary move-up" data-index="${index}"><i class="fas fa-arrow-up"></i></button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary move-down" data-index="${index}"><i class="fas fa-arrow-down"></i></button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary delete" data-index="${index}"><i class="fas fa-trash-alt"></i></button>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
recalculateSerno() {
|
||||
// Reassign loutItemSerno sequentially based on the current order
|
||||
this.model.layout.layoutItems.forEach((item, index) => {
|
||||
item.loutItemSerno = index + 1; // Assuming you want to start numbering from 1
|
||||
});
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
const table = this.apiRequestTabContent.find('.layout_table');
|
||||
table.on('change', 'select.field, input.field', this.handleUIUpdate.bind(this));
|
||||
|
||||
table.on('click', '.add-layout-item', event => {
|
||||
let item = {
|
||||
'parent': 0,
|
||||
'level': 1,
|
||||
'loutName': '',
|
||||
'loutItemName': '',
|
||||
'loutItemDesc': '',
|
||||
'loutItemDepth': 1,
|
||||
'loutItemType': 'Field',
|
||||
'loutItemOccCnt': '',
|
||||
'loutItemOccRef': '',
|
||||
'loutItemDataType': 'String',
|
||||
'loutItemLength': 1,
|
||||
'loutItemDecimal': 0,
|
||||
'loutItemDefault': '',
|
||||
'loutItemMaskYn': 'N',
|
||||
'loutItemMaskOffset': 0,
|
||||
'loutItemMaskLength': 0,
|
||||
'parentLoutItemIndex': 0,
|
||||
'expanded': true,
|
||||
'isLeaf': true,
|
||||
'LOUTITEMPATH': '',
|
||||
'value' : ''
|
||||
};
|
||||
this.model.layout.layoutItems.push(item);
|
||||
this.recalculateSerno();
|
||||
this.renderApiLayout(this.model.layout);
|
||||
});
|
||||
|
||||
table.on('click', '.move-up', event => {
|
||||
const index = $(event.currentTarget).data('index');
|
||||
if (index > 0) {
|
||||
const temp = this.model.layout.layoutItems[index];
|
||||
this.model.layout.layoutItems[index] = this.model.layout.layoutItems[index - 1];
|
||||
this.model.layout.layoutItems[index - 1] = temp;
|
||||
this.recalculateSerno();
|
||||
this.renderApiLayout(this.model.layout);
|
||||
}
|
||||
});
|
||||
|
||||
table.on('click', '.move-down', event => {
|
||||
const index = $(event.currentTarget).data('index');
|
||||
if (index < this.model.layout.layoutItems.length - 1) {
|
||||
const temp = this.model.layout.layoutItems[index];
|
||||
this.model.layout.layoutItems[index] = this.model.layout.layoutItems[index + 1];
|
||||
this.model.layout.layoutItems[index + 1] = temp;
|
||||
this.recalculateSerno();
|
||||
this.renderApiLayout(this.model.layout);
|
||||
}
|
||||
});
|
||||
|
||||
table.on('click', '.delete', event => {
|
||||
const index = $(event.currentTarget).data('index');
|
||||
this.model.layout.layoutItems.splice(index, 1);
|
||||
this.recalculateSerno();
|
||||
this.renderApiLayout(this.model.layout);
|
||||
});
|
||||
}
|
||||
|
||||
async buildMessage() {
|
||||
let message = '';
|
||||
this.requestBodyEditor.setValue(message);
|
||||
|
||||
for (const item of this.model.layout.layoutItems) {
|
||||
let duplicated = item.value;
|
||||
const value = await this.apiClient.processPreScriptAndVariables(this.model, duplicated, null);
|
||||
message += this.fillPadding(item.loutItemLength, value);
|
||||
}
|
||||
|
||||
this.requestBodyEditor.setValue(message);
|
||||
}
|
||||
|
||||
fillPadding(dataLength, value) {
|
||||
value = String(value);
|
||||
return value.padStart(dataLength, ' ');
|
||||
}
|
||||
|
||||
tcpApiRequestTemplate(apiRequest, index) {
|
||||
return `
|
||||
<div class="tab-pane fade mt-1 api_request" id="api_request_${apiRequest.id}" style="height: 100%;">
|
||||
<div><span class="collection_name">${apiRequest.collectionName}</span> > <span class="api_name">${apiRequest.name}</span></div>
|
||||
<div class="d-flex api_request_info">
|
||||
<div class="form-floating me-1">
|
||||
${this.serverManager.renderTcpServers(apiRequest.server)}
|
||||
<label class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="form-floating me-1 ${(this.server && this.server.lengthFieldInclude) ? 'show':'hide'}">
|
||||
<input type="number" style="width: 120px" value="${this.server.lengthFieldOffset}" name="lengthFieldOffset" class="form-control" placeholder="Length Field Offset" readonly>
|
||||
<label>길이 필드 위치</label>
|
||||
</div>
|
||||
<div class="form-floating me-1 ${(this.server && this.server.lengthFieldInclude) ? 'show':'hide'}">
|
||||
<input type="number" style="width: 120px" value="${this.server.lengthFieldLength}" name="lengthFieldLength" class="form-control" placeholder="Length Field Length" readonly>
|
||||
<label>길이 필드 길이</label>
|
||||
</div>
|
||||
<div class="form-floating me-1 ${(this.server && this.server.messageKeyInclude) ? 'show':'hide'}">
|
||||
<input type="number" style="width: 120px" value="${this.server.messageKeyOffset}" name="messageKeyOffset" class="form-control" placeholder="Message Key Offset" readonly>
|
||||
<label>메시지 키 위치</label>
|
||||
</div>
|
||||
<div class="form-floating me-1 ${(this.server && this.server.messageKeyInclude) ? 'show':'hide'}">
|
||||
<input type="number" style="width: 120px" value="${this.server.messageKeyLength}" name="messageKeyLength" class="form-control" placeholder="Message Key Length" readonly>
|
||||
<label>메시지 키 길이</label>
|
||||
</div>
|
||||
<div class="form-floating me-1 path ${(this.server && this.server.messageKeyInclude) ? 'show':'hide'}" data-name="path" data-label="Key">
|
||||
<input type="text" name="path" class="form-control" style="width: 180px; border-radius: 0" value="${apiRequest.path}">
|
||||
<label>메시지 키</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send me-1">Send</button>
|
||||
<button class="btn btn-primary save" data-index="${index}" style="height: 58px;">저장</button>
|
||||
</div>
|
||||
<div class="api_request d-flex flex-column" style="height:100%;">
|
||||
<div class="api_request_body">
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="requestBody" data-bs-target="#requestBodyTab_${apiRequest.id}"
|
||||
aria-selected="false">Body
|
||||
</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}"
|
||||
aria-selected="false">Pre-Request
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn_postrequest_tab" data-bs-toggle="tab"
|
||||
type="button" role="tab" aria-controls="postScript" data-bs-target="#postRequestTab_${apiRequest.id}"
|
||||
aria-selected="false">Post-Request
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="height: 100%;">
|
||||
<div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}" aria-labelledby="requestBody-tab">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="request_layout" style="width:100%; border:1px solid grey; overflow: scroll"></div>
|
||||
<div class="request_body" style="width:100%;height: 150px; border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade pre_script_tab" role="tabpanel" id="preRequestTab_${apiRequest.id}" aria-labelledby="preScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="pre-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
|
||||
aria-labelledby="postScrit-tab">
|
||||
<div class="d-flex flex-row">
|
||||
<div style="width:calc(100% - 200px);">
|
||||
<div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div style="width: 200px;">
|
||||
<div class="post-request-variable">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api_request_info" >
|
||||
<span>전체 메시지 길이: </span>
|
||||
<span class="total_message_length"></span>
|
||||
</div>
|
||||
<div class="api_request_info">
|
||||
</div>
|
||||
<div class="api_response" style="flex: 1">
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</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" data-bs-target="#responseBodyTab_${apiRequest.id}" type="button" role="tab" aria-controls="responseBody" aria-selected="false">Body</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#consoleTab_${apiRequest.id}" type="button" role="tab" aria-controls="consoleTab" aria-selected="false">Console</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="responseParams-tab">
|
||||
<div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="consoleTab_${apiRequest.id}" role="tabpanel"
|
||||
aria-labelledby="console-tab">
|
||||
<div class="console mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
export default TCPClientView;
|
||||
Reference in New Issue
Block a user