From ea24655a7bf844457eb9cd814dc8bc431ebdc18d Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Fri, 11 Mar 2022 20:08:47 -0300 Subject: [PATCH] Add colors to debug log - Add function and CSS to show colorful debug log - Adjusts to #output element Signed-off-by: RD WebDesign --- scripts/pi-hole/php/debug.php | 47 ++++++++++++++++++++++++--------- style/pi-hole.css | 6 +++++ style/themes/default-dark.css | 28 ++++++++++++++++++++ style/themes/default-darker.css | 25 ++++++++++++++++-- style/themes/default-light.css | 26 +++++++++++++++++- style/themes/lcars.css | 25 ++++++++++++++++++ 6 files changed, 141 insertions(+), 16 deletions(-) diff --git a/scripts/pi-hole/php/debug.php b/scripts/pi-hole/php/debug.php index 27a23545..d7ef02bf 100644 --- a/scripts/pi-hole/php/debug.php +++ b/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" => '', + chr(27)."[1;32m" => '', + chr(27)."[1;33m" => '', + chr(27)."[1;34m" => '', + chr(27)."[1;35m" => '', + chr(27)."[1;36m" => '', - if(!isset($_GET["IE"])) - echo "data: ".implode("\ndata: ", explode("\n", $data))."\n\n"; - else - echo $data; + chr(27)."[90m" => '', + chr(27)."[91m" => '', + chr(27)."[32m" => '', + chr(27)."[33m" => '', + chr(27)."[94m" => '', + chr(27)."[95m" => '', + chr(27)."[96m" => '', + + chr(27)."[1m" => '', + chr(27)."[4m" => '', + + chr(27)."[0m" => '', + ); + + $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)); } diff --git a/style/pi-hole.css b/style/pi-hole.css index 651b8934..996cb3ab 100644 --- a/style/pi-hole.css +++ b/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; +} diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css index 2a089d4e..a95ab53c 100644 --- a/style/themes/default-dark.css +++ b/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; diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css index f31f3d09..016c15a2 100644 --- a/style/themes/default-darker.css +++ b/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; +} diff --git a/style/themes/default-light.css b/style/themes/default-light.css index 52125863..ca62bd85 100644 --- a/style/themes/default-light.css +++ b/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); } diff --git a/style/themes/lcars.css b/style/themes/lcars.css index d1ba3937..103a1fac 100644 --- a/style/themes/lcars.css +++ b/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;