19 changed files with 739 additions and 310 deletions
@ -0,0 +1,17 @@ |
|||
package org.mobidgim.mobidigimproject.model.register.enums; |
|||
|
|||
import com.fasterxml.jackson.annotation.JsonValue; |
|||
import lombok.AllArgsConstructor; |
|||
|
|||
@AllArgsConstructor |
|||
public enum OdoDirSource { |
|||
CAN("can"), |
|||
HW("hw"); |
|||
|
|||
private final String odoDirSource; |
|||
|
|||
@JsonValue |
|||
public String getOdoSpeedSource() { |
|||
return odoDirSource; |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
package org.mobidgim.mobidigimproject.model.register.enums; |
|||
|
|||
import com.fasterxml.jackson.annotation.JsonCreator; |
|||
import com.fasterxml.jackson.annotation.JsonValue; |
|||
import lombok.AllArgsConstructor; |
|||
|
|||
@AllArgsConstructor |
|||
public enum OdoSpeedSource { |
|||
CAN("can"), |
|||
HW("hw"); |
|||
|
|||
private final String odoSpeedSource; |
|||
|
|||
@JsonValue |
|||
public String getOdoSpeedSource() { |
|||
return odoSpeedSource; |
|||
} |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
package org.mobidgim.mobidigimproject.model.register.sebDTO; |
|||
|
|||
import lombok.Getter; |
|||
import lombok.Setter; |
|||
import org.mobidgim.mobidigimproject.model.register.enums.OdoSpeedSource; |
|||
|
|||
@Getter |
|||
@Setter |
|||
public class OdoSpeedField { |
|||
|
|||
private OdoSpeedSource odoSpeedSource; |
|||
|
|||
private String id; |
|||
|
|||
private int shift; |
|||
|
|||
private String mask; |
|||
|
|||
private String expr; |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
package org.mobidgim.mobidigimproject.model.register.sebDTO; |
|||
|
|||
import lombok.Getter; |
|||
import lombok.Setter; |
|||
import org.mobidgim.mobidigimproject.model.register.enums.OdoDirSource; |
|||
import org.mobidgim.mobidigimproject.model.register.enums.OdoSpeedSource; |
|||
|
|||
@Getter |
|||
@Setter |
|||
public class OdsDirField { |
|||
|
|||
private OdoDirSource odoSpeedSource; |
|||
|
|||
private String id; |
|||
|
|||
private int shift; |
|||
|
|||
private String mask; |
|||
|
|||
private String expr; |
|||
} |
|||
@ -1,30 +1,73 @@ |
|||
import { byId, createTableEditor } from '../utils/dom.js'; |
|||
import { byId } from '../utils/dom.js'; |
|||
|
|||
function buildRow(data = {}) { |
|||
return ` |
|||
<tr class="can-row"> |
|||
<td><input class="can-field-input" value="${data.field ?? ''}"></td> |
|||
<td><input class="can-id-input" value="${data.id ?? ''}"></td> |
|||
<td> |
|||
<select class="can-odt-input"> |
|||
<option value="integer" ${data.odt === 'integer' ? 'selected' : ''}>integer</option> |
|||
<option value="float64" ${data.odt === 'float64' ? 'selected' : ''}>float64</option> |
|||
<option value="boolean" ${data.odt === 'boolean' ? 'selected' : ''}>boolean</option> |
|||
<option value="string" ${data.odt === 'string' ? 'selected' : ''}>string</option> |
|||
</select> |
|||
</td> |
|||
<td><input class="can-dv-input" value="${data.dv ?? ''}"></td> |
|||
<td><input class="can-shift-input" value="${data.shift ?? ''}"></td> |
|||
<td><input class="can-expr-input" value="${data.expr ?? ''}"></td> |
|||
<td><input class="can-mask-input" value="${data.mask ?? ''}"></td> |
|||
<td><button type="button" class="inline-delete-btn">Delete</button></td> |
|||
</tr> |
|||
`;
|
|||
} |
|||
|
|||
export function createCanController() { |
|||
return createTableEditor({ |
|||
listElement: byId('can-field-list'), |
|||
templateElement: byId('can-row-template'), |
|||
selectors: { |
|||
field: '.can-field-display', |
|||
id: '.can-id-display', |
|||
odt: '.can-odt-display', |
|||
dv: '.can-dv-display', |
|||
shift: '.can-shift-display', |
|||
expr: '.can-expr-display', |
|||
mask: '.can-mask-display', |
|||
}, |
|||
inputIds: { |
|||
field: 'can_field_input', |
|||
id: 'can_id_input', |
|||
odt: 'can_odt_input', |
|||
dv: 'can_dv_input', |
|||
shift: 'can_shift_input', |
|||
expr: 'can_expr_input', |
|||
mask: 'can_mask_input', |
|||
}, |
|||
addButtonId: 'can_add_btn', |
|||
modifyButtonId: 'can_modify_btn', |
|||
deleteButtonId: 'can_delete_btn', |
|||
emptyInputSelector: '.can-input-area input, .can-input-area select', |
|||
}); |
|||
const listElement = byId('can-field-list'); |
|||
const addButton = byId('can_add_row_btn'); |
|||
|
|||
function renderRows(rows = []) { |
|||
const sourceRows = rows.length ? rows : [{}]; |
|||
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
|||
} |
|||
|
|||
function serializeRows(requiredKey) { |
|||
return Array.from(listElement.querySelectorAll('tr')) |
|||
.map((row) => ({ |
|||
field: row.querySelector('.can-field-input')?.value?.trim() ?? '', |
|||
id: row.querySelector('.can-id-input')?.value?.trim() ?? '', |
|||
odt: row.querySelector('.can-odt-input')?.value?.trim() ?? '', |
|||
dv: row.querySelector('.can-dv-input')?.value?.trim() ?? '', |
|||
shift: row.querySelector('.can-shift-input')?.value?.trim() ?? '', |
|||
expr: row.querySelector('.can-expr-input')?.value?.trim() ?? '', |
|||
mask: row.querySelector('.can-mask-input')?.value?.trim() ?? '', |
|||
})) |
|||
.filter((row) => row[requiredKey]); |
|||
} |
|||
|
|||
function addRow() { |
|||
listElement.insertAdjacentHTML('beforeend', buildRow()); |
|||
} |
|||
|
|||
function initialize() { |
|||
renderRows(); |
|||
|
|||
addButton?.addEventListener('click', addRow); |
|||
listElement.addEventListener('click', (event) => { |
|||
if (!event.target.classList.contains('inline-delete-btn')) { |
|||
return; |
|||
} |
|||
|
|||
event.target.closest('tr')?.remove(); |
|||
if (!listElement.children.length) { |
|||
renderRows(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
initialize, |
|||
renderRows, |
|||
serializeRows, |
|||
}; |
|||
} |
|||
|
|||
@ -1,28 +1,80 @@ |
|||
import { byId, createTableEditor } from '../utils/dom.js'; |
|||
import { byId } from '../utils/dom.js'; |
|||
|
|||
function buildRow(data = {}) { |
|||
return ` |
|||
<tr class="modbus-row"> |
|||
<td><input class="modbus-field-input" value="${data.field ?? ''}"></td> |
|||
<td><input class="modbus-addr-input" value="${data.addr ?? ''}"></td> |
|||
<td> |
|||
<select class="modbus-idt-input"> |
|||
<option value="integer" ${data.idt === 'integer' ? 'selected' : ''}>integer</option> |
|||
<option value="float" ${data.idt === 'float' ? 'selected' : ''}>float</option> |
|||
<option value="boolean" ${data.idt === 'boolean' ? 'selected' : ''}>boolean</option> |
|||
<option value="unsignedInteger" ${data.idt === 'unsignedInteger' ? 'selected' : ''}>unsignedInteger</option> |
|||
<option value="short" ${data.idt === 'short' ? 'selected' : ''}>short</option> |
|||
<option value="unsignedShort" ${data.idt === 'unsignedShort' ? 'selected' : ''}>unsignedShort</option> |
|||
</select> |
|||
</td> |
|||
<td> |
|||
<select class="modbus-odt-input"> |
|||
<option value="integer" ${data.odt === 'integer' ? 'selected' : ''}>integer</option> |
|||
<option value="float64" ${data.odt === 'float64' ? 'selected' : ''}>float64</option> |
|||
<option value="boolean" ${data.odt === 'boolean' ? 'selected' : ''}>boolean</option> |
|||
<option value="string" ${data.odt === 'string' ? 'selected' : ''}>string</option> |
|||
</select> |
|||
</td> |
|||
<td><input class="modbus-dv-input" value="${data.dv ?? ''}"></td> |
|||
<td><input class="modbus-expr-input" value="${data.expr ?? ''}"></td> |
|||
<td><button type="button" class="inline-delete-btn">Delete</button></td> |
|||
</tr> |
|||
`;
|
|||
} |
|||
|
|||
export function createModbusController() { |
|||
return createTableEditor({ |
|||
listElement: byId('modbus-field-list'), |
|||
templateElement: byId('modbus-row-template'), |
|||
selectors: { |
|||
field: '.field-display', |
|||
addr: '.addr-display', |
|||
idt: '.idt-display', |
|||
odt: '.odt-display', |
|||
dv: '.dv-display', |
|||
expr: '.expr-display', |
|||
}, |
|||
inputIds: { |
|||
field: 'modbus_field_input', |
|||
addr: 'modbus_addr_input', |
|||
idt: 'modbus_idt_input', |
|||
odt: 'modbus_odt_input', |
|||
dv: 'modbus_dv_input', |
|||
expr: 'modbus_expr_input', |
|||
}, |
|||
addButtonId: 'modbus_add_btn', |
|||
modifyButtonId: 'modbus_modify_btn', |
|||
deleteButtonId: 'modbus_delete_btn', |
|||
emptyInputSelector: '.modbus-input-area input, .modbus-input-area select', |
|||
}); |
|||
const listElement = byId('modbus-field-list'); |
|||
const addButton = byId('modbus_add_row_btn'); |
|||
|
|||
function renderRows(rows = []) { |
|||
const sourceRows = rows.length ? rows : [{}]; |
|||
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
|||
} |
|||
|
|||
function serializeRows(requiredKey) { |
|||
return Array.from(listElement.querySelectorAll('tr')) |
|||
.map((row) => ({ |
|||
field: row.querySelector('.modbus-field-input')?.value?.trim() ?? '', |
|||
addr: row.querySelector('.modbus-addr-input')?.value?.trim() ?? '', |
|||
idt: row.querySelector('.modbus-idt-input')?.value?.trim() ?? '', |
|||
odt: row.querySelector('.modbus-odt-input')?.value?.trim() ?? '', |
|||
dv: row.querySelector('.modbus-dv-input')?.value?.trim() ?? '', |
|||
expr: row.querySelector('.modbus-expr-input')?.value?.trim() ?? '', |
|||
})) |
|||
.filter((row) => row[requiredKey]); |
|||
} |
|||
|
|||
function addRow() { |
|||
listElement.insertAdjacentHTML('beforeend', buildRow()); |
|||
} |
|||
|
|||
function initialize() { |
|||
renderRows(); |
|||
|
|||
addButton?.addEventListener('click', addRow); |
|||
listElement.addEventListener('click', (event) => { |
|||
if (!event.target.classList.contains('inline-delete-btn')) { |
|||
return; |
|||
} |
|||
|
|||
event.target.closest('tr')?.remove(); |
|||
if (!listElement.children.length) { |
|||
renderRows(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
initialize, |
|||
renderRows, |
|||
serializeRows, |
|||
}; |
|||
} |
|||
|
|||
@ -0,0 +1,66 @@ |
|||
import { byId } from '../utils/dom.js'; |
|||
|
|||
function buildRow(target, data = {}) { |
|||
const safeData = data && typeof data === 'object' ? data : {}; |
|||
|
|||
return ` |
|||
<tr class="odometer-row" data-target="${target}"> |
|||
<td>${target}</td> |
|||
<td> |
|||
<select class="odometer-source-input"> |
|||
<option value="can" ${safeData.odo_speed_source === 'can' ? 'selected' : ''}>can</option> |
|||
<option value="hw" ${safeData.odo_speed_source === 'hw' ? 'selected' : ''}>hw</option> |
|||
</select> |
|||
</td> |
|||
<td><input class="odometer-id-input" value="${safeData.id ?? ''}"></td> |
|||
<td><input class="odometer-shift-input" value="${safeData.shift ?? ''}"></td> |
|||
<td><input class="odometer-expr-input" value="${safeData.expr ?? ''}"></td> |
|||
<td><input class="odometer-mask-input" value="${safeData.mask ?? ''}"></td> |
|||
</tr> |
|||
`;
|
|||
} |
|||
|
|||
export function createOdometerController() { |
|||
const listElement = byId('odometer-field-list'); |
|||
|
|||
function renderRows(data = {}) { |
|||
const safeData = data && typeof data === 'object' ? data : {}; |
|||
|
|||
listElement.innerHTML = [ |
|||
buildRow('speed', safeData.odo_speed), |
|||
buildRow('direction', safeData.odo_direction), |
|||
].join(''); |
|||
} |
|||
|
|||
function readRow(target) { |
|||
const row = listElement.querySelector(`tr[data-target="${target}"]`); |
|||
if (!row) { |
|||
return null; |
|||
} |
|||
|
|||
return { |
|||
odo_speed_source: row.querySelector('.odometer-source-input')?.value?.trim() ?? '', |
|||
id: row.querySelector('.odometer-id-input')?.value?.trim() ?? '', |
|||
shift: row.querySelector('.odometer-shift-input')?.value?.trim() ?? '', |
|||
expr: row.querySelector('.odometer-expr-input')?.value?.trim() ?? '', |
|||
mask: row.querySelector('.odometer-mask-input')?.value?.trim() ?? '', |
|||
}; |
|||
} |
|||
|
|||
function collectData() { |
|||
return { |
|||
odo_speed: readRow('speed'), |
|||
odo_direction: readRow('direction'), |
|||
}; |
|||
} |
|||
|
|||
function initialize() { |
|||
renderRows(); |
|||
} |
|||
|
|||
return { |
|||
collectData, |
|||
initialize, |
|||
renderRows, |
|||
}; |
|||
} |
|||
@ -1,28 +1,71 @@ |
|||
import { byId, createTableEditor } from '../utils/dom.js'; |
|||
import { byId } from '../utils/dom.js'; |
|||
|
|||
function buildRow(data = {}) { |
|||
return ` |
|||
<tr class="opcua-row"> |
|||
<td><input class="opcua-field-input" value="${data.field ?? ''}"></td> |
|||
<td><input class="opcua-addr-input" value="${data.addr ?? ''}"></td> |
|||
<td><input class="opcua-ns-input" value="${data.ns ?? ''}"></td> |
|||
<td> |
|||
<select class="opcua-odt-input"> |
|||
<option value="integer" ${data.odt === 'integer' ? 'selected' : ''}>integer</option> |
|||
<option value="float64" ${data.odt === 'float64' ? 'selected' : ''}>float64</option> |
|||
<option value="boolean" ${data.odt === 'boolean' ? 'selected' : ''}>boolean</option> |
|||
<option value="string" ${data.odt === 'string' ? 'selected' : ''}>string</option> |
|||
</select> |
|||
</td> |
|||
<td><input class="opcua-dv-input" value="${data.dv ?? ''}"></td> |
|||
<td><input class="opcua-expr-input" value="${data.expr ?? ''}"></td> |
|||
<td><button type="button" class="inline-delete-btn">Delete</button></td> |
|||
</tr> |
|||
`;
|
|||
} |
|||
|
|||
export function createOpcUaController() { |
|||
return createTableEditor({ |
|||
listElement: byId('opcua-field-list'), |
|||
templateElement: byId('opcua-row-template'), |
|||
selectors: { |
|||
field: '.opcua-field-display', |
|||
addr: '.opcua-addr-display', |
|||
ns: '.opcua-ns-display', |
|||
odt: '.opcua-odt-display', |
|||
dv: '.opcua-dv-display', |
|||
expr: '.opcua-expr-display', |
|||
}, |
|||
inputIds: { |
|||
field: 'opcua_field_input', |
|||
addr: 'opcua_addr_input', |
|||
ns: 'opcua_ns_input', |
|||
odt: 'opcua_odt_input', |
|||
dv: 'opcua_dv_input', |
|||
expr: 'opcua_expr_input', |
|||
}, |
|||
addButtonId: 'opcua_add_btn', |
|||
modifyButtonId: 'opcua_modify_btn', |
|||
deleteButtonId: 'opcua_delete_btn', |
|||
emptyInputSelector: '.opcua-input-area input, .opcua-input-area select', |
|||
}); |
|||
const listElement = byId('opcua-field-list'); |
|||
const addButton = byId('opcua_add_row_btn'); |
|||
|
|||
function renderRows(rows = []) { |
|||
const sourceRows = rows.length ? rows : [{}]; |
|||
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
|||
} |
|||
|
|||
function serializeRows(requiredKey) { |
|||
return Array.from(listElement.querySelectorAll('tr')) |
|||
.map((row) => ({ |
|||
field: row.querySelector('.opcua-field-input')?.value?.trim() ?? '', |
|||
addr: row.querySelector('.opcua-addr-input')?.value?.trim() ?? '', |
|||
ns: row.querySelector('.opcua-ns-input')?.value?.trim() ?? '', |
|||
odt: row.querySelector('.opcua-odt-input')?.value?.trim() ?? '', |
|||
dv: row.querySelector('.opcua-dv-input')?.value?.trim() ?? '', |
|||
expr: row.querySelector('.opcua-expr-input')?.value?.trim() ?? '', |
|||
})) |
|||
.filter((row) => row[requiredKey]); |
|||
} |
|||
|
|||
function addRow() { |
|||
listElement.insertAdjacentHTML('beforeend', buildRow()); |
|||
} |
|||
|
|||
function initialize() { |
|||
renderRows(); |
|||
|
|||
addButton?.addEventListener('click', addRow); |
|||
listElement.addEventListener('click', (event) => { |
|||
if (!event.target.classList.contains('inline-delete-btn')) { |
|||
return; |
|||
} |
|||
|
|||
event.target.closest('tr')?.remove(); |
|||
if (!listElement.children.length) { |
|||
renderRows(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
initialize, |
|||
renderRows, |
|||
serializeRows, |
|||
}; |
|||
} |
|||
|
|||
Loading…
Reference in new issue