From 192d5ef0246e8ccebe96c2fdfc94df57b53273da Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Fri, 14 Mar 2025 06:09:55 +0700
Subject: [PATCH] step 26 : slicing edit setting mobile, onclick href edit
 setting mobile set localstorage

---
 v1/js/settings.js             |   8 +-
 v1/js/settings_mobile_edit.js | 309 +++++++++++++++++++++
 v1/settings.html              |  85 ++----
 v1/settings_mobile_edit.html  | 491 ++++++++++++++++++++++++++++++++++
 4 files changed, 828 insertions(+), 65 deletions(-)
 create mode 100644 v1/js/settings_mobile_edit.js
 create mode 100644 v1/settings_mobile_edit.html

diff --git a/v1/js/settings.js b/v1/js/settings.js
index 81a2ef1..a910b99 100644
--- a/v1/js/settings.js
+++ b/v1/js/settings.js
@@ -6,6 +6,7 @@ document.addEventListener('alpine:init', () => {
         },
         // 1. Inisialisasi Start
         showDialogAdd: false,
+        showDialogEdit: false,
         objAddForm: {
             // idJenis 1
             port: '',
@@ -358,7 +359,12 @@ document.addEventListener('alpine:init', () => {
         },
         closeDialogEdit() {
             this.showDialogEdit = !this.showDialogEdit;
-        }
+        },
+        editMobilePage(item) {
+            var json = JSON.stringify(item);
+            localStorage.setItem('itemEditMobile', json);
+            window.location.href = "settings_mobile_edit.html"
+        },
         // 2. Fungsi End
     }))
 })
\ No newline at end of file
diff --git a/v1/js/settings_mobile_edit.js b/v1/js/settings_mobile_edit.js
new file mode 100644
index 0000000..78cf9e9
--- /dev/null
+++ b/v1/js/settings_mobile_edit.js
@@ -0,0 +1,309 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('settingsPageMobileEdit', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init() {
+            let itemEdit = localStorage.getItem('itemEditMobile');
+            if (itemEdit) {
+                let json = JSON.parse(itemEdit);
+
+                this.selectedJenis = {
+                    idJenis: json.idJenis || -1,
+                    namaJenis: json.namaJenis || 'Jenis'
+                };
+
+                this.port = json.port || '';
+                this.server = json.server || '';
+
+                this.selectedInterface = {
+                    idInterface: json.idInterface || -1,
+                    namaInterface: json.namaInterface || 'Interface'
+                };
+
+                this.selectedInstrument = {
+                    idInstrument: json.idInstrument || -1,
+                    namaInstrument: json.namaInstrument || 'Instrument'
+                };
+
+                this.selectedSerial = {
+                    idSerial: json.idSerial || -1,
+                    namaSerial: json.namaSerial || 'Serial'
+                };
+
+                this.speed = json.speed || '';
+
+                this.selectedParity = {
+                    idParity: json.idParity || -1,
+                    namaParity: json.namaParity || 'Parity'
+                };
+
+                this.selectedDataBit = {
+                    idDataBit: json.idDataBit || -1,
+                    namaDataBit: json.namaDataBit || 'Data Bit'
+                };
+
+                this.selectedStopBit = {
+                    idStopBit: json.idStopBit || -1,
+                    namaStopBit: json.namaStopBit || 'Stop Bit'
+                };
+            }
+        },
+        // 1. Inisialisasi Start
+        objAddForm: {
+            // idJenis 1
+            port: '',
+            idInterface: -1,
+            namaInterface: '',
+            idInstrument: -1,
+            namaInstrument: '',
+            // idJenis 2 ketambahan server
+            server: '',
+            // idJenis 3 
+            idSerial: -1,
+            namaSerial: '',
+            speed: '',
+            idParity: -1,
+            namaParity: '',
+            idDataBit: -1,
+            namaDataBit: '',
+            idStopBit: -1,
+            namaStopBit: ''
+        },
+        openJenis: false,
+        selectedJenis: {
+            idJenis: -1,
+            namaJenis: 'Jenis'
+        },
+        dataJenis: [
+            {
+                idJenis: 1,
+                namaJenis: 'TCP Server',
+            },
+            {
+                idJenis: 2,
+                namaJenis: 'TCP Client',
+            },
+            {
+                idJenis: 3,
+                namaJenis: 'RS232',
+            },
+        ],
+        selectedInterface: {
+            idInterface: -1,
+            namaInterface: 'Interface'
+        },
+        openInterface: false,
+        dataInterface: [
+            {
+                idInterface: 1,
+                namaInterface: 'XN550',
+            },
+            {
+                idInterface: 2,
+                namaInterface: 'Axsym',
+            },
+            {
+                idInterface: 3,
+                namaInterface: 'C311',
+            },
+        ],
+        selectedInstrument: {
+            idInstrument: -1,
+            namaInstrument: 'Instrument'
+        },
+        openInstrument: false,
+        dataInstrument: [
+            {
+                idInstrument: 1,
+                namaInstrument: 'Hema 01',
+            },
+            {
+                idInstrument: 2,
+                namaInstrument: 'Axsym',
+            },
+            {
+                idInstrument: 3,
+                namaInstrument: 'Cobas C311',
+            },
+        ],
+        selectedSerial: {
+            idSerial: -1,
+            namaSerial: 'Serial'
+        },
+        openSerial: false,
+        dataSerial: [
+            {
+                idSerial: 1,
+                namaSerial: 'ttyS0'
+            },
+            {
+                idSerial: 2,
+                namaSerial: 'psx3'
+            },
+        ],
+        selectedParity: {
+            idParity: -1,
+            namaParity: 'Parity'
+        },
+        openParity: false,
+        dataParity: [
+            {
+                idParity: 1,
+                namaParity: 'None'
+            },
+            {
+                idParity: 2,
+                namaParity: 'All'
+            },
+        ],
+        selectedDataBit: {
+            idDataBit: -1,
+            namaDataBit: 'DataBit'
+        },
+        openDataBit: false,
+        dataDataBit: [
+            {
+                idDataBit: 1,
+                namaDataBit: '1'
+            },
+            {
+                idDataBit: 2,
+                namaDataBit: '6'
+            },
+        ],
+        selectedStopBit: {
+            idStopBit: -1,
+            namaStopBit: 'StopBit'
+        },
+        openStopBit: false,
+        dataStopBit: [
+            {
+                idStopBit: 1,
+                namaStopBit: '0'
+            },
+            {
+                idStopBit: 2,
+                namaStopBit: '1'
+            },
+        ],
+        // 1. Inisialisasi End
+        // 2. Fungsi Start
+        onChangeJenis(item) {
+            let itemEdit = localStorage.getItem('itemEditMobile');
+            if (itemEdit != null) {
+                let json = JSON.parse(itemEdit);
+
+                this.selectedJenis = {
+                    idJenis: json.idJenis || -1,
+                    namaJenis: json.namaJenis || 'Jenis'
+                };
+
+                this.port = json.port || '';
+                this.server = json.server || '';
+
+                this.selectedInterface = {
+                    idInterface: json.idInterface || -1,
+                    namaInterface: json.namaInterface || 'Interface'
+                };
+
+                this.selectedInstrument = {
+                    idInstrument: json.idInstrument || -1,
+                    namaInstrument: json.namaInstrument || 'Instrument'
+                };
+
+                this.selectedSerial = {
+                    idSerial: json.idSerial || -1,
+                    namaSerial: json.namaSerial || 'Serial'
+                };
+
+                this.speed = json.speed || '';
+
+                this.selectedParity = {
+                    idParity: json.idParity || -1,
+                    namaParity: json.namaParity || 'Parity'
+                };
+
+                this.selectedDataBit = {
+                    idDataBit: json.idDataBit || -1,
+                    namaDataBit: json.namaDataBit || 'Data Bit'
+                };
+
+                this.selectedStopBit = {
+                    idStopBit: json.idStopBit || -1,
+                    namaStopBit: json.namaStopBit || 'Stop Bit'
+                };
+            } else {
+                // clear selected
+                this.selectedInterface = {
+                    idInterface: -1,
+                    namaInterface: 'Interface'
+                };
+                this.selectedInstrument = {
+                    idInstrument: -1,
+                    namaInstrument: 'Instrument'
+                }
+                this.selectedSerial = {
+                    idSerial: -1,
+                    namaSerial: 'Serial'
+                },
+                this.selectedParity = {
+                    idParity: -1,
+                    namaParity: 'Parity'
+                },
+                this.selectedDataBit = {
+                    idDataBit: -1,
+                    namaDataBit: 'DataBit'
+                },
+                this.selectedStopBit = {
+                    idStopBit: -1,
+                    namaStopBit: 'StopBit'
+                }
+            }
+
+            this.openJenis = false;
+            this.selectedJenis = item;
+
+            // clear form
+            this.objAddForm = {
+                port: '',
+                idInterface: -1,
+                namaInterface: '',
+                idInstrument: -1,
+                namaInstrument: '',
+                server: '',
+                idSerial: -1,
+                namaSerial: '',
+                speed: '',
+                idParity: -1,
+                namaParity: '',
+                idDataBit: -1,
+                namaDataBit: '',
+                idStopBit: -1,
+                namaStopBit: ''
+            };
+        },
+        onChangeInterface(item) {
+            this.openInterface = false;
+            this.selectedInterface = item;
+        },
+        onChangeInstrument(item) {
+            this.openInstrument = false;
+            this.selectedInstrument = item;
+        },
+        onChangeSerial(item) {
+            this.openSerial = false;
+            this.selectedSerial = item;
+        },
+        onChangeParity(item) {
+            this.openParity = false;
+            this.selectedParity = item;
+        },
+        onChangeDataBit(item) {
+            this.openDataBit = false;
+            this.selectedDataBit = item;
+        },
+        onChangeStopBit(item) {
+            this.openStopBit = false;
+            this.selectedStopBit = item;
+        },
+    }))
+})
\ No newline at end of file
diff --git a/v1/settings.html b/v1/settings.html
index 637ad70..3afc6a7 100644
--- a/v1/settings.html
+++ b/v1/settings.html
@@ -1116,72 +1116,29 @@
             <!-- 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>
