Use CSS to show confirmation message when editing static DHCP table rows

Remove the javascript code used to add and remove "hints" and replace it
with a single CSS pseudo-element after the table, instead of one message
per line. Also, adjust LCARS message position.

Signed-off-by: RD WebDesign <[email protected]>

Author: rdwebdesign

scripts/js/settings-dhcp.js

@@ -313,19 +313,17 @@ $(document).on("click", ".save-static-row", function () {
     hwaddr || ipaddr || hostname ? [hwaddr, ipaddr, hostname].filter(Boolean).join(",") : "";
   $("#dhcp-hosts").val(lines.join("\n"));
 
-  // On save remove the save button and the hint
+  // On save remove the save button
   $(this).remove();
-  row.next(".edit-hint-row").remove();
   // and remove highlight colors from all cells on this row
   $("td", row).removeClass("table-danger");
 
   // Check if all rows were already saved (no rows are still being edited)
-  if ($("#StaticDHCPTable .edit-hint-row").length == 0) {
+  if ($("#StaticDHCPTable .save-static-row").length == 0) {
     // Re-enable all table buttons
     $("#StaticDHCPTable button").prop("disabled", false);
     // and re-enable the textarea
     $("#dhcp-hosts").prop("disabled", false);
-    $("#dhcp-hosts").prop("title", "");
   }
 });
 
@@ -367,8 +365,8 @@ $(document).on("focus input", "#StaticDHCPTable td[contenteditable]", function (
   // Disable all action buttons in all rows
   $("#StaticDHCPTable .delete-static-row, #StaticDHCPTable .add-static-row").prop("disabled", true);
 
-  // Add save button and show a hint below the current row if not already present
-  if (!row.next().hasClass("edit-hint-row")) {
+  // Add save button (a hint asking to click on the button will be shown below the table - CSS pseudo-element)
+  if (row.find(".save-static-row").length == 0) {
     const idx = row.attr("data-row");
     const saveBtn = $(
       '<button type="button" class="btn btn-success btn-xs save-static-row"><i class="fa fa-fw fa-check"></i></button>'
@@ -380,23 +378,8 @@ $(document).on("focus input", "#StaticDHCPTable td[contenteditable]", function (
     // Add the save button to the actions column
     row.find('td').last().prepend(saveBtn, " ");
 
-    // Create a table row containing the edit hint and the save button
-    const hintRow = $('<tr class="edit-hint-row"></tr>')
-      .append(
-        $(
-          '<td colspan="4" class="bg-info"><em>Please confirm changes using the green button, then click "Save &amp; Apply" before leaving the page.</em></td>'
-        )
-      );
-
     // Disable the textarea to avoid losing unsaved changes to the table
     $("#dhcp-hosts").prop("disabled", true);
-    $("#dhcp-hosts").prop("title", "Disabled.\nConfirm all changes above to enable this field");
-
-    // Remove any previously existing hint
-    row.next(".edit-hint-row").remove();
-
-    // Add the created hint
-    row.after(hintRow);
   }
 });
 
@@ -446,7 +429,6 @@ function renderStaticDHCPTable() {
   }
 
   tbody.find(".delete-static-row, .add-static-row").prop("disabled", false);
-  tbody.find(".edit-hint-row").remove();
   showLineNumbers();
 }
 

style/pi-hole.css

@@ -1625,6 +1625,24 @@ textarea.no-wrap {
   resize: none;
 }
 
+/* Show hint message on the static DHCP lease table, when at least one Save button exists */
+div:has(> .table-responsive #StaticDHCPTable) {
+  position: relative;
+}
+div:has(> .table-responsive #StaticDHCPTable .save-static-row)::before {
+  content: 'Please confirm changes using the green button, then click "Save & Apply" before leaving the page.';
+  position:absolute;
+  display: block;
+  padding: 4px 12px;
+  max-width: calc(100% - 30px);
+  right: 15px;
+  bottom: 0px;
+  color: #000;
+  font-style: italic;
+  text-align: right;
+  background: #eedd88;
+}
+
 /*
 Calculate the total height using the number of lines and line-height. Also account for borders and padding.
 Use the same values used by ".form-control" class:
@@ -1642,6 +1660,24 @@ border-top=1px + padding-top=6px + padding-bottom=6px + border-bottom=1px
   gap: 0;
 }
 
+/* Message displayed when the textarea is disabled because there are table rows being edited */
+.dhcp-hosts-wrapper:has(textarea[disabled]):hover::before {
+  content: "Please confirm all changes above before editing this field.";
+  display: block;
+  position: absolute;
+  width: 380px;
+  padding:8px;
+  top: 50%;
+  left:50%;
+  transform: translate(-45%,-50%);
+  text-align: center;
+  font-style: italic;
+  color: #000;
+  background: #ed8;
+  box-shadow: 0 0 8px rgba(0,0,0,.35);
+  cursor: not-allowed;
+}
+
 #dhcp-hosts {
   height: var(--total-height);
 }

style/themes/lcars.css

@@ -2185,3 +2185,20 @@ td.highlight {
 .help-block {
   color: #76808a;
 }
+
+div:has(> .table-responsive #StaticDHCPTable .save-static-row)::after {
+  padding: 1px 10px 3px;
+  background: #fd8;
+  border-radius: 5px;
+}
+.dhcp-hosts-wrapper:has(textarea[disabled]):hover::before {
+  padding: 6px 8px 8px;
+  background: #fd8;
+  border-radius: 5px;
+  width: 400px;
+  transform: translate(-47%,-50%);
+  box-shadow: 0 0 10px 2px #000;
+}
+.line-numbers {
+  border-color: transparent;
+}