hsoh
216 lines
6.9 KiB
HTML
216 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorator="layout/default_layout">
|
|
|
|
<div class="content-wrapper" layout:fragment="content">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 th:if="${scriptInfo.id == null}">스크립트 정보 등록</h1>
|
|
<h1 th:unless="${scriptInfo.id == null}">스크립트 정보 수정</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">스크립트 관리</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
|
|
<!-- Main content -->
|
|
<section class="content" style="padding-bottom: 1rem;">
|
|
<div class="container-fluid">
|
|
<form id="form" class="inputForm" action="#" th:action="@{/manage/saveScriptInfo}"
|
|
th:object="${scriptInfo}" method="post">
|
|
<div class="card card-primary">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Basic Info</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label">스크립트 명<small>(*)</small></label>
|
|
<div class="col-sm-9">
|
|
<input id="scriptName" type="text" th:field="*{scriptName}" class="form-control">
|
|
<span th:if="${#fields.hasErrors('scriptName')}"
|
|
th:errors="*{scriptName}" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label">스크립트 설명<small>(*)</small></label>
|
|
<div class="col-sm-9">
|
|
<input id="scriptName" type="text" th:field="*{scriptDesc}" class="form-control">
|
|
<span th:if="${#fields.hasErrors('scriptDesc')}"
|
|
th:errors="*{scriptDesc}" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-primary">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Script Code</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group row">
|
|
<label class="col-sm-1 col-form-label">Script Editor</label>
|
|
<div class="col-sm-11">
|
|
<div id="scriptCode" class="shadow-sm" style="height:400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" th:field="*{id}">
|
|
<button type="submit" class="btn btn-primary mr-2">Submit</button>
|
|
<button type="button" class="btn btn-secondary"
|
|
onclick="history.go(-1);">Cancel</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<th:block layout:fragment="script">
|
|
<link rel="stylesheet" data-name="vs/editor/editor.main"
|
|
th:href="@{/plugins/vs/editor/editor.main.css}">
|
|
<link rel="stylesheet"
|
|
th:href="@{/plugins/vs/plugin/constrained-editor-plugin/constrainedEditorPlugin.css}">
|
|
<script th:src="@{/plugins/vs/plugin/constrained-editor-plugin/constrainedEditorPlugin.js}"></script>
|
|
|
|
<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/findAllScriptInfos";
|
|
let editor;
|
|
let constrainedInstance;
|
|
|
|
const isNew = /*[[${scriptInfo.id == null}]]*/ false;
|
|
|
|
function findLineNumberByText(text){
|
|
const linesContent = editor.getModel().getLinesContent();
|
|
for (let i = 0; i < linesContent.length; i++) {
|
|
const lineText = linesContent[i].trim();
|
|
|
|
if(lineText.startsWith(text)){
|
|
return i + 1
|
|
}
|
|
}
|
|
return 14;
|
|
}
|
|
|
|
function setMainRestrictions(isNew){
|
|
const model = editor.getModel();
|
|
let editableLine = findLineNumberByText('public String postProcess') + 1;
|
|
const linesContent = editor.getModel().getLinesContent();
|
|
const editableLineTextLength = linesContent[editableLine - 1].length + 1;
|
|
const mainRestrictions = [{
|
|
// range : [ startLine, startColumn, endLine, endColumn ]
|
|
range: [3, 1, 3, 26], // Range of Util Variable name
|
|
label: 'import',
|
|
allowMultiline: true
|
|
}, {
|
|
range: [editableLine, 1, editableLine, editableLineTextLength], // Range of Function definition
|
|
allowMultiline: true,
|
|
label: 'funcDefinition'
|
|
}]
|
|
|
|
if(isNew){
|
|
constrainedInstance.addRestrictionsTo(model, mainRestrictions);
|
|
}else{
|
|
model.updateRestrictions(mainRestrictions);
|
|
}
|
|
}
|
|
|
|
function setMonaco(elementId, initValue){
|
|
var targetDivElement = document.getElementById(elementId);
|
|
editor = monaco.editor.create(targetDivElement, {
|
|
value: initValue,
|
|
language: 'java',
|
|
minimap: {
|
|
enabled: false
|
|
},
|
|
wordWrap: 'on',
|
|
wrappingStrategy: 'simple',
|
|
wordWrapBreakAfterCharacters: '',
|
|
wordWrapBreakBeforeCharacters: '',
|
|
wrappingIndent: 'none',
|
|
automaticLayout: true
|
|
});
|
|
|
|
constrainedInstance = constrainedEditor(monaco);
|
|
constrainedInstance.initializeIn(editor);
|
|
const model = editor.getModel();
|
|
|
|
setMainRestrictions(true);
|
|
// model.toggleHighlightOfEditableAreas();
|
|
|
|
$('#form').submit(function(eventObj) {
|
|
$('#scriptName').prop( "disabled", false );
|
|
$("<input />").attr("type", "hidden")
|
|
.attr("name", elementId)
|
|
.attr("value", editor.getValue())
|
|
.appendTo("#form");
|
|
return true;
|
|
});
|
|
}
|
|
setMonaco('scriptCode', /*[[${scriptInfo.scriptCode}]]*/);
|
|
if(isNew == false){
|
|
$('#scriptName').prop( "disabled", true );
|
|
}
|
|
$('#scriptName').on("change keyup paste", function(){
|
|
const scriptName = $('#scriptName').val();
|
|
const classLine = findLineNumberByText('public class')
|
|
const model = editor.getModel();
|
|
const linesContent = model.getLinesContent();
|
|
const currentTextLength = linesContent[classLine - 1].length + 1;
|
|
// model.toggleHighlightOfEditableAreas();
|
|
model.updateRestrictions([
|
|
{
|
|
range: [classLine, 1, classLine, currentTextLength],
|
|
label: "classLine"
|
|
}
|
|
]);
|
|
|
|
const newText = `public class ${scriptName} implements Script{`;
|
|
editor.executeEdits("my-source", [{ range: new monaco.Range(classLine, 1, classLine, currentTextLength), text: newText, forceMoveMarkers: true }]);
|
|
|
|
setMainRestrictions(false);
|
|
// model.toggleHighlightOfEditableAreas();
|
|
|
|
console.log(model.getCurrentEditableRanges());
|
|
|
|
|
|
// constrainedInstance.addRestrictionsTo(model, [{
|
|
// // range : [ startLine, startColumn, endLine, endColumn ]
|
|
// range: [classLine, 1, classLine, currentTextLength], // Range of Util Variable name
|
|
// label: 'className',
|
|
// allowMultiline: false
|
|
// }]);
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
</th:block>
|
|
</html>
|