From e1f0867df9e12c1c27c707fb814df809493a8aaa Mon Sep 17 00:00:00 2001
From: yunjy <yunjy83@eactive.co.kr>
Date: Mon, 14 Feb 2022 10:35:06 +0900
Subject: [PATCH] =?UTF-8?q?monaco=20=EA=B4=80=EB=A0=A8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/eactive/httpmockserver/ApiInfo.java   | 43 ++++++++--
 .../templates/page/add-edit-api.html          | 82 +++++++++++++++++--
 2 files changed, 114 insertions(+), 11 deletions(-)

diff --git a/src/main/java/com/eactive/httpmockserver/ApiInfo.java b/src/main/java/com/eactive/httpmockserver/ApiInfo.java
index 46e5474..adc8cb3 100644
--- a/src/main/java/com/eactive/httpmockserver/ApiInfo.java
+++ b/src/main/java/com/eactive/httpmockserver/ApiInfo.java
@@ -54,9 +54,15 @@ public class ApiInfo implements Serializable {
 	@Positive
 	private Integer sleepSeconds;
 
+	@Column(length = 50)
+	private String syntaxResponseBody1;
+
 	@Column(length = 5000)
 	private String responseBody1;
 
+	@Column(length = 50)
+	private String syntaxResponseBody2;
+
 	@Column(length = 5000)
 	private String responseBody2;
 
@@ -156,12 +162,39 @@ public class ApiInfo implements Serializable {
 		this.responseBody2 = responseBody2;
 	}
 
+	public String getSyntaxResponseBody1() {
+		return syntaxResponseBody1;
+	}
+
+	public void setSyntaxResponseBody1(String syntaxResponseBody1) {
+		this.syntaxResponseBody1 = syntaxResponseBody1;
+	}
+
+	public String getSyntaxResponseBody2() {
+		return syntaxResponseBody2;
+	}
+
+	public void setSyntaxResponseBody2(String syntaxResponseBody2) {
+		this.syntaxResponseBody2 = syntaxResponseBody2;
+	}
+
 	@Override
 	public String toString() {
-		return "ApiInfo [id=" + id + ", apiGroupName=" + apiGroupName + ", apiName=" + apiName + ", url=" + url
-				+ ", serviceValue=" + serviceValue + ", method=" + method + ", responseContentType="
-				+ responseContentType + ", responseHeaders=" + responseHeaders + ", responseStatusCode="
-				+ responseStatusCode + ", sleepSeconds=" + sleepSeconds + ", responseBody1=" + responseBody1
-				+ ", responseBody2=" + responseBody2 + "]";
+		return "ApiInfo{" +
+				"id=" + id +
+				", apiGroupName='" + apiGroupName + '\'' +
+				", apiName='" + apiName + '\'' +
+				", url='" + url + '\'' +
+				", serviceValue='" + serviceValue + '\'' +
+				", method='" + method + '\'' +
+				", responseContentType='" + responseContentType + '\'' +
+				", responseHeaders='" + responseHeaders + '\'' +
+				", responseStatusCode=" + responseStatusCode +
+				", sleepSeconds=" + sleepSeconds +
+				", syntaxResponseBody1='" + syntaxResponseBody1 + '\'' +
+				", responseBody1='" + responseBody1 + '\'' +
+				", syntaxResponseBody2='" + syntaxResponseBody2 + '\'' +
+				", responseBody2='" + responseBody2 + '\'' +
+				'}';
 	}
 }
diff --git a/src/main/resources/templates/page/add-edit-api.html b/src/main/resources/templates/page/add-edit-api.html
index 9977941..b3c002d 100644
--- a/src/main/resources/templates/page/add-edit-api.html
+++ b/src/main/resources/templates/page/add-edit-api.html
@@ -27,7 +27,7 @@
 	<!-- Main content -->
 	<section class="content">
 		<div class="container-fluid">
-			<form class="inputForm" action="#" th:action="@{/manage/saveApi}"
+			<form id="form" class="inputForm" action="#" th:action="@{/manage/saveApi}"
 				th:object="${apiInfo}" method="post">
 				<div class="card card-default">
 					<div class="card-header">
