Add colors to debug log

- Add function and CSS to show colorful debug log
- Adjusts to #output element

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/pi-hole/php/debug.php

@@ -8,7 +8,7 @@ header('Cache-Control: no-cache');
 require "password.php";
 require "auth.php";
 
-if(!$auth) {
+if (!$auth) {
     die("Unauthorized");
 }
 
@@ -18,22 +18,43 @@ $token = isset($_GET["token"]) ? $_GET["token"] : "";
 check_csrf($token);
 
 function echoEvent($datatext) {
-    $data = htmlspecialchars($datatext);
+    $ANSIcolors = array(
+        chr(27)."[1;91m" => '<span class="log-red">',
+        chr(27)."[1;32m" => '<span class="log-green">',
+        chr(27)."[1;33m" => '<span class="log-yellow">',
+        chr(27)."[1;34m" => '<span class="log-blue">',
+        chr(27)."[1;35m" => '<span class="log-purple">',
+        chr(27)."[1;36m" => '<span class="log-cyan">',
 
-    if(!isset($_GET["IE"]))
-      echo "data: ".implode("\ndata: ", explode("\n", $data))."\n\n";
-    else
-      echo $data;
+        chr(27)."[90m" => '<span class="log-gray">',
+        chr(27)."[91m" => '<span class="log-red">',
+        chr(27)."[32m" => '<span class="log-green">',
+        chr(27)."[33m" => '<span class="log-yellow">',
+        chr(27)."[94m" => '<span class="log-blue">',
+        chr(27)."[95m" => '<span class="log-purple">',
+        chr(27)."[96m" => '<span class="log-cyan">',
+
+        chr(27)."[1m" => '<span class="text-bold">',
+        chr(27)."[4m" => '<span class="text-underline">',
+
+        chr(27)."[0m" => '</span>',
+    );
+
+    $data = str_replace(array_keys($ANSIcolors), $ANSIcolors, htmlspecialchars($datatext));
+
+    if (!isset($_GET["IE"])) {
+        echo "data: ".implode("\ndata: ", explode("\n", $data))."\n\n";
+    } else {
+        echo $data;
+    }
 }
 
-if(isset($_GET["upload"]))
-{
-	$proc = popen("sudo pihole -d -a -w", "r");
-}
-else
-{
-	$proc = popen("sudo pihole -d -w", "r");
+if (isset($_GET["upload"])) {
+    $proc = popen("sudo pihole -d -a -w", "r");
+} else {
+    $proc = popen("sudo pihole -d -w", "r");
 }
+
 while (!feof($proc)) {
     echoEvent(fread($proc, 4096));
 }

style/pi-hole.css

@@ -756,3 +756,9 @@ table.dataTable tbody > tr > .selected {
   word-break: break-word;
   white-space: pre-wrap;
 }
+
+#output {
+  margin: 5px 0;
+  min-height: 36px;
+  padding: 4px 8px;
+}

style/themes/default-dark.css

@@ -414,6 +414,34 @@ td.highlight {
   border: 1px solid #353c42;
 }
 
+/* Used in debug log page */
+.log-red {
+  color: #ff4038;
+}
+.log-green {
+  color: #4c4;
+}
+.log-yellow {
+  color: #fb0;
+}
+.log-blue {
+  color: #48f;
+}
+.log-purple {
+  color: #b8e;
+}
+.log-cyan {
+  color: #0df;
+}
+.log-gray {
+  color: #999;
+}
+
+#output {
+  border-color: #505458;
+  background: #272c30;
+}
+
 /* Used by the long-term pages */
 .daterangepicker {
   background-color: #3e464c;

style/themes/default-darker.css

@@ -1023,7 +1023,6 @@ fieldset[disabled] .btn-link:hover {
   background-color: rgb(39, 42, 44);
 }
 .dropdown-menu > li > a {
-  color: rgb(200, 195, 188);
   color: rgb(157, 148, 136);
 }
 .dropdown-menu > li > a:focus,
@@ -5060,7 +5059,6 @@ fieldset[disabled] .btn-yahoo.focus {
   color: rgb(76, 188, 255) !important;
 }
 .text-black {
-  color: rgb(221, 218, 214) !important;
   color: rgb(232, 230, 227) !important;
 }
 .text-light-blue {
@@ -5963,3 +5961,26 @@ td.highlight {
   border-color: #d8b013 !important;
   color: #f3e8c8 !important;
 }
+
+/* Used in debug log page */
+.log-red {
+  color: #e22;
+}
+.log-green {
+  color: #0b0;
+}
+.log-yellow {
+  color: #fb0;
+}
+.log-blue {
+  color: #08c;
+}
+.log-purple {
+  color: #c6f;
+}
+.log-cyan {
+  color: #0df;
+}
+.log-gray {
+  color: #999;
+}

style/themes/default-light.css

@@ -27,7 +27,6 @@
 }
 .main-header .navbar .sidebar-toggle:hover {
   color: #f6f6f6;
-  background-color: rgba(0, 0, 0, 0.1);
   background-color: #367fa9;
 }
 @media (max-width: 767px) {
@@ -213,6 +212,31 @@
   color: #36f !important;
 }
 
+/* Used in debug log page */
+.log-red {
+  color: #e00;
+}
+.log-green {
+  color: #093;
+}
+.log-yellow {
+  color: #e90;
+  font-weight: bold;
+}
+.log-blue {
+  color: #04d;
+}
+.log-purple {
+  color: #a0c;
+}
+.log-cyan {
+  color: #0ab;
+}
+.log-gray {
+  color: #999;
+}
+
+
 td.highlight {
   background-color: rgba(255, 204, 0, 0.333);
 }

style/themes/lcars.css

@@ -118,6 +118,8 @@ pre {
 #output {
   padding: 10px 3px;
   border-radius: 12px;
+  background: #181818;
+  color: #9ab;
 }
 
 td code {
@@ -1888,6 +1890,29 @@ input[type="password"]::-webkit-caps-lock-indicator {
   color: #36f !important;
 }
 
+/* Used in debug log page */
+.log-red {
+  color: #e22;
+}
+.log-green {
+  color: #0b0;
+}
+.log-yellow {
+  color: #fb0;
+}
+.log-blue {
+  color: #08c;
+}
+.log-purple {
+  color: #c6f;
+}
+.log-cyan {
+  color: #0df;
+}
+.log-gray {
+  color: #999;
+}
+
 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
   margin: 10px 0;
   text-transform: uppercase;