Rinjae
172 lines
6.8 KiB
HTML
172 lines
6.8 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:decorate="~{layout/default_layout}">
|
|
<body>
|
|
|
|
<section layout:fragment="contentFragment">
|
|
<script th:src="@{/plugins/vs/loader.js}"></script>
|
|
<script>
|
|
require.config({paths: {'vs': '[[@{/plugins/vs}]]'}});
|
|
</script>
|
|
<div class="container-fluid mt-2">
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; left: 0;">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">Alert</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
</div>
|
|
</div>
|
|
<form name="nettyServerForm" id="nettyServerForm"
|
|
th:action="${nettyServer.id == null}?@{/mgmt/socket/register.do}:@{/mgmt/socket/update.do}"
|
|
th:object='${nettyServer}' method="post">
|
|
<div class="card col-md">
|
|
<div class="card-header">
|
|
<h3 th:if="${nettyServer.id == null}">Create Netty Server</h3>
|
|
<h3 th:if="${nettyServer.id != null}">Edit Netty Server</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
|
<input type="hidden" name="id" th:value="${nettyServer.id}">
|
|
|
|
<!-- Server Name -->
|
|
<div class="form-floating mt-2">
|
|
<input type="text" class="form-control"
|
|
th:classappend="${#fields.hasErrors('name')}? 'is-invalid'"
|
|
th:field="*{name}" required/>
|
|
<label for="name" class="form-label must">Server Name</label>
|
|
<th:block th:each="err : ${#fields.errors('name')}">
|
|
<div th:text="${err}" class="invalid-feedback"></div>
|
|
</th:block>
|
|
</div>
|
|
|
|
<!-- Port Number -->
|
|
<div class="form-floating mt-2">
|
|
<input type="number" class="form-control"
|
|
th:classappend="${#fields.hasErrors('port')}? 'is-invalid'"
|
|
th:field="*{port}" required
|
|
min="1024" max="65535"/>
|
|
<label for="port" class="form-label must">Port</label>
|
|
<th:block th:each="err : ${#fields.errors('port')}">
|
|
<div th:text="${err}" class="invalid-feedback"></div>
|
|
</th:block>
|
|
</div>
|
|
|
|
<!-- Active Status -->
|
|
<div class="form-check mt-3">
|
|
<input type="checkbox" class="form-check-input"
|
|
th:field="*{active}" id="active"/>
|
|
<label class="form-check-label" for="active">Active</label>
|
|
</div>
|
|
|
|
<!-- Message Format Settings -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">Message Format</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<input type="number" class="form-control"
|
|
th:field="*{prefixSize}" min="0" max="20"/>
|
|
<label for="prefixSize" class="form-label">Prefix Size</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-check mt-3">
|
|
<input type="checkbox" class="form-check-input"
|
|
th:field="*{includePrefixLength}" id="includePrefixLength"/>
|
|
<label class="form-check-label" for="includePrefixLength">Include Prefix in Length</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<input type="number" class="form-control"
|
|
th:field="*{serviceIdLength}" min="0" max="100"/>
|
|
<label for="serviceIdLength" class="form-label">Service ID Length</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" th:field="*{serviceIdPosition}">
|
|
<option value="NONE">None</option>
|
|
<option value="START">Start</option>
|
|
<option value="END">End</option>
|
|
</select>
|
|
<label for="serviceIdPosition" class="form-label">Service ID Position</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script Editor -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">Server Script</div>
|
|
<div class="card-body">
|
|
<div id="script_editor" style="width:100%;height:400px;border:1px solid grey;"></div>
|
|
<textarea class="form-control" style="display: none;"
|
|
name="script" th:field="*{script}"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="button" class="btn btn-primary btn_list">
|
|
<i class="fa-solid fa-list"></i> List
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn_register">
|
|
<i class="fa-sharp fa-solid fa-floppy-disk"></i> Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
|
|
<th:block layout:fragment="contentScript">
|
|
<script>
|
|
$(function () {
|
|
let scriptEditor;
|
|
|
|
require(['vs/editor/editor.main'], function () {
|
|
const defaultScript = `function processMessage(message, serviceId) {
|
|
// Process the message and serviceId
|
|
console.log("Received message:", message);
|
|
console.log("Service ID:", serviceId);
|
|
|
|
// Return response
|
|
return "response_message";
|
|
}`;
|
|
scriptEditor = monaco.editor.create(document.getElementById('script_editor'), {
|
|
value: $('textarea[name="script"]').val() || ($('input[name="id"]').val() ? '' : defaultScript),
|
|
theme: 'vs-light',
|
|
language: 'javascript',
|
|
automaticLayout: true
|
|
});
|
|
|
|
scriptEditor.onDidChangeModelContent(function (e) {
|
|
$('textarea[name="script"]').val(scriptEditor.getValue());
|
|
});
|
|
});
|
|
|
|
let fnRegister = document.querySelector(".btn_register");
|
|
fnRegister.addEventListener("click", function (event) {
|
|
let form = document.getElementById("nettyServerForm");
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
} else {
|
|
form.submit();
|
|
}
|
|
form.classList.add('was-validated');
|
|
});
|
|
|
|
let fnList = document.querySelector(".btn_list");
|
|
fnList.addEventListener("click", function () {
|
|
location.href = "[[@{/mgmt/socket/list_view.do}]]";
|
|
});
|
|
});
|
|
</script>
|
|
</th:block>
|
|
</html>
|