step 25 : slicing add setting mobile, add template x-if dropdown data kosong

v1/js/settings.js

@@ -270,6 +270,32 @@ document.addEventListener('alpine:init', () => {
                 idStopBit: -1,
                 namaStopBit: ''
             };
+
+            // 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'
+            }
         },
         onChangeInterface(item) {
             this.openInterface = false;

v1/js/settings_mobile_add.js

@@ -0,0 +1,221 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('settingsPageMobileAdd', () => ({
+        // 0. Init dijalankan sebelum inisialisasi
+        init() {
+
+        },
+        // 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) {
+            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: ''
+            };
+
+            // 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'
+            }
+        },
+        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;
+        },
+    }))
+})

v1/settings.html

@@ -192,6 +192,9 @@
                             <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-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">
@@ -244,6 +247,9 @@
                                     <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">
@@ -274,6 +280,9 @@
                                     <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">
@@ -337,6 +346,9 @@
                                     <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">
@@ -367,6 +379,9 @@
                                     <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">
@@ -404,6 +419,9 @@
                                     <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">
@@ -447,6 +465,9 @@
                                     <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">
@@ -477,6 +498,9 @@
                                     <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">
@@ -507,6 +531,9 @@
                                     <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">
@@ -537,6 +564,9 @@
                                     <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">
@@ -567,6 +597,9 @@
                                     <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">
@@ -632,6 +665,9 @@
                             <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-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">
@@ -682,6 +718,9 @@
                                     <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">
@@ -712,6 +751,9 @@
                                     <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">
@@ -775,6 +817,9 @@
                                     <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">
@@ -805,6 +850,9 @@
                                     <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">
@@ -842,6 +890,9 @@
                                     <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">
@@ -885,6 +936,9 @@
                                     <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">
@@ -915,6 +969,9 @@
                                     <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">
@@ -945,6 +1002,9 @@
                                     <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">
@@ -975,6 +1035,9 @@
                                     <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">
@@ -1005,6 +1068,9 @@
                                     <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">
@@ -1040,7 +1106,9 @@
         <!-- 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>
-            <span class="material-symbols-outlined text-[#2196F3]">add</span>
+            <a href="settings_mobile_add.html">
+                <span class="material-symbols-outlined text-[#2196F3]">add</span>
+            </a>
         </div>
 
         <!-- Bagian Kanan (PORT STATUS) -->

v1/settings_mobile_add.html

@@ -0,0 +1,488 @@
+<!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">Add</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="settingsPageMobileAdd">
+        <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"
+                            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"
+                            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"
+                            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_add.js"></script>
+</body>