From 526f360f2c46ce30e41fd960cbdf1914ff1013f2 Mon Sep 17 00:00:00 2001
From: cp6 <cp6@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:49:41 +1100
Subject: [PATCH] Added datatables to server/index for sorting and searching
 ability.

Updated days due in to no longer give 8 digit long floats
---
 resources/views/servers/index.blade.php | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/resources/views/servers/index.blade.php b/resources/views/servers/index.blade.php
index 5b2caa9..fda11ce 100644
--- a/resources/views/servers/index.blade.php
+++ b/resources/views/servers/index.blade.php
@@ -25,7 +25,7 @@
                     <a href="{{ route('servers-compare-choose') }}" class="btn btn-primary mb-3 ms-2">Compare
                         servers</a>
                     <div class="table-responsive">
-                        <table class="table table-bordered">
+                        <table class="table table-bordered" id="servers-table">
                             <thead class="table-light">
                             <tr class="bg-gray-100">
                                 <th>Name</th>
@@ -68,7 +68,7 @@
                                         <td class="text-nowrap">{{ $server->provider->name }}</td>
                                         <td class="text-nowrap">{{ $server->price->price }} {{$server->price->currency}} {{\App\Process::paymentTermIntToString($server->price->term)}}</td>
                                         <td class="text-nowrap">
-                                            {{now()->diffInDays(Carbon\Carbon::parse($server->price->next_due_date), false)}}
+                                            {{number_format(now()->diffInDays(Carbon\Carbon::parse($server->price->next_due_date), false), 0)}}
                                             <small>days</small></td>
                                         <td class="text-nowrap"> {{ $server->owned_since }}</td>
                                         <td class="text-nowrap">
@@ -234,5 +234,21 @@
                 });
             })
         </script>
+        <script>
+            window.addEventListener('load', function () {
+                $('#servers-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": [1,11]}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
     @endsection
 </x-app-layout>