sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 53 : copy dan paste v1, untuk komponen reusable

Browse Source
This commit is contained in:
sindhu
2025-04-17 05:53:28 +07:00
parent 7bb10dbcf5
commit 45f7beabe8
31 changed files with 11999 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

730
v1-test-cmp/assay_format.html Normal file
View File

@@ -0,0 +1,730 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assay Format 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-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li class="bg-[#E3F2FD] rounded-sm p-3">
<a href="assay_format.html" class="text-[#2196F3] transition font-bold hover:text-black/87">ASSAY
FORMAT</a>
</li>
<li>
<a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li>
<a href="master_data.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">MASTER
DATA</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a href="settings.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">settings</span>
Setting
</div>
</a>
</li>
<li class="bg-[#E3F2FD] p-2 rounded">
<a href="assay_format.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-[#2196F3] font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#2196F3]">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<a href="result.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<a href="order.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Order
</div>
</a>
</li>
<li>
<a href="master_data.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Master Data
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="assayFormat">
<!-- Bagian Kiri (Tabel) -->
<div class="hidden lg: bg-white w-full lg:w-1/2 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="p-2 text-black font-medium text-lg rounded-lg">Assay Format</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- inputan search -->
<div class="flex flex-row gap-4 w-full">
<div class="relative w-1/2">
<!-- instrument -->
<fieldset @click.outside="openInstrumentSearch = 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="openInstrumentSearch = !openInstrumentSearch" 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': openInstrumentSearch }" 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="openInstrumentSearch"
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="onChangeInstrumentSearch(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>
<div class="w-1/2">
<!-- Assay No -->
<label for="Assay No"
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="Assay No" x-model="assayNo"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay No" />
<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">
Assay No
</span>
</label>
</div>
</div>
<!-- space 16 -->
<div class="mb-0 lg:mb-4"></div>
<!-- Table Desktop -->
<div class="flex-1 overflow-auto h-full">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[25%] text-left text-xs">Instrument</th>
<th class="p-2 font-medium text-gray-900 w-[40%] text-left text-xs">Assay Code</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Decimal Font</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Formula</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-center">
<button @click="showDialogAdd = !showDialogAdd">
<span class="material-symbols-outlined">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="item in dataAssayFormat" :key="item.idAssayFormat">
<tr>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.namaInstrument"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.assayCode"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.decimalFont"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.formula"></td>
<td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined">edit</span></button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- modal add desktop -->
<div x-show="showDialogAdd" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
</div>
<!-- body -->
<div class="flex flex-1 bg-white px-6 py-5">
<div class="relative w-full">
<!-- 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="selectedInstrumentAdd.idInstrument != -1 ? 'Instrument' : selectedInstrumentAdd.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="selectedInstrumentAdd.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>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Assay Code -->
<label for="Assay Code"
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="Assay Code" autocomplete="off" x-model="assayCode"
@change="onChangeAssayCodeAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay Code" />
<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">
Assay Code
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Decimal Font -->
<label for="Decimal"
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="Decimal" x-model="decimalFont" autocomplete="off"
@change="onChangeDecimalFontAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Decimal" />
<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">
Decimal
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- formula -->
<label for="Formula"
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<textarea id="Formula" x-model="formulaAdd" autocomplete="off"
@change="onChangeFormulaAdd()"
class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
placeholder="Formula"></textarea>
<span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all
peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0
peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
:class="formulaAdd.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
Formula
</span>
</label>
<!-- btn verifikasi -->
<div class="flex justify-end items-end">
<button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false
? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
: 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
">
<!-- Loading Spinner -->
<div x-show="loadingVerifikasi"
class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
</div>
<span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
</button>
</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- hasil verifikasi -->
<div>
<template x-if="isErrorVerifikasi === false">
<p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
</template>
<template x-if="isErrorVerifikasi === true">
<p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
</template>
</div>
</div>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex items-end justify-end">
<button @click="closeDialog()" class="mr-3 text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#FF5252] px-4 py-2 rounded-md">
Cancel
</button>
<button @click="save()" :class="objForm.isValidForm
? 'text-white bg-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#135BA1]'
: 'bg-gray-300 text-gray-500 cursor-not-allowed px-4 py-2 rounded-md'"
:disabled="!objForm.isValidForm">
Save
</button>
</div>
</div>
</div>
</div>
</div>
<!-- modal add desktop -->
<!-- modal edit desktop -->
<div x-show="showDialogEdit" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">edit</h3>
</div>
<!-- body -->
<div class="flex flex-1 bg-white px-6 py-5">
<div class="relative w-full">
<!-- 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="selectedInstrumentEdit.idInstrument != -1 ? 'Instrument' : selectedInstrumentEdit.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="selectedInstrumentEdit.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>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Assay Code -->
<label for="Assay Code"
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="Assay Code" x-model="assayCodeEdit" autocomplete="off"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay Code" />
<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">
Assay Code
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Decimal Font -->
<label for="Decimal"
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="Decimal" x-model="decimalFontEdit"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Decimal" autocomplete="off" />
<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">
Decimal
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<label for="Formula"
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<textarea id="Formula" x-model="formulaEdit" autocomplete="off"
class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
placeholder="Formula"></textarea>
<span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all
peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0
peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
:class="formulaEdit.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
Formula
</span>
</label>
<!-- btn verifikasi -->
<div class="flex justify-end items-end">
<button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false
? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
: 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
">
<!-- Loading Spinner -->
<div x-show="loadingVerifikasi"
class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
</div>
<span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
</button>
</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- hasil verifikasi -->
<div>
<template x-if="isErrorVerifikasi === false">
<p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
</template>
<template x-if="isErrorVerifikasi === true">
<p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
</template>
</div>
</div>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex items-end justify-end">
<button @click="closeDialogEdit()" class="mr-3 text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#FF5252] px-4 py-2 rounded-md">
Cancel
</button>
<button class="text-[#1976D2] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#1976D2] hover:text-white">
Save
</button>
</div>
</div>
</div>
</div>
</div>
<!-- modal edit desktop -->
<!-- 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">Assay Format</h2>
<a href="assay_format_mobile_add.html">
<span class="material-symbols-outlined text-[#2196F3]">add</span>
</a>
</div>
<!-- dialog instrument mobile start -->
<div>
<!-- Overlay -->
<div x-show="openInstrumentSearchMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
@click="openInstrumentSearchMobile = false">
</div>
<!-- Modal -->
<div x-show="openInstrumentSearchMobile" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="openInstrumentSearchMobile ? 'translate-y-0' : 'translate-y-full'">
<div class="flex justify-between space-x-2">
<p class="text-[16px] font-medium text-[#212B36]">Instrument</p>
<button @click="openInstrumentSearchMobile = false">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-[#637381] hover:text-gray-700 transition-colors" viewBox="0 0 24 24"
fill="none">
<path
d="M13.4099 12.0002L17.7099 7.71019C17.8982 7.52188 18.004 7.26649 18.004 7.00019C18.004 6.73388 17.8982 6.47849 17.7099 6.29019C17.5216 6.10188 17.2662 5.99609 16.9999 5.99609C16.7336 5.99609 16.4782 6.10188 16.2899 6.29019L11.9999 10.5902L7.70994 6.29019C7.52164 6.10188 7.26624 5.99609 6.99994 5.99609C6.73364 5.99609 6.47824 6.10188 6.28994 6.29019C6.10164 6.47849 5.99585 6.73388 5.99585 7.00019C5.99585 7.26649 6.10164 7.52188 6.28994 7.71019L10.5899 12.0002L6.28994 16.2902C6.19621 16.3831 6.12182 16.4937 6.07105 16.6156C6.02028 16.7375 5.99414 16.8682 5.99414 17.0002C5.99414 17.1322 6.02028 17.2629 6.07105 17.3848C6.12182 17.5066 6.19621 17.6172 6.28994 17.7102C6.3829 17.8039 6.4935 17.8783 6.61536 17.9291C6.73722 17.9798 6.86793 18.006 6.99994 18.006C7.13195 18.006 7.26266 17.9798 7.38452 17.9291C7.50638 17.8783 7.61698 17.8039 7.70994 17.7102L11.9999 13.4102L16.2899 17.7102C16.3829 17.8039 16.4935 17.8783 16.6154 17.9291C16.7372 17.9798 16.8679 18.006 16.9999 18.006C17.132 18.006 17.2627 17.9798 17.3845 17.9291C17.5064 17.8783 17.617 17.8039 17.7099 17.7102C17.8037 17.6172 17.8781 17.5066 17.9288 17.3848C17.9796 17.2629 18.0057 17.1322 18.0057 17.0002C18.0057 16.8682 17.9796 16.7375 17.9288 16.6156C17.8781 16.4937 17.8037 16.3831 17.7099 16.2902L13.4099 12.0002Z"
fill="currentColor" />
</svg>
</button>
</div>
<!-- spacer 24px -->
<div class="mb-6"></div>
<!-- list radio button -->
<div class="max-h-[200px] overflow-y-auto">
<template x-if="dataInstrument.length === 0">
<p class="py-2 px-3 text-gray-500 text-center">Data tidak ada</p>
</template>
<template x-for="item in dataInstrument" :key="item.idInstrument">
<div :id="item.idInstrument" class="mb-6">
<label class="flex items-center space-x-3 cursor-pointer">
<input type="radio" :value="item.idInstrument" class="peer hidden"
x-model="selectedInstrument.idInstrument" @change="onChangeInstrumentMobile(item)">
<div
class="w-5 h-5 border-2 border-gray-400 rounded-full flex items-center justify-center peer-checked:border-[#2196F3] peer-checked:bg-[#2196F3]">
<div class="w-2 h-2 bg-white rounded-full opacity-100 transition"></div>
</div>
<span class="text-gray-900" x-text="item.namaInstrument"></span>
</label>
</div>
</template>
</div>
</div>
</div>
<!-- dialog instrument mobile end -->
<!-- Bagian Kanan (PORT STATUS) -->
<div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<!-- table become list in mobile -->
<!-- inputan selected -->
<div class="bg-white w-full flex flex-row lg:hidden lg:mb-0">
<!-- instrument selected -->
<div class="bg-white w-full px-3 py-2" @click="openInstrumentSearchMobile = true">
<div class="flex justify-between items-center">
<p class="text-black/60" aria-readonly="true" x-text="(selectedInstrument.idInstrument != -1)
? selectedInstrument.namaInstrument
: 'Instrument'"></p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform text-[#0000008A]"
: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>
</div>
</div>
</div>
<!-- spacer 8px -->
<div class="mb-2"></div>
<!-- Assay No Inputan -->
<div class="bg-white w-full px-3 py-2 mb-5 lg:hidden lg:mb-0">
<label for="Assay No"
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="Assay No" x-model="assayNo"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay No" />
<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">
Assay No
</span>
</label>
</div>
<div class="flex flex-row mb-6 lg:hidden lg:mb-0">
<div class="flex flex-col w-full lg:flex-row mb-5">
<template x-for="item in dataAssayFormat" :key="item.idAssayFormat">
<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.namaInstrument"></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">Assay Code</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.assayCode"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Decimal Font</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.decimalFont"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Formula</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.formula"></p>
</div>
</div>
</template>
</div>
</div>
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/assay_format.js"></script>
</body>
</html>

162
v1-test-cmp/assay_format_mobile_add.html Normal file
View File

@@ -0,0 +1,162 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assay Format 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="assay_format.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="assayFormatMobileAdd">
<div class="relative w-full ">
<!-- 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>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Assay Code -->
<label for="Assay Code"
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="Assay Code" x-model="assayCode" @change="onChangeAssayCode()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay Code" autocomplete="off" />
<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">
Assay Code
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Decimal Font -->
<label for="Decimal"
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="Decimal" x-model="decimalFont" @change="onChangeDecimalFont()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Decimal" autocomplete="off" />
<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">
Decimal
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- formula -->
<label for="Formula"
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<textarea id="Formula" x-model="formula" @change="onChangeFormula()"
class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
placeholder="Formula"></textarea>
<span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all
peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0
peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
:class="formula.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
Formula
</span>
</label>
<!-- btn verifikasi -->
<div class="flex justify-end items-end">
<button @click="onProcessVerifikasi()"
:class="isVerifikasiDone == false
? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
: 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
">
<!-- Loading Spinner -->
<div x-show="loadingVerifikasi"
class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
</div>
<span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
</button>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- hasil verifikasi -->
<div>
<template x-if="isErrorVerifikasi === false">
<p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
</template>
<template x-if="isErrorVerifikasi === true">
<p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
</template>
</div>
</div>
<!-- space bottom -->
<div class="mt-30"></div>
<!-- button save -->
<div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
<button @click="save()"
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm
? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white'
: 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
Save
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/assay_format_mobile_add.js"></script>
</body>

165
v1-test-cmp/assay_format_mobile_edit.html Normal file
View File

@@ -0,0 +1,165 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assay Format 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="assay_format.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="assayFormatMobileEdit">
<div class="relative w-full ">
<!-- 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>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Assay Code -->
<label for="Assay Code"
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="Assay Code" x-model="assayCode" @change="onChangeAssayCode()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Assay Code" autocomplete="off" />
<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">
Assay Code
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Decimal Font -->
<label for="Decimal"
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="Decimal" x-model="decimalFont" @change="onChangeDecimalFont()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Decimal" autocomplete="off" />
<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">
Decimal
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- formula -->
<label for="Formula"
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<textarea id="Formula" x-model="formula" @change="onChangeFormula()"
class="resize-none peer w-full pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-none"
placeholder="Formula"></textarea>
<span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all
peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0
peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
:class="formula.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
Formula
</span>
</label>
<!-- btn verifikasi -->
<div class="flex justify-end items-end">
<button @click="onProcessVerifikasi()" :class="isVerifikasiDone == false
? 'flex items-center justify-center gap-2 text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400'
: 'flex items-center justify-center gap-2 bg-[#0000001F] text-[#00000042] cursor-not-allowed font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200'
">
<!-- Loading Spinner -->
<div x-show="loadingVerifikasi"
class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
</div>
<span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
</button>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- hasil verifikasi -->
<div>
<template x-if="isErrorVerifikasi === false">
<p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
</template>
<template x-if="isErrorVerifikasi === true">
<p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
</template>
</div>
</div>
<!-- space bottom -->
<div class="mt-30"></div>
<!-- button save -->
<div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
<!-- <button @click="save()"
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm
? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white'
: 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
Save
</button> -->
<button @click="save()"
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white">
Save
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/assay_format_mobile_edit.js"></script>
</body>

251
v1-test-cmp/dashboard.html Normal file
View File

@@ -0,0 +1,251 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard 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-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY
FORMAT</a>
</li>
<li>
<a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li>
<a href="master_data.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">MASTER
DATA</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a href="settings.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#2196F3]">settings</span>
Setting
</div>
</a>
</li>
<li>
<a href="assay_format.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<a href="result.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<a href="order.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Order
</div>
</a>
</li>
<li>
<a href="master_data.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Master Data
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen">
<!-- Bagian Kiri (Logs) -->
<div class="bg-[#F0F2F5DE] w-full lg:w-1/2 rounded-lg lg:flex flex-col flex-1 overflow-hidden">
<div class="pl-4 pt-2 lg:pl-6 text-black/87 font-medium text-lg rounded-lg">LOGS</div>
<!-- LOGS -->
<div class="pb-10 pt-2 pl-2 pr-2 flex-1 overflow-auto h-full lg:pb-0">
<!-- Baris 1 -->
<div class="mb-0 flex flex-wrap lg:flex-nowrap gap-4 items-start lg:mb-5 p-2">
<h2 class="font-normal text-sm text-black/87 whitespace-nowrap p-2">
2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
</h2>
<p class="font-normal text-sm text-black/87 w-full lg:flex-1 text-justify pl-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
doloremque, quisquam architecto possimus odio accusamus...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
</p>
</div>
<!-- Baris 2 -->
<div class="mb-0 flex flex-wrap lg:flex-nowrap gap-4 items-start lg:mb-5 p-2">
<h2 class="font-normal text-sm text-black/87 whitespace-nowrap p-2">
2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
</h2>
<p class="font-normal text-sm text-black/87 w-full lg:flex-1 text-justify pl-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
doloremque, quisquam architecto possimus odio accusamus...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
</p>
</div>
</div>
</div>
<!-- Bagian Kanan (PORT STATUS) -->
<div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

133
v1-test-cmp/index.html Normal file
View File

@@ -0,0 +1,133 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login 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>
</head>
<body>
<!-- wrapper -->
<div class=" lg:bg-white shadow-lg">
<!-- Screen phone & tablet start-->
<div class="relative w-full
bg-cover bg-center h-screen
lg:hidden">
<img src="../images/loginBgPhone.png" class="w-full h-full object-cover">
<!-- logo & title start -->
<img src="../images/logoServer.png" class="absolute top-28 left-1/2 mt-10
transform -translate-x-1/2 object-contain
mb-3" />
<div class="absolute top-32 left-1/2 mt-21
transform -translate-x-1/2 object-contain">
<h2 class="text-3xl font-bold text-white">Log in to your</h2>
<h2 class="text-3xl font-bold text-white text-center">Account</h2>
</div>
<!-- logo & title end -->
<!-- inputan username -->
<div class="absolute top-77 w-full object-contain px-10 mt-2">
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
outline-[#D9D9D9] bg-white
focus:outline-[#2196F3] focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<!-- inputan password -->
<div class="absolute top-98 w-full object-contain px-10 mt-2">
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
outline-[#D9D9D9] bg-white
focus:outline-[#2196F3] focus:shadow-outline" id="password" type="password" placeholder="Password">
</div>
<!-- remember me & password -->
<div class="absolute top-120 flex justify-between w-full object-contain px-10 mt-2">
<div class="flex items-center space-x-2">
<input type="checkbox" class="size-4" /> <label
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
me</label>
</div>
<div>
<a href="#"
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
Password ?</a>
</div>
</div>
<!-- btn login -->
<div class="absolute top-140 flex justify-between w-full object-contain px-10 mt-2">
<button
class="w-full h-16 bg-[#1D61E7] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
type="button">
Login
</button>
</div>
</div>
<!-- Screen hone & tablet end -->
<!-- Screen lg up start -->
<div class="hidden lg:grid grid-cols-2 h-screen">
<!-- kiri -->
<div class="bg-[#F0F2F5] shadow-lg text-center">
<!-- wrapper box -->
<div class="mt-14">
<!-- paling luar -->
<!-- logo start -->
<div class="mt-3 ml-14 flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3">
<p class="lg:text-[2.5vh] xl:text-[3vh] text-[#2196F3] font-normal">Port Server</p>
</div>
<!-- logo end -->
<!-- form login start -->
<div class="lg:px-24 lg:py-12 xl:px-32 xl:py-16 2xl:px-40 2xl:py-16">
<!-- welcome text -->
<h2 class="lg:text-[4vh] xl:text-[5vh] 2xl:text-[6vh] font-semibold mb-2">Welcome Back</h2>
<!-- Log in into your account -->
<p class="lg:text-[2vh] xl:text-[2.5vh] font-normal mb-16">Log in into your account</p>
<!-- inputan username -->
<div class="mb-9">
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
outline-[#D9D9D9] bg-white
focus:outline-blue-400 focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<!-- inputan password -->
<div class="mb-4">
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
outline-[#D9D9D9] bg-white
focus:outline-blue-400 focus:shadow-outline" id="password" type="password" placeholder="Password">
</div>
<!-- remember me -->
<div class="mb-16 flex justify-between">
<div class="flex items-center space-x-2">
<input type="checkbox" class="size-4" /> <label
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
me</label>
</div>
<div>
<a href="#"
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
Password ?</a>
</div>
</div>
<!-- button login -->
<button
class="w-full h-16 bg-[#2196F3] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
type="button">
Login
</button>
</div>
<!-- form login end -->
</div>
</div>
<!-- kanan -->
<div class="hidden lg:inline-block bg-white ">
<img class="object-cover h-full" src="../images/xloginbg.png" />
</div>
</div>
<!-- Screnn lg up end -->
</div>
</body>
</html>

253
v1-test-cmp/js/assay_format.js Normal file
View File

@@ -0,0 +1,253 @@
document.addEventListener('alpine:init', () => {
Alpine.data('assayFormat', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
dataSetting: [
{
idSetting: 1,
idJenis: 1,
namaJenis: 'TCP Server',
info: 'Port 5001',
port: '5001',
idInterface: 1,
namaInterface: 'XN550',
idInstrument: 1,
namaInstrument: 'Hema 01',
server: '',
idSerial: -1,
namaSerial: '',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 2,
idJenis: 2,
namaJenis: 'TCP Client',
info: 'Server 192.168.0.1, Port 4000',
port: '4000',
idInterface: 2,
namaInterface: 'Axsym',
idInstrument: 2,
namaInstrument: 'Axsym',
server: '192.168.0.1',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 3,
idJenis: 3,
namaJenis: 'RS232',
info: 'ttyS01, 9600, N, 8, 1',
port: '',
idInterface: 3,
namaInterface: 'C311',
idInstrument: 3,
namaInstrument: 'Cobas C311',
server: '',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '19200',
idParity: 1,
namaParity: 'None',
idDataBit: 2,
namaDataBit: '6',
idStopBit: 2,
namaStopBit: '1'
},
],
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
isVerifikasiDone: false,
assayNo: '',
decimalFontEdit: '',
assayCodeEdit: '',
decimalFont: '',
assayCode: '',
formulaEdit: '',
formulaAdd: '',
dataAssayFormat: [
{
idAssayFormat: 1,
idInstrument: 1,
namaInstrument: 'Hema 01',
assayCode: 'WBC',
decimalFont: '5001',
formula: ''
},
{
idAssayFormat: 2,
idInstrument: 2,
namaInstrument: 'Axsym',
assayCode: 'IgG',
decimalFont: '2001',
formula: ''
},
{
idAssayFormat: 3,
idInstrument: 3,
namaInstrument: 'Cobas C311',
assayCode: 'DBIL',
decimalFont: '4001',
formula: '(TBIL) - (DBIL)'
},
],
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
selectedInstrumentAdd: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
selectedInstrumentEdit: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
hasilVerifikasi: '',
isErrorVerifikasi: false,
objForm: {
isValidForm: false,
idInstrument: -1,
namaInstrument: 'Instrument',
decimalFont: '',
assayCode: '',
formula: '',
},
objFormEdit: {
isValidForm: false,
idInstrument: -1,
namaInstrument: 'Instrument',
decimalFont: '',
assayCode: '',
formula: '',
},
// 1. Inisialisasi End
// 2. Fungsi Start
closeDialog() {
this.openInstrument = false;
this.selectedInstrumentAdd = {
idInstrument: -1,
namaInstrument: 'Instrument'
};
this.loadingVerifikasi = false;
this.isVerifikasiDone = false;
this.objForm.isValidForm = false;
this.isErrorVerifikasi = false;
this.hasilVerifikasi = ''
this.assayCode = ''
this.decimalFont = ''
this.formulaAdd = ''
this.showDialogAdd = false
},
onChangeInstrumentSearch(item) {
this.openInstrumentSearch = false;
this.selectedInstrument = item;
},
onChangeInstrument(item) {
this.openInstrument = false;
this.selectedInstrumentAdd = item;
this.validateForm();
},
onChangeInstrumentEdit(item) {
this.openInstrument = false;
this.selectedInstrumentEdit = item;
},
onChangeAssayCodeAdd() {
this.objForm.assayCode = this.assayCode;
this.validateForm();
},
onChangeDecimalFontAdd() {
this.objForm.decimalFont = this.decimalFont;
this.validateForm();
},
onChangeFormulaAdd() {
this.objForm.formula = this.formulaAdd;
this.validateForm();
},
onChangeInstrumentMobile(item) {
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},
onProcessVerifikasi() {
if (this.isVerifikasiDone == true) {
return;
}
this.loadingVerifikasi = true;
setTimeout(() => {
this.loadingVerifikasi = false;
this.isErrorVerifikasi = false;
this.isVerifikasiDone = true;
this.hasilVerifikasi = 'Formula is valid';
}, 2000);
},
openModalEdit(item) {
this.selectedInstrumentEdit = {
idInstrument: item.idInstrument,
namaInstrument: item.namaInstrument
}
this.assayCodeEdit = item.assayCode
this.decimalFontEdit = item.decimalFont
this.formulaEdit = item.formula
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.loadingVerifikasi = false;
this.isErrorVerifikasi = false;
this.isVerifikasiDone = false;
this.hasilVerifikasi = ''
this.showDialogEdit = !this.showDialogEdit;
},
validateForm() {
this.objForm.isValidForm = (
this.selectedInstrumentAdd.idInstrument != -1 &&
this.decimalFont.trim() !== '' &&
this.assayCode.trim() !== '' &&
this.formulaAdd.trim() !== ''
);
},
editMobilePage(item) {
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json)
window.location.href = "assay_format_mobile_edit.html";
},
// 2. Fungsi End
}))
})

94
v1-test-cmp/js/assay_format_mobile_add.js Normal file
View File

@@ -0,0 +1,94 @@
document.addEventListener('alpine:init', () => {
Alpine.data('assayFormatMobileAdd', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
loadingVerifikasi: false,
decimalFont: '',
assayCode: '',
formula: '',
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
hasilVerifikasi: '',
isErrorVerifikasi: false,
isVerifikasiDone: false,
objForm: {
isValidForm: false,
idInstrument: -1,
namaInstrument: 'Instrument',
decimalFont: '',
assayCode: '',
formula: '',
},
// 1. Inisialisasi End
// 2. Fungsi Start
onChangeFormula() {
this.objForm.formula = this.formula;
this.validateForm();
},
onChangeDecimalFont() {
this.objForm.decimalFont = this.decimalFont;
this.validateForm();
},
onChangeAssayCode() {
this.objForm.assayCode = this.assayCode;
this.validateForm();
},
onChangeInstrument(item) {
this.selectedInstrument = item;
this.objForm.idInstrument = item.idInstrument;
this.objForm.namaInstrument = item.namaInstrument;
this.validateForm();
},
onProcessVerifikasi() {
if(this.isVerifikasiDone == true) {
return;
}
this.loadingVerifikasi = true;
setTimeout(() => {
this.loadingVerifikasi = false;
this.isErrorVerifikasi = false;
this.isVerifikasiDone = true;
this.hasilVerifikasi = 'Formula is valid';
}, 2000);
},
validateForm() {
this.objForm.isValidForm = (
this.selectedInstrument.idInstrument != -1 &&
this.decimalFont.trim() !== '' &&
this.assayCode.trim() !== '' &&
this.formula.trim() !== ''
);
},
save() {
if (this.objForm.isValidForm === true) {
alert('true')
} else {
alert('inputan harus diisi');
}
},
// 2. Fungsi End
})
)
})

109
v1-test-cmp/js/assay_format_mobile_edit.js Normal file
View File

@@ -0,0 +1,109 @@
document.addEventListener('alpine:init', () => {
Alpine.data('assayFormatMobileEdit', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
let itemEdit = localStorage.getItem('itemEditMobile');
// console.log('itemEdit ', itemEdit);
if (itemEdit) {
let json = JSON.parse(itemEdit);
console.log('itemEdit ', json);
this.selectedInstrument = {
idInstrument: json.idInstrument,
namaInstrument: json.namaInstrument
};
this.assayCode = json.assayCode || '';
this.decimalFont = json.decimalFont || '';
this.formula = json.formula || '';
this.idAssayFormat = json.idAssayFormat || -1;
}
},
// 1. Inisialisasi Start
loadingVerifikasi: false,
idAssayFormat: -1,
decimalFont: '',
assayCode: '',
formula: '',
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
hasilVerifikasi: '',
isErrorVerifikasi: false,
isVerifikasiDone: false,
objForm: {
isValidForm: false,
idInstrument: -1,
namaInstrument: 'Instrument',
decimalFont: '',
assayCode: '',
formula: '',
},
// 1. Inisialisasi End
// 2. Fungsi Start
onChangeFormula() {
this.objForm.formula = this.formula;
this.validateForm();
},
onChangeDecimalFont() {
this.objForm.decimalFont = this.decimalFont;
this.validateForm();
},
onChangeAssayCode() {
this.objForm.assayCode = this.assayCode;
this.validateForm();
},
onChangeInstrument(item) {
this.selectedInstrument = item;
this.objForm.idInstrument = item.idInstrument;
this.objForm.namaInstrument = item.namaInstrument;
this.validateForm();
},
onProcessVerifikasi() {
if(this.isVerifikasiDone == true) {
return;
}
this.loadingVerifikasi = true;
setTimeout(() => {
this.loadingVerifikasi = false;
this.isErrorVerifikasi = false;
this.isVerifikasiDone = true;
this.hasilVerifikasi = 'Formula is valid';
}, 2000);
},
validateForm() {
this.objForm.isValidForm = (
this.selectedInstrument.idInstrument != -1 &&
this.decimalFont.trim() !== '' &&
this.assayCode.trim() !== '' &&
this.formula.trim() !== ''
);
},
save() {
if (this.objForm.isValidForm === true) {
alert('true')
} else {
alert('inputan harus diisi');
}
},
// 2. Fungsi End
})
)
})

