Skip to content

Enhance eqLogic table layout functionality in design and dashboard #3169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BisonJeedom wants to merge 2 commits into
base: alpha
Choose a base branch
from
+364 −46
Open

Enhance eqLogic table layout functionality in design and dashboard #3169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdbac73
Enhance eqLogic table layout functionality in design
BisonJeedom Dec 20, 2025
8b93b61
Enhance eqLogic table layout functionality in dashboard
BisonJeedom Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 186 additions & 22 deletions desktop/modal/eqLogic.configure.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,13 +411,14 @@
</div>
</form>

<div class="widget_layout table" style="display: none;">
<div id="divCmdLayoutConfiguration" class="widget_layout table" style="display: none;">
<legend><i class="fas fa-th-large"></i> {{Mise en forme détaillée}}</legend>
<div class="table-responsive">
<table class="table table-condensed" id="tableCmdLayoutConfiguration">
<tbody>
<?php
$table = array();

foreach (($eqLogic->getCmd(null, null, true)) as $cmd) {
$line = $eqLogic->getDisplay('layout::dashboard::table::cmd::' . $cmd->getId() . '::line', 1);
$column = $eqLogic->getDisplay('layout::dashboard::table::cmd::' . $cmd->getId() . '::column', 1);
Expand All @@ -429,10 +430,29 @@
}
$table[$line][$column][] = $cmd;
}

$getDisplayDasboardNbLine = $eqLogic->getDisplay('layout::dashboard::table::nbLine', 1);
$getDisplayDasboardNbColumn = $eqLogic->getDisplay('layout::dashboard::table::nbColumn', 1);

$tr = '<tr>';
$tr .= '<td data-line="0" data-column="0">&nbsp;</td>';
for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
$tr .= '<td data-line="0" data-column="' . $j . '" style="text-align: center;">';
$tr .= '<a class="bt_removeCol" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>';
$tr .= $j;
$tr .= '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>';
$tr .= '</td>';
}
$tr .= '</tr>';
echo $tr;

