Server Bans: responsive datatables and auto truncate "Reason".

diff --git a/api/server-bans.php b/api/server-bans.php
index d109dd647b8d17673abaa59d95df08caef89f505..baff47e5a110607a634d348d6df640d7f9c35cec 100644 (file)
--- a/api/server-bans.php
+++ b/api/server-bans.php
@@ -9,16 +9,17 @@ $out = [];
 foreach($tkls as $tkl)
 {
     $set_in_config = ((isset($tkl->set_in_config) && $tkl->set_in_config) || ($tkl->set_by == "-config-")) ? true : false;
-    $set_by = $set_in_config ? "<span class=\"badge rounded-pill badge-secondary\">Config</span>" : show_nick_only($tkl->set_by);
+    $set_by = $set_in_config ? "<span class=\"badge rounded-pill badge-secondary\">Config</span>" : show_nick_only(htmlspecialchars($tkl->set_by));
     $select = '';
     if (!$set_in_config)
         $select = "<input type=\"checkbox\" value='" . base64_encode($tkl->name).",".base64_encode($tkl->type) . "' name=\"tklch[]\">";
+
     $out[] = [
         "Select" => $select,
-        "Mask" => $tkl->name,
+        "Mask" => htmlspecialchars($tkl->name),
         "Type" => $tkl->type_string,
         "Duration" => $tkl->duration_string,
-        "Reason" => $tkl->reason,
+        "Reason" => htmlspecialchars($tkl->reason),
         "Set By" => $set_by,
         "Set On" => $tkl->set_at_string,
         "Expires" => $tkl->expire_at_string,

diff --git a/server-bans/index.php b/server-bans/index.php
index a8f88b926d136090733b2eaf69d9c7737c6aa1b3..93baeba1dbe23f29a6e5e7a94078cb4062212963 100644 (file)
--- a/server-bans/index.php
+++ b/server-bans/index.php
@@ -189,19 +189,18 @@ Here are all your network bans, from K-Lines to G-Lines, it's all here.<br><br>
        </div>
        </div>
 
-<!-- The banlist table -->
-
+       <!-- The banlist table -->
        <form method="post">
-       <table id="data_list" class="container-xxl table table-sm table-responsive caption-top table-striped">
-       <thead class="table-primary">
-       <th scope="col"><input type="checkbox" label='selectall' onClick="toggle_tkl(this)" /></th>
-       <th scope="col">Mask</th>
-       <th scope="col">Type</th>
-       <th scope="col">Duration</th>
-       <th scope="col">Reason</th>
-       <th scope="col">Set By</th>
-       <th scope="col">Set On</th>
-       <th scope="col">Expires</th>
+       <table id="data_list" class="table-striped display responsive nowrap" style="width:100%">
+       <thead>
+               <th scope="col"><input type="checkbox" label='selectall' onClick="toggle_tkl(this)" /></th>
+               <th scope="col">Mask</th>
+               <th scope="col">Type</th>
+               <th scope="col">Duration</th>
+               <th scope="col">Reason</th>
+               <th scope="col">Set By</th>
+               <th scope="col">Set On</th>
+               <th scope="col">Expires</th>
        </thead>
        </table>
 
@@ -233,26 +232,50 @@ Here are all your network bans, from K-Lines to G-Lines, it's all here.<br><br>
 
 <script>
 $(document).ready( function () {
-       $('#data_list').DataTable({
+       args = {
+               'responsive': true,
+               'fixedHeader': {
+                       header: true,
+                       headerOffset: 53
+               },
                'ajax': {
                        'url': '<?php echo get_config("base_url"); ?>api/server-bans.php',
                        dataSrc: ''
                },
                'columns': [
-                       { 'data': 'Select' },
-                       { 'data': 'Mask' },
-                       { 'data': 'Type' },
-                       { 'data': 'Duration' },
-                       { 'data': 'Reason' },
-                       { 'data': 'Set By' },
-                       { 'data': 'Set On' },
-                       { 'data': 'Expires' },
-               ],
-               'columnDefs': [
-                        { targets: '_all', 'type': 'natural' }
+                       { 'data': 'Select', 'responsivePriority': 1 },
+                       { 'data': 'Mask', 'responsivePriority': 2 },
+                       { 'data': 'Type', 'responsivePriority': 3 },
+                       { 'data': 'Duration', 'responsivePriority': 4 },
+                       { 'data': 'Reason', 'responsivePriority': 5, 'render': DataTable.render.ellipsis(50, false) },
+                       { 'data': 'Set By', 'responsivePriority': 6 },
+                       { 'data': 'Set On', 'responsivePriority': 7 },
+                       { 'data': 'Expires', 'responsivePriority': 8 },
                ],
                'pageLength':100,
-       });
+               'order':[[1,'asc']],
+               createdRow: function(row) {
+                       var td = jQuery(row).find(".truncate");
+                       td.each(function(index, el) {
+                               jQuery(this).attr("title", jQuery(this).html());
+                               });
+                       },
+       };
+       /* Only show filter pane on desktop */
+       if (window.innerWidth > 800)
+       {
+               args['dom'] = 'Pfrtip';
+               args['searchPanes'] = {
+                       'initCollapsed': 'true',
+                       'columns': [2,3,5],
+                       'dtOpts': {
+                               select: { style: 'multi'},
+                               order: [[ 1, "desc" ]]
+                       },
+               }
+       }
+
+       $('#data_list').DataTable(args);
 } );
 </script>