improved device dashboard events table

examples/device-dashboard/net.c

@@ -180,10 +180,8 @@ static size_t print_events(void (*out)(char, void *), void *ptr, va_list *ap) {
   return len;
 }
 
-static void handle_events_get(struct mg_connection *c, struct mg_str query) {
-  int pageno = atoi(query.ptr + 5); // query is represented by 'page=<page_id>'
-
-  if (pageno > MAX_EVENTS_NO / EVENTS_PER_PAGE + 1 || pageno < 1) pageno = 1;
+static void handle_events_get(struct mg_connection *c, struct mg_http_message *hm) {
+  int pageno = mg_json_get_long(hm->body, "$.page", 1);
   mg_http_reply(c, 200, s_json_header, "{%m:[%M], %m:%d}", MG_ESC("arr"),
                 print_events, pageno, MG_ESC("totalCount"), MAX_EVENTS_NO);
 }
@@ -240,7 +238,7 @@ static void fn(struct mg_connection *c, int ev, void *ev_data, void *fn_data) {
     } else if (mg_http_match_uri(hm, "/api/stats/get")) {
       handle_stats_get(c);
     } else if (mg_http_match_uri(hm, "/api/events/get")) {
-      handle_events_get(c, hm->query);
+      handle_events_get(c, hm);
     } else if (mg_http_match_uri(hm, "/api/settings/get")) {
       handle_settings_get(c);
     } else if (mg_http_match_uri(hm, "/api/settings/set")) {

examples/device-dashboard/web_root/components.js

@@ -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>

examples/device-dashboard/web_root/index.html

@@ -9,7 +9,7 @@
     <link href="main.css" rel="stylesheet" />
     <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
   </head>
-  <body class="min-h-screen bg-slate-100"></body>
+  <body class="h-full"></body>
   <script src="history.min.js"></script>
   <script type="module" src="main.js"></script>
 </html>

examples/device-dashboard/web_root/main.js

@@ -54,7 +54,19 @@ function Events({}) {
   const [events, setEvents] = useState([]);
   const [page, setPage] = useState(1);
 
-  const refresh = () => fetch(`api/events/get?page=${page}`).then(r => r.json()).then(r => {console.log(r); setEvents(r)}).catch(e => console.log(e));
+  const refresh = () =>
+    fetch('/api/events/get',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          page: page
+        }),
+      }).then(r => r.json())
+        .then(r => setEvents(r));
+
   useEffect(refresh, [page]);
 
   useEffect(() => {
@@ -81,7 +93,32 @@ function Events({}) {
   <${Td} text=${e.text} />
 <//>`;
 
-  return html`
+return html`
+<div class="m-8 divide-y divide-gray-200 overflow-auto rounded bg-white">
+  <div class="font-semibold flex items-center text-gray-600 px-3 justify-between">
+    <div class="font-semibold flex items-center text-gray-600">
+      <div class="mr-4">EVENT LOG</div>
+    </div>
+    <${Pagination} currentPage=${page} setPageFn=${setPage} totalItems=400 itemsPerPage=20 />
+  <//>
+  <div class="inline-block min-w-full align-middle" style="max-height: 82vh; overflow: auto;">
+    <table class="min-w-full border-separate border-spacing-0">
+      <thead>
+        <tr>
+          <${Th} title="Type" />
+          <${Th} title="Prio" />
+          <${Th} title="Time" />
+          <${Th} title="Description" />
+        </tr>
+      </thead>
+      <tbody>
+        ${(events.arr ? events.arr : []).map(e => h(Event, {e}))}
+      </tbody>
+    </table>
+  <//>
+<//>`
+
+  /*return html`
 <div class="divide-y divide-gray-200 overflow-x-auto shadow-xl rounded-xl bg-white dark:bg-gray-700 my-3 mx-10">
   <div class="font-light flex items-center text-slate-600 px-4 py-2 justify-between">
     EVENT LOG
@@ -102,7 +139,7 @@ function Events({}) {
       </tbody>
     </table>
   <//>
-<//>`;
+<//>`;*/
 };
 
 function Chart({data}) {
@@ -247,7 +284,7 @@ const App = function({}) {
     <${Router} onChange=${ev => setUrl(ev.url)} history=${History.createHashHistory()} >
       <${Main} default=${true} />
       <${Settings} path="settings" />
-      <${Events} path="events">
+      <${Events} path="events" />
     <//>
   <//>
 <//>`;