From 9fafe701aa0638867327d33b9bb7a57c25d96b5f Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Tue, 29 Aug 2023 11:30:25 +0300
Subject: [PATCH] Further updates to the logs page

---
 cp/resources/views/admin/logs/index.twig | 38 ++++++++++++------------
 cp/resources/views/layouts/app.twig      |  2 ++
 cp/resources/views/partials/js-logs.twig | 17 +++++++++++
 3 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 cp/resources/views/partials/js-logs.twig

diff --git a/cp/resources/views/admin/logs/index.twig b/cp/resources/views/admin/logs/index.twig
index 70e4b59..2c7d0aa 100644
--- a/cp/resources/views/admin/logs/index.twig
+++ b/cp/resources/views/admin/logs/index.twig
@@ -44,32 +44,32 @@
           <div class="container-xl">
             <div class="card">
               <div class="card-body">
-                <div id="table-default" class="table-responsive">
+                <div id="table-logs" class="table-responsive">
                   <table class="table">
                     <thead>
                       <tr>
-                        <th><button class="table-sort" data-sort="sort-id">Date</button></th>
-                        <th><button class="table-sort" data-sort="sort-name">Registrar</button></th>
-                        <th><button class="table-sort" data-sort="sort-name">Command</button></th>
-                        <th><button class="table-sort" data-sort="sort-crdate">Object</button></th>
-                        <th><button class="table-sort" data-sort="sort-status">Result</button></th>
-                        <th><button class="table-sort" data-sort="sort-id">Message</button></th>
-                        <th><button class="table-sort" data-sort="sort-name">Miliseconds</button></th>
-                        <th><button class="table-sort" data-sort="sort-name">clTRID</button></th>
+                        <th><button class="table-sort" data-sort="sort-date">Date</button></th>
+                        <th><button class="table-sort" data-sort="sort-registrar">Registrar</button></th>
+                        <th><button class="table-sort" data-sort="sort-command">Command</button></th>
+                        <th><button class="table-sort" data-sort="sort-object">Object</button></th>
+                        <th><button class="table-sort" data-sort="sort-result">Result</button></th>
+                        <th><button class="table-sort" data-sort="sort-message">Message</button></th>
+                        <th><button class="table-sort" data-sort="sort-milliseconds">Milliseconds</button></th>
+                        <th><button class="table-sort" data-sort="sort-cltrid">clTRID</button></th>
                         <th>Actions</th>
                       </tr>
                     </thead>
                     <tbody class="table-tbody">
 						{% for log in logs %}
 							<tr>
-								<td>{{ log.cldate }}</td>
-								<td>{{ log.registrar_id }}</td>
-								<td>{{ log.cmd }}</td>
-								<td>{{ log.obj_id }}</td>
-								<td>{{ log.code }}</td>
-								<td>{{ log.msg }}</td>
-								<td>{{ log.clmicrosecond }}</td>
-								<td>{{ log.clTRID }}</td>
+								<td class="sort-date">{{ log.cldate }}</td>
+								<td class="sort-registrar">{{ log.registrar_id }}</td>
+								<td class="sort-command">{{ log.cmd }}</td>
+								<td class="sort-object">{{ log.obj_id }}</td>
+								<td class="sort-result">{{ log.code }}</td>
+								<td class="sort-message">{{ log.msg }}</td>
+								<td class="sort-milliseconds">{{ log.clmicrosecond }}</td>
+								<td class="sort-cltrid">{{ log.clTRID }}</td>
                           <td class="text-end">
                             <span class="dropdown">
                               <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
@@ -86,7 +86,7 @@
 							</tr>
 						{% endfor %}
                     </tbody>
-                  </table>
+                  </table><ul class="pagination"></ul>
                 </div>
 			</div>
 		</div>
@@ -106,4 +106,4 @@
           </div>
         </footer>
       </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/cp/resources/views/layouts/app.twig b/cp/resources/views/layouts/app.twig
index d0f0099..ae4bcd2 100644
--- a/cp/resources/views/layouts/app.twig
+++ b/cp/resources/views/layouts/app.twig
@@ -318,6 +318,8 @@
     {% include 'partials/js-contacts.twig' %}
 {% elseif route_is('hosts') %}
     {% include 'partials/js-hosts.twig' %}
+{% elseif route_is('logs') %}
+    {% include 'partials/js-logs.twig' %}
 {% else %}
     {% include 'partials/js.twig' %}
 {% endif %}
diff --git a/cp/resources/views/partials/js-logs.twig b/cp/resources/views/partials/js-logs.twig
new file mode 100644
index 0000000..71a9d7d
--- /dev/null
+++ b/cp/resources/views/partials/js-logs.twig
@@ -0,0 +1,17 @@
+<script src="/assets/libs/list.js/dist/list.min.js" defer></script>
+<script src="/assets/js/tabler.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+  const list = new List('table-logs', {
+    sortClass: 'table-sort',
+    listClass: 'table-tbody',
+    valueNames: [ 'sort-date', 'sort-registrar', 'sort-command', 'sort-object',
+  		'sort-result', 'sort-message', 'sort-milliseconds', 'sort-cltrid'
+  	],
+    page: 10,
+    pagination: true
+  });
+  })
+</script>
+	
+