352
v1-test-cmp/js/master_data.js Normal file
View File

@@ -0,0 +1,352 @@
document.addEventListener('alpine:init', () => {
Alpine.data('masterData', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
// multiple select
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
dataAlat: [
{
idAlat: 1,
namaAlat: 'Hema 01',
},
{
idAlat: 2,
namaAlat: 'Axsym',
},
{
idAlat: 3,
namaAlat: 'Cobas C311',
},
],
// multiple select
dataMaster: [
{
idMaster: 1,
kode: 'A04',
namaPemeriksaan: 'Darah Lengkap',
harga: '50.000',
pemeriksaanStr: 'Xn500, HCB, WBC, RBC, PLT',
dataDetail: [
{
idDetail: 1,
dataAlat: {
idAlat: 1,
namaAlat: 'Hema 01',
},
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
],
},
{
idDetail: 2,
dataAlat: {
idAlat: 3,
namaAlat: 'Cobas C311',
},
dataAssay: [
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
}
],
},
],
showDialogAdd: false,
kodeAdd: '',
e_kode: '',
namaAdd: '',
e_nama: '',
hargaAdd: '',
e_harga: '',
formAddArray: [],
formEditArray: [],
showDialogEdit: false,
objForm: {
nama: '',
kode: '',
harga: '',
alat: {},
assay: []
},
objFormEdit: {
nama: '',
kode: '',
harga: '',
alat: {},
assay: []
},
// 1. Inisialisasi End
// 2. Fungsi Start
formDetail(action) {
if (action === 'add') {
const lastId = this.formAddArray.length;
this.formAddArray.push({
idForm: lastId + 1,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: -1,
namaAlat: 'Alat'
},
selectedAssay: [],
searchAssay: "",
filterItemAssay: this.dataAssay,
dataAssayForm: this.dataAssay,
openAssayAdd: false,
})
} else {
const lastId = this.formEditArray.length;
this.formEditArray.push({
idForm: lastId + 1,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: -1,
namaAlat: 'Alat'
},
selectedAssay: [],
searchAssay: "",
filterItemAssay: this.dataAssay,
dataAssayForm: this.dataAssay,
openAssayAdd: false,
})
}
},
filterItemAssay(idx, formItem, action) {
if (action === 'add') {
let formId = formItem.idForm
// console.log('formItem ',formItem)
let targetForm = this.formAddArray.find(e => e.idForm === formId);
if (targetForm) {
targetForm.openAssayAdd = true
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
item.namaAssay.toLowerCase().includes(searchTerm)
);
// targetForm.dataAssayForm = targetForm.filterItemAssay
console.log('Filtered Assay:', targetForm.filterItemAssay);
} else {
console.warn('Tidak match ID Form nya');
}
} else {
let formId = formItem.idForm
// console.log('formItem ',formItem)
let targetForm = this.formEditArray.find(e => e.idForm === formId);
if (targetForm) {
targetForm.openAssayAdd = true
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
item.namaAssay.toLowerCase().includes(searchTerm)
);
// targetForm.dataAssayForm = targetForm.filterItemAssay
console.log('Filtered Assay:', targetForm.filterItemAssay);
} else {
console.warn('Tidak match ID Form nya');
}
}
},
addItemAssayToForm(item, idForm, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (form) {
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
if (!exists) {
form.selectedAssay.push(item);
} else {
console.warn("Item sudah dipilih:", item);
}
}
} else {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (form) {
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
if (!exists) {
form.selectedAssay.push(item);
} else {
console.warn("Item sudah dipilih:", item);
}
}
}
},
removeItemAssayToForm(idForm, index, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAssay.splice(index, 1);
} else {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAssay.splice(index, 1);
}
},
closeDialog() {
this.formAddArray = []
this.kodeAdd = ''
this.namaAdd = ''
this.hargaAdd = ''
this.objForm = {
nama: '',
kode: '',
harga: '',
dataAssay: [],
}
this.showDialogAdd = false
},
saveA() {
this.objForm.alat = this.formAddArray.map(form => form.selectedAlat);
this.objForm.assay = this.formAddArray.map(form => form.selectedAssay);
console.log('Data yang disimpan:', this.objForm);
},
saveE() {
this.objFormEdit.alat = this.formEditArray.map(form => form.selectedAlat);
this.objFormEdit.assay = this.formEditArray.map(form => form.selectedAssay);
console.log('Data Edit yang disimpan:', this.objFormEdit);
},
deleteData(){
console.log('hapus record ke database')
},
onChangeInstrument(item, idForm, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAlat = {
idAlat: item.idAlat,
namaAlat: item.namaAlat
}
form.openAlat = false
} else {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAlat = {
idAlat: item.idAlat,
namaAlat: item.namaAlat
}
form.openAlat = false
}
},
onChangeNamaAdd() {
this.objForm.nama = this.namaAdd;
},
onChangeNamaEdit() {
this.objFormEdit.nama = this.e_nama;
},
onChangeKodeAdd() {
this.objForm.kode = this.kodeAdd;
},
onChangeKodeEdit() {
this.objFormEdit.kode = this.e_kode;
},
onChangeHargaAdd() {
this.objForm.harga = this.hargaAdd;
},
onChangeHargaEdit() {
this.objFormEdit.harga = this.e_harga;
},
openModalEdit(item) {
console.log('edit item', item)
this.e_harga = item.harga
this.e_kode = item.kode
this.e_nama = item.namaPemeriksaan
this.formEditArray = [];
item.dataDetail.forEach((detail, index) => {
this.formEditArray.push({
idForm: detail.idDetail,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: detail.dataAlat.idAlat,
namaAlat: detail.dataAlat.namaAlat,
},
selectedAssay: detail.dataAssay,
searchAssay: "",
filterItemAssay: [...this.dataAssay],
dataAssayForm: [...this.dataAssay],
openAssayAdd: false,
});
})
console.log('formEditArray', this.formEditArray);
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.formEditArray = []
this.e_harga = ''
this.e_kode = ''
this.e_nama = ''
this.objFormEdit = {
nama: '',
kode: '',
harga: '',
dataAssay: [],
}
this.showDialogEdit = false
},
editMobilePage(item){
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json);
window.location.href = "master_data_mobile_edit.html"
},
// 2. Fungsi End
}))
})

149
v1-test-cmp/js/master_data_mobile_add.js Normal file
View File

@@ -0,0 +1,149 @@
document.addEventListener('alpine:init', () => {
Alpine.data('masterDataPageMobileAdd', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
dataAlat: [
{
idAlat: 1,
namaAlat: 'Hema 01',
},
{
idAlat: 2,
namaAlat: 'Axsym',
},
{
idAlat: 3,
namaAlat: 'Cobas C311',
},
],
kodeAdd: '',
namaAdd: '',
hargaAdd: '',
formAddArray: [],
objForm: {
nama: '',
kode: '',
harga: '',
alat: {},
assay: []
},
// 1. Inisialisasi End
// 2. Fungsi Start
formDetail(action) {
if (action === 'add') {
const lastId = this.formAddArray.length;
this.formAddArray.push({
idForm: lastId + 1,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: -1,
namaAlat: 'Alat'
},
selectedAssay: [],
searchAssay: "",
filterItemAssay: this.dataAssay,
dataAssayForm: this.dataAssay,
openAssayAdd: false,
})
}
},
filterItemAssay(idx, formItem, action) {
if (action === 'add') {
let formId = formItem.idForm
// console.log('formItem ',formItem)
let targetForm = this.formAddArray.find(e => e.idForm === formId);
if (targetForm) {
targetForm.openAssayAdd = true
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
item.namaAssay.toLowerCase().includes(searchTerm)
);
// targetForm.dataAssayForm = targetForm.filterItemAssay
console.log('Filtered Assay:', targetForm.filterItemAssay);
} else {
console.warn('Tidak match ID Form nya');
}
}
},
addItemAssayToForm(item, idForm, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (form) {
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
if (!exists) {
form.selectedAssay.push(item);
} else {
console.warn("Item sudah dipilih:", item);
}
}
}
},
removeItemAssayToForm(idForm, index, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAssay.splice(index, 1);
}
},
saveA() {
this.objForm.alat = this.formAddArray.map(form => form.selectedAlat);
this.objForm.assay = this.formAddArray.map(form => form.selectedAssay);
console.log('Data yang disimpan:', this.objForm);
},
onChangeInstrument(item, idForm, action) {
if (action === 'add') {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAlat = {
idAlat: item.idAlat,
namaAlat: item.namaAlat
}
form.openAlat = false
}
},
onChangeNamaAdd() {
this.objForm.nama = this.namaAdd;
},
onChangeKodeAdd() {
this.objForm.kode = this.kodeAdd;
},
onChangeHargaAdd() {
this.objForm.harga = this.hargaAdd;
},
}))
})

195
v1-test-cmp/js/master_data_mobile_edit.js Normal file
View File

@@ -0,0 +1,195 @@
document.addEventListener('alpine:init', () => {
Alpine.data('masterDataPageMobileEdit', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
let itemEdit = localStorage.getItem('itemEditMobile');
if (itemEdit) {
let json = JSON.parse(itemEdit);
this.e_harga = json.harga
this.e_kode = json.kode
this.e_nama = json.namaPemeriksaan
this.formEditArray = [];
json.dataDetail.forEach((detail, index) => {
this.formEditArray.push({
idForm: detail.idDetail,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: detail.dataAlat.idAlat,
namaAlat: detail.dataAlat.namaAlat,
},
selectedAssay: detail.dataAssay,
searchAssay: "",
filterItemAssay: [...this.dataAssay],
dataAssayForm: [...this.dataAssay],
openAssayAdd: false,
});
})
console.log('formEditArray', this.formEditArray);
}
},
// 1. Inisialisasi Start
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
dataAlat: [
{
idAlat: 1,
namaAlat: 'Hema 01',
},
{
idAlat: 2,
namaAlat: 'Axsym',
},
{
idAlat: 3,
namaAlat: 'Cobas C311',
},
],
e_kode: '',
e_nama: '',
e_harga: '',
formEditArray: [],
objFormEdit: {
nama: '',
kode: '',
harga: '',
alat: {},
assay: []
},
// 1. Inisialisasi End
// 2. Fungsi Start
formDetail(action) {
if (action === 'edit') {
const lastId = this.formEditArray.length;
this.formEditArray.push({
idForm: lastId + 1,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: -1,
namaAlat: 'Alat'
},
selectedAssay: [],
searchAssay: "",
filterItemAssay: this.dataAssay,
dataAssayForm: this.dataAssay,
openAssayAdd: false,
})
}
},
filterItemAssay(idx, formItem, action) {
if (action === 'edit') {
let formId = formItem.idForm
// console.log('formItem ',formItem)
let targetForm = this.formEditArray.find(e => e.idForm === formId);
if (targetForm) {
targetForm.openAssayAdd = true
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
item.namaAssay.toLowerCase().includes(searchTerm)
);
// targetForm.dataAssayForm = targetForm.filterItemAssay
console.log('Filtered Assay:', targetForm.filterItemAssay);
} else {
console.warn('Tidak match ID Form nya');
}
}
},
addItemAssayToForm(item, idForm, action) {
if (action === 'edit') {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (form) {
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
if (!exists) {
form.selectedAssay.push(item);
} else {
console.warn("Item sudah dipilih:", item);
}
}
}
},
removeItemAssayToForm(idForm, index, action) {
if (action === 'edit') {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAssay.splice(index, 1);
}
},
saveE() {
this.objFormEdit.alat = this.formEditArray.map(form => form.selectedAlat);
this.objFormEdit.assay = this.formEditArray.map(form => form.selectedAssay);
console.log('Data Edit yang disimpan:', this.objFormEdit);
},
deleteData() {
console.log('hapus record ke database')
},
onChangeInstrument(item, idForm, action) {
if (action === 'edit') {
let form = this.formEditArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAlat = {
idAlat: item.idAlat,
namaAlat: item.namaAlat
}
form.openAlat = false
}
},
onChangeNamaEdit() {
this.objFormEdit.nama = this.e_nama;
},
onChangeKodeEdit() {
this.objFormEdit.kode = this.e_kode;
},
onChangeHargaEdit() {
this.objFormEdit.harga = this.e_harga;
},
closeDialogEdit() {
this.formEditArray = []
this.e_harga = ''
this.e_kode = ''
this.e_nama = ''
this.objFormEdit = {
nama: '',
kode: '',
harga: '',
dataAssay: [],
}
this.showDialogEdit = false
},
}))
})

231
v1-test-cmp/js/mcoba.js Normal file
View File

@@ -0,0 +1,231 @@
document.addEventListener('alpine:init', () => {
Alpine.data('masterData', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
// multiple select
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
dataAlat: [
{
idAlat: 1,
namaAlat: 'Hema 01',
},
{
idAlat: 2,
namaAlat: 'Axsym',
},
{
idAlat: 3,
namaAlat: 'Cobas C311',
},
],
// multiple select
dataMaster: [
{
idMaster: 1,
kode: 'A04',
namaPemeriksaan: 'Darah Lengkap',
harga: '50.000',
pemeriksaanStr: 'Xn500, HCB, WBC, RBC, PLT',
dataAssay: [
{
idAssay: 1,
namaAssay: 'Xn500'
},
{
idAssay: 2,
namaAssay: 'HGB'
},
{
idAssay: 3,
namaAssay: 'WBC'
},
{
idAssay: 4,
namaAssay: 'RBC'
},
{
idAssay: 5,
namaAssay: 'PLT'
},
],
},
],
showDialogAdd: false,
kodeAdd: '',
namaAdd: '',
hargaAdd: '',
formAddArray: [],
showDialogEdit: false,
objForm: {
nama: '',
kode: '',
harga: '',
alat: {},
assay: []
},
objFormEdit: {
nama: '',
kode: '',
harga: '',
dataAssay: [],
},
// 1. Inisialisasi End
// 2. Fungsi Start
formAddDetail() {
const lastId = this.formAddArray.length;
this.formAddArray.push({
idForm: lastId + 1,
openAlat: false,
dataAlatForm: this.dataAlat,
selectedAlat: {
idAlat: -1,
namaAlat: 'Alat'
},
selectedAssay: [],
searchAssay: "",
filterItemAssay: this.dataAssay,
dataAssayForm: this.dataAssay,
openAssayAdd: false,
})
},
filterItemAssay(idx, formItem) {
let formId = formItem.idForm
// console.log('formItem ',formItem)
let targetForm = this.formAddArray.find(e => e.idForm === formId);
if (targetForm) {
targetForm.openAssayAdd = true
let searchTerm = targetForm.searchAssay ? targetForm.searchAssay.toLowerCase() : "";
targetForm.filterItemAssay = targetForm.dataAssayForm.filter(item =>
item.namaAssay.toLowerCase().includes(searchTerm)
);
// targetForm.dataAssayForm = targetForm.filterItemAssay
console.log('Filtered Assay:', targetForm.filterItemAssay);
} else {
console.warn('Tidak match ID Form nya');
}
},
addItemAssayToForm(item, idForm) {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (form) {
let exists = form.selectedAssay.some(a => a.idAssay === item.idAssay);
if (!exists) {
form.selectedAssay.push(item);
} else {
console.warn("Item sudah dipilih:", item);
}
}
},
removeItemAssayToForm(idForm, index) {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAssay.splice(index, 1);
},
closeDialog() {
this.formAddArray = []
this.kodeAdd = ''
this.namaAdd = ''
this.hargaAdd = ''
this.objForm = {
nama: '',
kode: '',
harga: '',
dataAssay: [],
}
this.showDialogAdd = false
},
saveA() {
this.objForm.alat = this.formAddArray.map(form => form.selectedAlat);
this.objForm.assay = this.formAddArray.map(form => form.selectedAssay);
console.log('Data yang disimpan:', this.objForm);
},
onChangeInstrument(item, idForm) {
let form = this.formAddArray.find(f => f.idForm === idForm);
if (!form) return;
form.selectedAlat = {
idAlat: item.idAlat,
namaAlat: item.namaAlat
}
form.openAlat = false
},
onChangeInstrumentEdit(item) {
this.openInstrument = false;
this.selectedInstrumentEdit = item;
},
onChangeNamaAdd() {
this.objForm.nama = this.namaAdd;
},
onChangeNamaEdit() {
this.objFormEdit.nama = this.e_nama;
},
onChangeKodeAdd() {
this.objForm.kode = this.kodeAdd;
},
onChangeKodeEdit() {
this.objFormEdit.kode = this.e_kode;
},
onChangeHargaAdd() {
this.objForm.harga = this.hargaAdd;
},
onChangeHargaEdit() {
this.objFormEdit.harga = this.e_harga;
},
openModalEdit(item) {
// mrn
this.e_mrn = item.mrn
// sid
this.e_sid = item.sid
// name
this.e_name = item.name
// multiple pemeriksaan
this.e_selectedPemeriksaan = [...item.dataPemeriksaan];
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.showDialogEdit = !this.showDialogEdit;
},
editMobilePage(item) {
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json)
window.location.href = "order_mobile_edit.html";
},
// 2. Fungsi End
}))
})

674
v1-test-cmp/js/order.js Normal file
View File