for ($i = 1; $i <= $getDisplayDasboardNbLine; $i++) {
$tr = '<tr>';
$tr .= '<td data-line="' . $i . '" data-column="0" style="text-align: center; width: 70px;">';
$tr .= '<a class="bt_removeRow" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>';
$tr .= '<span class="counterReorder">' . $i . '</span>';
$tr .= '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>';
$tr .= '</td>';
for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
$tr .= '<td data-line="' . $i . '" data-column="' . $j . '">';
$string_cmd = '<div class="cmdLayoutContainer text-center" style="min-height:30px;">';
Expand Down Expand Up @@ -658,7 +678,8 @@
document.querySelector('#div_pageContainer input.eqLogicAttr[data-l1key="isVisible"]').checked = document.querySelector('#eqLogic_information input.eqLogicAttr[data-l1key="isVisible"').checked
}
},
setTableLayoutSortable: function() {
setTableLayoutSortable: function() {
// sortable cmds
let containers = document.querySelectorAll('#md_eqLogicConfigure #tableCmdLayoutConfiguration tbody td .cmdLayoutContainer')
containers.forEach(_container => {
new Sortable(_container, {
Expand All @@ -670,6 +691,34 @@
preventOnFilter: false,
})
})
// sortable rows
new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
delay: 50,
delayOnTouchOnly: true,
draggable: 'tr:not(:first-child)', //exclude the first row (row for column manage)
filter: 'input, a',
preventOnFilter: false,
direction: 'horizontal',
chosenClass: 'dragSelected',
onUpdate: function(evt) {
let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
let row = 1
tableLayout.querySelectorAll('tr:not(:first-child)').forEach(_cLay => { //exclude the first row (row for column manage)
let col = 1
_cLay.querySelectorAll('td').forEach(_td => {
_td.setAttribute('data-line', row)
if (is_object(_td.querySelector('.counterReorder'))) {
_td.querySelector('span').innerHTML = row
} else {
_td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + row + '::' + col)
_td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + row + '::' + col)
col++
}
})
row++
})
}
})
},
getNewLayoutTd: function(row, col) {
var newTd = '<td data-line="' + row + '" data-column="' + col + '">'
Expand All @@ -679,62 +728,119 @@
newTd += '</td>'
return newTd
},
applyTableLayout: function() {
applyTableLayout: function(_action = '', _row = '', _col = '') {
var nbColumn = document.querySelector('#md_eqLogicConfigure input[data-l2key="layout::dashboard::table::nbColumn"]').value
var nbRow = document.querySelector('#md_eqLogicConfigure input[data-l2key="layout::dashboard::table::nbLine"]').value

var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
var tableRowCount = tableLayout.querySelectorAll('tr').length
var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td').length

var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
//build new table:
var newTableLayout = document.createElement('table')
newTableLayout.addClass('table table-condensed')
newTableLayout.setAttribute('id', 'tableCmdLayoutConfiguration')
newTableLayout.appendChild(document.createElement('tbody'))

var newTr = document.createElement('tr')
let newFirstCol = '<td data-line="0" data-column="0">&nbsp;</td>'
for (j = 1; j <= nbColumn; j++) {
newFirstCol += '<td data-line="0" data-column="' + j + '" style="text-align: center;">'
newFirstCol += '<a class="bt_removeCol" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>'
newFirstCol += j
newFirstCol += '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>'
newFirstCol += '</td>'
}
newTr.insertAdjacentHTML('beforeend', newFirstCol)
newTableLayout.tBodies[0].appendChild(newTr)

for (i = 1; i <= nbRow; i++) {
var newTr = document.createElement('tr')
let newFirstCol = '<td data-line="' + i + '" data-column="0" style="text-align: center; width: 75px;">'
newFirstCol += '<a class="bt_removeRow" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'
newFirstCol += '<span class="counterReorder">' + i + '</span>'
newFirstCol += '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>'
newFirstCol += '</td>'
newTr.insertAdjacentHTML('beforeend', newFirstCol)

for (j = 1; j <= nbColumn; j++) {
newTd = jeeFrontEnd.md_eqLogicConfigure.getNewLayoutTd(i, j)
newTr.insertAdjacentHTML('beforeend', newTd)
}
newTableLayout.tBodies[0].appendChild(newTr)
}
}

//distribute back cmds into new table
var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
//var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
var firstTdLayout = newTableLayout.querySelector('tr td > .cmdLayoutContainer')
var row, col, newTd, text, style
tableLayout.querySelectorAll('.cmdLayout').forEach(_cLay => {
row = _cLay.closest('td').getAttribute('data-line')
col = _cLay.closest('td').getAttribute('data-column')
row = parseInt(_cLay.closest('td').getAttribute('data-line'))
col = parseInt(_cLay.closest('td').getAttribute('data-column'))

// manage adding or removing row or column
if (_action == 'add') {
if (row >= _row && _row != 0) {
row++
}
if (col >= _col && _col != 0) {
col++
}
} else if (_action == 'remove') {
if (row >= _row && _row != 0) {
row--
}
if (col >= _col && _col != 0) {
col--
}
}

newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
if (newTd) {
newTd.querySelector('.cmdLayoutContainer').appendChild(_cLay)

if (is_object(newTd = newTableLayout.querySelector('td[data-line="' + Math.max(row, 1) + '"][data-column="' + Math.max(col, 1) + '"] .cmdLayoutContainer'))) {
newTd.appendChild(_cLay)
} else {
firstTdLayout.appendChild(_cLay)
}
})

//get back tds texts and styles
tableLayout.querySelectorAll('td').forEach(_td => {
row = _td.getAttribute('data-line')
col = _td.getAttribute('data-column')
text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
row = parseInt(_td.getAttribute('data-line'))
col = parseInt(_td.getAttribute('data-column'))

if (col != 0 && row != 0) {
text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
}

// manage adding or removing row or column
if (_action == 'add') {
if (row >= _row && _row != 0) {
row++
}
if (col >= _col && _col != 0) {
col++
}
} else if (_action == 'remove') {
if (row > _row && _row != 0) {
row--
}
if (col > _col && _col != 0) {
col--
}
}

newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
if (newTd) {
if (newTd && row !=0 && col != 0) {
newTableLayout.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value = text
newTableLayout.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value = style
}
})

//replace by new table:
tableLayout.replaceWith(newTableLayout)
document.querySelectorAll('#tableCmdLayoutConfiguration td').forEach(td => {
td.style.width = 100 / nbColumn + '%'
})
jeedomUtils.initTooltips(newTableLayout)
tableLayout.replaceWith(newTableLayout)
jeeFrontEnd.md_eqLogicConfigure.setTableLayoutSortable()
}
},
Expand All @@ -746,6 +852,7 @@
document.querySelectorAll('#table_widgetParameters tbody tr').forEach(_tr => {
eqLogic.display.parameters[_tr.querySelector('.key').jeeValue()] = _tr.querySelector('.value').jeeValue()
})


jeedom.eqLogic.save({
eqLogics: [eqLogic],
Expand Down Expand Up @@ -970,6 +1077,62 @@
})

//eqLogic layout tab

// manage number of lines or columns when inserting or removing
function handleDynamicLineColumn(_action) {
if (_action !== 'add' && _action !== 'remove') {
throw new Error(`Invalid action value : only "add" or "remove" allowed, "${_action}" given`);
}

row = event.target.closest('td').getAttribute('data-line')
col = event.target.closest('td').getAttribute('data-column')
var tableLayout = document.getElementById('tableCmdLayoutConfiguration')

if (col == 0) {
var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
if (_action === 'remove' && tableRowCount === 1) {
return
}
if (_action === 'add') {
tableRowCount++
}
if (_action === 'remove') {
tableRowCount--
}
document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
}

if (row == 0) {
var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
if (_action === 'remove' && tableColumnCount === 1) {
return
}
if (_action === 'add') {
tableColumnCount++
}
if (_action === 'remove') {
tableColumnCount--
}
document.querySelector('input[data-l2key="layout::dashboard::table::nbColumn"]').value = tableColumnCount
}

jeeFrontEnd.md_eqLogicConfigure.applyTableLayout(_action, row, col)
}

// listener to add/remove row or column
document.getElementById('divCmdLayoutConfiguration')?.addEventListener('click', function(event) {
if (event.target.closest('.bt_addRow') || event.target.closest('.bt_addCol')) {
handleDynamicLineColumn('add');
return;
}

if (event.target.closest('.bt_removeRow') || event.target.closest('.bt_removeCol')) {
handleDynamicLineColumn('remove');
return;
}
})


document.getElementById('eqLogic_layout')?.addEventListener('click', function(event) {
var _target = null
if (_target = event.target.closest('#bt_eqLogicLayoutApply')) {
Expand All @@ -978,6 +1141,7 @@
}
})


document.getElementById('eqLogic_layout')?.addEventListener('change', function(event) {
var _target = null
if (_target = event.target.closest('.sel_layout')) {
Expand Down
Loading