Skip to content

allow inserting and removing line for layout in design #3098

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
wants to merge 4 commits into
base: alpha
Choose a base branch
from
Open

allow inserting and removing line for layout in design #3098

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f571694
allow inserting and removing line for layout in design
BisonJeedom Jun 17, 2025
2f84d29
Update eqLogic.configure.php
BisonJeedom Jun 17, 2025
3656a64
fix when delete if one row only and add draggable (credit Phpvarious)
BisonJeedom Jun 19, 2025
267e9ae
fix to allow adding new column
BisonJeedom Jun 21, 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
128 changes: 114 additions & 14 deletions desktop/modal/eqLogic.configure.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@
</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">
Expand All @@ -429,10 +429,18 @@
}
$table[$line][$column][] = $cmd;
}


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

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 @@ -661,6 +669,33 @@
setTableLayoutSortable: function() {
let containers = document.querySelectorAll('#md_eqLogicConfigure #tableCmdLayoutConfiguration tbody td .cmdLayoutContainer')
containers.forEach(_container => {
new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
delay: 50,
delayOnTouchOnly: true,
draggable: 'tr',
filter: 'input, a',
preventOnFilter: false,
direction: 'vertical',
chosenClass: 'dragSelected',
onUpdate: function(evt) {
let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
let row = 1
tableLayout.querySelectorAll('tr').forEach(_cLay => {
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++
})
}
}),
new Sortable(_container, {
delay: 100,
delayOnTouchOnly: true,
Expand All @@ -679,14 +714,13 @@
newTd += '</td>'
return newTd
},
applyTableLayout: function() {
applyTableLayout: function(_action = '', _row = '') {
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 tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
//build new table:
var newTableLayout = document.createElement('table')
Expand All @@ -696,20 +730,38 @@

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 row, col, newTd, text, style
tableLayout.querySelectorAll('.cmdLayout').forEach(_cLay => {
row = _cLay.closest('td').getAttribute('data-line')
row = parseInt(row)

if (_action == 'add' && row >= _row) {
row++
}
if (_action == 'remove' && row >= _row) {
row--
}

col = _cLay.closest('td').getAttribute('data-column')
newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')

if (newTd) {
newTd.querySelector('.cmdLayoutContainer').appendChild(_cLay)
} else {
Expand All @@ -720,21 +772,30 @@
//get back tds texts and styles
tableLayout.querySelectorAll('td').forEach(_td => {
row = _td.getAttribute('data-line')
row = parseInt(row)
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

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

newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
if (newTd) {
if (newTd && 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 +807,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 @@ -969,7 +1031,44 @@
}
})

//eqLogic layout tab
//eqLogic layout tab
function handleDynamicLine(_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')
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

if (_action === 'remove' && tableRowCount === 1) {
return
}

if (_action === 'add' && nbRow <= tableRowCount) {
tableRowCount++
}
if (_action === 'remove' && nbRow >= tableRowCount) {
tableRowCount--
}

document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
jeeFrontEnd.md_eqLogicConfigure.applyTableLayout(_action, row)
}

document.getElementById('divCmdLayoutConfiguration')?.addEventListener('click', function(event) {
if (event.target.closest('.bt_addRow')) {
handleDynamicLine('add');
return;
}

if (event.target.closest('.bt_removeRow')) {
handleDynamicLine('remove');
return;
}
})

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


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