@@ -0,0 +1,674 @@
document.addEventListener('alpine:init', () => {
Alpine.data('order', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
let today = new Date();
this.selectedDaySD = today.getDate();
this.month = today.getMonth();
this.year = today.getFullYear();
// this.datepickerValueSD = this.formatDate(today);
this.datepickerValueSD = 'Start Date'
this.getNoOfDays();
this.selectedDaySD = today.getDate();
// End Date Functions
this.selectedDayED = today.getDate();
this.monthED = today.getMonth();
this.yearED = today.getFullYear();
this.datepickerValueED = 'End Date';
this.getNoOfDaysED();
// Order Date
this.selectedDayOD = today.getDate();
this.monthOD = today.getMonth();
this.yearOD = today.getFullYear();
this.datepickerValueOD = this.formatDate(today);
this.getNoOfDaysOD();
this.e_selectedDayOD = today.getDate();
this.e_monthOD = today.getMonth();
this.e_yearOD = today.getFullYear();
this.e_datepickerValueOD = this.formatDate(today);
this.e_getNoOfDaysOD();
// DOB
this.selectedDayDOB = today.getDate();
this.monthDOB = today.getMonth();
this.yearDOB = today.getFullYear();
this.datepickerValueDOB = this.formatDate(today);
this.getNoOfDaysDOB();
this.e_selectedDayDOB = today.getDate();
this.e_monthDOB = today.getMonth();
this.e_yearDOB = today.getFullYear();
this.e_datepickerValueDOB = this.formatDate(today);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan add
this.filteredPemeriksaan = [...this.dataPemeriksaan];
},
// 1. Inisialisasi Start
// datepicker
selectedDaySD: null,
showDatepickerSD: false,
datepickerValueSD: '',
month: 0,
year: 0,
no_of_days: [],
blankdays: [],
selectedDayED: null,
showDatepickerED: false,
datepickerValueED: '',
monthED: 0,
yearED: 0,
no_of_daysED: [],
blankdaysED: [],
// Order Date Variables
showDatepickerOD: false,
selectedDayOD: null,
datepickerValueOD: '',
monthOD: 0,
yearOD: 0,
no_of_daysOD: [],
blankdaysOD: [],
e_showDatepickerOD: false,
e_selectedDayOD: null,
e_datepickerValueOD: '',
e_monthOD: 0,
e_yearOD: 0,
e_no_of_daysOD: [],
e_blankdaysOD: [],
// DOB Variabless
showDatepickerDOB: false,
selectedDayDOB: null,
datepickerValueDOB: '',
monthDOB: 0,
yearDOB: 0,
no_of_daysDOB: [],
blankdaysDOB: [],
e_showDatepickerDOB: false,
e_selectedDayDOB: null,
e_datepickerValueDOB: '',
e_monthDOB: 0,
e_yearDOB: 0,
e_no_of_daysDOB: [],
e_blankdaysDOB: [],
MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
formatDate(date) {
let day = date.getDate().toString().padStart(2, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let year = date.getFullYear();
return `${day}/${month}/${year}`;
},
prevMonth() {
if (this.month === 0) {
this.year--;
this.month = 11;
} else {
this.month--;
}
this.getNoOfDays();
},
nextMonth() {
if (this.month === 11) {
this.year++;
this.month = 0;
} else {
this.month++;
}
this.getNoOfDays();
},
getDateValue(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date; // Simpan tanggal yang dipilih
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
isToday(date) {
let today = new Date();
let d = new Date(this.year, this.month, date);
return today.toDateString() === d.toDateString();
},
isSelected(date) {
return this.selectedDaySD === date;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
let dayOfWeek = new Date(this.year, this.month, 1).getDay();
this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
setDate(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date;
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
// End Date Functions
prevMonthED() {
if (this.monthED === 0) {
this.yearED--;
this.monthED = 11;
} else {
this.monthED--;
}
this.getNoOfDaysED();
},
nextMonthED() {
if (this.monthED === 11) {
this.yearED++;
this.monthED = 0;
} else {
this.monthED++;
}
this.getNoOfDaysED();
},
setDateED(date) {
let selectedDate = new Date(this.yearED, this.monthED, date);
this.selectedDayED = date;
this.datepickerValueED = this.formatDate(selectedDate);
this.showDatepickerED = false;
},
isSelectedED(date) {
return this.selectedDayED === date;
},
getNoOfDaysED() {
let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Order Date Functions
prevMonthOD() {
if (this.monthOD === 0) {
this.yearOD--;
this.monthOD = 11;
} else {
this.monthOD--;
}
this.getNoOfDaysOD();
},
nextMonthOD() {
if (this.monthOD === 11) {
this.yearOD++;
this.monthOD = 0;
} else {
this.monthOD++;
}
this.getNoOfDaysOD();
},
setDateOD(date) {
let selectedDate = new Date(this.yearOD, this.monthOD, date);
this.selectedDayOD = date;
this.datepickerValueOD = this.formatDate(selectedDate);
this.showDatepickerOD = false;
},
isSelectedOD(date) {
return this.selectedDayOD === date;
},
getNoOfDaysOD() {
let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit order date
e_prevMonthOD() {
if (this.e_monthOD === 0) {
this.e_yearOD--;
this.e_monthOD = 11;
} else {
this.e_monthOD--;
}
this.e_getNoOfDaysOD();
},
e_nextMonthOD() {
if (this.e_monthOD === 11) {
this.e_yearOD++;
this.e_monthOD = 0;
} else {
this.e_monthOD++;
}
this.e_getNoOfDaysOD();
},
e_setDateOD(date) {
let selectedDate = new Date(this.e_yearOD, this.e_monthOD, date);
this.e_selectedDayOD = date;
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_showDatepickerOD = false;
},
e_isSelectedOD(date) {
return this.e_selectedDayOD === date;
},
e_getNoOfDaysOD() {
let daysInMonth = new Date(this.e_yearOD, this.e_monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearOD, this.e_monthOD, 1).getDay();
this.e_blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Dob Functions
prevMonthDOB() {
if (this.monthDOB === 0) {
this.yearDOB--;
this.monthDOB = 11;
} else {
this.monthDOB--;
}
this.getNoOfDaysDOB();
},
nextMonthDOB() {
if (this.monthDOB === 11) {
this.yearDOB++;
this.monthDOB = 0;
} else {
this.monthDOB++;
}
this.getNoOfDaysDOB();
},
setDateDOB(date) {
let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
this.selectedDayDOB = date;
this.datepickerValueDOB = this.formatDate(selectedDate);
this.showDatepickerDOB = false;
},
isSelectedDOB(date) {
return this.selectedDayDOB === date;
},
getNoOfDaysDOB() {
let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit dob
e_prevMonthDOB() {
if (this.e_monthDOB === 0) {
this.e_yearDOB--;
this.e_monthDOB = 11;
} else {
this.e_monthDOB--;
}
this.e_getNoOfDaysDOB();
},
e_nextMonthDOB() {
if (this.e_monthDOB === 11) {
this.e_yearDOB++;
this.e_monthDOB = 0;
} else {
this.e_monthDOB++;
}
this.e_getNoOfDaysDOB();
},
e_setDateDOB(date) {
let selectedDate = new Date(this.e_yearDOB, this.e_monthDOB, date);
this.e_selectedDayDOB = date;
this.e_datepickerValueDOB = this.formatDate(selectedDate);
this.e_showDatepickerDOB = false;
},
e_isSelectedDOB(date) {
return this.e_selectedDayDOB === date;
},
e_getNoOfDaysDOB() {
let daysInMonth = new Date(this.e_yearDOB, this.e_monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearDOB, this.e_monthDOB, 1).getDay();
this.e_blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// datepicker
// multiple select
openPemeriksaanAdd: false,
searchPemeriksaan: "",
selectedPemeriksaan: [],
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
filteredItemPemeriksaan: [],
filterItemPemeriksaan() {
this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
);
},
addItemPemeriksaan(item) {
if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.selectedPemeriksaan.push(item);
this.objForm.pemeriksaan.push(item);
}
this.searchPemeriksaan = "";
this.filterItemPemeriksaan();
},
removeItemPemeriksaan(index) {
this.selectedPemeriksaan.splice(index, 1);
},
// edit multiple
openPemeriksaanEdit: false,
e_searchPemeriksaan: "",
e_selectedPemeriksaan: [],
e_filteredItemPemeriksaan: [],
e_filterItemPemeriksaan() {
if (this.e_searchPemeriksaan.trim() === '') {
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
} else {
this.e_filteredPemeriksaan = this.dataPemeriksaan.filter((item) =>
item.namaPemeriksaan.toLowerCase().includes(this.e_searchPemeriksaan.toLowerCase())
);
}
},
e_ItemPemeriksaan(item) {
if (!this.e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.e_selectedPemeriksaan.push(item);
this.objFormEdit.pemeriksaan.push(item);
}
this.e_searchPemeriksaan = "";
this.e_filterItemPemeriksaan();
},
e_removeItemPemeriksaan(index) {
this.e_selectedPemeriksaan.splice(index, 1);
},
// multiple select
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
isVerifikasiDone: false,
MRN_SID: '',
dataOrder: [
{
idOrder: 1,
date: '01/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '09/05/2008',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 2,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 3,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
},
],
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
mrnAdd: '',
e_mrn: '',
datePickerValueAdd: '',
sidAdd: '',
e_sid: '',
nameAdd: '',
e_name: '',
dobAdd: '',
pemeriksaanAdd: [],
objForm: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
objFormEdit: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
// 1. Inisialisasi End
// 2. Fungsi Start
closeDialog() {
this.pemeriksaanAdd = []
this.filteredItemPemeriksaan = []
this.selectedPemeriksaan = []
this.mrnAdd = ''
this.datePickerValueAdd = ''
this.sidAdd = ''
this.nameAdd = ''
this.dobAdd = ''
this.objForm = {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
}
this.showDialogAdd = false
},
onChangeInstrumentSearch(item) {
this.openInstrumentSearch = false;
this.selectedInstrument = item;
},
onChangeInstrument(item) {
this.openInstrument = false;
this.selectedInstrumentAdd = item;
},
onChangeInstrumentEdit(item) {
this.openInstrument = false;
this.selectedInstrumentEdit = item;
},
onChangeMrnAdd() {
this.objForm.mrn = this.mrnAdd;
},
onChangeMrnEdit() {
this.objFormEdit.mrn = this.e_mrn;
},
onChangeSidAdd() {
this.objForm.sid = this.sidAdd;
},
onChangeSidEdit() {
this.objFormEdit.sid = this.e_sid;
},
onChangeNameAdd() {
this.objForm.name = this.nameAdd;
},
onChangeNameEdit() {
this.objFormEdit.name = this.e_name;
},
onChangeInstrumentMobile(item) {
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},
openModalEdit(item) {
// Order date edit
let selectedDate = new Date(item.date.split('/').reverse().join('-'));
this.e_selectedDayOD = selectedDate.getDate();
this.e_monthOD = selectedDate.getMonth();
this.e_yearOD = selectedDate.getFullYear();
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_getNoOfDaysOD();
// mrn
this.e_mrn = item.mrn
// sid
this.e_sid = item.sid
// name
this.e_name = item.name
// DOB edit
let selectedDateDOB = new Date(item.dob.split('/').reverse().join('-'));
this.e_selectedDayDOB = selectedDateDOB.getDate();
this.e_monthDOB = selectedDateDOB.getMonth();
this.e_yearDOB = selectedDateDOB.getFullYear();
this.e_datepickerValueDOB = this.formatDate(selectedDateDOB);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan
this.e_selectedPemeriksaan = [...item.dataPemeriksaan];
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.showDialogEdit = !this.showDialogEdit;
},
editMobilePage(item) {
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json)
window.location.href = "order_mobile_edit.html";
},
// 2. Fungsi End
}))
})

674
v1-test-cmp/js/order_mobile_add.js Normal file
View File

@@ -0,0 +1,674 @@
document.addEventListener('alpine:init', () => {
Alpine.data('orderMobileAdd', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
let today = new Date();
this.selectedDaySD = today.getDate();
this.month = today.getMonth();
this.year = today.getFullYear();
// this.datepickerValueSD = this.formatDate(today);
this.datepickerValueSD = 'Start Date'
this.getNoOfDays();
this.selectedDaySD = today.getDate();
// End Date Functions
this.selectedDayED = today.getDate();
this.monthED = today.getMonth();
this.yearED = today.getFullYear();
this.datepickerValueED = 'End Date';
this.getNoOfDaysED();
// Order Date
this.selectedDayOD = today.getDate();
this.monthOD = today.getMonth();
this.yearOD = today.getFullYear();
this.datepickerValueOD = this.formatDate(today);
this.getNoOfDaysOD();
this.e_selectedDayOD = today.getDate();
this.e_monthOD = today.getMonth();
this.e_yearOD = today.getFullYear();
this.e_datepickerValueOD = this.formatDate(today);
this.e_getNoOfDaysOD();
// DOB
this.selectedDayDOB = today.getDate();
this.monthDOB = today.getMonth();
this.yearDOB = today.getFullYear();
this.datepickerValueDOB = this.formatDate(today);
this.getNoOfDaysDOB();
this.e_selectedDayDOB = today.getDate();
this.e_monthDOB = today.getMonth();
this.e_yearDOB = today.getFullYear();
this.e_datepickerValueDOB = this.formatDate(today);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan add
this.filteredPemeriksaan = [...this.dataPemeriksaan];
},
// 1. Inisialisasi Start
// datepicker
selectedDaySD: null,
showDatepickerSD: false,
datepickerValueSD: '',
month: 0,
year: 0,
no_of_days: [],
blankdays: [],
selectedDayED: null,
showDatepickerED: false,
datepickerValueED: '',
monthED: 0,
yearED: 0,
no_of_daysED: [],
blankdaysED: [],
// Order Date Variables
showDatepickerOD: false,
selectedDayOD: null,
datepickerValueOD: '',
monthOD: 0,
yearOD: 0,
no_of_daysOD: [],
blankdaysOD: [],
e_showDatepickerOD: false,
e_selectedDayOD: null,
e_datepickerValueOD: '',
e_monthOD: 0,
e_yearOD: 0,
e_no_of_daysOD: [],
e_blankdaysOD: [],
// DOB Variabless
showDatepickerDOB: false,
selectedDayDOB: null,
datepickerValueDOB: '',
monthDOB: 0,
yearDOB: 0,
no_of_daysDOB: [],
blankdaysDOB: [],
e_showDatepickerDOB: false,
e_selectedDayDOB: null,
e_datepickerValueDOB: '',
e_monthDOB: 0,
e_yearDOB: 0,
e_no_of_daysDOB: [],
e_blankdaysDOB: [],
MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
formatDate(date) {
let day = date.getDate().toString().padStart(2, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let year = date.getFullYear();
return `${day}/${month}/${year}`;
},
prevMonth() {
if (this.month === 0) {
this.year--;
this.month = 11;
} else {
this.month--;
}
this.getNoOfDays();
},
nextMonth() {
if (this.month === 11) {
this.year++;
this.month = 0;
} else {
this.month++;
}
this.getNoOfDays();
},
getDateValue(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date; // Simpan tanggal yang dipilih
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
isToday(date) {
let today = new Date();
let d = new Date(this.year, this.month, date);
return today.toDateString() === d.toDateString();
},
isSelected(date) {
return this.selectedDaySD === date;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
let dayOfWeek = new Date(this.year, this.month, 1).getDay();
this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
setDate(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date;
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
// End Date Functions
prevMonthED() {
if (this.monthED === 0) {
this.yearED--;
this.monthED = 11;
} else {
this.monthED--;
}
this.getNoOfDaysED();
},
nextMonthED() {
if (this.monthED === 11) {
this.yearED++;
this.monthED = 0;
} else {
this.monthED++;
}
this.getNoOfDaysED();
},
setDateED(date) {
let selectedDate = new Date(this.yearED, this.monthED, date);
this.selectedDayED = date;
this.datepickerValueED = this.formatDate(selectedDate);
this.showDatepickerED = false;
},
isSelectedED(date) {
return this.selectedDayED === date;
},
getNoOfDaysED() {
let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Order Date Functions
prevMonthOD() {
if (this.monthOD === 0) {
this.yearOD--;
this.monthOD = 11;
} else {
this.monthOD--;
}
this.getNoOfDaysOD();
},
nextMonthOD() {
if (this.monthOD === 11) {
this.yearOD++;
this.monthOD = 0;
} else {
this.monthOD++;
}
this.getNoOfDaysOD();
},
setDateOD(date) {
let selectedDate = new Date(this.yearOD, this.monthOD, date);
this.selectedDayOD = date;
this.datepickerValueOD = this.formatDate(selectedDate);
this.showDatepickerOD = false;
},
isSelectedOD(date) {
return this.selectedDayOD === date;
},
getNoOfDaysOD() {
let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit order date
e_prevMonthOD() {
if (this.e_monthOD === 0) {
this.e_yearOD--;
this.e_monthOD = 11;
} else {
this.e_monthOD--;
}
this.e_getNoOfDaysOD();
},
e_nextMonthOD() {
if (this.e_monthOD === 11) {
this.e_yearOD++;
this.e_monthOD = 0;
} else {
this.e_monthOD++;
}
this.e_getNoOfDaysOD();
},
e_setDateOD(date) {
let selectedDate = new Date(this.e_yearOD, this.e_monthOD, date);
this.e_selectedDayOD = date;
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_showDatepickerOD = false;
},
e_isSelectedOD(date) {
return this.e_selectedDayOD === date;
},
e_getNoOfDaysOD() {
let daysInMonth = new Date(this.e_yearOD, this.e_monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearOD, this.e_monthOD, 1).getDay();
this.e_blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Dob Functions
prevMonthDOB() {
if (this.monthDOB === 0) {
this.yearDOB--;
this.monthDOB = 11;
} else {
this.monthDOB--;
}
this.getNoOfDaysDOB();
},
nextMonthDOB() {
if (this.monthDOB === 11) {
this.yearDOB++;
this.monthDOB = 0;
} else {
this.monthDOB++;
}
this.getNoOfDaysDOB();
},
setDateDOB(date) {
let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
this.selectedDayDOB = date;
this.datepickerValueDOB = this.formatDate(selectedDate);
this.showDatepickerDOB = false;
},
isSelectedDOB(date) {
return this.selectedDayDOB === date;
},
getNoOfDaysDOB() {
let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit dob
e_prevMonthDOB() {
if (this.e_monthDOB === 0) {
this.e_yearDOB--;
this.e_monthDOB = 11;
} else {
this.e_monthDOB--;
}
this.e_getNoOfDaysDOB();
},
e_nextMonthDOB() {
if (this.e_monthDOB === 11) {
this.e_yearDOB++;
this.e_monthDOB = 0;
} else {
this.e_monthDOB++;
}
this.e_getNoOfDaysDOB();
},
e_setDateDOB(date) {
let selectedDate = new Date(this.e_yearDOB, this.e_monthDOB, date);
this.e_selectedDayDOB = date;
this.e_datepickerValueDOB = this.formatDate(selectedDate);
this.e_showDatepickerDOB = false;
},
e_isSelectedDOB(date) {
return this.e_selectedDayDOB === date;
},
e_getNoOfDaysDOB() {
let daysInMonth = new Date(this.e_yearDOB, this.e_monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearDOB, this.e_monthDOB, 1).getDay();
this.e_blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// datepicker
// multiple select
openPemeriksaanAdd: false,
searchPemeriksaan: "",
selectedPemeriksaan: [],
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
filteredItemPemeriksaan: [],
filterItemPemeriksaan() {
this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
);
},
addItemPemeriksaan(item) {
if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.selectedPemeriksaan.push(item);
this.objForm.pemeriksaan.push(item);
}
this.searchPemeriksaan = "";
this.filterItemPemeriksaan();
},
removeItemPemeriksaan(index) {
this.selectedPemeriksaan.splice(index, 1);
},
// edit multiple
openPemeriksaanEdit: false,
e_searchPemeriksaan: "",
e_selectedPemeriksaan: [],
e_filteredItemPemeriksaan: [],
e_filterItemPemeriksaan() {
if (this.e_searchPemeriksaan.trim() === '') {
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
} else {
this.e_filteredPemeriksaan = this.dataPemeriksaan.filter((item) =>
item.namaPemeriksaan.toLowerCase().includes(this.e_searchPemeriksaan.toLowerCase())
);
}
},
e_ItemPemeriksaan(item) {
if (!this.e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.e_selectedPemeriksaan.push(item);
this.objFormEdit.pemeriksaan.push(item);
}
this.e_searchPemeriksaan = "";
this.e_filterItemPemeriksaan();
},
e_removeItemPemeriksaan(index) {
this.e_selectedPemeriksaan.splice(index, 1);
},
// multiple select
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
isVerifikasiDone: false,
MRN_SID: '',
dataOrder: [
{
idOrder: 1,
date: '01/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '09/05/2008',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 2,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 3,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
},
],
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
mrnAdd: '',
e_mrn: '',
datePickerValueAdd: '',
sidAdd: '',
e_sid: '',
nameAdd: '',
e_name: '',
dobAdd: '',
pemeriksaanAdd: [],
objForm: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
objFormEdit: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
// 1. Inisialisasi End
// 2. Fungsi Start
closeDialog() {
this.pemeriksaanAdd = []
this.filteredItemPemeriksaan = []
this.selectedPemeriksaan = []
this.mrnAdd = ''
this.datePickerValueAdd = ''
this.sidAdd = ''
this.nameAdd = ''
this.dobAdd = ''
this.objForm = {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
}
this.showDialogAdd = false
},
onChangeInstrumentSearch(item) {
this.openInstrumentSearch = false;
this.selectedInstrument = item;
},
onChangeInstrument(item) {
this.openInstrument = false;
this.selectedInstrumentAdd = item;
},
onChangeInstrumentEdit(item) {
this.openInstrument = false;
this.selectedInstrumentEdit = item;
},
onChangeMrnAdd() {
this.objForm.mrn = this.mrnAdd;
},
onChangeMrnEdit() {
this.objFormEdit.mrn = this.e_mrn;
},
onChangeSidAdd() {
this.objForm.sid = this.sidAdd;
},
onChangeSidEdit() {
this.objFormEdit.sid = this.e_sid;
},
onChangeNameAdd() {
this.objForm.name = this.nameAdd;
},
onChangeNameEdit() {
this.objFormEdit.name = this.e_name;
},
onChangeInstrumentMobile(item) {
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},
openModalEdit(item) {
// Order date edit
let selectedDate = new Date(item.date.split('/').reverse().join('-'));
this.e_selectedDayOD = selectedDate.getDate();
this.e_monthOD = selectedDate.getMonth();
this.e_yearOD = selectedDate.getFullYear();
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_getNoOfDaysOD();
// mrn
this.e_mrn = item.mrn
// sid
this.e_sid = item.sid
// name
this.e_name = item.name
// DOB edit
let selectedDateDOB = new Date(item.dob.split('/').reverse().join('-'));
this.e_selectedDayDOB = selectedDateDOB.getDate();
this.e_monthDOB = selectedDateDOB.getMonth();
this.e_yearDOB = selectedDateDOB.getFullYear();
this.e_datepickerValueDOB = this.formatDate(selectedDateDOB);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan
this.e_selectedPemeriksaan = [...item.dataPemeriksaan];
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.showDialogEdit = !this.showDialogEdit;
},
editMobilePage(item) {
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json)
window.location.href = "assay_format_mobile_edit.html";
},
// 2. Fungsi End
}))
})

710
v1-test-cmp/js/order_mobile_edit.js Normal file
View File

@@ -0,0 +1,710 @@
document.addEventListener('alpine:init', () => {
Alpine.data('orderMobileEdit', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
if (localStorage.getItem('itemEditMobile') != null) {
let orderData = JSON.parse(localStorage.getItem('itemEditMobile'));
console.log("itemEditMobile ", orderData);
// Set Order Date
let selectedDate = new Date(orderData.date.split('/').reverse().join('-'));
this.selectedDayOD = selectedDate.getDate();
this.monthOD = selectedDate.getMonth();
this.yearOD = selectedDate.getFullYear();
this.datepickerValueOD = this.formatDate(selectedDate);
this.getNoOfDaysOD();
// Set MRN
this.mrnAdd = orderData.mrn;
// Set SID
this.sidAdd = orderData.sid;
// Set Name
this.nameAdd = orderData.name;
// Set DOB
let selectedDateDOB = new Date(orderData.dob.split('/').reverse().join('-'));
this.selectedDayDOB = selectedDateDOB.getDate();
this.monthDOB = selectedDateDOB.getMonth();
this.yearDOB = selectedDateDOB.getFullYear();
this.datepickerValueDOB = this.formatDate(selectedDateDOB);
this.getNoOfDaysDOB();
// Set Pemeriksaan
this.selectedPemeriksaan = [...orderData.dataPemeriksaan];
// Pastikan filtered list pemeriksaan ada
this.filteredPemeriksaan = [...this.dataPemeriksaan];
}
let today = new Date();
this.selectedDaySD = today.getDate();
this.month = today.getMonth();
this.year = today.getFullYear();
// this.datepickerValueSD = this.formatDate(today);
this.datepickerValueSD = 'Start Date'
this.getNoOfDays();
this.selectedDaySD = today.getDate();
// End Date Functions
this.selectedDayED = today.getDate();
this.monthED = today.getMonth();
this.yearED = today.getFullYear();
this.datepickerValueED = 'End Date';
this.getNoOfDaysED();
// Order Date
this.selectedDayOD = today.getDate();
this.monthOD = today.getMonth();
this.yearOD = today.getFullYear();
this.datepickerValueOD = this.formatDate(today);
this.getNoOfDaysOD();
this.e_selectedDayOD = today.getDate();
this.e_monthOD = today.getMonth();
this.e_yearOD = today.getFullYear();
this.e_datepickerValueOD = this.formatDate(today);
this.e_getNoOfDaysOD();
// DOB
this.selectedDayDOB = today.getDate();
this.monthDOB = today.getMonth();
this.yearDOB = today.getFullYear();
this.datepickerValueDOB = this.formatDate(today);
this.getNoOfDaysDOB();
this.e_selectedDayDOB = today.getDate();
this.e_monthDOB = today.getMonth();
this.e_yearDOB = today.getFullYear();
this.e_datepickerValueDOB = this.formatDate(today);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan add
this.filteredPemeriksaan = [...this.dataPemeriksaan];
},
// 1. Inisialisasi Start
// datepicker
selectedDaySD: null,
showDatepickerSD: false,
datepickerValueSD: '',
month: 0,
year: 0,
no_of_days: [],
blankdays: [],
selectedDayED: null,
showDatepickerED: false,
datepickerValueED: '',
monthED: 0,
yearED: 0,
no_of_daysED: [],
blankdaysED: [],
// Order Date Variables
showDatepickerOD: false,
selectedDayOD: null,
datepickerValueOD: '',
monthOD: 0,
yearOD: 0,
no_of_daysOD: [],
blankdaysOD: [],
e_showDatepickerOD: false,
e_selectedDayOD: null,
e_datepickerValueOD: '',
e_monthOD: 0,
e_yearOD: 0,
e_no_of_daysOD: [],
e_blankdaysOD: [],
// DOB Variabless
showDatepickerDOB: false,
selectedDayDOB: null,
datepickerValueDOB: '',
monthDOB: 0,
yearDOB: 0,
no_of_daysDOB: [],
blankdaysDOB: [],
e_showDatepickerDOB: false,
e_selectedDayDOB: null,
e_datepickerValueDOB: '',
e_monthDOB: 0,
e_yearDOB: 0,
e_no_of_daysDOB: [],
e_blankdaysDOB: [],
MONTH_NAMES: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
DAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
formatDate(date) {
let day = date.getDate().toString().padStart(2, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let year = date.getFullYear();
return `${day}/${month}/${year}`;
},
prevMonth() {
if (this.month === 0) {
this.year--;
this.month = 11;
} else {
this.month--;
}
this.getNoOfDays();
},
nextMonth() {
if (this.month === 11) {
this.year++;
this.month = 0;
} else {
this.month++;
}
this.getNoOfDays();
},
getDateValue(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date; // Simpan tanggal yang dipilih
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
isToday(date) {
let today = new Date();
let d = new Date(this.year, this.month, date);
return today.toDateString() === d.toDateString();
},
isSelected(date) {
return this.selectedDaySD === date;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
let dayOfWeek = new Date(this.year, this.month, 1).getDay();
this.blankdays = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
setDate(date) {
let selectedDate = new Date(this.year, this.month, date);
this.selectedDaySD = date;
this.datepickerValueSD = this.formatDate(selectedDate);
this.showDatepickerSD = false;
},
// End Date Functions
prevMonthED() {
if (this.monthED === 0) {
this.yearED--;
this.monthED = 11;
} else {
this.monthED--;
}
this.getNoOfDaysED();
},
nextMonthED() {
if (this.monthED === 11) {
this.yearED++;
this.monthED = 0;
} else {
this.monthED++;
}
this.getNoOfDaysED();
},
setDateED(date) {
let selectedDate = new Date(this.yearED, this.monthED, date);
this.selectedDayED = date;
this.datepickerValueED = this.formatDate(selectedDate);
this.showDatepickerED = false;
},
isSelectedED(date) {
return this.selectedDayED === date;
},
getNoOfDaysED() {
let daysInMonth = new Date(this.yearED, this.monthED + 1, 0).getDate();
let dayOfWeek = new Date(this.yearED, this.monthED, 1).getDay();
this.blankdaysED = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysED = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Order Date Functions
prevMonthOD() {
if (this.monthOD === 0) {
this.yearOD--;
this.monthOD = 11;
} else {
this.monthOD--;
}
this.getNoOfDaysOD();
},
nextMonthOD() {
if (this.monthOD === 11) {
this.yearOD++;
this.monthOD = 0;
} else {
this.monthOD++;
}
this.getNoOfDaysOD();
},
setDateOD(date) {
let selectedDate = new Date(this.yearOD, this.monthOD, date);
this.selectedDayOD = date;
this.datepickerValueOD = this.formatDate(selectedDate);
this.showDatepickerOD = false;
},
isSelectedOD(date) {
return this.selectedDayOD === date;
},
getNoOfDaysOD() {
let daysInMonth = new Date(this.yearOD, this.monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.yearOD, this.monthOD, 1).getDay();
this.blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit order date
e_prevMonthOD() {
if (this.e_monthOD === 0) {
this.e_yearOD--;
this.e_monthOD = 11;
} else {
this.e_monthOD--;
}
this.e_getNoOfDaysOD();
},
e_nextMonthOD() {
if (this.e_monthOD === 11) {
this.e_yearOD++;
this.e_monthOD = 0;
} else {
this.e_monthOD++;
}
this.e_getNoOfDaysOD();
},
e_setDateOD(date) {
let selectedDate = new Date(this.e_yearOD, this.e_monthOD, date);
this.e_selectedDayOD = date;
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_showDatepickerOD = false;
},
e_isSelectedOD(date) {
return this.e_selectedDayOD === date;
},
e_getNoOfDaysOD() {
let daysInMonth = new Date(this.e_yearOD, this.e_monthOD + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearOD, this.e_monthOD, 1).getDay();
this.e_blankdaysOD = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysOD = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// Dob Functions
prevMonthDOB() {
if (this.monthDOB === 0) {
this.yearDOB--;
this.monthDOB = 11;
} else {
this.monthDOB--;
}
this.getNoOfDaysDOB();
},
nextMonthDOB() {
if (this.monthDOB === 11) {
this.yearDOB++;
this.monthDOB = 0;
} else {
this.monthDOB++;
}
this.getNoOfDaysDOB();
},
setDateDOB(date) {
let selectedDate = new Date(this.yearDOB, this.monthDOB, date);
this.selectedDayDOB = date;
this.datepickerValueDOB = this.formatDate(selectedDate);
this.showDatepickerDOB = false;
},
isSelectedDOB(date) {
return this.selectedDayDOB === date;
},
getNoOfDaysDOB() {
let daysInMonth = new Date(this.yearDOB, this.monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.yearDOB, this.monthDOB, 1).getDay();
this.blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// edit dob
e_prevMonthDOB() {
if (this.e_monthDOB === 0) {
this.e_yearDOB--;
this.e_monthDOB = 11;
} else {
this.e_monthDOB--;
}
this.e_getNoOfDaysDOB();
},
e_nextMonthDOB() {
if (this.e_monthDOB === 11) {
this.e_yearDOB++;
this.e_monthDOB = 0;
} else {
this.e_monthDOB++;
}
this.e_getNoOfDaysDOB();
},
e_setDateDOB(date) {
let selectedDate = new Date(this.e_yearDOB, this.e_monthDOB, date);
this.e_selectedDayDOB = date;
this.e_datepickerValueDOB = this.formatDate(selectedDate);
this.e_showDatepickerDOB = false;
},
e_isSelectedDOB(date) {
return this.e_selectedDayDOB === date;
},
e_getNoOfDaysDOB() {
let daysInMonth = new Date(this.e_yearDOB, this.e_monthDOB + 1, 0).getDate();
let dayOfWeek = new Date(this.e_yearDOB, this.e_monthDOB, 1).getDay();
this.e_blankdaysDOB = Array.from({ length: dayOfWeek }, (_, i) => i);
this.e_no_of_daysDOB = Array.from({ length: daysInMonth }, (_, i) => i + 1);
},
// datepicker
// multiple select
openPemeriksaanAdd: false,
searchPemeriksaan: "",
selectedPemeriksaan: [],
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
filteredItemPemeriksaan: [],
filterItemPemeriksaan() {
this.filteredPemeriksaan = this.dataPemeriksaan.filter(item =>
item.namaPemeriksaan.toLowerCase().includes(this.searchPemeriksaan.toLowerCase())
);
},
addItemPemeriksaan(item) {
if (!this.selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.selectedPemeriksaan.push(item);
this.objForm.pemeriksaan.push(item);
}
this.searchPemeriksaan = "";
this.filterItemPemeriksaan();
},
removeItemPemeriksaan(index) {
this.selectedPemeriksaan.splice(index, 1);
},
// edit multiple
openPemeriksaanEdit: false,
e_searchPemeriksaan: "",
e_selectedPemeriksaan: [],
e_filteredItemPemeriksaan: [],
e_filterItemPemeriksaan() {
if (this.e_searchPemeriksaan.trim() === '') {
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
} else {
this.e_filteredPemeriksaan = this.dataPemeriksaan.filter((item) =>
item.namaPemeriksaan.toLowerCase().includes(this.e_searchPemeriksaan.toLowerCase())
);
}
},
e_ItemPemeriksaan(item) {
if (!this.e_selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)) {
this.e_selectedPemeriksaan.push(item);
this.objFormEdit.pemeriksaan.push(item);
}
this.e_searchPemeriksaan = "";
this.e_filterItemPemeriksaan();
},
e_removeItemPemeriksaan(index) {
this.e_selectedPemeriksaan.splice(index, 1);
},
// multiple select
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
isVerifikasiDone: false,
MRN_SID: '',
dataOrder: [
{
idOrder: 1,
date: '01/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '09/05/2008',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 2,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
],
},
{
idOrder: 3,
date: '02/03/2025',
mrn: 'P.2024.205.1',
sid: 'SRK1234SK',
name: 'Joko Santoso',
dob: '01/03/2000',
pemeriksaanStr: 'SGOT, SGPT, GLOB, TBIL, Darah Lengkap',
dataPemeriksaan: [
{
idPemeriksaan: 1,
namaPemeriksaan: 'SGOT'
},
{
idPemeriksaan: 2,
namaPemeriksaan: 'SGPT'
},
{
idPemeriksaan: 3,
namaPemeriksaan: 'GLOB'
},
{
idPemeriksaan: 4,
namaPemeriksaan: 'TBIL'
},
{
idPemeriksaan: 5,
namaPemeriksaan: 'Darah Lengkap'
},
],
},
],
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrument: false,
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
mrnAdd: '',
e_mrn: '',
datePickerValueAdd: '',
sidAdd: '',
e_sid: '',
nameAdd: '',
e_name: '',
dobAdd: '',
pemeriksaanAdd: [],
objForm: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
objFormEdit: {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
},
// 1. Inisialisasi End
// 2. Fungsi Start
closeDialog() {
this.pemeriksaanAdd = []
this.filteredItemPemeriksaan = []
this.selectedPemeriksaan = []
this.mrnAdd = ''
this.datePickerValueAdd = ''
this.sidAdd = ''
this.nameAdd = ''
this.dobAdd = ''
this.objForm = {
date: '',
mrn: '',
sid: '',
name: '',
dob: '',
pemeriksaan: [],
}
this.showDialogAdd = false
},
onChangeInstrumentSearch(item) {
this.openInstrumentSearch = false;
this.selectedInstrument = item;
},
onChangeInstrument(item) {
this.openInstrument = false;
this.selectedInstrumentAdd = item;
},
onChangeInstrumentEdit(item) {
this.openInstrument = false;
this.selectedInstrumentEdit = item;
},
onChangeMrnAdd() {
this.objForm.mrn = this.mrnAdd;
},
onChangeMrnEdit() {
this.objFormEdit.mrn = this.e_mrn;
},
onChangeSidAdd() {
this.objForm.sid = this.sidAdd;
},
onChangeSidEdit() {
this.objFormEdit.sid = this.e_sid;
},
onChangeNameAdd() {
this.objForm.name = this.nameAdd;
},
onChangeNameEdit() {
this.objFormEdit.name = this.e_name;
},
onChangeInstrumentMobile(item) {
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},
openModalEdit(item) {
// Order date edit
let selectedDate = new Date(item.date.split('/').reverse().join('-'));
this.e_selectedDayOD = selectedDate.getDate();
this.e_monthOD = selectedDate.getMonth();
this.e_yearOD = selectedDate.getFullYear();
this.e_datepickerValueOD = this.formatDate(selectedDate);
this.e_getNoOfDaysOD();
// mrn
this.e_mrn = item.mrn
// sid
this.e_sid = item.sid
// name
this.e_name = item.name
// DOB edit
let selectedDateDOB = new Date(item.dob.split('/').reverse().join('-'));
this.e_selectedDayDOB = selectedDateDOB.getDate();
this.e_monthDOB = selectedDateDOB.getMonth();
this.e_yearDOB = selectedDateDOB.getFullYear();
this.e_datepickerValueDOB = this.formatDate(selectedDateDOB);
this.e_getNoOfDaysDOB();
// multiple pemeriksaan
this.e_selectedPemeriksaan = [...item.dataPemeriksaan];
this.e_filteredPemeriksaan = [...this.dataPemeriksaan];
this.showDialogEdit = !this.showDialogEdit;
},
closeDialogEdit() {
this.showDialogEdit = !this.showDialogEdit;
},
editMobilePage(item) {
var json = JSON.stringify(item);
localStorage.setItem('itemEditMobile', json)
window.location.href = "assay_format_mobile_edit.html";
},
// 2. Fungsi End
}))
})

168
v1-test-cmp/js/result.js Normal file
View File

@@ -0,0 +1,168 @@
document.addEventListener('alpine:init', () => {
Alpine.data('result', () => ({
// 0. Init dijalankan sebelum inisialisasi
init() {
},
// 1. Inisialisasi Start
dataSetting: [
{
idSetting: 1,
idJenis: 1,
namaJenis: 'TCP Server',
info: 'Port 5001',
port: '5001',
idInterface: 1,
namaInterface: 'XN550',
idInstrument: 1,
namaInstrument: 'Hema 01',
server: '',
idSerial: -1,
namaSerial: '',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 2,
idJenis: 2,
namaJenis: 'TCP Client',
info: 'Server 192.168.0.1, Port 4000',
port: '4000',
idInterface: 2,
namaInterface: 'Axsym',
idInstrument: 2,
namaInstrument: 'Axsym',
server: '192.168.0.1',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 3,
idJenis: 3,
namaJenis: 'RS232',
info: 'ttyS01, 9600, N, 8, 1',
port: '',
idInterface: 3,
namaInterface: 'C311',
idInstrument: 3,
namaInstrument: 'Cobas C311',
server: '',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '19200',
idParity: 1,
namaParity: 'None',
idDataBit: 2,
namaDataBit: '6',
idStopBit: 2,
namaStopBit: '1'
},
],
rawData: false,
rawDataMobile: false,
showDialogAdd: false,
showDialogEdit: false,
loadingVerifikasi: false,
isVerifikasiDone: false,
sampleID: '',
decimalFontEdit: '',
assayCodeEdit: '',
decimalFont: '',
assayCode: '',
formulaEdit: '',
formulaAdd: '',
dataResult: [
{
idResult: 1,
idInstrument: 1,
namaInstrument: 'Hema 01',
sampleID: '20251209',
assayNo: 'WBC',
result: '100',
date: '2025-05-01 08:00:01',
logs: '',
},
{
idResult: 2,
idInstrument: 2,
namaInstrument: 'Axsym',
sampleID: '20251209',
assayNo: 'IgG',
result: '20',
date: '2025-05-01 08:00:01',
logs: ''
},
{
idResult: 3,
idInstrument: 3,
namaInstrument: 'Cobas C311',
sampleID: '20251209',
assayNo: 'TBIL',
result: '12',
date: '2025-05-01 08:00:01',
logs: ''
},
],
selectedRawData: {
idResult: -1,
idInstrument: -1,
namaInstrument: '',
sampleID: '',
assayNo: '',
result: '',
date: '',
logs: '',
},
selectedInstrument: {
idInstrument: -1,
namaInstrument: 'Instrument'
},
openInstrumentSearchMobile: false,
openInstrumentSearch: false,
dataInstrument: [
{
idInstrument: 1,
namaInstrument: 'Hema 01',
},
{
idInstrument: 2,
namaInstrument: 'Axsym',
},
{
idInstrument: 3,
namaInstrument: 'Cobas C311',
},
],
// 1. Inisialisasi End
// 2. Fungsi Start
onChangeInstrumentSearch(item) {
this.openInstrumentSearch = false;
this.selectedInstrument = item;
},
onChangeInstrumentMobile(item) {
this.openInstrumentSearchMobile = false;
// this.selectedInstrument = item;
this.selectedInstrument = { ...item };
},
openModalRawData(item){
this.selectedRawData = item
this.rawData = true
},
closeDialog(){
this.rawData = false
},
// 2. Fungsi End
}))
})

370
v1-test-cmp/js/settings.js Normal file
View File

@@ -0,0 +1,370 @@
document.addEventListener('alpine:init', () => {
Alpine.data('settingsPage', () => ({
// 0. Init dijalankan sebelum inisialisasi
init(){
},
// 1. Inisialisasi Start
showDialogAdd: false,
showDialogEdit: false,
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: ''
},
dataSetting: [
{
idSetting: 1,
idJenis: 1,
namaJenis: 'TCP Server',
info: 'Port 5001',
port: '5001',
idInterface: 1,
namaInterface: 'XN550',
idInstrument: 1,
namaInstrument: 'Hema 01',
server: '',
idSerial: -1,
namaSerial: '',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 2,
idJenis: 2,
namaJenis: 'TCP Client',
info: 'Server 192.168.0.1, Port 4000',
port: '4000',
idInterface: 2,
namaInterface: 'Axsym',
idInstrument: 2,
namaInstrument: 'Axsym',
server: '192.168.0.1',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '',
idParity: -1,
namaParity: '',
idDataBit: -1,
namaDataBit: '',
idStopBit: -1,
namaStopBit: ''
},
{
idSetting: 3,
idJenis: 3,
namaJenis: 'RS232',
info: 'ttyS01, 9600, N, 8, 1',
port: '',
idInterface: 3,
namaInterface: 'C311',
idInstrument: 3,
namaInstrument: 'Cobas C311',
server: '',
idSerial: 1,
namaSerial: 'ttyS0',
speed: '19200',
idParity: 1,
namaParity: 'None',
idDataBit: 2,
namaDataBit: '6',
idStopBit: 2,
namaStopBit: '1'
},
],
selectedJenis: {
idJenis: -1,
namaJenis: 'Jenis'
},
openJenis: false,
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
closeDialog() {
this.openInterface = false;
this.openInstrument = false;
this.openSerial = false;
this.openParity = false;
this.openDataBit = false;
this.openStopBit = false;
this.selectedJenis = {
idJenis: -1,
namaJenis: 'Jenis'
};
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.showDialogAdd = false
},
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;
},
openModalEdit(item) {
this.selectedJenis = {
idJenis: item.idJenis,
namaJenis: item.namaJenis,
},
this.port = item.port
this.server = item.server
this.selectedInterface = {
idInterface: item.idInterface,
namaInterface: item.namaInterface
}
this.selectedInstrument = {
idInstrument: item.idInstrument,
namaInstrument: item.namaInstrument
}
this.selectedSerial = {
idSerial: item.idSerial,
namaSerial: item.namaSerial
},
this.speed = item.speed
this.selectedParity = {
idParity: item.idParity,
namaParity: item.namaParity
},
this.selectedDataBit = {
idDataBit: item.idDataBit,
namaDataBit: item.namaDataBit
},
this.selectedStopBit = {
idStopBit: item.idStopBit,
namaStopBit: item.namaStopBit
},
this.showDialogEdit = !this.showDialogEdit;
},
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
}))
})

221
v1-test-cmp/js/settings_mobile_add.js Normal file
View File

@@ -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;
},
}))
})

309
v1-test-cmp/js/settings_mobile_edit.js Normal file
View File

@@ -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;
},
}))
})

666
v1-test-cmp/master_data.html Normal file
View File

@@ -0,0 +1,666 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master Data 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-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3] ">ASSAY
FORMAT</a>
</li>
<li>
<a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li class="bg-[#E3F2FD] rounded-sm p-3">
<a href="master_data.html" class="text-[#2196F3] transition font-bold hover:text-black/87">MASTER
DATA</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a href="settings.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">settings</span>
Setting
</div>
</a>
</li>
<li>
<a href="assay_format.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<a href="result.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<a href="order.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Order
</div>
</a>
</li>
<li class="bg-[#E3F2FD] p-2 rounded">
<a href="master_data.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-[#2196F3] font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#2196F3]">calculate</span>
Master Data
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="masterData">
<!-- Bagian Kiri Full (Tabel) -->
<div class="hidden lg: bg-white w-full rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="flex justify-between space-x-2">
<div class="p-2 text-black font-medium text-lg rounded-lg">Master Data</div>
</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Table Desktop -->
<div class="flex-1 overflow-auto h-full">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[10%] text-left text-xs">Kode</th>
<th class="p-2 font-medium text-gray-900 w-[35%] text-left text-xs">Nama Pemeriksaan</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Harga</th>
<th class="p-2 font-medium text-gray-900 w-[35%] text-left text-xs">Assay Details</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-left text-xs">
<button @click="showDialogAdd = !showDialogAdd">
<span class="material-symbols-outlined text-black">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="item in dataMaster" :key="item.idMaster">
<tr>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.kode"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.namaPemeriksaan"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.harga"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.pemeriksaanStr"></td>
<td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined">edit</span></button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- modal add desktop -->
<div x-show="showDialogAdd" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
</div>
<!-- body -->
<div class="flex flex-1 bg-white px-6 py-5">
<div class="relative w-full">
<!-- Kode -->
<label for="Kode"
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="Kode" autocomplete="off" x-model="kodeAdd"
@change="onChangeKodeAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Kode" />
<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">
Kode
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Nama -->
<label for="Nama"
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="Nama" autocomplete="off" x-model="namaAdd"
@change="onChangeNamaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Nama" />
<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">
Nama
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Harga -->
<label for="Harga"
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="Harga" autocomplete="off" x-model="hargaAdd"
@change="onChangeHargaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Harga" />
<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">
Harga
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- table form alat, assay -->
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Alat</th>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Assay</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-left text-xs">
<button @click="formDetail('add')">
<span class="material-symbols-outlined text-black">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="(form, index) in formAddArray" :key="form.idForm">
<tr>
<td class="p-2">
<!-- alat -->
<div class="relative w-full">
<fieldset @click.outside="form.openAlat = 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="form.selectedAlat.idAlat != -1 ? 'Alat' : form.selectedAlat.namaAlat"
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="form.openAlat = !form.openAlat" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="form.selectedAlat.namaAlat"
class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': form.openAlat }" 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="form.openAlat"
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="form.dataAlatForm.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data
tidak ada</li>
</template>
<template x-for="item in form.dataAlatForm"
:key="item.idAlat">
<li :id="item.idAlat"
@click="onChangeInstrument(item, form.idForm, 'add')"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaAlat"></button>
</li>
</template>
</ul>
</div>
</div>
</td>
<td class="p-2">
<div>
<!-- List Assay yang Dipilih -->
<div class="flex flex-wrap gap-2 mb-2">
<template x-for="(item, idx) in form.selectedAssay"
:key="item.idAssay">
<div
class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaAssay"></span>
<button
@click="removeItemAssayToForm(form.idForm, idx, 'add')"
class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700"
fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>
<!-- Input Search Assay -->
<label
class="relative block border rounded-md border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<input type="text" autocomplete="off" x-model="form.searchAssay"
@input="filterItemAssay(index, form, 'add')"
@click="form.openAssayAdd = true"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Assay" />
<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">
Cari Assay
</span>
</label>
<!-- Dropdown List -->
<div x-show="form.openAssayAdd"
@click.away="form.openAssayAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="form.filterItemAssay.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada
hasil</div>
</template>
<template x-for="(item, idxAssayForm) in form.filterItemAssay"
:key="item.idAssay">
<div @click="addItemAssayToForm(item, form.idForm, 'add')"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="form.selectedAssay.some(p => p.idAssay === item.idAssay) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaAssay"></span>
<svg x-show="form.selectedAssay.some(p => p.idAssay === item.idAssay)"
class="w-4 h-4 text-yellow-500" fill="none"
stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 13l4 4L19 7"></path>
</svg>
</div>
</template>
</div>
</div>
</td>
</tr>
</template>
</tbody>
</table>
<!-- table form alat, assay -->
</div>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex justify-end items-center">
<div class="flex items-center space-x-3">
<button @click="closeDialog()" class="text-[#1976D2] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#1976D2] px-4 py-2 rounded-md">
CANCEL
</button>
<button @click="saveA()" class="text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#388E3C]">
SAVE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal add desktop -->
<!-- modal edit desktop -->
<div x-show="showDialogEdit" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
</div>
<!-- body -->
<div class="flex flex-1 bg-white px-6 py-5">
<div class="relative w-full">
<!-- Kode -->
<label for="Kode"
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="Kode" autocomplete="off" x-model="e_kode"
@change="onChangeKodeEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Kode" />
<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">
Kode
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Nama -->
<label for="Nama"
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="Nama" autocomplete="off" x-model="e_nama"
@change="onChangeNamaEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Nama" />
<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">
Nama
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Harga -->
<label for="Harga"
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="Harga" autocomplete="off" x-model="e_harga"
@change="onChangeHargaEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Harga" />
<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">
Harga
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- table form alat, assay -->
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Alat</th>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Assay</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-left text-xs">
<button @click="formDetail('edit')">
<span class="material-symbols-outlined text-black">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="(form, index) in formEditArray" :key="form.idForm">
<tr>
<td class="p-2">
<!-- alat -->
<div class="relative w-full">
<fieldset @click.outside="form.openAlat = 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="form.selectedAlat.idAlat != -1 ? 'Alat' : form.selectedAlat.namaAlat"
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="form.openAlat = !form.openAlat" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="form.selectedAlat.namaAlat"
class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': form.openAlat }" 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="form.openAlat"
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="form.dataAlatForm.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data
tidak ada</li>
</template>
<template x-for="item in form.dataAlatForm"
:key="item.idAlat">
<li :id="item.idAlat"
@click="onChangeInstrument(item, form.idForm, 'edit')"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaAlat"></button>
</li>
</template>
</ul>
</div>
</div>
</td>
<td class="p-2">
<div>
<!-- List Assay yang Dipilih -->
<div class="flex flex-wrap gap-2 mb-2">
<template x-for="(item, idx) in form.selectedAssay"
:key="item.idAssay">
<div
class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaAssay"></span>
<button
@click="removeItemAssayToForm(form.idForm, idx, 'edit')"
class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700"
fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>
<!-- Input Search Assay -->
<label
class="relative block border rounded-md border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<input type="text" autocomplete="off" x-model="form.searchAssay"
@input="filterItemAssay(index, form, 'edit')"
@click="form.openAssayAdd = true"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Assay" />
<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">
Cari Assay
</span>
</label>
<!-- Dropdown List -->
<div x-show="form.openAssayAdd"
@click.away="form.openAssayAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="form.filterItemAssay.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada
hasil</div>
</template>
<template x-for="(item, idxAssayForm) in form.filterItemAssay"
:key="item.idAssay">
<div @click="addItemAssayToForm(item, form.idForm, 'edit')"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="form.selectedAssay.some(p => p.idAssay === item.idAssay) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaAssay"></span>
<svg x-show="form.selectedAssay.some(p => p.idAssay === item.idAssay)"
class="w-4 h-4 text-yellow-500" fill="none"
stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 13l4 4L19 7"></path>
</svg>
</div>
</template>
</div>
</div>
</td>
</tr>
</template>
</tbody>
</table>
<!-- table form alat, assay -->
</div>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex justify-between items-center">
<button @click="deleteData()" class="text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#FF5252] px-4 py-2 rounded-md">
DELETE
</button>
<div class="flex items-center space-x-3">
<button @click="closeDialogEdit()" class="text-[#1976D2] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#1976D2] px-4 py-2 rounded-md">
CANCEL
</button>
<button @click="saveE()" class="text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#388E3C]">
SAVE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal edit desktop -->
<!-- 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">Master Data</h2>
<a href="master_data_mobile_add.html">
<span class="material-symbols-outlined text-[#2196F3]">add</span>
</a>
</div>
<!-- Bagian MOBILE (LIST MASTER DATA) START -->
<div class="w-full lg:hidden rounded-lg flex flex-col flex-1 overflow-auto">
<!-- table become list in mobile -->
<div class="flex flex-row mb-6 lg:hidden lg:mb-0">
<div class="flex flex-col w-full lg:flex-row mb-5">
<template x-for="item in dataMaster" :key="item.idMaster">
<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.kode"></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">Nama Pemeriksaan</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.namaPemeriksaan"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Harga</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.harga"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Assay Format</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.pemeriksaanStr"></p>
</div>
</div>
</template>
</div>
</div>
</div>
<!-- Bagian MOBILE (LIST MASTER DATA) END -->
</div>
<script src="js/master_data.js"></script>
</body>
</html>

