djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

응답 관리 화면 수정

Browse Source
This commit is contained in:
현성필
2023-05-17 22:17:27 +09:00
parent 1ad677cfdd
commit 2f3edf05d1
2 changed files with 143 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/fragment/head.html
+1 -1
View File
@@ -10,7 +10,7 @@
<meta content="index, follow" name="robots"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="https://www.eactive.co.kr/" property="og:url"/>
<title th:text="#{title.html}">개발자 포털</title>
<title>API Simulator</title>
<link href="/css/font.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/css/fontawesome/css/all.min.css" type="text/css"/>
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
src/main/resources/templates/page/routes/mockRouteEdit.html
+142 -121
View File
@@ -232,23 +232,23 @@
$('#responseTabContent').on('click', 'button', function () {
if ($(this).hasClass('btn_remove_case')) {
controller.removeResponse($(this).attr("data-id"));
controller.removeResponse($(this).data("id"));
}
if ($(this).hasClass('btn_add_condition')) {
controller.addResponseCondition($(this).attr("data-id"));
controller.addResponseCondition($(this).data("id"));
}
if ($(this).hasClass('btn_add_header')) {
controller.addResponseHeader($(this).attr("data-id"));
controller.addResponseHeader($(this).data("id"));
}
if ($(this).hasClass('btn_remove_condition')) {
controller.removeResponseCondition($(this).attr("data-id"), $(this).attr("data-row"));
controller.removeResponseCondition($(this).data("id"), $(this).data("row"));
}
if ($(this).hasClass('btn_remove_header')) {
controller.removeResponseHeader($(this).attr("data-id"), $(this).attr("data-row"));
controller.removeResponseHeader($(this).data("id"), $(this).data("row"));
}
});
@@ -281,18 +281,134 @@
};
response.headers.push(header);
});
console.log(model);
});
$('#responses').empty();
this.render();
},
render: function () {
renderCondition: function(i) {
$('#response_tab_' + i).find('.response_conditions').empty();
let conditions = $('#response_tab_' + i).find('.response_conditions');
for (let c = 0; c < model.responses[i].conditions.length; c++) {
let conditionTemplate = $('#conditionTemplate').children().find('tr').clone();
conditionTemplate.find('select').attr('name', 'responses[' + i + '].conditions[' + c + '].type');
conditionTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].conditions[' + c + '].key');
conditionTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].conditions[' + c + '].value');
conditionTemplate.find('button').attr("data-id", i);
conditionTemplate.find('button').attr("data-row", c);
conditionTemplate.find('select').val(model.responses[i].conditions[c].type);
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').val(model.responses[i].conditions[c].key);
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').val(model.responses[i].conditions[c].value);
conditionTemplate.find('select').on('change', function () {
model.responses[i].conditions[c].type = $(this).val();
});
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').on('input', function () {
model.responses[i].conditions[c].key = $(this).val();
});
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').on('input', function () {
model.responses[i].conditions[c].value = $(this).val();
});
$(conditions).append(conditionTemplate);
}
},
renderHeaders(i){
$('#response_tab_' + i).find('.response_headers').empty();
let headers = $('#response_tab_' + i).find('.response_headers');
for (let j = 0; j < model.responses[i].headers.length; j++) {
let headerTemplate = $('#responseHeaderTemplate').children().find('tr').clone();
headerTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].headers[' + j + '].key');
headerTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].headers[' + j + '].value');
headerTemplate.find('button').attr("data-id", i);
headerTemplate.find('button').attr("data-row", j);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').val(model.responses[i].headers[j].key);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').val(model.responses[i].headers[j].value);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').on('input', function () {
model.responses[i].headers[j].key = $(this).val();
});
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').on('input', function () {
model.responses[i].headers[j].value = $(this).val();
});
$(headers).append(headerTemplate);
}
},
renderResponse(i){
this.renderResponseTabTitle();
let nodeCopy = $('#template').children().clone();
nodeCopy.attr('id', 'response_tab_' + i);
nodeCopy.attr('aria-labelledby', 'response_tab_' + i);
nodeCopy.attr('tabindex', i);
console.log(model.responses[i]);
nodeCopy.attr('class', 'tab-pane fade ' + (model.responses[i].defaultResponse? 'show active' : ''));
if (model.responses[i].defaultResponse) {
nodeCopy.find('.condition_name').text('기본 응답');
nodeCopy.find('.condition').attr('class', 'condition')
nodeCopy.find('.condition').attr('style', 'display: none;')
}else {
nodeCopy.find('.condition_name').text('조건 ' + (i + 1));
}
nodeCopy.find('.btn_remove_case').attr("data-id", i);
nodeCopy.find('.btn_add_condition').attr("data-id", i);
nodeCopy.find('.btn_add_header').attr("data-id", i);
nodeCopy.find('input[name="statusCode"]').attr('name', 'responses[' + i + '].statusCode');
nodeCopy.find('input[name="defaultResponse"]').attr('name', 'responses[' + i + '].defaultResponse');
nodeCopy.find('input[name="delay"]').attr('name', 'responses[' + i + '].delay');
nodeCopy.find('textarea[name="body"]').attr('name', 'responses[' + i + '].body');
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').val(model.responses[i].statusCode);
nodeCopy.find('input[name="responses[' + i + '].defaultResponse"]').val(model.responses[i].defaultResponse);
nodeCopy.find('input[name="responses[' + i + '].delay"]').val(model.responses[i].delay);
let me = this;
require(['vs/editor/editor.main'], function () {
let editor = monaco.editor.create(nodeCopy.find(".response_body")[0], {
value: model.responses[i].body,
theme: 'vs-light',
automaticLayout: true
});
editor.onDidChangeModelContent(function (e) {
model.responses[i].body = editor.getValue();
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(editor.getValue());
});
me.responseEditors.push(editor);
});
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
model.responses[i].statusCode = $(this).val();
});
nodeCopy.find('input[name="responses[' + i + '].delay"]').on('input', function () {
model.responses[i].delay = $(this).val();
});
$('#responseTabContent').append(nodeCopy);
if(view.currentIdx >= model.responses.length){
view.currentIdx = model.responses.length - 1;
}
$('#responseTabTitle li:eq(' + view.currentIdx + ') a').tab('show');
},
renderResponseTabTitle(){
$('#responseTabTitle').empty();
$('#responseTabContent').empty();
for (let i = 0; i < model.responses.length; i++) {
let nodeCopy = $('#template').children().clone();
let tabButton = $('<a>').attr('class', 'nav-link'+ (model.responses[i].defaultResponse? ' active' : ''))
.attr('data-bs-toggle', 'tab')
.attr('type', 'button')
@@ -303,113 +419,11 @@
.text(model.responses[i].defaultResponse?'기본 응답':('조건 ' + i));
let li = $('<li>').attr('class', 'nav-item')
.attr('role','presentation')
.append(tabButton);
.attr('role','presentation')
.append(tabButton);
$('#responseTabTitle').append(li);
nodeCopy.attr('id', 'response_tab_' + i);
nodeCopy.attr('aria-labelledby', 'response_tab_' + i);
nodeCopy.attr('tabindex', i);
nodeCopy.attr('class', 'tab-pane fade ' + (model.responses[i].defaultResponse? 'show active' : ''));
if (model.responses[i].defaultResponse) {
nodeCopy.find('.condition_name').text('기본 응답');
nodeCopy.find('.condition').attr('class', 'condition')
nodeCopy.find('.condition').attr('style', 'display: none;')
}else {
nodeCopy.find('.condition_name').text('조건 ' + (i + 1));
}
nodeCopy.find('.btn_remove_case').attr("data-id", i);
nodeCopy.find('.btn_add_condition').attr("data-id", i);
nodeCopy.find('.btn_add_header').attr("data-id", i);
nodeCopy.find('input[name="statusCode"]').attr('name', 'responses[' + i + '].statusCode');
nodeCopy.find('input[name="defaultResponse"]').attr('name', 'responses[' + i + '].defaultResponse');
nodeCopy.find('input[name="delay"]').attr('name', 'responses[' + i + '].delay');
nodeCopy.find('textarea[name="body"]').attr('name', 'responses[' + i + '].body');
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').val(model.responses[i].statusCode);
nodeCopy.find('input[name="responses[' + i + '].defaultResponse"]').val(model.responses[i].defaultResponse);
nodeCopy.find('input[name="responses[' + i + '].delay"]').val(model.responses[i].delay);
let me = this;
require(['vs/editor/editor.main'], function () {
let editor = monaco.editor.create(nodeCopy.find(".response_body")[0], {
value: model.responses[i].body,
theme: 'vs-light',
automaticLayout: true
});
me.responseEditors.push(editor);
me.responseEditors[i].onDidChangeModelContent(function (e) {
model.responses[i].body = me.responseEditors[i].getValue();
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
});
});
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
model.responses[i].statusCode = $(this).val();
});
nodeCopy.find('input[name="responses[' + i + '].delay"]').on('input', function () {
model.responses[i].delay = $(this).val();
});
let conditions = nodeCopy.find('.response_conditions');
for (let c = 0; c < model.responses[i].conditions.length; c++) {
let conditionTemplate = $('#conditionTemplate').children().find('tr').clone();
conditionTemplate.find('select').attr('name', 'responses[' + i + '].conditions[' + c + '].type');
conditionTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].conditions[' + c + '].key');
conditionTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].conditions[' + c + '].value');
conditionTemplate.find('button').attr("data-id", i);
conditionTemplate.find('button').attr("data-row", c);
conditionTemplate.find('select').val(model.responses[i].conditions[c].type);
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').val(model.responses[i].conditions[c].key);
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').val(model.responses[i].conditions[c].value);
conditionTemplate.find('select').on('change', function () {
model.responses[i].conditions[c].type = $(this).val();
});
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').on('input', function () {
model.responses[i].conditions[c].key = $(this).val();
});
conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').on('input', function () {
model.responses[i].conditions[c].value = $(this).val();
});
$(conditions).append(conditionTemplate);
}
for (let j = 0; j < model.responses[i].headers.length; j++) {
let headerTemplate = $('#responseHeaderTemplate').children().find('tr').clone();
headerTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].headers[' + j + '].key');
headerTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].headers[' + j + '].value');
headerTemplate.find('button').attr("data-id", i);
headerTemplate.find('button').attr("data-row", j);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').val(model.responses[i].headers[j].key);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').val(model.responses[i].headers[j].value);
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').on('input', function () {
model.responses[i].headers[j].key = $(this).val();
});
headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').on('input', function () {
model.responses[i].headers[j].value = $(this).val();
});
$(nodeCopy).find('.response_headers').append(headerTemplate);
}
$('#responseTabContent').append(nodeCopy);
}
let tabButton = $('<button>').attr('class', 'nav-link btn_add_case')
.attr('type', 'button')
.attr('aria-selected', 'false')
@@ -420,8 +434,15 @@
.append(tabButton);
$('#responseTabTitle').append(li);
},
render: function () {
$('#responseTabContent').empty();
$('#responseTabTitle li:eq(' + view.currentIdx + ') a').tab('show');
for (let i = 0; i < model.responses.length; i++) {
view.renderResponse(i);
view.renderCondition(i);
view.renderHeaders(i);
}
}
};
@@ -439,7 +460,7 @@
});
view.currentIdx = model.responses.length - 1;
view.render();
view.renderResponse(view.currentIdx);
},
removeResponse: function (idx) {
if (model.responses[idx].defaultResponse) {
@@ -457,12 +478,12 @@
value: ''
});
view.currentIdx = idx;
view.render();
view.renderCondition(idx);
},
removeResponseCondition: function (idx, conditionIdx) {
model.responses[idx].conditions.splice(conditionIdx, 1);
view.currentIdx = idx;
view.render();
view.renderCondition(idx);
},
addResponseHeader: function (idx) {
model.responses[idx].headers.push({
@@ -470,12 +491,12 @@
value: ''
});
view.currentIdx = idx;
view.render();
view.renderHeaders(idx);
},
removeResponseHeader: function (idx, headerIdx) {
model.responses[idx].headers.splice(headerIdx, 1);
view.currentIdx = idx;
view.render();
view.renderHeaders(idx);
}
}