From a0bd88c7ef7eae5c66af1024a777db16d2fa7526 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Mon, 11 May 2020 23:53:24 +0200
Subject: [PATCH] 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                       |  1 +
 scripts/pi-hole/js/groups-clients.js     |  2 +-
 scripts/pi-hole/js/ip-address-sorting.js | 28 +++++++++++++++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/groups-clients.php b/groups-clients.php
index 6888ccc9..da8681f6 100644
--- a/groups-clients.php
+++ b/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>
 
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 49da0613..d9a8ee4e 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/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 }
diff --git a/scripts/pi-hole/js/ip-address-sorting.js b/scripts/pi-hole/js/ip-address-sorting.js
index d636ecf9..8bbaa152 100644
--- a/scripts/pi-hole/js/ip-address-sorting.js
+++ b/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;