feat: airlines | list airlines

AirHopper · Dec 14, 2024 · da5f990 · da5f990
1 parent 40980ac
commit da5f990
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 3 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -682,6 +682,14 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -710,6 +718,14 @@ video {
   height: 100vh;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -730,6 +746,18 @@ video {
   width: 100vw;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
 .min-w-\[240px\] {
   min-width: 240px;
 }
@@ -772,6 +800,10 @@ video {
   place-items: center;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -800,6 +832,15 @@ video {
   gap: 1rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -838,6 +879,10 @@ video {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -851,6 +896,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -901,6 +950,16 @@ video {
   background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1006,6 +1065,16 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1123,6 +1192,16 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
+}
+
+.text-yellow-800 {
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -1232,6 +1311,21 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-blue-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-yellow-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-opacity-80:hover {
   --tw-bg-opacity: 0.8;
 }
@@ -1266,6 +1360,16 @@ video {
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
 
+.focus\:bg-blue-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
+}
+
+.focus\:bg-yellow-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
+}
+
 .focus\:bg-opacity-80:focus {
   --tw-bg-opacity: 0.8;
 }
@@ -1315,6 +1419,14 @@ video {
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
 
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
 @media not all and (min-width: 640px) {
   .max-sm\:px-8 {
     padding-left: 2rem;
@@ -1368,3 +1480,22 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-blue-800\/30 {
+    background-color: rgb(30 64 175 / 0.3);
+  }
+
+  .dark\:text-blue-400 {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:hover\:bg-blue-800\/20:hover {
+    background-color: rgb(30 64 175 / 0.2);
+  }
+
+  .dark\:focus\:bg-blue-800\/20:focus {
+    background-color: rgb(30 64 175 / 0.2);
+  }
+}
diff --git a/src/modules/airline/airline.controller.js b/src/modules/airline/airline.controller.js
@@ -1,6 +1,13 @@
+import axios from "axios";
+
 export const index = async (req, res, next) => {
   try {
-    res.edge("pages/airline/index");
+    const api = process.env.API_URL;
+
+    const response = await axios.get(`${api}/api/v1/airlines`);
+    const airlines = response.data.data;
+
+    res.edge("pages/airline/index", { airlines, api });
   } catch (error) {
     next(error);
   }

diff --git a/src/modules/city/city.controller.js b/src/modules/city/city.controller.js
@@ -7,7 +7,6 @@ export const index = async (req, res, next) => {
     const response = await axios.get(`${api}/api/v1/cities`);
     const cities = response.data.data;
 
-
     res.edge("pages/city/index", { cities, api });
   } catch (error) {
     next(error);

diff --git a/src/resources/views/pages/airline/index.edge b/src/resources/views/pages/airline/index.edge
@@ -3,7 +3,43 @@
 
 <div class="p-6 w-full bg-white">
     <!-- Content Head -->
-    <h1>Ini Airlines List Page</h1>
+    <div class="flex justify-end items-center mb-2">
+        <button type="button" 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">
+            Button
+          </button>
+    </div>
+
+    <div class="border-2 rounded-lg p-4 overflow-x-auto">
+        <table class="myTable display" style="width:100%">
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>IATA Code</th>
+                    <th>Icon</th>
+                    <th>Name</th>
+                    <th>Total Airplane</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody class="text-center">
+                @each((airline, index) in airlines)
+                    <tr>
+                        <td>{{ index + 1 }}</td>
+                        <td>{{ airline.iataCode }}</td>
+                        <td><img src="{{ airline.imageUrl }}" class="w-16" alt=""></td>
+                        <td>{{ airline.name }}</td>
+                        <td>---</td>
+                        <td>
+                            {{--  <a href="{{ api }}/airlines/{{ airline.id }}/edit" class="btn btn-primary">Edit</a>  --}}
+                            <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>
+                        </td>
+                    </tr>
+                @end
+            </tbody>
+        </table>
+    </div>
 </div>
 
 @endslot