@@ -510,22 +535,22 @@
@@ -535,7 +560,6 @@
-
@@ -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 객체 로깅
@@ -905,7 +926,7 @@
}
}
-
+
// protocol 값이 있으면 select 값을 변경 (데이터 로드 시에만)
if (register.protocol && regProtocolSelect) {
@@ -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);
}
}
@@ -956,57 +987,148 @@
function collectData() {
- const res = {...data};
+ const res = {...data};
- res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
- ? 'on' : 'off';
+ res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
+ ? 'on' : 'off';
- /* 일반 input/select */
- for (const k in res) {
- const el = document.getElementById(k);
- if (el) res[k] = el.value.trim();
- }
+ /* 일반 input/select */
+ for (const k in res) {
+ const el = document.getElementById(k);
+ if (el) res[k] = el.value.trim();
+ }
- /* IMU select → 축·부호 분리 */
- ['x', 'y', 'z'].forEach(a => {
- const {axis, sign} = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
- res[`imu_remap_${a}`] = axis;
- res[`imu_remap_${a}_sign`] = sign;
- });
+ /* IMU select → 축·부호 분리 */
+ ['x', 'y', 'z'].forEach(a => {
+ const {axis, sign} = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
+ res[`imu_remap_${a}`] = axis;
+ res[`imu_remap_${a}_sign`] = sign;
+ });
- /* SSID 배열 */
- res.WIFI_SSID = gatherSsidRows();
- return res;
- }
+ /* SSID 배열 */
+ res.WIFI_SSID = gatherSsidRows();
+ return res;
+ }
- function collectConfigData() {
- const collectedRegister = {...lastLoadedRegisterData}; // DTO 필드명(camelCase)으로 값을 수집할 객체
+ function collectConfigData() {
+ const collectedRegister = {...lastLoadedRegisterData}; // DTO 필드명(camelCase)으로 값을 수집할 객체
- // configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
- for (const htmlId in configIdMap) {
- const dtoKey = configIdMap[htmlId]; // HTML ID에 해당하는 DTO 필드명 (camelCase)
- const el = document.getElementById(htmlId);
- if (el) {
- collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
- }
+ // configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
+ for (const htmlId in configIdMap) {
+ const dtoKey = configIdMap[htmlId]; // HTML ID에 해당하는 DTO 필드명 (camelCase)
+ const el = document.getElementById(htmlId);
+ if (el) {
+ collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
}
+ }
- // 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
- // AnalogPort 매핑: true -> "1", false -> "0"
- ['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
- const el = document.getElementById(id);
- if (el && el.type === 'checkbox') {
- collectedRegister[id] = el.checked ? "1" : "0";
- } else {
- if (collectedRegister[id] === undefined) {
- collectedRegister[id] = "0";
- }
+ // 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
+ // AnalogPort 매핑: true -> "1", false -> "0"
+ ['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
+ const el = document.getElementById(id);
+ if (el && el.type === 'checkbox') {
+ collectedRegister[id] = el.checked ? "1" : "0";
+ } else {
+ if (collectedRegister[id] === undefined) {
+ collectedRegister[id] = "0";
}
+ }
+ });
+ return collectedRegister;
+ }
+
+ 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 = '';
});
- return collectedRegister;
}
- document.addEventListener('DOMContentLoaded', () => {
+ 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', () => {