From f571694b40444916b9da77f175bc5bc1057811a7 Mon Sep 17 00:00:00 2001
From: BisonJeedom <110299206+BisonJeedom@users.noreply.github.com>
Date: Tue, 17 Jun 2025 09:32:13 +0200
Subject: [PATCH 1/4] allow inserting and removing line for layout in design

---
 desktop/modal/eqLogic.configure.php | 100 ++++++++++++++++++++++++----
 1 file changed, 87 insertions(+), 13 deletions(-)

diff --git a/desktop/modal/eqLogic.configure.php b/desktop/modal/eqLogic.configure.php
index 96df24d676..7a8bb13521 100644
--- a/desktop/modal/eqLogic.configure.php
+++ b/desktop/modal/eqLogic.configure.php
@@ -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">
@@ -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 .= $i;
+                    $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;">';
@@ -679,14 +687,22 @@
         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
-
+		
+        if (_action != '') {
+          	if (_action == 'remove') {
+            	var deleteRow = _row
+        	}
+            if (_action == 'add') {
+            	var insertRowBefore = _row
+        	}   
+        }
+          
         if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
           //build new table:
           var newTableLayout = document.createElement('table')
@@ -696,20 +712,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 += i
+            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 (insertRowBefore != '' && row >= insertRowBefore) {
+              row = row + 1
+            }
+            if (deleteRow != '' && row >= deleteRow) {
+              row = row - 1             
+            }
+            
             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 {
@@ -720,21 +754,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 (insertRowBefore != '' && row >= insertRowBefore) {
+              row = row + 1
+            }
+            if (deleteRow != '' && row > deleteRow) {
+              row = row - 1              
+            }
+
             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()
         }
       },
@@ -746,6 +789,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],
@@ -969,7 +1013,36 @@
       }
     })
 
-    //eqLogic layout tab
+    //eqLogic layout tab    
+    document.getElementById('divCmdLayoutConfiguration')?.addEventListener('click', function(event) {
+      	var _target = null
+        if (_target = event.target.closest('.bt_removeRow')) {
+          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 (nbRow >= tableRowCount) {
+            document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount - 1
+          } else {
+            document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
+          }
+          jeeFrontEnd.md_eqLogicConfigure.applyTableLayout('remove', row) // Supprime la ligne selectionnée
+          return
+        }
+      	if (_target = event.target.closest('.bt_addRow')) {
+          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 (nbRow <= tableRowCount) {
+      	  	document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount + 1
+      	  } else {
+        	document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
+      	  }
+          jeeFrontEnd.md_eqLogicConfigure.applyTableLayout('add', row) // Ajoute une ligne avant la ligne selectionnée
+        }
+    })   
+      
     document.getElementById('eqLogic_layout')?.addEventListener('click', function(event) {
       var _target = null
       if (_target = event.target.closest('#bt_eqLogicLayoutApply')) {
@@ -978,6 +1051,7 @@
       }
     })
 
