step 24 : list setting mobile
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('settingsPage', () => ({
|
||||
// 0. Init dijalankan sebelum inisialisasi
|
||||
init(){
|
||||
|
||||
},
|
||||
// 1. Inisialisasi Start
|
||||
showDialogAdd: false,
|
||||
objAddForm: {
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user