@@ -153,13 +153,40 @@
 								</div>
 							</div>
 						</div>
+						<div class="row">
+							<div class="col-md-6">
+								<div class="form-group row">
+									<label class="col-sm-3 col-form-label">Syntax 응답 Body1</label>
+									<div class="col-sm-9">
+										<select th:field="*{syntaxResponseBody1}" th:value="*{syntaxResponseBody1}">
+											<option th:value="'plaintext'" th:text="TEXT"></option>
+											<option th:value="'json'" th:text="JSON"></option>
+											<option th:value="'xml'" th:text="XML"></option>
+										</select>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-6">
+								<div class="form-group row">
+									<label class="col-sm-3 col-form-label">Syntax 응답 Body2</label>
+									<div class="col-sm-9">
+										<select th:field="*{syntaxResponseBody2}" th:value="*{syntaxResponseBody2}">
+											<option th:value="'plaintext'" th:text="TEXT"></option>
+											<option th:value="'json'" th:text="JSON"></option>
+											<option th:value="'xml'" th:text="XML"></option>
+										</select>
+									</div>
+								</div>
+							</div>
+						</div>
 						<div class="row">
 							<div class="col-md-6">
 								<div class="form-group row">
 									<label class="col-sm-3 col-form-label">응답 Body1</label>
 									<div class="col-sm-9">
-										<textarea class="form-control" th:field="*{responseBody1}"
-											rows="3"></textarea>
+										<div id="responseBody1"  style="height:400px"></div>
+<!--										<textarea class="form-control" th:field="*{responseBody1}"-->
+<!--											rows="3"></textarea>-->
 									</div>
 								</div>
 							</div>
@@ -167,8 +194,9 @@
 								<div class="form-group row">
 									<label class="col-sm-3 col-form-label">응답 Body2</label>
 									<div class="col-sm-9">
-										<textarea class="form-control" th:field="*{responseBody2}"
-											rows="3"></textarea>
+<!--										<textarea class="form-control" th:field="*{responseBody2}"-->
+<!--											rows="3"></textarea>-->
+										<div id="responseBody2" style="height:400px"></div>
 									</div>
 								</div>
 							</div>
@@ -186,8 +214,50 @@
 </div>
 
 <th:block layout:fragment="script">
+	<link rel="stylesheet" data-name="vs/editor/editor.main"
+		  th:href="@{/plugins/vs/editor/editor.main.css}">
+
+	<script>var require = { paths: { 'vs': '../../plugins/vs' } };</script>
+
+	<script th:src="@{/plugins/vs/loader.js}"></script>
+	<script th:src="@{/plugins/vs/editor/editor.main.nls.js}"></script>
+	<script th:src="@{/plugins/vs/editor/editor.main.js}"></script>
+
 	<script th:inline="javascript">
-		var urlForSidebar = "/manage/findAllApis";
+		function setMonaco(elementId, selectId, initValue){
+			var targetDivElement = document.getElementById(elementId);
+			var lang = $("#"+selectId+" option:selected").val();
+
+			var editor = monaco.editor.create(targetDivElement, {
+				value: initValue,
+				language: lang,
+				minimap: {
+					enabled: false
+				},
+				wordWrap: 'on',
+				wrappingStrategy: 'simple',
+				wordWrapBreakAfterCharacters: '',
+				wordWrapBreakBeforeCharacters: '',
+				wrappingIndent: 'none',
+				automaticLayout: true
+			});
+
+			$("#"+selectId).change(function(){
+				var selectLang = $("#"+selectId+" option:selected").val();
+				monaco.editor.setModelLanguage(editor.getModel(), selectLang);
+			});
+
+			$('#form').submit(function(eventObj) {
+				$("<input />").attr("type", "hidden")
+						.attr("name", elementId)
+						.attr("value", editor.getValue())
+						.appendTo("#form");
+				return true;
+			});
+		}
+
+		setMonaco('responseBody1', 'syntaxResponseBody1', [[${apiInfo.responseBody1}]]);
+		setMonaco('responseBody2', 'syntaxResponseBody2', [[${apiInfo.responseBody2}]]);
 	</script>
 </th:block>
 </html>