step 53 : copy dan paste v1, untuk komponen reusable
This commit is contained in:
sindhu
730
v1-test-cmp/assay_format.html
Normal file
730
v1-test-cmp/assay_format.html
Normal 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
162
v1-test-cmp/assay_format_mobile_add.html
Normal 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
165
v1-test-cmp/assay_format_mobile_edit.html
Normal 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
251
v1-test-cmp/dashboard.html
Normal 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
133
v1-test-cmp/index.html
Normal 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
253
v1-test-cmp/js/assay_format.js
Normal 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
94
v1-test-cmp/js/assay_format_mobile_add.js
Normal 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
109
v1-test-cmp/js/assay_format_mobile_edit.js
Normal 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
352
v1-test-cmp/js/master_data.js
Normal 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
149
v1-test-cmp/js/master_data_mobile_add.js
Normal 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
195
v1-test-cmp/js/master_data_mobile_edit.js
Normal 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
231
v1-test-cmp/js/mcoba.js
Normal 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
674
v1-test-cmp/js/order.js
Normal 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
674
v1-test-cmp/js/order_mobile_add.js
Normal 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
710
v1-test-cmp/js/order_mobile_edit.js
Normal 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
168
v1-test-cmp/js/result.js
Normal 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
370
v1-test-cmp/js/settings.js
Normal 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
221
v1-test-cmp/js/settings_mobile_add.js
Normal 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
309
v1-test-cmp/js/settings_mobile_edit.js
Normal 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
666
v1-test-cmp/master_data.html
Normal 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
215
v1-test-cmp/master_data_mobile_add.html
Normal 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
225
v1-test-cmp/master_data_mobile_edit.html
Normal 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
410
v1-test-cmp/mcoba.html
Normal 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
1220
v1-test-cmp/order.html
Normal file
File diff suppressed because it is too large
Load Diff
274
v1-test-cmp/order_mobile_add.html
Normal file
274
v1-test-cmp/order_mobile_add.html
Normal 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
273
v1-test-cmp/order_mobile_edit.html
Normal 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
542
v1-test-cmp/result.html
Normal 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
1245
v1-test-cmp/settings.html
Normal file
File diff suppressed because it is too large
Load Diff
488
v1-test-cmp/settings_mobile_add.html
Normal file
488
v1-test-cmp/settings_mobile_add.html
Normal 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
491
v1-test-cmp/settings_mobile_edit.html
Normal 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
0
v1-test-cmp/tailwind.config.js
Normal file
Reference in New Issue
Block a user