WIP

changedetectionio/static/js/conditions.js

@@ -0,0 +1,68 @@
+$(document).ready(function () {
+    // Function to set up button event handlers
+    function setupButtonHandlers() {
+        // Unbind existing handlers first to prevent duplicates
+        $(".addRuleRow, .removeRuleRow").off("click");
+        
+        // Add row button handler
+        $(".addRuleRow").on("click", function(e) {
+            e.preventDefault();
+            
+            let currentRow = $(this).closest("tr");
+            
+            // Clone without events
+            let newRow = currentRow.clone(false);
+            
+            // Reset input values in the cloned row
+            newRow.find("input").val("");
+            newRow.find("select").prop("selectedIndex", 0);
+            
+            // Insert the new row after the current one
+            currentRow.after(newRow);
+            
+            // Reindex all rows
+            reindexRules();
+        });
+        
+        // Remove row button handler
+        $(".removeRuleRow").on("click", function(e) {
+            e.preventDefault();
+            
+            // Only remove if there's more than one row
+            if ($("#rulesTable tbody tr").length > 1) {
+                $(this).closest("tr").remove();
+                reindexRules();
+            }
+        });
+    }
+
+    // Function to reindex form elements and re-setup event handlers
+    function reindexRules() {
+        // Unbind all button handlers first
+        $(".addRuleRow, .removeRuleRow").off("click");
+        
+        // Reindex all form elements
+        $("#rulesTable tbody tr").each(function(index) {
+            $(this).find("select, input").each(function() {
+                let oldName = $(this).attr("name");
+                let oldId = $(this).attr("id");
+
+                if (oldName) {
+                    let newName = oldName.replace(/\d+/, index);
+                    $(this).attr("name", newName);
+                }
+
+                if (oldId) {
+                    let newId = oldId.replace(/\d+/, index);
+                    $(this).attr("id", newId);
+                }
+            });
+        });
+        
+        // Reattach event handlers after reindexing
+        setupButtonHandlers();
+    }
+
+    // Initial setup of button handlers
+    setupButtonHandlers();
+});

changedetectionio/templates/_helpers.html

@@ -61,8 +61,8 @@
   {{ field(**kwargs)|safe }}
 {% endmacro %}
 
-{% macro render_fieldlist_of_formfields_as_table(fieldlist) %}
-  <table class="fieldlist_formfields pure-table">
+{% macro render_fieldlist_of_formfields_as_table(fieldlist, table_id="rulesTable") %}
+  <table class="fieldlist_formfields pure-table" id="{{ table_id }}">
     <thead>
       <tr>
         {% for subfield in fieldlist[0] %}
@@ -87,7 +87,8 @@
             </td>
           {% endfor %}
           <td>
-            <button type="button" onclick="addRuleRow()">ADD +</button>
+            <button type="button" class="addRuleRow">+</button>
+            <button type="button" class="removeRuleRow">-</button>
           </td>
         </tr>
       {% endfor %}

changedetectionio/templates/edit.html

@@ -6,37 +6,7 @@
 <script src="{{url_for('static_content', group='js', filename='vis.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='global-settings.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='scheduler.js')}}" defer></script>
-
-<script>
-    function addRuleRow() {
-        let rulesContainer = document.getElementById("rules-container");
-        let lastRule = document.querySelector(".rule-row:last-child");
-        let newRule = lastRule.cloneNode(true);
-
-        // Get the new unique index for the added row
-        let ruleCount = document.querySelectorAll(".rule-row").length;
-
-        // Update all IDs, names, and labels to have the correct index
-        newRule.querySelectorAll("select, input, label").forEach(element => {
-            if (element.id) {
-                element.id = element.id.replace(/\d+/, ruleCount);
-            }
-            if (element.name) {
-                element.name = element.name.replace(/\d+/, ruleCount);
-            }
-            if (element.hasAttribute("for")) {
-                element.setAttribute("for", element.getAttribute("for").replace(/\d+/, ruleCount));
-            }
-            if (element.tagName === "INPUT") {
-                element.value = ""; // Clear input field value
-            }
-        });
-
-        // Append the new rule to the grid container
-        rulesContainer.appendChild(newRule);
-    }
-</script>
-
+<script src="{{url_for('static_content', group='js', filename='conditions.js')}}" defer></script>
 
 
 <script>