Socket Echo 기능 추가
This commit is contained in:
hsoh
@@ -64,6 +64,23 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-columns"></i>
|
||||
<p>
|
||||
Echo Socket <i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a th:href="@{/manage/findAllBytesMessageSpecs}" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Bytes Message 관리</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.sidebar-menu -->
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
<!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="${bytesMessageSpec.id == null}">Bytes Message 정보 등록</h1>
|
||||
<h1 th:unless="${bytesMessageSpec.id == null}">Bytes Message 정보 수정</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">Echo Socket</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</section>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content" style="padding-bottom: 1rem;">
|
||||
<div class="container-fluid">
|
||||
<form id="bytesMessageSpecForm" name="bytesMessageSpecForm" class="inputForm" action="#" th:action="@{/manage/saveBytesMessageSpec}"
|
||||
th:object="${bytesMessageSpec}" method="post">
|
||||
<div class="card card-default">
|
||||
<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">Message명<small>(*)</small></label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" th:field="*{specName}"
|
||||
class="form-control"> <span
|
||||
th:if="${#fields.hasErrors('specName')}"
|
||||
th:errors="*{specName}" 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">Encode</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" th:field="*{encode}" class="form-control" placeholder="EUC-KR">
|
||||
<span th:if="${#fields.hasErrors('encode')}"
|
||||
th:errors="*{encode}" class="text-danger"></span>
|
||||
</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">LL길이<small>(*)</small></label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" th:field="*{llFieldLength}" class="form-control"> <span
|
||||
th:if="${#fields.hasErrors('llFieldLength')}" th:errors="*{llFieldLength}"
|
||||
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">LL길이포함</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-radio">
|
||||
<label class="form-check-label"> <input type="radio"
|
||||
th:field="*{llFieldLengthInclude}" class="form-check-input" value="Y">
|
||||
Y <i class="input-helper"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="form-radio">
|
||||
<label class="form-check-label"> <input type="radio"
|
||||
th:field="*{llFieldLengthInclude}" class="form-check-input" value="N">
|
||||
N <i class="input-helper"></i></label>
|
||||
</div>
|
||||
</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">Port<small>(*)</small></label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" th:field="*{port}" class="form-control" placeholder="38181"> <span
|
||||
th:if="${#fields.hasErrors('port')}" th:errors="*{port}"
|
||||
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">사용여부</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-radio">
|
||||
<label class="form-check-label"> <input type="radio"
|
||||
th:field="*{useYn}" class="form-check-input" value="Y">
|
||||
Y <i class="input-helper"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="form-radio">
|
||||
<label class="form-check-label"> <input type="radio"
|
||||
th:field="*{useYn}" class="form-check-input" value="N">
|
||||
N <i class="input-helper"></i></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Response Message Info</h3>
|
||||
<br>
|
||||
<small> <font color="blue">- 응답 메시지를 입력할 경우 아래 Acho Message Info 정보는 무시 됩니다.</font></small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="url">응답 메시지</label>
|
||||
<textarea class="form-control" th:field="*{responseBody}" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Acho Message Info</h3>
|
||||
|
||||
<button type="button" id="addReplaceRule" class="btn btn-sm btn-success float-right">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table id="replaceRuleTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Replace 시작 Index</th>
|
||||
<th>Replace 스트링</th>
|
||||
<th>삭제</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamicTableContents">
|
||||
<tr th:fragment="echoReplaceString"
|
||||
th:each="echoReplaceString,rowStat : ${bytesMessageSpec.getEchoReplaceStringList()}">
|
||||
<td th:text="${rowStat.count}">1</td>
|
||||
<td>
|
||||
<input type="hidden" th:field="${bytesMessageSpec.echoReplaceStringList[__${rowStat.index}__].id}">
|
||||
<input type="text" th:field="${bytesMessageSpec.echoReplaceStringList[__${rowStat.index}__].position}" class="form-control"> <span
|
||||
th:if="${#fields.hasErrors('${bytesMessageSpec.echoReplaceStringList[__${rowStat.index}__].position}')}"
|
||||
th:errors="${bytesMessageSpec.echoReplaceStringList[__${rowStat.index}__].position}"
|
||||
class="text-danger"></span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" th:field="${bytesMessageSpec.echoReplaceStringList[__${rowStat.index}__].replaceString}" class="form-control"> <span
|
||||
th:if="${#fields.hasErrors('echoReplaceStringList[__${rowStat.index}__].replaceString')}"
|
||||
th:errors="*{echoReplaceStringList[__${rowStat.index}__].replaceString}"
|
||||
class="text-danger"></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button type="button" id="removeDynamicRow" class="btn btn-sm btn-danger">
|
||||
<i class="far fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" th:field="*{id}">
|
||||
<button type="button" id="submitButton" 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">
|
||||
<script th:inline="javascript">
|
||||
var urlForSidebar = "/manage/findAllBytesMessageSpecs";
|
||||
|
||||
$("#addReplaceRule").click(function() {
|
||||
var idx = $('#dynamicTableContents tr:last td:first').text();
|
||||
try {
|
||||
if (idx) {
|
||||
idx++;
|
||||
} else {
|
||||
idx = 1;
|
||||
}
|
||||
} catch (error) {}
|
||||
|
||||
var trStr = '<tr><td>' + idx + '</td>'
|
||||
+ '<td><input type="text" class="form-control"></td>'
|
||||
+ '<td><input type="text" class="form-control"></td>'
|
||||
+ '<td><div class="btn-group"><button type="button" id="removeDynamicRow" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></button></div></td></tr>';
|
||||
$("#dynamicTableContents").append(trStr);
|
||||
});
|
||||
|
||||
$("#replaceRuleTable").on("click", "#removeDynamicRow", function() {
|
||||
$(this).closest("tr").remove();
|
||||
});
|
||||
|
||||
$("#submitButton").click(function() {
|
||||
$('#dynamicTableContents > tr').each(function(index, tr) {
|
||||
var idValue = $(tr).find("td:eq(1) input[type=hidden]").val();
|
||||
if (idValue) {
|
||||
$(tr).find("td:eq(1) input[type=hidden]").attr('name', 'echoReplaceStringList[' + index + '].id');
|
||||
}
|
||||
$(tr).find("td:eq(1) input[type=text]").attr('name', 'echoReplaceStringList[' + index + '].position');
|
||||
|
||||
$(tr).find("td:eq(2) input[type=text]").attr('name', 'echoReplaceStringList[' + index + '].replaceString');
|
||||
});
|
||||
|
||||
$(this).css({'cursor':'wait'});
|
||||
$(this).attr('disabled', true);
|
||||
document.body.style.cursor = 'wait';
|
||||
document.bytesMessageSpecForm.submit();
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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">
|
||||
|
||||
<th:block layout:fragment="css">
|
||||
<link rel="stylesheet"
|
||||
th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
|
||||
<link rel="stylesheet"
|
||||
th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
|
||||
<link rel="stylesheet"
|
||||
th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}">
|
||||
</th:block>
|
||||
|
||||
<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>Bytes Message 관리</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">Echo Socket</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</section>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">목록중 하나의 메세지만 사용할 수 있습니다.</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table id="listBytesMessageSpecTable"
|
||||
class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>메시지명</th>
|
||||
<th>LL길이</th>
|
||||
<th>LL길이포함</th>
|
||||
<th>Port</th>
|
||||
<th>사용여부</th>
|
||||
<th>수정</th>
|
||||
<th>삭제</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<th:block layout:fragment="script">
|
||||
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-buttons/js/dataTables.buttons.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-buttons/js/buttons.bootstrap4.min.js}"></script>
|
||||
<script th:src="@{/plugins/jszip/jszip.min.js}"></script>
|
||||
<script th:src="@{/plugins/pdfmake/pdfmake.min.js}"></script>
|
||||
<script th:src="@{/plugins/pdfmake/vfs_fonts.js}"></script>
|
||||
<script th:src="@{/plugins/datatables-buttons/js/buttons.html5.min.js}"></script>
|
||||
<script th:src="@{/plugins/datatables-buttons/js/buttons.print.min.js}"></script>
|
||||
<script
|
||||
th:src="@{/plugins/datatables-buttons/js/buttons.colVis.min.js}"></script>
|
||||
|
||||
<script th:inline="javascript">
|
||||
$.fn.dataTable.ext.buttons.new = {
|
||||
text: 'New',
|
||||
action: function ( e, dt, node, config ) {
|
||||
location.href = "/manage/getBytesMessageSpecForm";
|
||||
}
|
||||
};
|
||||
|
||||
var listBytesMessageSpecTable = $("#listBytesMessageSpecTable").DataTable({
|
||||
"responsive": true, "lengthChange": false, "autoWidth": false,
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"searchDelay": 1200,
|
||||
"ajax": {
|
||||
"url": "/manage/rest/bytesMessageSpecs",
|
||||
"type": "POST",
|
||||
"dataType": "json",
|
||||
"contentType": "application/json",
|
||||
"data": function (d) {
|
||||
return JSON.stringify(d);
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{"data": "specName"},
|
||||
{"data": "llFieldLength", "searchable": false, "orderable": false},
|
||||
{"data": "llFieldLengthInclude", "searchable": false, "orderable": false},
|
||||
{"data": "port", "searchable": false, "orderable": false},
|
||||
{"data": "useYn", "searchable": false},
|
||||
{"data": "id", "searchable": false, "orderable": false},
|
||||
{"data": "id", "searchable": false, "orderable": false}
|
||||
],
|
||||
"columnDefs": [
|
||||
{
|
||||
"render": function (data, type, row) {
|
||||
return '<a href="/manage/getBytesMessageSpecForm/' + data + '" class="btn btn-primary"><i class="fas fa-edit"></i></a>';
|
||||
},
|
||||
"targets": -2
|
||||
},
|
||||
{
|
||||
"render": function (data, type, row) {
|
||||
var msg = "'정말로 데이터를 삭제 하시겠습니까?'";
|
||||
return '<a href="/manage/deleteBytesMessageSpec/' + data + '" onclick="return confirm(' + msg +');" class="btn btn-primary"><i class="fas fa-trash"></i></a>';
|
||||
},
|
||||
"targets": -1
|
||||
}
|
||||
],
|
||||
"buttons": ["new", "excel", "colvis"],
|
||||
"initComplete": function() {
|
||||
listBytesMessageSpecTable.buttons().container().appendTo('#listBytesMessageSpecTable_wrapper .col-md-6:eq(0)');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
$(".dataTables_filter input").unbind().bind("input", function(e) { // Bind our desired behavior
|
||||
// If the length is 3 or more characters, or the user pressed ENTER, search
|
||||
if(this.value.length >= 3 || e.keyCode == 13) {
|
||||
// Call the API search function
|
||||
listBytesMessageSpecTable.search(this.value).draw();
|
||||
}
|
||||
// Ensure we clear the search if they backspace far enough
|
||||
if(this.value == "") {
|
||||
listBytesMessageSpecTable.search("").draw();
|
||||
}
|
||||
return;
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
</th:block>
|
||||
</html>
|
||||
Reference in New Issue
Block a user