feat: airport | delete airport

AirHopper · Dec 21, 2024 · 24554ad · 24554ad
1 parent f549907
commit 24554ad
Showing 1 changed file with 71 additions and 3 deletions.
diff --git a/src/resources/views/pages/airport/index.edge b/src/resources/views/pages/airport/index.edge
@@ -81,9 +81,48 @@
                         <td>{{ airport.City ? airport.City.name : '-' }}</td>
                         <td>{{ airport.City ? airport.City.country : '-' }}</td>
                         <td>
-                            <button type="button" class="shadow-md py-1 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none">
-                                Edit
-                            </button>
+                            <div class="flex flex-row gap-x-2">
+                                @component('components/ui/modal', {
+                                    title: 'Edit Airport',
+                                    buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none',
+                                    })
+                                    @slot('header')
+                                        Edit
+                                    @end
+                                    @slot('content')
+                                    <div class="flex flex-col gap-y-2">
+                                        <h1 class="text-sm text-gray-500">Edit Airport</h1>
+                                        {{ airport.iataCode }}
+
+                                        <div class="flex flex-row gap-x-2">
+                                            {{--  <button type="button" onclick="editAirport({{ airport.iataCode }})" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Delete</button>  --}}
+                                            <button type="button" @click="modalOpen=false" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-300 text-blue-800 hover:bg-blue-400 focus:outline-none focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Cancel</button>
+                                        </div>
+                                    </div>
+
+                                    @end
+                                @end
+                                @component('components/ui/modal', {
+                                    title: 'Delete Airport',
+                                    buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none',
+                                    })
+                                    @slot('header')
+                                        Delete
+                                    @end
+                                    @slot('content')
+                                    <div class="flex flex-col gap-y-2 text-center">
+                                        <h1 class="text-sm text-red-800">Are you sure you want to delete this Airport?</h1>
+                                        <h1 class="text-sm text-gray-900 font-bold">{{ airport.name }}</h1>
+
+                                        <div class="flex flex-row gap-x-2">
+                                            <button type="button" onclick="deleteAirport('{{ airport.iataCode }}')" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Delete</button>
+                                            <button type="button" @click="modalOpen=false" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-300 text-blue-800 hover:bg-blue-400 focus:outline-none focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Cancel</button>
+                                        </div>
+                                    </div>
+
+                                    @end
+                                @end
+                            </div>
                         </td>
                     </tr>
                 @else
@@ -145,6 +184,35 @@
         });
     });
 
+
+    function deleteAirport(iataCode) {
+        $.ajax({
+            url: '{{ api }}/api/v1/airports/' + iataCode,
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            success: function (response) {
+                showToast("success", "Success", "Airport deleted successfully!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            },
+            error: function (xhr) {
+                if (xhr.responseJSON && xhr.responseJSON.errors) {
+                    const errors = xhr.responseJSON.errors;
+                    let errorMessages = '';
+                    errors.forEach(error => {
+                        errorMessages += `${error.field}: ${error.message}\n`;
+                    });
+                    showToast("error", "Error", errorMessages);
+                } else {
+                    showToast("error", "Error", "An error occurred. Please try again.");
+                }
+            },
+        });
+    }
+
 </script>
 
 @endslot