bless
/
dpworld_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

modbus config

v2
gudae01 1 year ago
parent
bea7383e21
commit
046050ede9
1 changed files with 238 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 224
      src/main/resources/static/index.html

224
src/main/resources/static/index.html
View File

@ -86,6 +86,8 @@
box-shadow: none;
padding: 24px;
border-radius: 4px;
display: flex;
flex-direction: column;
}
#page-modbus table {
width: 100%;
@ -105,29 +107,32 @@
}
#page-modbus .modbus-input-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 32px;
margin: 24px 0 16px 0;
grid-template-columns: 200px 200px 200px 200px;
gap: 20px 20px;
margin: 24px auto 16px auto;
background: #eaeaea;
padding: 16px 0;
padding: 16px;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
}
#page-modbus .input-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
display: contents;
}
#page-modbus .modbus-input-area label.nowrap {
white-space: nowrap;
}
#page-modbus .input-row label {
min-width: 80px;
#page-modbus .modbus-input-area label {
min-width: auto;
color: #444;
white-space: normal;
}
#page-modbus .input-row input {
#page-modbus .modbus-input-area input {
background: #e0e0e0;
border: none;
border-radius: 2px;
padding: 4px 8px;
min-width: 120px;
min-width: auto;
}
#page-modbus .modbus-actions {
display: flex;
@ -163,6 +168,13 @@
min-width: 140px;
cursor: pointer;
}
.selected-row{
background: #d0e6ff !important;
}
.selected-row > td {
background: #d0e6ff !important;
}
</style>
</head>
<body>
@ -487,21 +499,34 @@
</div>
</section>
<template id="modbus-row-template">
<tr>
<td><span class="field-display"></span></td>
<td><span class="addr-display"></span></td>
<td><span class="idt-display"></span></td>
<td><span class="odt-display"></span></td>
<td><span class="dv-display"></span></td>
<td><span class="shift-display"></span></td>
<td><span class="expr-display"></span></td>
<td><span class="mask-display"></span></td>
</tr>
</template>
<section id="page-modbus" class="page" style="display:none;">
<div class="card">
<h3>Register configuration</h3>
<h3>Register_Configuration Modbus화면</h3>
<div class="modbus-table-container">
<table>
<thead>
<tr>
<th>field</th>
<th>addr</th>
<th>idt</th>
<th>odt</th>
<th>dv</th>
<th>shift</th>
<th>expr</th>
<th>mask</th>
<th>Field</th>
<th>Address</th>
<th>IDT</th>
<th>ODT</th>
<th>Default Value</th>
<th>Shift</th>
<th>Expression</th>
<th>Mask</th>
</tr>
</thead>
<tbody id="modbus-field-list">
@ -510,22 +535,22 @@
</div>
<div class="modbus-input-area">
<div class="input-row">
<label>field</label><input type="text" id="modbus_field_input">
<label>idt(Input Data Type)</label><input type="text" id="modbus_idt_input">
</div>
<div class="input-row">
<label>addr(address)</label><input type="text" id="modbus_addr_input">
<label>odt(Output Data Type)</label><input type="text" id="modbus_odt_input">
</div>
<div class="input-row">
<label>shift</label><input type="text" id="modbus_shift_input">
<label>dv(Default Value)</label><input type="text" id="modbus_dv_input">
</div>
<div class="input-row">
<label>expr</label><input type="text" id="modbus_expr_input">
<label>mask</label><input type="text" id="modbus_mask_input">
</div>
<label>Field</label>
<input type="text" id="modbus_field_input" placeholder="Enter field name">
<label class="nowrap">idt (Input Data Type)</label>
<input type="text" id="modbus_idt_input" placeholder="Enter IDT">
<label>addr</label>
<input type="text" id="modbus_addr_input" placeholder="Enter address">
<label class="nowrap">odt (Output Data Type)</label>
<input type="text" id="modbus_odt_input" placeholder="Enter ODT">
<label>shift</label>
<input type="text" id="modbus_shift_input" placeholder="Enter shift value">
<label class="nowrap">dv</label>
<input type="text" id="modbus_dv_input" placeholder="Enter default value">
<label>expr</label>
<input type="text" id="modbus_expr_input" placeholder="Enter expression">
<label class="nowrap">mask</label>
<input type="text" id="modbus_mask_input" placeholder="Enter mask">
</div>
<div class="modbus-actions">
@ -535,7 +560,6 @@
</div>
</div>
<!-- 하단 버튼 영역 추가 -->
<div id="modbus-bottom-actions">
<button id="loadModbusBtn">Load Protocol File</button>
<button id="saveModbusBtn">Save Protocol File</button>
@ -869,9 +893,6 @@
console.error("Register data is null or undefined.");
return;
}
// 백엔드에서 받은 DTO 객체를 lastLoadedRegisterData에 저장합니다.
// 이 객체는 이미 camelCase 필드명을 가집니다.
lastLoadedRegisterData = {...register};
console.log("Extracted Body Data:", lastLoadedRegisterData); // DTO 객체 로깅
@ -915,18 +936,28 @@
// 프로토콜 값에 따라 사이드바 버튼 토글
toggleProtocolMenus();
// 예시: MODBUS 필드를 UI에 표시하는 가상의 로직 (HTML 컨테이너 필요)
const modbusContainer = document.getElementById('modbus_fields_container'); // HTML에 이 ID의 div가 있다고 가정
if (modbusContainer) {
modbusContainer.innerHTML = ''; // 기존 내용 지우기
if (lastLoadedRegisterData.MODBUS && lastLoadedRegisterData.MODBUS.length > 0) {
lastLoadedRegisterData.MODBUS.forEach(field => {
const fieldDiv = document.createElement('div');
fieldDiv.textContent = `Field: ${field.field}, Addr: ${field.addr}, IDT: ${field.idt}`; // 예시
modbusContainer.appendChild(fieldDiv);
// MODBUS UI 테이블 렌더링
const modbusFieldList = document.getElementById('modbus-field-list');
const modbusRowTemplate = document.getElementById('modbus-row-template');
if (modbusFieldList && modbusRowTemplate) {
modbusFieldList.innerHTML = '';
if (Array.isArray(register.MODBUS) && register.MODBUS.length > 0) {
register.MODBUS.forEach(field => {
const newRow = modbusRowTemplate.content.cloneNode(true);
newRow.querySelector('.field-display').textContent = field.field ?? '';
newRow.querySelector('.addr-display').textContent = field.addr ?? '';
newRow.querySelector('.idt-display').textContent = field.idt ?? '';
newRow.querySelector('.odt-display').textContent = field.odt ?? '';
newRow.querySelector('.dv-display').textContent = field.dv ?? '';
newRow.querySelector('.shift-display').textContent = field.shift ?? '';
newRow.querySelector('.expr-display').textContent = field.expr ?? '';
newRow.querySelector('.mask-display').textContent = field.mask ?? '';
modbusFieldList.appendChild(newRow);
});
} else {
modbusContainer.textContent = 'No MODBUS fields configured.';
// MODBUS 데이터가 없으면 빈 행 하나 추가
const newRow = modbusRowTemplate.content.cloneNode(true);
modbusFieldList.appendChild(newRow);
}
}
@ -1007,6 +1038,97 @@
}
document.addEventListener('DOMContentLoaded', () => {
const list = document.getElementById('modbus-field-list');
// 처음에 행이 없으면 빈 행을 하나 추가
if(list.children.length === 0) {
const modbusRowTemplate = document.getElementById('modbus-row-template');
if(modbusRowTemplate) {
const newRow = modbusRowTemplate.content.cloneNode(true);
list.appendChild(newRow);
}
}
let selectedRow = null;
document.getElementById('modbus-field-list').addEventListener('click', function(e){
let tr = e.target.closest('tr');
if (!tr) return;
Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
tr.classList.add('selected-row');
selectedRow = tr;
document.getElementById('modbus_field_input').value = tr.querySelector('.field-display').textContent;
document.getElementById('modbus_addr_input').value = tr.querySelector('.addr-display').textContent;
document.getElementById('modbus_idt_input').value = tr.querySelector('.idt-display').textContent;
document.getElementById('modbus_odt_input').value = tr.querySelector('.odt-display').textContent;
document.getElementById('modbus_dv_input').value = tr.querySelector('.dv-display').textContent;
document.getElementById('modbus_shift_input').value = tr.querySelector('.shift-display').textContent;
document.getElementById('modbus_expr_input').value = tr.querySelector('.expr-display').textContent;
document.getElementById('modbus_mask_input').value = tr.querySelector('.mask-display').textContent;
});
const modbusAddBtn = document.getElementById('modbus_add_btn');
const modbusFieldList = document.getElementById('modbus-field-list');
const modbusRowTemplate = document.getElementById('modbus-row-template');
if(modbusAddBtn && modbusFieldList && modbusRowTemplate){
modbusAddBtn.addEventListener('click',()=>{
const field = document.getElementById('modbus_field_input').value;
const addr = document.getElementById('modbus_addr_input').value;
const idt = document.getElementById('modbus_idt_input').value;
const odt = document.getElementById('modbus_odt_input').value;
const defaultValue = document.getElementById('modbus_dv_input').value;
const shift = document.getElementById('modbus_shift_input').value;
const expr = document.getElementById('modbus_expr_input').value;
const mask = document.getElementById('modbus_mask_input').value;
const newRow = modbusRowTemplate.content.cloneNode(true);
newRow.querySelector('.field-display').textContent = field;
newRow.querySelector('.addr-display').textContent = addr;
newRow.querySelector('.idt-display').textContent = idt;
newRow.querySelector('.odt-display').textContent = odt;
newRow.querySelector('.dv-display').textContent = defaultValue;
newRow.querySelector('.shift-display').textContent = shift;
newRow.querySelector('.expr-display').textContent = expr;
newRow.querySelector('.mask-display').textContent = mask;
modbusFieldList.appendChild(newRow);
document.getElementById('modbus_field_input').value = '';
document.getElementById('modbus_addr_input').value = '';
document.getElementById('modbus_idt_input').value = '';
document.getElementById('modbus_odt_input').value = '';
document.getElementById('modbus_dv_input').value = '';
document.getElementById('modbus_shift_input').value = '';
document.getElementById('modbus_expr_input').value = '';
document.getElementById('modbus_mask_input').value = '';
});
}
document.getElementById('modbus_modify_btn').onclick = function() {
if (!selectedRow) return alert('수정할 행을 선택하세요!');
selectedRow.querySelector('.field-display').textContent = document.getElementById('modbus_field_input').value;
selectedRow.querySelector('.addr-display').textContent = document.getElementById('modbus_addr_input').value;
selectedRow.querySelector('.idt-display').textContent = document.getElementById('modbus_idt_input').value;
selectedRow.querySelector('.odt-display').textContent = document.getElementById('modbus_odt_input').value;
selectedRow.querySelector('.dv-display').textContent = document.getElementById('modbus_dv_input').value;
selectedRow.querySelector('.shift-display').textContent = document.getElementById('modbus_shift_input').value;
selectedRow.querySelector('.expr-display').textContent = document.getElementById('modbus_expr_input').value;
selectedRow.querySelector('.mask-display').textContent = document.getElementById('modbus_mask_input').value;
};
// 삭제 버튼
document.getElementById('modbus_delete_btn').onclick = function() {
if (!selectedRow) return alert('삭제할 행을 선택하세요!');
const list = document.getElementById('modbus-field-list');
selectedRow.remove();
selectedRow = null;
document.querySelectorAll('.modbus-input-area input').forEach(i => i.value = '');
};
regProtocolSelect = document.getElementById('reg_protocol');
if(regProtocolSelect) {
regProtocolSelect.addEventListener('change', () => {

Write Preview
Loading…
Cancel
Save