feat: improve report ui

marcocesarato · Dec 27, 2020 · 6763cc6 · 6763cc6
1 parent fdb19a4
commit 6763cc6
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # AMWSCAN - PHP Antimalware Scanner
 
-**Last Release:** 0.7.4.147
+**Last Release:** 0.7.4.157
 
 **Github:** https://github.com/marcocesarato/PHP-Antimalware-Scanner
 
@@ -261,6 +261,9 @@ object(stdClass) (7) {
 ## :art: Screenshots
 
 ### Report
+
+> Running with flag `--report`, so without the interative cli, and with the html report format (default)
+
 ![Screen Report](images/screenshot_report.png)
 
 ### Interactive CLI

diff --git a/dist/scanner b/dist/scanner
diff --git a/dist/version b/dist/version
@@ -1 +1 @@
-0.7.4.155
+0.7.4.157
diff --git a/images/screenshot_report.png b/images/screenshot_report.png
diff --git a/src/Scanner.php b/src/Scanner.php
@@ -40,7 +40,7 @@ class Scanner
      *
      * @var string
      */
-    public static $version = '0.7.4.155';
+    public static $version = '0.7.4.157';
 
     /**
      * Root path.

diff --git a/src/Templates/Report.php b/src/Templates/Report.php
@@ -7,6 +7,8 @@
 
 namespace marcocesarato\amwscan\Templates;
 
+use marcocesarato\amwscan\Scanner;
+
 class Report
 {
     protected $dateFormat = 'Y-m-d H:i:s';
@@ -64,9 +66,9 @@ public function generate($output)
                 $fileModifiedDate = date($this->dateFormat, filectime($filePath));
 
                 $rowContent = '<p><i class="fas fa-file text-primary mr-2"></i> ' . $filePath . '</p>';
-                $rowContent .= '<span class="badge badge-pill badge-primary py-2 px-3 shadow-none">File size: ' . $fileSize . '</span> ';
-                $rowContent .= '<span class="badge badge-pill badge-primary py-2 px-3 shadow-none">Created: ' . $fileCreateDate . '</span> ';
-                $rowContent .= '<span class="badge badge-pill badge-primary py-2 px-3 shadow-none">Modified: ' . $fileModifiedDate . '</span> ';
+                $rowContent .= '<span class="badge badge-pill badge-fileinfo py-2 px-3 shadow-none">Size: ' . $fileSize . '</span> ';
+                $rowContent .= '<span class="badge badge-pill badge-fileinfo py-2 px-3 shadow-none">Created: ' . $fileCreateDate . '</span>';
+                $rowContent .= '<span class="badge badge-pill badge-fileinfo py-2 px-3 shadow-none">Modified: ' . $fileModifiedDate . '</span> ';
                 $rowContent .= '<span class="badge badge-pill badge-danger py-2 px-3 shadow-none">Found: ' . count($rows) . '</span> ';
                 $rowContent .= '<br>' . $tableContent;
 
@@ -78,12 +80,14 @@ public function generate($output)
 
         $content = str_replace(
             [
+                '{VERSION}',
                 '{DATE}',
                 '{COUNT}',
                 '{INFECTED}',
                 '{CONTENTS}',
             ],
             [
+                Scanner::getVersion(),
                 date($this->dateFormat),
                 $this->data['count'],
                 count($this->data['results']),

diff --git a/src/Templates/html/Report.html b/src/Templates/html/Report.html
@@ -25,6 +25,7 @@
     <style type="text/css">
         body {
             padding-top: 3.7rem;
+            overflow-x: hidden;
         }
         .table code {
             overflow-wrap: break-word;
@@ -42,13 +43,45 @@
         #report > tbody > tr {
             cursor: pointer;
         }
-        #report > tbody > tr > td > table {
+        #report .dataTables_wrapper {
             cursor: auto;
-            display: none;
         }
         .dataTables_wrapper {
             margin-top: 1rem;
         }
+        .badge-fileinfo {
+            color: #222 !important;
+            background-color: rgba(0,0,0,.05) !important;
+        }
+        .pagination .page-item.active .page-link {
+            border-radius: 100%;
+            width: 35px;
+            height: 35px;
+            text-align: center;
+            line-height: 35px;
+            padding: 0;
+        }
+        #back-top {
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            border-radius: 100%;
+            right: 30px;
+            z-index: 99;
+            border: none;
+            outline: none;
+            color: white;
+            cursor: pointer;
+            vertical-align: middle;
+            padding: 0;
+            line-height: 50px;
+            font-size: 18px;
+            height: 50px;
+            width: 50px;
+        }
+        #back-top:hover {
+            background-color: #555!important;
+        }
     </style>
     <script type="text/javascript">
         (function ($) {
@@ -59,6 +92,16 @@
                 $("#report tr table, #report .dataTables_wrapper").click(function(e) {
                     e.stopPropagation();
                 });
+                window.onscroll = function() {
+                    scrollFunction()
+                };
+                function scrollFunction() {
+                    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                        $("#back-top").show();
+                    } else {
+                        $("#back-top").hide();
+                    }
+                }
             });
         })(jQuery);
         function expandAll() {
@@ -67,6 +110,10 @@
         function collapseAll() {
             $("#report .dataTables_wrapper").hide();
         }
+        function scrollToTop() {
+            document.body.scrollTop = 0; // For Safari
+            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+        }
     </script>
 </head>
 <body>
@@ -91,13 +138,15 @@
         <div class="container">
             <h1 class="display-3">Report</h1>
             <p>
+                <b>Version:</b> {VERSION}<br>
                 <b>Scan date:</b> {DATE}<br>
-                <b>Files infected:</b> {INFECTED}/{COUNT}
+                <b>Files analyzed:</b> {COUNT} <b>| Files infected:</b> {INFECTED}
             </p>
         </div>
     </div>
     <div class="container">
         {CONTENTS}
     </div>
+    <button onclick="scrollToTop()" id="back-top" class="bg-primary"><i class="fas fa-angle-up"></i></button>
   </body>
 </html>