sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sindhu
2025-03-12 11:58:31 +07:00
parent 3197560e9e
commit f0f518400e
1 changed files with 76 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
v1/settings.html
View File

@@ -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>