implemented event log page for the device dashboard

examples/device-dashboard/web_root/components.js

@@ -205,3 +205,57 @@ export function Setting(props) {
 <//>`;
 };
 
+export function Pagination({ totalItems, itemsPerPage, currentPage, setPageFn }) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const maxPageRange = 2;
+  const lessThanSymbol = "<";
+  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`}
+    >
+      ${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="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}
+            <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">
+              ${lessThanSymbol}
+              <span className="sr-only">Previous</span>
+              <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+            </a>
+
+            <${PageItem} page=${1} isActive=${currentPage === 1} />
+            ${currentPage > maxPageRange + 2 ? html`<span className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>` : ''}
+            ${Array.from({length: Math.min(totalPages, maxPageRange * 2 + 1)}, (_, i) => Math.max(2, currentPage - maxPageRange) + i).map(page => page > 1 && page < totalPages && html`
+              <${PageItem} page=${page} isActive=${currentPage === page} />
+            `)}
+            ${currentPage < totalPages - (maxPageRange + 1) ? html`<span className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>` : ''}
+            ${totalPages > 1 ? html`<${PageItem} page=${totalPages} isActive=${currentPage === totalPages} />` : ''}
+
+            <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">
+              ${greaterThanSymbol}
+              <span className="sr-only">Next</span>
+              <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+            </a>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+};