542 lines
34 KiB
HTML
542 lines
34 KiB
HTML
<!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> |