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() { |
export function createCanController() { |
||||
return createTableEditor({ |
const listElement = byId('can-field-list'); |
||||
listElement: byId('can-field-list'), |
const addButton = byId('can_add_row_btn'); |
||||
templateElement: byId('can-row-template'), |
|
||||
selectors: { |
function renderRows(rows = []) { |
||||
field: '.can-field-display', |
const sourceRows = rows.length ? rows : [{}]; |
||||
id: '.can-id-display', |
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
||||
odt: '.can-odt-display', |
} |
||||
dv: '.can-dv-display', |
|
||||
shift: '.can-shift-display', |
function serializeRows(requiredKey) { |
||||
expr: '.can-expr-display', |
return Array.from(listElement.querySelectorAll('tr')) |
||||
mask: '.can-mask-display', |
.map((row) => ({ |
||||
}, |
field: row.querySelector('.can-field-input')?.value?.trim() ?? '', |
||||
inputIds: { |
id: row.querySelector('.can-id-input')?.value?.trim() ?? '', |
||||
field: 'can_field_input', |
odt: row.querySelector('.can-odt-input')?.value?.trim() ?? '', |
||||
id: 'can_id_input', |
dv: row.querySelector('.can-dv-input')?.value?.trim() ?? '', |
||||
odt: 'can_odt_input', |
shift: row.querySelector('.can-shift-input')?.value?.trim() ?? '', |
||||
dv: 'can_dv_input', |
expr: row.querySelector('.can-expr-input')?.value?.trim() ?? '', |
||||
shift: 'can_shift_input', |
mask: row.querySelector('.can-mask-input')?.value?.trim() ?? '', |
||||
expr: 'can_expr_input', |
})) |
||||
mask: 'can_mask_input', |
.filter((row) => row[requiredKey]); |
||||
}, |
} |
||||
addButtonId: 'can_add_btn', |
|
||||
modifyButtonId: 'can_modify_btn', |
function addRow() { |
||||
deleteButtonId: 'can_delete_btn', |
listElement.insertAdjacentHTML('beforeend', buildRow()); |
||||
emptyInputSelector: '.can-input-area input, .can-input-area select', |
} |
||||
}); |
|
||||
|
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() { |
export function createModbusController() { |
||||
return createTableEditor({ |
const listElement = byId('modbus-field-list'); |
||||
listElement: byId('modbus-field-list'), |
const addButton = byId('modbus_add_row_btn'); |
||||
templateElement: byId('modbus-row-template'), |
|
||||
selectors: { |
function renderRows(rows = []) { |
||||
field: '.field-display', |
const sourceRows = rows.length ? rows : [{}]; |
||||
addr: '.addr-display', |
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
||||
idt: '.idt-display', |
} |
||||
odt: '.odt-display', |
|
||||
dv: '.dv-display', |
function serializeRows(requiredKey) { |
||||
expr: '.expr-display', |
return Array.from(listElement.querySelectorAll('tr')) |
||||
}, |
.map((row) => ({ |
||||
inputIds: { |
field: row.querySelector('.modbus-field-input')?.value?.trim() ?? '', |
||||
field: 'modbus_field_input', |
addr: row.querySelector('.modbus-addr-input')?.value?.trim() ?? '', |
||||
addr: 'modbus_addr_input', |
idt: row.querySelector('.modbus-idt-input')?.value?.trim() ?? '', |
||||
idt: 'modbus_idt_input', |
odt: row.querySelector('.modbus-odt-input')?.value?.trim() ?? '', |
||||
odt: 'modbus_odt_input', |
dv: row.querySelector('.modbus-dv-input')?.value?.trim() ?? '', |
||||
dv: 'modbus_dv_input', |
expr: row.querySelector('.modbus-expr-input')?.value?.trim() ?? '', |
||||
expr: 'modbus_expr_input', |
})) |
||||
}, |
.filter((row) => row[requiredKey]); |
||||
addButtonId: 'modbus_add_btn', |
} |
||||
modifyButtonId: 'modbus_modify_btn', |
|
||||
deleteButtonId: 'modbus_delete_btn', |
function addRow() { |
||||
emptyInputSelector: '.modbus-input-area input, .modbus-input-area select', |
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() { |
export function createOpcUaController() { |
||||
return createTableEditor({ |
const listElement = byId('opcua-field-list'); |
||||
listElement: byId('opcua-field-list'), |
const addButton = byId('opcua_add_row_btn'); |
||||
templateElement: byId('opcua-row-template'), |
|
||||
selectors: { |
function renderRows(rows = []) { |
||||
field: '.opcua-field-display', |
const sourceRows = rows.length ? rows : [{}]; |
||||
addr: '.opcua-addr-display', |
listElement.innerHTML = sourceRows.map((row) => buildRow(row)).join(''); |
||||
ns: '.opcua-ns-display', |
} |
||||
odt: '.opcua-odt-display', |
|
||||
dv: '.opcua-dv-display', |
function serializeRows(requiredKey) { |
||||
expr: '.opcua-expr-display', |
return Array.from(listElement.querySelectorAll('tr')) |
||||
}, |
.map((row) => ({ |
||||
inputIds: { |
field: row.querySelector('.opcua-field-input')?.value?.trim() ?? '', |
||||
field: 'opcua_field_input', |
addr: row.querySelector('.opcua-addr-input')?.value?.trim() ?? '', |
||||
addr: 'opcua_addr_input', |
ns: row.querySelector('.opcua-ns-input')?.value?.trim() ?? '', |
||||
ns: 'opcua_ns_input', |
odt: row.querySelector('.opcua-odt-input')?.value?.trim() ?? '', |
||||
odt: 'opcua_odt_input', |
dv: row.querySelector('.opcua-dv-input')?.value?.trim() ?? '', |
||||
dv: 'opcua_dv_input', |
expr: row.querySelector('.opcua-expr-input')?.value?.trim() ?? '', |
||||
expr: 'opcua_expr_input', |
})) |
||||
}, |
.filter((row) => row[requiredKey]); |
||||
addButtonId: 'opcua_add_btn', |
} |
||||
modifyButtonId: 'opcua_modify_btn', |
|
||||
deleteButtonId: 'opcua_delete_btn', |
function addRow() { |
||||
emptyInputSelector: '.opcua-input-area input, .opcua-input-area select', |
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