+
     document.getElementById('eqLogic_layout')?.addEventListener('change', function(event) {
       var _target = null
       if (_target = event.target.closest('.sel_layout')) {

From 2f84d296543404f1b8229b1553ed9ae341edd2f6 Mon Sep 17 00:00:00 2001
From: BisonJeedom <110299206+BisonJeedom@users.noreply.github.com>
Date: Tue, 17 Jun 2025 20:12:49 +0200
Subject: [PATCH 2/4] Update eqLogic.configure.php

---
 desktop/modal/eqLogic.configure.php | 81 ++++++++++++++---------------
 1 file changed, 38 insertions(+), 43 deletions(-)

diff --git a/desktop/modal/eqLogic.configure.php b/desktop/modal/eqLogic.configure.php
index 7a8bb13521..51b6d33b00 100644
--- a/desktop/modal/eqLogic.configure.php
+++ b/desktop/modal/eqLogic.configure.php
@@ -694,15 +694,6 @@
         var tableRowCount = tableLayout.querySelectorAll('tr').length
         var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td').length
 		
-        if (_action != '') {
-          	if (_action == 'remove') {
-            	var deleteRow = _row
-        	}
-            if (_action == 'add') {
-            	var insertRowBefore = _row
-        	}   
-        }
-          
         if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
           //build new table:
           var newTableLayout = document.createElement('table')
@@ -734,11 +725,11 @@
             row = _cLay.closest('td').getAttribute('data-line')
             row = parseInt(row)       
             
-            if (insertRowBefore != '' && row >= insertRowBefore) {
-              row = row + 1
+            if (_action == 'add' && row >= _row) {
+              row++
             }
-            if (deleteRow != '' && row >= deleteRow) {
-              row = row - 1             
+            if (_action == 'remove' && row >= _row) {
+              row--
             }
             
             col = _cLay.closest('td').getAttribute('data-column')
@@ -761,11 +752,11 @@
               text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
               style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
             }
-            if (insertRowBefore != '' && row >= insertRowBefore) {
-              row = row + 1
+            if (_action == 'add' && row >= _row) {
+              row++
             }
-            if (deleteRow != '' && row > deleteRow) {
-              row = row - 1              
+            if (_action == 'remove' && row > _row) {
+              row--
             }
 
             newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
@@ -1014,35 +1005,39 @@
     })
 
     //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 === '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) {
-      	var _target = null
-        if (_target = event.target.closest('.bt_removeRow')) {
-          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 (nbRow >= tableRowCount) {
-            document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount - 1
-          } else {
-            document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
-          }
-          jeeFrontEnd.md_eqLogicConfigure.applyTableLayout('remove', row) // Supprime la ligne selectionnée
-          return
+        if (event.target.closest('.bt_addRow')) {
+            handleDynamicLine('add');
+            return;
         }
-      	if (_target = event.target.closest('.bt_addRow')) {
-          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 (nbRow <= tableRowCount) {
-      	  	document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount + 1
-      	  } else {
-        	document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
-      	  }
-          jeeFrontEnd.md_eqLogicConfigure.applyTableLayout('add', row) // Ajoute une ligne avant la ligne selectionnée
+
+        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')) {

From 3656a648d0827478f85026bddc6c37c046dc651e Mon Sep 17 00:00:00 2001
From: BisonJeedom <110299206+BisonJeedom@users.noreply.github.com>
Date: Thu, 19 Jun 2025 20:09:08 +0200
Subject: [PATCH 3/4] fix when delete if one row only and add draggable (credit
 Phpvarious)

---
 desktop/modal/eqLogic.configure.php | 35 +++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/desktop/modal/eqLogic.configure.php b/desktop/modal/eqLogic.configure.php
index 51b6d33b00..d8b37242a2 100644
--- a/desktop/modal/eqLogic.configure.php
+++ b/desktop/modal/eqLogic.configure.php
@@ -438,7 +438,7 @@
                     $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 .= $i;
+                    $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++) {
@@ -669,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,
@@ -705,7 +732,7 @@
             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 += i
+            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)
@@ -1015,6 +1042,10 @@ function handleDynamicLine(_action) {
         var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
         var tableRowCount = tableLayout.querySelectorAll('tr').length
         
+        if (_action === 'remove' && tableRowCount === 1) {
+          return
+        }
+      
         if (_action === 'add' && nbRow <= tableRowCount) {
             tableRowCount++
         }

From 267e9ae568a20609797a7f54f566c4d28ca57617 Mon Sep 17 00:00:00 2001
From: BisonJeedom <110299206+BisonJeedom@users.noreply.github.com>
Date: Sat, 21 Jun 2025 07:40:48 +0200
Subject: [PATCH 4/4] fix to allow adding new column

---
 desktop/modal/eqLogic.configure.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desktop/modal/eqLogic.configure.php b/desktop/modal/eqLogic.configure.php
index d8b37242a2..212f683dd3 100644
--- a/desktop/modal/eqLogic.configure.php
+++ b/desktop/modal/eqLogic.configure.php
@@ -719,7 +719,7 @@
         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: