step 29 : modal edit form assay format
This commit is contained in:
sindhu
@@ -243,20 +243,18 @@
|
|||||||
<label for="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">
|
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"
|
<textarea id="Formula" x-model="formulaAdd"
|
||||||
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"
|
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>
|
placeholder="Formula"></textarea>
|
||||||
|
|
||||||
<span class="pointer-events-none absolute start-2.5 top-0 bg-white p-0.5 text-xs text-gray-700 transition-all
|
<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-[25%] peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm
|
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">
|
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
|
Formula
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- btn verifikasi -->
|
<!-- btn verifikasi -->
|
||||||
<div class="flex justify-end items-end">
|
<div class="flex justify-end items-end">
|
||||||
<button @click="onProcessVerifiaksi()" class="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
|
<button @click="onProcessVerifiaksi()" class="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
|
||||||
@@ -310,450 +308,119 @@
|
|||||||
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
|
<div class="flex flex-col bg-white rounded-lg w-2/3 min-h-[300px] max-h-[90vh] overflow-y-auto">
|
||||||
<!-- header -->
|
<!-- header -->
|
||||||
<div class="bg-[#2196F3] flex w-full h-10 rounded-tl-lg rounded-tr-lg">
|
<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>
|
<h3 class="text-xl font-bold uppercase text-white px-4 py-1">add</h3>
|
||||||
</div>
|
</div>
|
||||||
<!-- body -->
|
<!-- body -->
|
||||||
<div class="flex flex-1 bg-white px-6 py-5">
|
<div class="flex flex-1 bg-white px-6 py-5">
|
||||||
<div class="relative w-full">
|
<div class="relative w-full">
|
||||||
<fieldset @click.outside="openJenis = false"
|
<!-- 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">
|
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"
|
<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">
|
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>
|
</span>
|
||||||
<button @click="openJenis = !openJenis" type="button"
|
<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">
|
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>
|
<span x-text="selectedInstrument.namaInstrument" class="text-left"></span>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
|
<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"
|
:class="{ 'rotate-180': openInstrument }" fill="none" viewBox="0 0 24 24"
|
||||||
stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M19 9l-7 7-7-7" />
|
d="M19 9l-7 7-7-7" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
<div x-show="openInstrument"
|
||||||
<!-- list menu -->
|
|
||||||
<div x-show="openJenis"
|
|
||||||
class="absolute bg-white w-full border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto">
|
class="absolute bg-white w-full border border-gray-300 rounded-md shadow-lg z-10 max-h-[200px] overflow-y-auto">
|
||||||
<ul>
|
<ul>
|
||||||
<template x-if="dataJenis.length === 0">
|
<template x-if="dataInstrument.length === 0">
|
||||||
<li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
|
<li class="py-2 px-3 text-gray-500 text-center">Data tidak ada</li>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in dataJenis" :key="item.idJenis">
|
<template x-for="item in dataInstrument" :key="item.idInstrument">
|
||||||
<li :id="item.idJenis" @click="onChangeJenis(item)"
|
<li :id="item.idInstrument" @click="onChangeInstrument(item)"
|
||||||
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
|
class="py-2 px-3 hover:bg-blue-100 cursor-pointer text-gray-700">
|
||||||
<button x-text="item.namaJenis"></button>
|
<button x-text="item.namaInstrument"></button>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- space 20 -->
|
||||||
|
<div class="mb-0 lg:mb-5"></div>
|
||||||
|
|
||||||
<!-- garis putus putus -->
|
<!-- Assay Code -->
|
||||||
<template x-if="selectedJenis.idJenis !== -1">
|
<label for="Assay Code"
|
||||||
<div class="border-t border-dashed border-gray-400 mt-5 mb-5"></div>
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
||||||
</template>
|
<input type="text" id="Assay Code" x-model="assayCode"
|
||||||
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
||||||
|
placeholder="Assay Code" />
|
||||||
|
|
||||||
<!-- namaJenis TCP Server -->
|
<span
|
||||||
<template x-if="selectedJenis.idJenis === 1">
|
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">
|
||||||
<div>
|
Assay Code
|
||||||
<!-- port -->
|
</span>
|
||||||
<label for="Port"
|
</label>
|
||||||
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 -->
|
<!-- space 20 -->
|
||||||
<template x-if="selectedJenis.idJenis === 2">
|
<div class="mb-0 lg:mb-5"></div>
|
||||||
<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
|
<!-- Decimal Font -->
|
||||||
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">
|
<label for="Decimal"
|
||||||
Server
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
||||||
</span>
|
<input type="text" id="Decimal" x-model="decimalFont"
|
||||||
</label>
|
class="peer pl-2 border-none py-3 bg-transparent placeholder-transparent focus:border-transparent focus:ring-0 focus:outline-hidden"
|
||||||
<div class="mb-5"></div>
|
placeholder="Decimal" />
|
||||||
<!-- 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
|
<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">
|
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
|
Decimal
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</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 -->
|
<!-- space 20 -->
|
||||||
<template x-if="selectedJenis.idJenis === 3">
|
<div class="mb-0 lg:mb-5"></div>
|
||||||
<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
|
<label for="Formula"
|
||||||
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">
|
class="relative block rounded-md border border-gray-400 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
|
||||||
Speed
|
|
||||||
</span>
|
<textarea id="Formula" x-model="formulaEdit"
|
||||||
</label>
|
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"
|
||||||
<div class="mb-5"></div>
|
placeholder="Formula"></textarea>
|
||||||
<!-- parity -->
|
|
||||||
<fieldset @click.outside="openParity = false"
|
<span class="pointer-events-none absolute left-2.5 bg-white p-0.5 text-xs text-gray-700 transition-all
|
||||||
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">
|
peer-placeholder-shown:top-[10%] peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0
|
||||||
<span
|
peer-focus:top-0 peer-focus:text-xs peer-focus:-translate-y-1/2"
|
||||||
x-text="selectedParity.idParity != -1 ? 'DataBit' : selectedParity.namaParity"
|
:class="formulaEdit.length > 0 ? 'top-0 text-xs -translate-y-1/2' : ''">
|
||||||
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">
|
Formula
|
||||||
</span>
|
</span>
|
||||||
<button @click="openParity = !openParity" type="button"
|
</label>
|
||||||
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>
|
<!-- btn verifikasi -->
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
|
<div class="flex justify-end items-end">
|
||||||
:class="{ 'rotate-180': openParity }" fill="none" viewBox="0 0 24 24"
|
<button @click="onProcessVerifiaksi()" class="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
|
||||||
stroke="currentColor">
|
hover:bg-[#388E3C] focus:outline-none focus:ring-2 focus:ring-green-400">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M19 9l-7 7-7-7" />
|
<!-- Loading Spinner -->
|
||||||
</svg>
|
<div x-show="loadingVerifikasi"
|
||||||
</button>
|
class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-white border-e-transparent">
|
||||||
</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>
|
||||||
<div class="mb-5"></div>
|
|
||||||
<!-- data bits -->
|
<span x-text="loadingVerifikasi ? 'Verifikasi' : 'Verifikasi'"></span>
|
||||||
<fieldset @click.outside="openDataBit = false"
|
</button>
|
||||||
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">
|
</div>
|
||||||
<span
|
|
||||||
x-text="selectedDataBit.idDataBit != -1 ? 'DataBit' : selectedDataBit.namaDataBit"
|
<!-- space 20 -->
|
||||||
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">
|
<div class="mb-0 lg:mb-5"></div>
|
||||||
</span>
|
|
||||||
<button @click="openDataBit = !openDataBit" type="button"
|
<!-- hasil verifikasi -->
|
||||||
class="w-full flex items-center justify-between bg-transparent text-gray-900 py-0.5 focus:outline-none">
|
<div>
|
||||||
<span x-text="selectedDataBit.namaDataBit" class="text-left"></span>
|
<template x-if="isErrorVerifikasi === false">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
|
<p class="text-[#388E3C] italic" x-text="hasilVerifikasi"></p>
|
||||||
:class="{ 'rotate-180': openDataBit }" fill="none" viewBox="0 0 24 24"
|
</template>
|
||||||
stroke="currentColor">
|
<template x-if="isErrorVerifikasi === true">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<p class="text-[#FF5252] italic" x-text="hasilVerifikasi"></p>
|
||||||
d="M19 9l-7 7-7-7" />
|
</template>
|
||||||
</svg>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- footer -->
|
<!-- footer -->
|
||||||
|
|||||||
@@ -8,6 +8,10 @@ document.addEventListener('alpine:init', () => {
|
|||||||
showDialogAdd: false,
|
showDialogAdd: false,
|
||||||
showDialogEdit: false,
|
showDialogEdit: false,
|
||||||
loadingVerifikasi: false,
|
loadingVerifikasi: false,
|
||||||
|
decimalFont: '',
|
||||||
|
assayCode: '',
|
||||||
|
formulaEdit: '',
|
||||||
|
formulaAdd: '',
|
||||||
dataAssayFormat: [
|
dataAssayFormat: [
|
||||||
{
|
{
|
||||||
idAssayFormat: 1,
|
idAssayFormat: 1,
|
||||||
@@ -66,6 +70,7 @@ document.addEventListener('alpine:init', () => {
|
|||||||
this.loadingVerifikasi = false;
|
this.loadingVerifikasi = false;
|
||||||
this.isErrorVerifikasi = false;
|
this.isErrorVerifikasi = false;
|
||||||
this.hasilVerifikasi = ''
|
this.hasilVerifikasi = ''
|
||||||
|
this.formulaAdd = ''
|
||||||
this.showDialogAdd = false
|
this.showDialogAdd = false
|
||||||
},
|
},
|
||||||
onChangeInstrument(item){
|
onChangeInstrument(item){
|
||||||
@@ -81,6 +86,20 @@ document.addEventListener('alpine:init', () => {
|
|||||||
this.hasilVerifikasi = 'Formula is valid';
|
this.hasilVerifikasi = 'Formula is valid';
|
||||||
}, 2000);
|
}, 2000);
|
||||||
},
|
},
|
||||||
|
openModalEdit(item) {
|
||||||
|
this.selectedInstrument = {
|
||||||
|
idInstrument: item.idInstrument,
|
||||||
|
namaInstrument: item.namaInstrument
|
||||||
|
}
|
||||||
|
|
||||||
|
this.assayCode = item.assayCode
|
||||||
|
this.decimalFont = item.decimalFont
|
||||||
|
this.formulaEdit = item.formula
|
||||||
|
this.showDialogEdit = !this.showDialogEdit;
|
||||||
|
},
|
||||||
|
closeDialogEdit(){
|
||||||
|
this.showDialogEdit = !this.showDialogEdit;
|
||||||
|
},
|
||||||
// 2. Fungsi End
|
// 2. Fungsi End
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user