step 14 : setting desktop, modal show jenis, selected jenis

v1/settings.html

@@ -114,7 +114,28 @@
     </div>
 
     <!-- Konten utama -->
-    <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen">
+    <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="{ 
+            showDialogAdd: false, 
+            selectedJenis: {
+                idJenis: -1,
+                namaJenis: 'Jenis'
+            },
+            openJenis: false,
+            dataJenis: [
+                {
+                    idJenis:1,
+                    namaJenis:'TCP Server',
+                },
+                {
+                    idJenis:2,
+                    namaJenis:'TCP Client',
+                },
+                {
+                    idJenis:3,
+                    namaJenis:'RS232',
+                },
+            ],
+        }">
         <!-- Bagian Kiri (Tabel) -->
         <div class="hidden lg: bg-white w-full lg:w-1/2 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
             <div class="p-2 text-black font-medium text-lg rounded-lg">Setting</div>
@@ -129,7 +150,9 @@
                             <th class="p-2 font-medium text-gray-900 w-[15%] text-left">Instrument</th>
                             <th class="p-2 font-medium text-gray-900 w-[15%] text-left">Interface</th>
                             <th class="p-2 font-medium text-gray-900 w-[5%] text-center">
-                                <span class="material-symbols-outlined">add</span>
+                                <button @click="showDialogAdd = !showDialogAdd">
+                                    <span class="material-symbols-outlined">add</span>
+                                </button>
                             </th>
                         </tr>
                     </thead>
@@ -142,7 +165,7 @@
                             <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2">Hema 01</td>
                             <td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2">XN550</td>
                             <td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
-                                <a href="#"><span class="material-symbols-outlined">edit</span></a>
+                                <button><span class="material-symbols-outlined">edit</span></button>
                             </td>
                         </tr>
                     </tbody>
@@ -150,6 +173,56 @@
             </div>
         </div>
 
+        <!-- modal add desktop -->
+        <div x-show="showDialogAdd">
+            <div class="fixed z-10 inset-0">
+                <div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
+                    <!-- box -->
+                    <div class="flex flex-col bg-white rounded-lg w-2/3">
+                        <!-- header -->
+                        <div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
+                            <h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
+                        </div>
+                        <!-- body -->
+                        <div class="flex flex-1 bg-white px-6 py-5">
+                            <div class="relative w-full">
+                                <!-- buka dropdown -->
+                                <button
+                                    @click="openJenis = !openJenis"
+                                    x-text="selectedJenis.idJenis != -1 ? selectedJenis.namaJenis : 'Jenis'"
+                                    class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-left">
+                                </button>
+                                <!-- list menu -->
+                                <div  
+                                    x-show="openJenis"
+                                    class="absolute bg-white w-full border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto">
+                                    <ul>
+                                        <template x-for="item in dataJenis" :key="item.idJenis">
+                                            <li 
+                                                :id="item.idJenis"
+                                                @click="selectedJenis = item; openJenis = false"
+                                                class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                                <button x-text="item.namaJenis"></button>
+                                            </li>
+                                        </template>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- footer -->
+                        <div class="h-10 px-4 py-2">
+                            <div class="flex items-end justify-end">
+                                <button @click="showDialogAdd = !showDialogAdd"
+                                    class="mr-3 text-[#FF5252] font-bold text-sm uppercase">Cancel</button>
+                                <button class="text-[#1976D2] font-bold text-sm uppercase">Save</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- modal add desktop -->
+
         <!-- Kiri Mobile -->
         <div class="bg-[#F2F9FF] h-5 flex justify-between space-x-2 lg:hidden">
             <h2 class="text-black/87 font-medium text-xl mb-4">Setting</h2>