From ea4f0736e801cbaa89b3204892f5c12f49270f54 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Fri, 14 Mar 2025 01:56:42 +0700
Subject: [PATCH] step 24 : list setting mobile

---
 v1/js/settings.js |  4 +++
 v1/settings.html  | 72 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/v1/js/settings.js b/v1/js/settings.js
index 482d35b..56a453d 100644
--- a/v1/js/settings.js
+++ b/v1/js/settings.js
@@ -1,5 +1,9 @@
 document.addEventListener('alpine:init', () => {
     Alpine.data('settingsPage', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init(){
+
+        },
         // 1. Inisialisasi Start
         showDialogAdd: false,
         objAddForm: {
diff --git a/v1/settings.html b/v1/settings.html
index 4eb9eb4..237af0d 100644
--- a/v1/settings.html
+++ b/v1/settings.html
@@ -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 -->