wt/mongoose
1
0 Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2026-10-18 10:59:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved device dashboard events table

Browse Source
This commit is contained in:
robert committed 2023-06-23 07:21:24 -04:00
1 parent bb983fb4b2
commit 5c87f2f22c
5 files changed
+51 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/device-dashboard/web_root/components.js
+5 -10
View File
@@ -212,31 +212,28 @@ export function Pagination({ totalItems, itemsPerPage, currentPage, setPageFn })
const greaterThanSymbol = ">";
const whiteSpace = " ";
// Function to handle rendering of individual page item
const PageItem = ({ page, isActive }) => (
html`<a
onClick=${() => setPageFn(page)}
className=${`relative inline-flex items-center px-4 py-2 text-sm font-semibold ${isActive ? 'bg-blue-600 text-white' : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50'} focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600`}
className=${`relative inline-flex items-center px-4 py-2 text-sm font-semibold ${isActive ? 'bg-blue-600 text-white' : ' cursor-pointer text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50'} focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600`}
>
${page}
</a>`
);
return html`
<div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
<div className="flex items-center justify-between bg-white px-2 py-1.5">
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between space-x-4">
<p className="text-sm text-gray-700">
showing entries <span className="font-medium">${(currentPage - 1) * itemsPerPage + 1}</span> - <span className="font-medium">${Math.min(currentPage * itemsPerPage, totalItems)}</span> of ${whiteSpace}
showing <span className="font-medium">${(currentPage - 1) * itemsPerPage + 1}</span> - <span className="font-medium">${Math.min(currentPage * itemsPerPage, totalItems)}</span> of ${whiteSpace}
<span className="font-medium">${totalItems}</span> results
</p>
<div>
<nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<a
onClick=${() => setPageFn(Math.max(currentPage - 1, 1))}
className="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
className="relative inline-flex px-4 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${currentPage != 1 ? 'cursor-pointer' : ''} focus:z-20 focus:outline-offset-0">
${lessThanSymbol}
<span className="sr-only">Previous</span>
<ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
</a>
<${PageItem} page=${1} isActive=${currentPage === 1} />
@@ -249,10 +246,8 @@ export function Pagination({ totalItems, itemsPerPage, currentPage, setPageFn })
<a
onClick=${() => setPageFn(Math.min(currentPage + 1, totalPages))}
className="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
className="relative inline-flex px-4 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${currentPage != totalPages ? 'cursor-pointer' : ''} focus:z-20 focus:outline-offset-0">
${greaterThanSymbol}
<span className="sr-only">Next</span>
<ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
</a>
</nav>
</div>