pmh_only/bpsets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add search and sort feature
All checks were successful
/ deploy_site (push) Successful in 2m18s
Details

Browse Source
This commit is contained in:
Minhyeok Park
2025-01-15 20:53:34 +09:00
parent 1bd5a5bac3
commit f6e86cb4bc
11 changed files with 584 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
views/index.ejs
View File

@ -1,48 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<title>BPSets</title>
</head>
<body>
<div class="container p-3">
<body class="bg-gray-100 text-gray-800">
<div class="container mx-auto p-4">
<%- include('partial/page_header.ejs') %>
<table class="table">
<thead>
<div class="relative mb-4">
<input
type="text"
id="tableFilter"
placeholder="Search..."
class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<ul
id="autocompleteSuggestions"
class="absolute bg-white border border-gray-300 rounded shadow-md w-full max-h-48 overflow-y-auto hidden"
></ul>
</div>
<table class="min-w-full bg-white shadow rounded-lg overflow-hidden" id="bpTable">
<thead class="bg-gray-200 text-gray-600">
<tr>
<th>#</th>
<th>Name</th>
<th>B.P. Category</th>
<th>Priority</th>
<th>Fail/Pass</th>
<th>Pass Percent</th>
<th>Action</th>
<th class="py-3 px-4 cursor-pointer" data-sort="number">
# <span class="sort-indicator"><i class="fas fa-sort"></i></span>
</th>
<th class="py-3 px-4 cursor-pointer" data-sort="string">
Name <span class="sort-indicator"><i class="fas fa-sort"></i></span>
</th>
<th class="py-3 px-4 cursor-pointer" data-sort="string">
B.P. Category <span class="sort-indicator"><i class="fas fa-sort"></i></span>
</th>
<th class="py-3 px-4 cursor-pointer" data-sort="number">
Priority <span class="sort-indicator"><i class="fas fa-sort"></i></span>
</th>
<th class="py-3 px-4">Fail/Pass</th>
<th class="py-3 px-4 cursor-pointer" data-sort="number">
Pass Percent <span class="sort-indicator"><i class="fas fa-sort"></i></span>
</th>
<th class="py-3 px-4">Action</th>
</tr>
</thead>
</thead>
<tbody>
<% bpStatus.forEach(({ category, metadatas }) => { %>
<tr>
<th colspan="7"><%= category %> (<%= metadatas.length %>)</th>
<tr class="bg-gray-50" data-category="<%= category %>">
<th colspan="7" class="py-3 px-4 text-left text-lg font-semibold text-gray-700">
<%= category %> (<%= metadatas.length %>)
</th>
</tr>
<% metadatas.forEach((metadata) => { %>
<%- include('./partial/bpset_item.ejs', { metadata }) %>
<%- include('./partial/bpset_item.ejs', { metadata, category }) %>
<%- include('./partial/bpset_details.ejs', { metadata }) %>
<%- include('./partial/bpset_logs.ejs', { metadata }) %>
<%- include('./partial/bpset_fixdialog.ejs', { metadata }) %>
<% }) %>
<% }) %>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
<%- include('./style.ejs') %>
<%- include('./script.ejs') %>
</body>
</html>