From 136119affec120e8fa71073d2106f2e754424eea Mon Sep 17 00:00:00 2001
From: cp6 <cp6@users.noreply.github.com>
Date: Mon, 21 Feb 2022 14:47:13 +1100
Subject: [PATCH] Updated IPs index

Updated IPs index
---
 resources/views/ips/index.blade.php | 46 ++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/resources/views/ips/index.blade.php b/resources/views/ips/index.blade.php
index e5ea0b3..c38e293 100644
--- a/resources/views/ips/index.blade.php
+++ b/resources/views/ips/index.blade.php
@@ -1,4 +1,7 @@
 @section('title') {{'IP Addresses'}} @endsection
+@section('css_links')
+    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
+@endsection
 @section('style')
     <x-modal-style></x-modal-style>
 @endsection
@@ -16,7 +19,7 @@
             <a href="{{ route('IPs.create') }}" class="btn btn-primary mb-3">Add IP</a>
             <x-success-alert></x-success-alert>
             <div class="table-responsive">
-                <table class="table table-bordered">
+                <table class="table table-bordered" id="ips-table">
                     <thead class="table-light">
                     <tr>
                         <th class="text-nowrap">Type</th>
@@ -25,23 +28,21 @@
                     </tr>
                     </thead>
                     <tbody>
-                    @if(!empty($dn))
-                        @foreach($dn as $dns)
+                    @if(!empty($ips))
+                        @foreach($ips as $ip)
                             <tr>
-                                <td class="text-nowrap">{{ $dns->is_ipv4}}</td>
-                                <td class="text-nowrap">{{ $dns->address}}</td>
+                                <td class="text-nowrap">@if ($ip->is_ipv4 === 1)
+                                        IPv4
+                                    @else
+                                        IPv6
+                                    @endif</td>
+                                <td class="text-nowrap">{{ $ip->address}}</td>
                                 <td class="text-nowrap">
-                                    <form action="{{ route('IPs.destroy', $dns->id) }}" method="POST">
-                                        <a href="{{ route('IPs.show', $dns->id) }}"
-                                           class="text-body mx-1">
-                                            <i class="fas fa-eye" title="view"></i></a>
-                                        <a href="{{ route('IPs.edit', $dns->id) }}"
-                                           class="text-body mx-1">
-                                            <i class="fas fa-pen" title="edit"></i></a>
+                                    <form action="{{ route('IPs.destroy', $ip->id) }}" method="POST">
                                         @csrf
                                         @method('DELETE')
                                         <i class="fas fa-trash text-danger ms-3" @click="modalForm"
-                                           id="btn-{{$dns->hostname}}" title="{{$dns->id}}"></i>
+                                           id="btn-{{$ip->hostname}}" title="{{$ip->id}}"></i>
                                     </form>
                                 </td>
                             </tr>
@@ -62,7 +63,24 @@
             </p>
         @endif
     </div>
+    <x-datatables-assets></x-datatables-assets>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('#ips-table').DataTable({
+                "pageLength": 15,
+                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                "columnDefs": [
+                    {"orderable": false, "targets": 1}
+                ],
+                "initComplete": function () {
+                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                    $('.dataTables_paginate').addClass('mt-2');
+                    $('.dataTables_info').addClass('mt-2 text-muted ');
+                }
+            });
+        });
+    </script>
     <x-modal-delete-script>
-        <x-slot name="uri">ips</x-slot>
+        <x-slot name="uri">IPs</x-slot>
     </x-modal-delete-script>
 </x-app-layout>