slicing : cities | failed post data cuz imagekit

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

Hide file tree

Showing 6 changed files with 468 additions and 31 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -646,6 +646,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -734,6 +738,10 @@ video {
   max-width: 20rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -826,6 +834,10 @@ video {
   border-top-right-radius: 0.5rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -834,6 +846,11 @@ video {
   border-style: none;
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -849,6 +866,16 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
@@ -869,6 +896,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -898,6 +930,10 @@ video {
   padding: 0.5rem;
 }
 
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -925,6 +961,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -950,6 +991,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1014,6 +1060,10 @@ video {
   font-weight: 700;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -1177,6 +1227,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-opacity-80:hover {
   --tw-bg-opacity: 0.8;
 }
@@ -1201,6 +1256,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
 .focus\:bg-blue-50:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
@@ -1215,6 +1275,27 @@ video {
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
+}
+
 .active\:bg-blue-50:active {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
@@ -1242,6 +1323,10 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:max-w-lg {
     max-width: 32rem;
   }

diff --git a/public/js/preline.js b/public/js/preline.js
diff --git a/src/modules/city/city.controller.js b/src/modules/city/city.controller.js
@@ -2,10 +2,13 @@ import axios from "axios";
 
 export const index = async (req, res, next) => {
   try {
-    const response = await axios.get("https://airhopper-304285428031.asia-southeast1.run.app/api/v1/cities");
+    const api = process.env.API_URL;
+
+    const response = await axios.get(`${api}/api/v1/cities`);
     const cities = response.data.data;
 
-    res.edge("pages/city/index", { cities });
+
+    res.edge("pages/city/index", { cities, api });
   } catch (error) {
     next(error);
   }

diff --git a/src/resources/views/components/layout/app.edge b/src/resources/views/components/layout/app.edge
@@ -15,13 +15,21 @@
 
   {{-- talwind and apline --}}
   <link rel="stylesheet" href="/css/app.css">
-  <script src="//unpkg.com/alpinejs" defer></script>
+  <link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">
+
+
+  <script src="https://unpkg.com/alpinejs" defer></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
+  <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
 </head>
 
 <body class="font-family-karla h-screen relative font-['Nunito']">
   <div class=" flex flex-row w-full h-screen">
 
     @include('components/ui/sidebar')
+
     <div class="bg-gray-500 w-full flex flex-col">
       <div class="p-6 w-full bg-white">
         <!-- Content Head -->
@@ -32,4 +40,30 @@
       </div>
     </div>
   </div>
-</body>
+
+  <script type="module">
+    import preline from '/js/preline.js'
+  </script>
+
+  <script>
+
+    function showToast(type, title, text) {
+        Swal.fire({
+            title: title,
+            text: text,
+            icon: type,
+            toast: true,
+            position: 'bottom-end',
+            showConfirmButton: false,
+            timer: 3000,
+            timerProgressBar: true,
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer);
+                toast.addEventListener('mouseleave', Swal.resumeTimer);
+            }
+        });
+    }
+
+    new DataTable('.myTable');
+  </script>
+</body>
diff --git a/src/resources/views/components/ui/city-modal.edge b/src/resources/views/components/ui/city-modal.edge
@@ -1,7 +1,7 @@
 <div x-data="{ modalOpen: false }" @keydown.escape.window="modalOpen = false" class="relative z-50 w-auto h-auto">
     <button @click="modalOpen=true"
         class="px-4 py-1 rounded-md duration-300 transition-all ease-in-out hover:text-gray-200 shadow-lg font-semibold text-md flex flex-row gap-2 {{ buttonClass }}">
-        {{{ await $slots.main() }}}
+        {{{ await $slots.header() }}}
     </button>
     <template x-teleport="body">
         <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
@@ -28,7 +28,7 @@
                     </button>
                 </div>
                 <div class="relative w-auto">
-                    <p>This is placeholder text. Replace it with your own content.</p>
+                    {{{ await $slots.content() }}}
                 </div>
             </div>
         </div>