+                    <template x-for="item in dataSetting" :key="item.idSetting">
+                        <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" x-text="item.namaJenis"></h2>
+                                <div class="relative flex h-4 w-4">
+                                    <button @click="editMobilePage(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" x-text="item.info"></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" x-text="item.namaInstrument"></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" x-text="item.namaInterface"></p>
                             </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>
+                    </template>
                 </div>
             </div>
 
diff --git a/v1/settings_mobile_edit.html b/v1/settings_mobile_edit.html
new file mode 100644
index 0000000..0b9edb8
--- /dev/null
+++ b/v1/settings_mobile_edit.html
@@ -0,0 +1,491 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Settings XPORT</title>
+    <!-- tailwind cdn -->
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <!-- alpine cdn -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    <!-- material Symbols -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+</head>
+
+<body class="bg-white h-screen flex flex-col">
+
+    <!-- appbar -->
+    <div class="bg-white h-15 flex items-center justify-start px-6">
+        <a href="settings.html">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black/87" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+        </a>
+        <h3 class="font-medium text-xl text-black/87 ml-3">Edit</h3>
+    </div>
+    <!-- appbar -->
+
+    <!-- konten utama -->
+    <div class="flex-1 flex flex-col lg:flex-row px-5 pt-6 overflow-auto h-[calc(100vh-60px)]"
+        x-data="settingsPageMobileEdit">
+        <div class="relative w-full lg:hidden">
+            <!-- jenis dropdown -->
+            <fieldset @click.outside="openJenis = false" class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 
+        focus-within:ring-blue-500 px-3 pt-2 pb-2 lg:hidden">
+                <span x-text="selectedJenis.idJenis != -1 ? 'Jenis' : selectedJenis.namaJenis" class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all 
+        peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                </span>
+                <button @click="openJenis = !openJenis" type="button"
+                    class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                    <span x-text="selectedJenis.namaJenis" class="text-left"></span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                        :class="{ 'rotate-180': openJenis }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                </button>
+            </fieldset>
+
+            <!-- List menu -->
+            <div x-show="openJenis"
+                class="absolute left-0 w-[calc(100%)] bg-white border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto mt-0">
+                <ul>
+                    <template x-if="dataJenis.length === 0">
+                        <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                    </template>
+                    <template x-for="item in dataJenis" :key="item.idJenis">
+                        <li :id="item.idJenis" @click="onChangeJenis(item)"
+                            class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                            <button x-text="item.namaJenis"></button>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+
+            <!-- garis putus putus -->
+            <template x-if="selectedJenis.idJenis !== -1">
+                <div class="border-t border-dashed border-gray-400 mt-5 mb-5"></div>
+            </template>
+
+
+            <!-- namaJenis TCP Server  -->
+            <template x-if="selectedJenis.idJenis === 1">
+                <div>
+                    <!-- port -->
+                    <label for="Port"
+                        class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <input type="text" id="Port" x-model="port"
+                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                            placeholder="Port" />
+
+                        <span
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                            Port
+                        </span>
+                    </label>
+                    <div class="mb-5"></div>
+                    <!-- interface -->
+                    <fieldset @click.outside="openInterface = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInterface = !openInterface" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInterface }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInterface"
+                        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-if="dataInterface.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInterface" :key="item.idInterface">
+                                <li :id="item.idInterface" @click="onChangeInterface(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInterface"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- instrument -->
+                    <fieldset @click.outside="openInstrument = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInstrument.idInstrument != -1 ? 'Instrument' : selectedInstrument.namaInstrument"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInstrument = !openInstrument" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInstrument"
+                        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-if="dataInstrument.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInstrument" :key="item.idInstrument">
+                                <li :id="item.idInstrument" @click="onChangeInstrument(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInstrument"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                </div>
+            </template>
+            <!-- namaJenis TCP Server  -->
+
+            <!-- namaJenis TCP Client -->
+            <template x-if="selectedJenis.idJenis === 2">
+                <div>
+                    <!-- server -->
+                    <label for="Server"
+                        class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <input type="text" id="Server" x-model="server"
+                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                            placeholder="Server" />
+
+                        <span
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                            Server
+                        </span>
+                    </label>
+                    <div class="mb-5"></div>
+                    <!-- port -->
+                    <label for="Port"
+                        class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <input type="text" id="Port"
+                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                            placeholder="Port" />
+
+                        <span
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                            Port
+                        </span>
+                    </label>
+                    <div class="mb-5"></div>
+                    <!-- interface -->
+                    <fieldset @click.outside="openInterface = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInterface = !openInterface" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInterface }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInterface"
+                        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-if="dataInterface.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInterface" :key="item.idInterface">
+                                <li :id="item.idInterface" @click="onChangeInterface(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInterface"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- instrument -->
+                    <fieldset @click.outside="openInstrument = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInstrument.idInstrument != -1 ? 'Instrument' : selectedInstrument.namaInstrument"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInstrument = !openInstrument" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInstrument"
+                        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-if="dataInstrument.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInstrument" :key="item.idInstrument">
+                                <li :id="item.idInstrument" @click="onChangeInstrument(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInstrument"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                </div>
+            </template>
+            <!-- namaJenis TCP Client -->
+
+            <!-- namaJenis RS232 -->
+            <template x-if="selectedJenis.idJenis === 3">
+                <div>
+                    <!-- serial -->
+                    <fieldset @click.outside="openSerial = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span x-text="selectedSerial.idSerial != -1 ? 'Serial' : selectedSerial.namaSerial"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openSerial = !openSerial" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedSerial.namaSerial" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openSerial }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openSerial"
+                        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-if="dataSerial.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataSerial" :key="item.idSerial">
+                                <li :id="item.idSerial" @click="onChangeSerial(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaSerial"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- speed -->
+                    <label for="Speed"
+                        class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
+                        <input type="text" id="Speed" x-model="speed"
+                            class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
+                            placeholder="Speed" />
+
+                        <span
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                            Speed
+                        </span>
+                    </label>
+                    <div class="mb-5"></div>
+                    <!-- parity -->
+                    <fieldset @click.outside="openParity = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span x-text="selectedParity.idParity != -1 ? 'DataBit' : selectedParity.namaParity"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openParity = !openParity" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedParity.namaParity" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openParity }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openParity"
+                        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-if="dataParity.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataParity" :key="item.idParity">
+                                <li :id="item.idParity" @click="onChangeParity(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaParity"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- data bits -->
+                    <fieldset @click.outside="openDataBit = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span x-text="selectedDataBit.idDataBit != -1 ? 'DataBit' : selectedDataBit.namaDataBit"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openDataBit = !openDataBit" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedDataBit.namaDataBit" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openDataBit }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openDataBit"
+                        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-if="dataDataBit.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataDataBit" :key="item.idDataBit">
+                                <li :id="item.idDataBit" @click="onChangeDataBit(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaDataBit"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- stop bit -->
+                    <fieldset @click.outside="openStopBit = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span x-text="selectedStopBit.idStopBit != -1 ? 'StopBit' : selectedStopBit.namaStopBit"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openStopBit = !openStopBit" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedStopBit.namaStopBit" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openStopBit }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openStopBit"
+                        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-if="dataStopBit.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataStopBit" :key="item.idStopBit">
+                                <li :id="item.idStopBit" @click="onChangeStopBit(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaStopBit"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- interface -->
+                    <fieldset @click.outside="openInterface = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInterface.idInterface != -1 ? 'Interface' : selectedInterface.namaInterface"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInterface = !openInterface" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInterface.namaInterface" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInterface }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInterface"
+                        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-if="dataInterface.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInterface" :key="item.idInterface">
+                                <li :id="item.idInterface" @click="onChangeInterface(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInterface"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                    <!-- instrument -->
+                    <fieldset @click.outside="openInstrument = false"
+                        class="relative border border-gray-400 rounded-md focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 px-3 pt-2 pb-2">
+                        <span
+                            x-text="selectedInstrument.idInstrument != -1 ? 'Instrument' : selectedInstrument.namaInstrument"
+                            class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+                        </span>
+                        <button @click="openInstrument = !openInstrument" type="button"
+                            class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
+                            <span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
+                                :class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </fieldset>
+                    <div x-show="openInstrument"
+                        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-if="dataInstrument.length === 0">
+                                <li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
+                            </template>
+                            <template x-for="item in dataInstrument" :key="item.idInstrument">
+                                <li :id="item.idInstrument" @click="onChangeInstrument(item)"
+                                    class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
+                                    <button x-text="item.namaInstrument"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                    <div class="mb-5"></div>
+                </div>
+            </template>
+            <!-- namaJenis RS232 -->
+        </div>
+
+        <!-- space bottom -->
+        <div class="mt-30"></div>
+        <!-- button save -->
+        <template x-if="selectedJenis.idJenis !== -1">
+            <div
+                class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-[0px_0px_2px_0px_rgba(145,158,171,0.24),-20px_20px_40px_-4px_rgba(145,158,171,0.24)] p-4">
+                <button class="hover:text-white hover:bg-[#2196F3] font-bold text-sm uppercase px-4 py-2 rounded-[4px] transition duration-200 
+                    bg-[#1976D2] text-white w-full">
+                    Save
+                </button>
+            </div>
+        </template>
+    </div>
+
+    <!-- konten utama -->
+
+    <script src="js/settings_mobile_edit.js"></script>
+</body>
+
+</html>
\ No newline at end of file