step 24 : list setting mobile

This commit is contained in:
sindhu
2025-03-14 01:56:42 +07:00
parent 6dc019a513
commit ea4f0736e8
2 changed files with 76 additions and 0 deletions

View File

@@ -1,5 +1,9 @@
document.addEventListener('alpine:init', () => {
Alpine.data('settingsPage', () => ({
// 0. Init dijalankan sebelum inisialisasi
init(){
},
// 1. Inisialisasi Start
showDialogAdd: false,
objAddForm: {

View File

@@ -1045,6 +1045,78 @@
<!-- Bagian Kanan (PORT STATUS) -->
<div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<!-- table become list in mobile -->
<div class="flex flex-row mb-6 lg:hidden lg:mb-0">
<div class="flex flex-col w-full lg:flex-row mb-5">
<!-- 1 -->
<div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">TCP Server</h2>
<div class="relative flex h-4 w-4">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined text-[#2196F3]">edit</span></button>
</div>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Info</p>
<p class="text-black/87 font-normal text-sm mb-2"> Port 5001</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Instrument</p>
<p class="text-black/87 font-normal text-sm mb-2"> Hema 01</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Interface</p>
<p class="text-black/87 font-normal text-sm mb-2"> Xn550</p>
</div>
</div>
<!-- 2 -->
<div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">TCP Client</h2>
<div class="relative flex h-4 w-4">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined text-[#2196F3]">edit</span></button>
</div>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Info</p>
<p class="text-black/87 font-normal text-sm mb-2"> Server 192.168.0.1, Port 4000</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Instrument</p>
<p class="text-black/87 font-normal text-sm mb-2"> Axsym</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Interface</p>
<p class="text-black/87 font-normal text-sm mb-2"> Axsym</p>
</div>
</div>
<!-- 3 -->
<div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">RS232</h2>
<div class="relative flex h-4 w-4">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined text-[#2196F3]">edit</span></button>
</div>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Info</p>
<p class="text-black/87 font-normal text-sm mb-2"> ttyS01, 9600, N, 8, 1</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Instrument</p>
<p class="text-black/87 font-normal text-sm mb-2"> Cobas C311</p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Interface</p>
<p class="text-black/87 font-normal text-sm mb-2"> C311</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="flex flex-col w-full lg:flex-row mb-5">
<!-- 1 -->