Add proper IP sorting to the groups->client table. Also implement subnet (CIDR notation) support into our existing IP sorting algorithm. This fixes #1268.

Signed-off-by: DL6ER <dl6er@dl6er.de>

groups-clients.php

@@ -74,6 +74,7 @@
     </div>
 </div>
 
+<script src="scripts/pi-hole/js/ip-address-sorting.js"></script>
 <script src="scripts/pi-hole/js/groups-common.js"></script>
 <script src="scripts/pi-hole/js/groups-clients.js"></script>
 

scripts/pi-hole/js/groups-clients.js

@@ -82,7 +82,7 @@ function initTable() {
     order: [[0, "asc"]],
     columns: [
       { data: "id", visible: false },
-      { data: "ip" },
+      { data: "ip", type: "ip-address" },
       { data: "comment" },
       { data: "groups", searchable: false },
       { data: "name", width: "80px", orderable: false }

scripts/pi-hole/js/ip-address-sorting.js

@@ -23,9 +23,16 @@ jQuery.extend(jQuery.fn.dataTableExt.oSort, {
     var m = a.split("."),
       n = a.split(":"),
       x = "",
-      xa = "";
+      xa = "",
+      cidr = [];
     if (m.length === 4) {
-      // IPV4
+      // IPV4 (possibly with CIDR)
+      cidr = m[3].split("/");
+      if (cidr.length === 2) {
+        m.pop();
+        m = m.concat(cidr);
+      }
+
       for (i = 0; i < m.length; i++) {
         item = m[i];
 
@@ -38,7 +45,7 @@ jQuery.extend(jQuery.fn.dataTableExt.oSort, {
         }
       }
     } else if (n.length > 0) {
-      // IPV6
+      // IPV6 (possibly with CIDR)
       var count = 0;
       for (i = 0; i < n.length; i++) {
         item = n[i];
@@ -79,6 +86,21 @@ jQuery.extend(jQuery.fn.dataTableExt.oSort, {
           x += item;
         }
       }
+
+      cidr = x.split("/");
+      x = cidr[0];
+      if (cidr.length === 2) {
+        item = cidr[1];
+        if (item.length === 1) {
+          x += "00" + item;
+        } else if (item.length === 2) {
+          x += "0" + item;
+        } else {
+          x += item;
+        }
+      }
+
+      console.log([a, n, xa, count, x]);
     }
 
     return x;