215
v1-test-cmp/master_data_mobile_add.html Normal file
View File

@@ -0,0 +1,215 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master Data 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="master_data.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="masterDataPageMobileAdd">
<div class="relative w-full">
<!-- Kode -->
<label for="Kode"
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="Kode" autocomplete="off" x-model="kodeAdd" @change="onChangeKodeAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Kode" />
<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">
Kode
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- Nama -->
<label for="Nama"
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="Nama" autocomplete="off" x-model="namaAdd" @change="onChangeNamaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Nama" />
<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">
Nama
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- Harga -->
<label for="Harga"
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="Harga" autocomplete="off" x-model="hargaAdd" @change="onChangeHargaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Harga" />
<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">
Harga
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- form alat, assay start -->
<div class="pl-2">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-sm mb-4">Alat & Assay</h2>
<div class="relative flex h-4 w-4">
<button @click="formDetail('add')">
<span class="material-symbols-outlined text-black">add</span>
</button>
</div>
</div>
<div class="mt-3">
<template x-for="(form, index) in formAddArray" :key="form.idForm">
<div class="mt-3 mb-3">
<div class="flex">
<!-- alat -->
<div class="relative w-full">
<fieldset @click.outside="form.openAlat = 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="form.selectedAlat.idAlat != -1 ? 'Alat' : form.selectedAlat.namaAlat"
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="form.openAlat = !form.openAlat" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="form.selectedAlat.namaAlat" class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': form.openAlat }" 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="form.openAlat"
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="form.dataAlatForm.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data
tidak ada</li>
</template>
<template x-for="item in form.dataAlatForm" :key="item.idAlat">
<li :id="item.idAlat"
@click="onChangeInstrument(item, form.idForm, 'add')"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaAlat"></button>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="w-full">
<div>
<!-- List Assay yang Dipilih -->
<div class="flex flex-wrap gap-2 mb-2 mt-2">
<template x-for="(item, idx) in form.selectedAssay" :key="item.idAssay">
<div
class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaAssay"></span>
<button @click="removeItemAssayToForm(form.idForm, idx, 'add')"
class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>
<!-- Input Search Assay -->
<label
class="relative block border rounded-md border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<input type="text" autocomplete="off" x-model="form.searchAssay"
@input="filterItemAssay(index, form, 'add')"
@click="form.openAssayAdd = true"
class="w-full peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Assay" />
<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">
Cari Assay
</span>
</label>
<!-- Dropdown List -->
<div x-show="form.openAssayAdd" @click.away="form.openAssayAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="form.filterItemAssay.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada
hasil</div>
</template>
<template x-for="(item, idxAssayForm) in form.filterItemAssay"
:key="item.idAssay">
<div @click="addItemAssayToForm(item, form.idForm, 'add')"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="form.selectedAssay.some(p => p.idAssay === item.idAssay) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaAssay"></span>
<svg x-show="form.selectedAssay.some(p => p.idAssay === item.idAssay)"
class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 13l4 4L19 7">
</path>
</svg>
</div>
</template>
</div>
</div>
</div>
<!-- border bottom -->
<div class="border-b-1 border-dashed border-black mt-3"></div>
</div>
</template>
</div>
</div>
<!-- form alat, assay end -->
<!-- space bottom -->
<div class="mt-30"></div>
<!-- button save -->
<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" @click="saveA()">
Save
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/master_data_mobile_add.js"></script>
</body>

