settings-dhcp: Implement copyButton to copy active DHCP leases in dnsmasq format

This will allow users to easily add a current lease into the static leases configuration, closer to v5 behavior.

Signed-off-by: DroidFreak32 <[email protected]>

Author: DroidFreak32

scripts/js/settings-dhcp.js

@@ -64,6 +64,7 @@ $(() => {
     ],
     drawCallback() {
       $('button[id^="deleteLease_"]').on("click", deleteLease);
+      $('button[id^="copyLease_"]').on("click", copyLease);
 
       // Hide buttons if all messages were deleted
       const hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
@@ -74,15 +75,23 @@ $(() => {
     },
     rowCallback(row, data) {
       $(row).attr("data-id", data.ip);
-      const button =
+      const copyButton =
+        '<button type="button" class="btn btn-default btn-xs" id="copyLease_"' +
+        'data-hwaddr="' +
+        data.hwaddr +
+        '" data-ip="' +
+        data.ip +
+        '" data-name="' +
+        data.name +
+        '" title="Copy as static DHCP lease">' +
+        '<span class="far fa-copy"></span></button>';
+      const deleteButton =
         '<button type="button" class="btn btn-danger btn-xs" id="deleteLease_' +
         data.ip +
         '" data-del-ip="' +
         data.ip +
-        '">' +
-        '<span class="far fa-trash-alt"></span>' +
-        "</button>";
-      $("td:eq(6)", row).html(button);
+        '"><span class="far fa-trash-alt"></span></button>';
+      $("td:eq(6)", row).html(copyButton + "&nbsp;" + deleteButton);
     },
     select: {
       style: "multi",
@@ -159,6 +168,38 @@ $(() => {
   });
 });
 
+function copyLease() {
+  const button = $(this);
+  const hwaddr = button.data("hwaddr");
+  const ip = button.data("ip");
+  const name = button.data("name");
+
+  // Handle cases where name is not available
+  const hostname = name === "*" || name === null ? "" : name;
+
+  const textToCopy = `${hwaddr},${ip},${hostname}`;
+
+  navigator.clipboard
+    .writeText(textToCopy)
+    .then(() => {
+      utils.showAlert(
+        "success",
+        "far fa-copy",
+        "Copied to clipboard!",
+        textToCopy
+      );
+    })
+    .catch(err => {
+      console.error("Could not copy text: ", err); // eslint-disable-line no-console
+      utils.showAlert(
+        "error",
+        "",
+        "Failed to copy to clipboard",
+        "See browser console for details"
+      );
+    });
+}
+
 function deleteLease() {
   // Passes the button data-del-id attribute as IP
   delLease($(this).attr("data-del-ip"));