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

monaco editor 적용

Browse Source
This commit is contained in:
현성필
2023-05-16 20:30:25 +09:00
parent 8ceaa6ef53
commit 58c11861ff
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/page/apiTester.html
+1 -2
View File
@@ -6,7 +6,6 @@
<section layout:fragment="contentFragment"> <section layout:fragment="contentFragment">
<script> <script>
require.config({paths: {'vs': '/plugins/vs'}}); require.config({paths: {'vs': '/plugins/vs'}});
// require(['vs/editor/editor.main'], function(){});
</script> </script>
<div id="loading-overlay" style="display: none;"> <div id="loading-overlay" style="display: none;">
<div class="d-flex justify-content-center align-items-center" <div class="d-flex justify-content-center align-items-center"
@@ -475,7 +474,6 @@
let me = this; let me = this;
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], { let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
value: model.requestBody, value: model.requestBody,
@@ -507,6 +505,7 @@
}); });
me.responses.push(responseBodyEditor); me.responses.push(responseBodyEditor);
}); });
target.find('.path').val(model.path); target.find('.path').val(model.path);
target.find('.method').val(model.method); target.find('.method').val(model.method);
this.renderParam(idx); this.renderParam(idx);
src/main/resources/templates/page/routes/mockRouteEdit.html
+25 -10
View File
@@ -4,6 +4,9 @@
<body> <body>
<section layout:fragment="contentFragment"> <section layout:fragment="contentFragment">
<script>
require.config({paths: {'vs': '/plugins/vs'}});
</script>
<div class="container mt-1"> <div class="container mt-1">
<form name="mockRouteForm" id="mockRouteForm" <form name="mockRouteForm" id="mockRouteForm"
th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}" th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}"
@@ -130,11 +133,9 @@
<input class="form-control" type="number" name="delay" required/> <input class="form-control" type="number" name="delay" required/>
<label class="form-label must">응답 지연 시간(ms)</label> <label class="form-label must">응답 지연 시간(ms)</label>
</div> </div>
<div class="form-floating mt-1"> <label class="form-label mt-1">응답 Body</label>
<textarea class="form-control" style="height: 200px;" name="body"> <div class="response_body" style="width:100%;height:250px;border:1px solid grey;"></div>
</textarea> <textarea class="form-control" style="display: none;" name="body"></textarea>
<label class="form-label must">응답 Body</label>
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<table class="table"> <table class="table">
@@ -217,6 +218,7 @@
let view = { let view = {
currentIdx: 0, currentIdx: 0,
responseEditors : [],
init: function () { init: function () {
$('.btn_add_case').on('click', function () { $('.btn_add_case').on('click', function () {
controller.addResponse(); controller.addResponse();
@@ -255,6 +257,7 @@
conditions: [], conditions: [],
headers: [] headers: []
}; };
//statusCode, delay, defaultResponse, body 로 끝나는 항목을 찾음
response.statusCode = $(this).find('input[name$="statusCode"]').val(); response.statusCode = $(this).find('input[name$="statusCode"]').val();
response.delay = $(this).find('input[name$="delay"]').val(); response.delay = $(this).find('input[name$="delay"]').val();
response.defaultResponse = $(this).find('input[name$="defaultResponse"]').val()==='true'; response.defaultResponse = $(this).find('input[name$="defaultResponse"]').val()==='true';
@@ -278,7 +281,7 @@
}; };
response.headers.push(header); response.headers.push(header);
}); });
console.log(model);
}); });
$('#responses').empty(); $('#responses').empty();
this.render(); this.render();
@@ -327,6 +330,22 @@
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').val(model.responses[i].statusCode); 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 + '].defaultResponse"]').val(model.responses[i].defaultResponse);
nodeCopy.find('input[name="responses[' + i + '].delay"]').val(model.responses[i].delay); 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('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () { nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
@@ -337,10 +356,6 @@
model.responses[i].delay = $(this).val(); model.responses[i].delay = $(this).val();
}); });
nodeCopy.find('textarea[name="responses[' + i + '].body"]').on('input', function () {
model.responses[i].body = $(this).val();
});
let conditions = nodeCopy.find('.response_conditions'); let conditions = nodeCopy.find('.response_conditions');
for (let c = 0; c < model.responses[i].conditions.length; c++) { for (let c = 0; c < model.responses[i].conditions.length; c++) {