225
v1-test-cmp/master_data_mobile_edit.html Normal file
View File

@@ -0,0 +1,225 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master Data 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="master_data.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="masterDataPageMobileEdit">
<div class="relative w-full">
<!-- Kode -->
<label for="Kode"
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="Kode" autocomplete="off" x-model="e_kode" @change="onChangeKodeEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Kode" />
<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">
Kode
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- Nama -->
<label for="Nama"
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="Nama" autocomplete="off" x-model="e_nama" @change="onChangeNamaEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Nama" />
<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">
Nama
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- Harga -->
<label for="Harga"
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="Harga" autocomplete="off" x-model="e_harga" @change="onChangeHargaEdit()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Harga" />
<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">
Harga
</span>
</label>
<!-- space 20 -->
<div class="mb-5"></div>
<!-- form alat, assay start -->
<div class="pl-2">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-sm mb-4">Alat & Assay</h2>
<div class="relative flex h-4 w-4">
<button @click="formDetail('edit')">
<span class="material-symbols-outlined text-black">add</span>
</button>
</div>
</div>
<div class="mt-3">
<template x-for="(form, index) in formEditArray" :key="form.idForm">
<div class="mt-3 mb-3">
<div class="flex">
<!-- alat -->
<div class="relative w-full">
<fieldset @click.outside="form.openAlat = 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="form.selectedAlat.idAlat != -1 ? 'Alat' : form.selectedAlat.namaAlat"
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="form.openAlat = !form.openAlat" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="form.selectedAlat.namaAlat" class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': form.openAlat }" 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="form.openAlat"
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="form.dataAlatForm.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data
tidak ada</li>
</template>
<template x-for="item in form.dataAlatForm" :key="item.idAlat">
<li :id="item.idAlat"
@click="onChangeInstrument(item, form.idForm, 'edit')"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaAlat"></button>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="w-full">
<div>
<!-- List Assay yang Dipilih -->
<div class="flex flex-wrap gap-2 mb-2 mt-2">
<template x-for="(item, idx) in form.selectedAssay" :key="item.idAssay">
<div
class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaAssay"></span>
<button @click="removeItemAssayToForm(form.idForm, idx, 'edit')"
class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>
<!-- Input Search Assay -->
<label
class="relative block border rounded-md border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<input type="text" autocomplete="off" x-model="form.searchAssay"
@input="filterItemAssay(index, form, 'edit')"
@click="form.openAssayAdd = true"
class="w-full peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Assay" />
<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">
Cari Assay
</span>
</label>
<!-- Dropdown List -->
<div x-show="form.openAssayAdd" @click.away="form.openAssayAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="form.filterItemAssay.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada
hasil</div>
</template>
<template x-for="(item, idxAssayForm) in form.filterItemAssay"
:key="item.idAssay">
<div @click="addItemAssayToForm(item, form.idForm, 'edit')"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="form.selectedAssay.some(p => p.idAssay === item.idAssay) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaAssay"></span>
<svg x-show="form.selectedAssay.some(p => p.idAssay === item.idAssay)"
class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 13l4 4L19 7">
</path>
</svg>
</div>
</template>
</div>
</div>
</div>
<!-- border bottom -->
<div class="border-b-1 border-dashed border-black mt-3"></div>
</div>
</template>
</div>
</div>
<!-- form alat, assay end -->
<!-- space bottom -->
<div class="mt-40"></div>
<!-- button save -->
<!-- Tombol Delete -->
<div class="fixed bottom-0 left-0 w-full bg-white p-4 shadow-lg flex flex-col gap-2">
<button @click="deleteData()" class="text-white font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#fc7979] bg-[#FF5252] w-full">
DELETE
</button>
<button @click="closeDialogEdit()" class="text-white font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#2196F3] bg-[#1976D2] w-full">
CANCEL
</button>
<button @click="saveE()" class="text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#388E3C]">
SAVE
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/master_data_mobile_edit.js"></script>
</body>

410
v1-test-cmp/mcoba.html Normal file
View File

@@ -0,0 +1,410 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master Data 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-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3] ">ASSAY
FORMAT</a>
</li>
<li>
<a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li class="bg-[#E3F2FD] rounded-sm p-3">
<a href="master_data.html" class="text-[#2196F3] transition font-bold hover:text-black/87">MASTER
DATA</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a href="settings.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">settings</span>
Setting
</div>
</a>
</li>
<li>
<a href="assay_format.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<a href="result.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<a href="order.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Order
</div>
</a>
</li>
<li class="bg-[#E3F2FD] p-2 rounded">
<a href="master_data.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-[#2196F3] font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#2196F3]">calculate</span>
Master Data
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="masterData">
<!-- Bagian Kiri Full (Tabel) -->
<div class="hidden lg: bg-white w-full rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="flex justify-between space-x-2">
<div class="p-2 text-black font-medium text-lg rounded-lg">Master Data</div>
</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Table Desktop -->
<div class="flex-1 overflow-auto h-full">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[10%] text-left text-xs">Kode</th>
<th class="p-2 font-medium text-gray-900 w-[35%] text-left text-xs">Nama Pemeriksaan</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Harga</th>
<th class="p-2 font-medium text-gray-900 w-[35%] text-left text-xs">Assay Details</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-left text-xs">
<button @click="showDialogAdd = !showDialogAdd">
<span class="material-symbols-outlined text-black">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="item in dataMaster" :key="item.idMaster">
<tr>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.kode"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.namaPemeriksaan"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.harga"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.pemeriksaanStr"></td>
<td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined">edit</span></button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- modal add desktop -->
<div x-show="showDialogAdd" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
</div>
<!-- body -->
<div class="flex flex-1 bg-white px-6 py-5">
<div class="relative w-full">
<!-- Kode -->
<label for="Kode"
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="Kode" autocomplete="off" x-model="kodeAdd"
@change="onChangeKodeAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Kode" />
<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">
Kode
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Nama -->
<label for="Nama"
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="Nama" autocomplete="off" x-model="namaAdd"
@change="onChangeNamaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Nama" />
<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">
Nama
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- Harga -->
<label for="Harga"
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="Harga" autocomplete="off" x-model="hargaAdd"
@change="onChangeHargaAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Harga" />
<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">
Harga
</span>
</label>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- table form alat, assay -->
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Alat</th>
<th class="p-2 font-medium text-gray-900 w-[47.5%] text-left text-xs">Assay</th>
<th class="p-2 font-medium text-gray-900 w-[5%] text-left text-xs">
<button @click="formAddDetail()">
<span class="material-symbols-outlined text-black">add</span>
</button>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="(form, index) in formAddArray" :key="form.idForm">
<tr>
<td class="p-2">
<!-- alat -->
<div class="relative w-full">
<fieldset @click.outside="form.openAlat = 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="form.selectedAlat.idAlat != -1 ? 'Alat' : form.selectedAlat.namaAlat"
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="form.openAlat = !form.openAlat" type="button"
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
<span x-text="form.selectedAlat.namaAlat"
class="text-left"></span>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': form.openAlat }" 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="form.openAlat"
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="form.dataAlatForm.length === 0">
<li class="py-2 px-3 text-gray-500 text-center">Data
tidak ada</li>
</template>
<template x-for="item in form.dataAlatForm" :key="item.idAlat">
<li :id="item.idAlat" @click="onChangeInstrument(item, form.idForm)"
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
<button x-text="item.namaAlat"></button>
</li>
</template>
</ul>
</div>
</div>
</td>
<td class="p-2">
<div>
<!-- List Assay yang Dipilih -->
<div class="flex flex-wrap gap-2 mb-2">
<template x-for="(item, idx) in form.selectedAssay"
:key="item.idAssay">
<div
class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaAssay"></span>
<button @click="removeItemAssayToForm(form.idForm, idx)"
class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700"
fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>
<!-- Input Search Assay -->
<label
class="relative block border rounded-md border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
<input type="text" autocomplete="off" x-model="form.searchAssay"
@input="filterItemAssay(index, form)"
@click="form.openAssayAdd = true"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Assay" />
<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">
Cari Assay
</span>
</label>
<!-- Dropdown List -->
<div x-show="form.openAssayAdd"
@click.away="form.openAssayAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="form.filterItemAssay.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada
hasil</div>
</template>
<template x-for="(item, idxAssayForm) in form.filterItemAssay"
:key="item.idAssay">
<div @click="addItemAssayToForm(item, form.idForm)"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="form.selectedAssay.some(p => p.idAssay === item.idAssay) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaAssay"></span>
<svg x-show="form.selectedAssay.some(p => p.idAssay === item.idAssay)"
class="w-4 h-4 text-yellow-500" fill="none"
stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 13l4 4L19 7"></path>
</svg>
</div>
</template>
</div>
</div>
</td>
</tr>
</template>
</tbody>
</table>
<!-- table form alat, assay -->
</div>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex justify-between items-center">
<button @click="closeDialog()" class="text-[#FF5252] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#FF5252] px-4 py-2 rounded-md">
DELETE
</button>
<div class="flex items-center space-x-3">
<button @click="closeDialog()" class="text-[#1976D2] hover:text-white font-bold text-sm uppercase transition duration-200
hover:bg-[#1976D2] px-4 py-2 rounded-md">
CANCEL
</button>
<button @click="saveA()" class="text-white bg-[#4CAF50] font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200
hover:bg-[#388E3C]">
SAVE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal add desktop -->
</div>
<script src="js/mcoba.js"></script>
</body>
</html>

1220
v1-test-cmp/order.html Normal file
View File

File diff suppressed because it is too large Load Diff

274
v1-test-cmp/order_mobile_add.html Normal file
View File

@@ -0,0 +1,274 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order 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="order.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="orderMobileAdd">
<div class="relative w-full ">
<!-- Order Date -->
<label for="Order Date"
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="Order Date" autocomplete="off" x-model="datepickerValueOD"
@click="showDatepickerOD = true" readonly
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Order Date" />
<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">
Order Date
</span>
</label>
<!-- Datepicker Modal for Order Date -->
<div x-show="showDatepickerOD"
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
@click.away="showDatepickerOD = false">
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
<div class="flex justify-between items-center mb-4">
<button @click="prevMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" 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>
</button>
<span class="text-lg font-bold text-gray-800"
x-text="MONTH_NAMES[monthOD] + ' ' + yearOD"></span>
<button @click="nextMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
<template x-for="day in DAYS">
<div x-text="day"></div>
</template>
</div>
<div class="grid grid-cols-7 text-sm">
<template x-for="date in no_of_daysOD">
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
:class="{'bg-blue-500 text-white': isSelectedOD(date)}" @click="setDateOD(date)">
<span x-text="date"></span>
</div>
</template>
</div>
<div class="mt-4 text-center">
<button @click="showDatepickerOD = false"
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
Tutup
</button>
</div>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- MRN -->
<label for="MRN"
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="MRN" autocomplete="off" x-model="mrnAdd" @change="onChangeMrnAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="MRN" />
<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">
MRN
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- SID -->
<label for="SID"
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="SID" autocomplete="off" x-model="sidAdd" @change="onChangeSidAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="SID" />
<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">
SID
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Name -->
<label for="Name"
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="Name" autocomplete="off" x-model="nameAdd" @change="onChangeNameAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Name" />
<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">
Name
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- DOB -->
<label for="DOB"
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="DOB" autocomplete="off" x-model="datepickerValueDOB"
@click="showDatepickerDOB = true" readonly
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="DOB" />
<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">
DOB
</span>
</label>
<!-- Datepicker Modal for DOB -->
<div x-show="showDatepickerDOB"
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
@click.away="showDatepickerDOB = false">
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
<div class="flex justify-between items-center mb-4">
<button @click="prevMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" 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>
</button>
<span class="text-lg font-bold text-gray-800"
x-text="MONTH_NAMES[monthDOB] + ' ' + yearDOB"></span>
<button @click="nextMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
<template x-for="day in DAYS">
<div x-text="day"></div>
</template>
</div>
<div class="grid grid-cols-7 text-sm">
<template x-for="date in no_of_daysDOB">
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
:class="{'bg-blue-500 text-white': isSelectedDOB(date)}" @click="setDateDOB(date)">
<span x-text="date"></span>
</div>
</template>
</div>
<div class="mt-4 text-center">
<button @click="showDatepickerDOB = false"
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
Tutup
</button>
</div>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- pemeriksaan -->
<label for="Pemeriksaan"
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="Pemeriksaan" autocomplete="off" x-model="searchPemeriksaan"
@click="openPemeriksaanAdd = true" @input="filterItemPemeriksaan()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Pemeriksaan" />
<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">
Cari Pemeriksaan
</span>
</label>
<div>
<!-- List Dipilih -->
<div class="flex flex-wrap gap-2 mt-2">
<template x-for="(item, index) in selectedPemeriksaan" :key="item.idPemeriksaan">
<div class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaPemeriksaan"></span>
<button @click="removeItemPemeriksaan(index)" class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
</template>
</div>
<!-- Dropdown List -->
<div x-show="openPemeriksaanAdd" @click.away="openPemeriksaanAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="filteredPemeriksaan.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
</template>
<template x-for="item in filteredPemeriksaan" :key="item.idPemeriksaan">
<div @click="addItemPemeriksaan(item)"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaPemeriksaan"></span>
<svg x-show="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)"
class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7">
</path>
</svg>
</div>
</template>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
</div>
<div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
<button @click="save()"
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm
? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white'
: 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
Save
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/order_mobile_add.js"></script>
</body>
</html>

273
v1-test-cmp/order_mobile_edit.html Normal file
View File

@@ -0,0 +1,273 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order 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="order.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="orderMobileEdit">
<div class="relative w-full ">
<!-- Order Date -->
<label for="Order Date"
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="Order Date" autocomplete="off" x-model="datepickerValueOD"
@click="showDatepickerOD = true" readonly
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Order Date" />
<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">
Order Date
</span>
</label>
<!-- Datepicker Modal for Order Date -->
<div x-show="showDatepickerOD"
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
@click.away="showDatepickerOD = false">
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
<div class="flex justify-between items-center mb-4">
<button @click="prevMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" 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>
</button>
<span class="text-lg font-bold text-gray-800"
x-text="MONTH_NAMES[monthOD] + ' ' + yearOD"></span>
<button @click="nextMonthOD()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
<template x-for="day in DAYS">
<div x-text="day"></div>
</template>
</div>
<div class="grid grid-cols-7 text-sm">
<template x-for="date in no_of_daysOD">
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
:class="{'bg-blue-500 text-white': isSelectedOD(date)}" @click="setDateOD(date)">
<span x-text="date"></span>
</div>
</template>
</div>
<div class="mt-4 text-center">
<button @click="showDatepickerOD = false"
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
Tutup
</button>
</div>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- MRN -->
<label for="MRN"
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="MRN" autocomplete="off" x-model="mrnAdd" @change="onChangeMrnAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="MRN" />
<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">
MRN
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- SID -->
<label for="SID"
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="SID" autocomplete="off" x-model="sidAdd" @change="onChangeSidAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="SID" />
<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">
SID
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- Name -->
<label for="Name"
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="Name" autocomplete="off" x-model="nameAdd" @change="onChangeNameAdd()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Name" />
<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">
Name
</span>
</label>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- DOB -->
<label for="DOB"
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="DOB" autocomplete="off" x-model="datepickerValueDOB"
@click="showDatepickerDOB = true" readonly
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="DOB" />
<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">
DOB
</span>
</label>
<!-- Datepicker Modal for DOB -->
<div x-show="showDatepickerDOB"
class="fixed inset-0 flex items-center justify-center bg-black/50 transition-opacity z-50"
@click.away="showDatepickerDOB = false">
<div class="bg-white shadow-lg rounded-lg p-6 w-[18rem]">
<div class="flex justify-between items-center mb-4">
<button @click="prevMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" 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>
</button>
<span class="text-lg font-bold text-gray-800"
x-text="MONTH_NAMES[monthDOB] + ' ' + yearDOB"></span>
<button @click="nextMonthDOB()" class="p-1 rounded-full hover:bg-gray-200">
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<div class="grid grid-cols-7 text-xs font-bold text-center text-gray-800 mb-2">
<template x-for="day in DAYS">
<div x-text="day"></div>
</template>
</div>
<div class="grid grid-cols-7 text-sm">
<template x-for="date in no_of_daysDOB">
<div class="text-center cursor-pointer p-2 rounded-full transition hover:bg-blue-200"
:class="{'bg-blue-500 text-white': isSelectedDOB(date)}" @click="setDateDOB(date)">
<span x-text="date"></span>
</div>
</template>
</div>
<div class="mt-4 text-center">
<button @click="showDatepickerDOB = false"
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md">
Tutup
</button>
</div>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
<!-- pemeriksaan -->
<label for="Pemeriksaan"
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="Pemeriksaan" autocomplete="off" x-model="searchPemeriksaan"
@click="openPemeriksaanAdd = true" @input="filterItemPemeriksaan()"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Cari Pemeriksaan" />
<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">
Cari Pemeriksaan
</span>
</label>
<div>
<!-- List Dipilih -->
<div class="flex flex-wrap gap-2 mt-2">
<template x-for="(item, index) in selectedPemeriksaan" :key="item.idPemeriksaan">
<div class="flex items-center bg-blue-100 text-blue-700 text-sm px-2 py-1 rounded-md">
<span x-text="item.namaPemeriksaan"></span>
<button @click="removeItemPemeriksaan(index)" class="ml-2 focus:outline-none">
<svg class="w-4 h-4 text-blue-500 hover:text-blue-700" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
</template>
</div>
<!-- Dropdown List -->
<div x-show="openPemeriksaanAdd" @click.away="openPemeriksaanAdd = false"
class="absolute left-0 mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto transition-all duration-200">
<template x-if="filteredPemeriksaan.length === 0">
<div class="p-2 text-gray-500 text-sm text-center">Tidak ada hasil</div>
</template>
<template x-for="item in filteredPemeriksaan" :key="item.idPemeriksaan">
<div @click="addItemPemeriksaan(item)"
class="cursor-pointer p-2 hover:bg-blue-100 flex items-center justify-between"
:class="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan) ? 'bg-yellow-100 text-yellow-800' : ''">
<span x-text="item.namaPemeriksaan"></span>
<svg x-show="selectedPemeriksaan.some(p => p.idPemeriksaan === item.idPemeriksaan)"
class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7">
</path>
</svg>
</div>
</template>
</div>
</div>
<!-- space 20 -->
<div class="mb-5 "></div>
</div>
<div class="fixed bottom-0 left-0 w-full bg-white h-15 flex items-center align-middle shadow-custom p-4">
<button @click="save()"
class="w-full px-4 py-2 rounded-[4px] transition duration-200 font-bold text-sm uppercase" :class="objForm.isValidForm
? 'bg-[#1976D2] text-white hover:bg-[#2196F3] hover:text-white'
: 'bg-[#0000001F] text-[#00000042] cursor-not-allowed'" :disabled="!objForm.isValidForm">
Save
</button>
</div>
</div>
<!-- konten utama -->
<script src="js/order_mobile_edit.js"></script>
</body>
</html>

542
v1-test-cmp/result.html Normal file
View File

@@ -0,0 +1,542 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Result 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-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY
FORMAT</a>
</li>
<li class="bg-[#E3F2FD] rounded-sm p-3">
<a href="result.html" class="text-[#2196F3] transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li>
<a href="master_data.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">MASTER
DATA</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a href="settings.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">settings</span>
Setting
</div>
</a>
</li>
<li>
<a href="assay_format.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li class="bg-[#E3F2FD] p-2 rounded">
<a href="result.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-[#2196F3] font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#2196F3]">calculate</span>
Result
</div>
</a>
</li>
<li>
<a href="order.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Order
</div>
</a>
</li>
<li>
<a href="master_data.html"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span>
Master Data
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen" x-data="result">
<!-- Bagian Kiri (Tabel) -->
<div class="hidden lg: bg-white w-2/3 rounded-lg p-5 lg:flex flex-col flex-1 overflow-hidden">
<div class="p-2 text-black font-medium text-lg rounded-lg">Result</div>
<!-- space 20 -->
<div class="mb-0 lg:mb-5"></div>
<!-- inputan search -->
<div class="flex flex-row gap-4 w-full">
<div class="relative w-1/2">
<!-- instrument -->
<fieldset @click.outside="openInstrumentSearch = 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="openInstrumentSearch = !openInstrumentSearch" 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': openInstrumentSearch }" 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="openInstrumentSearch"
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="onChangeInstrumentSearch(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>
<div class="w-1/2">
<!-- Sample ID -->
<label for="Sample ID"
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="Sample ID" x-model="sampleID"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Sample ID" />
<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">
Sample ID
</span>
</label>
</div>
</div>
<!-- space 16 -->
<div class="mb-0 lg:mb-4"></div>
<!-- Table Desktop -->
<div class="flex-1 overflow-auto h-full">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
<thead>
<tr>
<th class="p-2 font-medium text-gray-900 w-[25%] text-left text-xs">Instrument</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Sample ID</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Assay No</th>
<th class="p-2 font-medium text-gray-900 w-[15%] text-left text-xs">Result</th>
<th class="p-2 font-medium text-gray-900 w-[40%] text-left text-xs">Date</th>
<th>
#
</th>
<!-- <th class="p-2 font-medium text-gray-900 w-[5%] text-center">
<button @click="showDialogAdd = !showDialogAdd">
<span class="material-symbols-outlined">add</span>
</button>
</th> -->
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<template x-for="item in dataResult" :key="item.idResult">
<tr>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.namaInstrument"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.sampleID"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.assayNo"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.result"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-black/87 p-2"
x-text="item.date"></td>
<td class="text-wrap align-top text-left font-normal text-xs text-[#2196F3] p-2">
<button @click="openModalRawData(item)"><span class="material-symbols-outlined">
visibility
</span>
</button>
</td>
<!-- <td class="text-wrap align-top text-center font-normal text-xs text-[#2196F3] p-2">
<button @click="openModalEdit(item)"><span
class="material-symbols-outlined">edit</span></button>
</td> -->
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- modal raw data -->
<div x-show="rawData" x-transition.duration.200ms class="fixed z-10 inset-0">
<div class="flex items-center justify-center min-h-screen bg-[#0F0F0F4D] transition-all">
<!-- box -->
<div
class="flex flex-col bg-white rounded-lg w-[80%] lg:w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
<!-- header -->
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">raw data</h3>
</div>
<!-- body -->
<div class="mx-6 my-5">
<template x-if="selectedRawData.idResult != -1">
<div>
<!-- desktop -->
<div class="hidden lg:flex items-center px-4 py-2 border-b border-gray-200 w-full">
<span class="text-gray-900 w-1/5" x-text="selectedRawData.namaInstrument"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.sampleID"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.assayNo"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.result"></span>
<span class="text-gray-900 w-1/5" x-text="selectedRawData.date"></span>
</div>
<!-- mobile -->
<div class="px-4 py-2 lg:hidden">
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Info</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.namaInstrument"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Sample ID</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.sampleID"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Assay No</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.assayNo"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Result</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.result"></p>
</div>
<div class="flex justify-between">
<p class="text-gray-900 font-normal text-sm mb-2">Result</p>
<p class="text-gray-900 font-normal text-sm mb-2"
x-text="selectedRawData.date"></p>
</div>
</div>
<div class="flex flex-1 bg-[#F0F2F5DE] flex-col rounded-lg mt-5 p-5">
<h3 class="font-normal text-base text-black/87 mb-3">Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
dignissimos impedit mollitia esse odit sequi facere praesentium possimus
suscipit optio eveniet, nam fuga perferendis.Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Laboriosam autem sunt commodi, officiis eaque
ducimus amet, culpa expedita eum soluta repellat sed accusantium minus!
Perferendis nesciunt quidem eius iste dicta.Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Magni veniam omnis nostrum ipsam ducimus, velit
dignissimos impedit mollitia esse odit sequi facere praesentium possimus
suscipit optio eveniet, nam fuga perferendis.</h3>
</div>
</div>
</template>
</div>
<!-- footer -->
<div class="h-10 px-4 py-2 mb-5">
<div class="flex items-end justify-end">
<button @click="closeDialog()"
class="text-[#1976D2] bg-white font-bold text-sm uppercase px-4 py-2 rounded-md transition duration-200 hover:bg-white hove:text-white">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<!-- modal raw data -->
<!-- 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">Result</h2>
</div>
<!-- dialog instrument mobile start -->
<div>
<!-- Overlay -->
<div x-show="openInstrumentSearchMobile" class="fixed inset-0 bg-black/50 transition-opacity z-50"
@click="openInstrumentSearchMobile = false">
</div>
<!-- Modal -->
<div x-show="openInstrumentSearchMobile" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="openInstrumentSearchMobile ? 'translate-y-0' : 'translate-y-full'">
<div class="flex justify-between space-x-2">
<p class="text-[16px] font-medium text-[#212B36]">Instrument</p>
<button @click="openInstrumentSearchMobile = false">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-[#637381] hover:text-gray-700 transition-colors" viewBox="0 0 24 24"
fill="none">
<path
d="M13.4099 12.0002L17.7099 7.71019C17.8982 7.52188 18.004 7.26649 18.004 7.00019C18.004 6.73388 17.8982 6.47849 17.7099 6.29019C17.5216 6.10188 17.2662 5.99609 16.9999 5.99609C16.7336 5.99609 16.4782 6.10188 16.2899 6.29019L11.9999 10.5902L7.70994 6.29019C7.52164 6.10188 7.26624 5.99609 6.99994 5.99609C6.73364 5.99609 6.47824 6.10188 6.28994 6.29019C6.10164 6.47849 5.99585 6.73388 5.99585 7.00019C5.99585 7.26649 6.10164 7.52188 6.28994 7.71019L10.5899 12.0002L6.28994 16.2902C6.19621 16.3831 6.12182 16.4937 6.07105 16.6156C6.02028 16.7375 5.99414 16.8682 5.99414 17.0002C5.99414 17.1322 6.02028 17.2629 6.07105 17.3848C6.12182 17.5066 6.19621 17.6172 6.28994 17.7102C6.3829 17.8039 6.4935 17.8783 6.61536 17.9291C6.73722 17.9798 6.86793 18.006 6.99994 18.006C7.13195 18.006 7.26266 17.9798 7.38452 17.9291C7.50638 17.8783 7.61698 17.8039 7.70994 17.7102L11.9999 13.4102L16.2899 17.7102C16.3829 17.8039 16.4935 17.8783 16.6154 17.9291C16.7372 17.9798 16.8679 18.006 16.9999 18.006C17.132 18.006 17.2627 17.9798 17.3845 17.9291C17.5064 17.8783 17.617 17.8039 17.7099 17.7102C17.8037 17.6172 17.8781 17.5066 17.9288 17.3848C17.9796 17.2629 18.0057 17.1322 18.0057 17.0002C18.0057 16.8682 17.9796 16.7375 17.9288 16.6156C17.8781 16.4937 17.8037 16.3831 17.7099 16.2902L13.4099 12.0002Z"
fill="currentColor" />
</svg>
</button>
</div>
<!-- spacer 24px -->
<div class="mb-6"></div>
<!-- list radio button -->
<div class="max-h-[200px] overflow-y-auto">
<template x-if="dataInstrument.length === 0">
<p class="py-2 px-3 text-gray-500 text-center">Data tidak ada</p>
</template>
<template x-for="item in dataInstrument" :key="item.idInstrument">
<div :id="item.idInstrument" class="mb-6">
<label class="flex items-center space-x-3 cursor-pointer">
<input type="radio" :value="item.idInstrument" class="peer hidden"
x-model="selectedInstrument.idInstrument" @change="onChangeInstrumentMobile(item)">
<div
class="w-5 h-5 border-2 border-gray-400 rounded-full flex items-center justify-center peer-checked:border-[#2196F3] peer-checked:bg-[#2196F3]">
<div class="w-2 h-2 bg-white rounded-full opacity-100 transition"></div>
</div>
<span class="text-gray-900" x-text="item.namaInstrument"></span>
</label>
</div>
</template>
</div>
</div>
</div>
<!-- dialog instrument mobile end -->
<!-- Bagian Kanan (PORT STATUS) -->
<div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<!-- table become list in mobile -->
<!-- inputan selected -->
<div class="bg-white w-full flex flex-row lg:hidden lg:mb-0">
<!-- instrument selected -->
<div class="bg-white w-full px-3 py-2" @click="openInstrumentSearchMobile = true">
<div class="flex justify-between items-center">
<p class="text-black/60" aria-readonly="true" x-text="(selectedInstrument.idInstrument != -1)
? selectedInstrument.namaInstrument
: 'Instrument'"></p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform text-[#0000008A]"
: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>
</div>
</div>
</div>
<!-- spacer 8px -->
<div class="mb-2"></div>
<!-- Sample ID Inputan -->
<div class="bg-white w-full px-3 py-2 mb-6 lg:hidden lg:mb-0">
<label for="Sample ID"
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="Sample ID" x-model="sampleID"
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
placeholder="Sample ID" />
<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">
Sample ID
</span>
</label>
</div>
<div class="flex flex-row mb-6 lg:hidden lg:mb-0">
<div class="flex flex-col w-full lg:flex-row mb-5">
<template x-for="item in dataResult" :key="item.idResult">
<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.namaInstrument"></h2>
<div class="relative flex h-4 w-4">
<button @click="openModalRawData(item)"><span
class="material-symbols-outlined text-[#2196F3]">
visibility
</span>
</button>
</div>
</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">Sample ID</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.sampleID"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Assay No</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.assayNo"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Result</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.result"></p>
</div>
<div class="flex justify-between">
<p class="text-[#00000099] font-normal text-sm mb-2">Date</p>
<p class="text-black/87 font-normal text-sm mb-2" x-text="item.date"></p>
</div>
</div>
</template>
</div>
</div>
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
<div class="flex flex-row">
<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">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/result.js"></script>
</body>
</html>

1245
v1-test-cmp/settings.html Normal file
View File

File diff suppressed because it is too large Load Diff

488
v1-test-cmp/settings_mobile_add.html Normal file
View File

@@ -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">
<!-- 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 ">
<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>

491
v1-test-cmp/settings_mobile_edit.html Normal file
View File

@@ -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 ">
<!-- 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 ">
<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" 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 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>

0
v1-test-cmp/tailwind.config.js Normal file
View File