res_levis_frontend/assets/templates/Track.html

<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">

   <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">

      <div>
         <span class="text-2xl text-[#008EED] leading-[80px] capitalize">{arguments:db}s</span>
      </div>

      <div class="flex items-center gap-2">
         <label class="input input-primary w-[200px]">
            <span class="iconify lucide--search text-base-content/70 size-4.5 "></span>
            <input class="text-base placeholder:text-sm" type="search" x-model="search" @input="updateSearch"
               placeholder="Search" />
         </label>

         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
               <span class="iconify lucide--columns-3-cog size-4"></span>

            </div>

            <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
               <ul class="menu w-full">
                  <template x-for="column in allLeafColumns" :key="column.id">
                     <li @click="toggleColumn(column)" class="columnVisibility">
                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
                           <span
                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>

                           <span class="font-medium" x-text="column.columnDef.header"></span>
                        </div>
                     </li>
                  </template>
               </ul>
            </div>
         </div>

         <div class="dropdown dropdown-bottom dropdown-end">
            <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
               <span class="iconify lucide--ellipsis-vertical size-4"></span>
            </div>

            <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
               <ul class="menu w-full">
                  <li class="update{arguments:db}" @click="updateData()">
                     <div>
                        <span class="iconify lucide--refresh-cw size-4"></span>
                        Refresh Data
                     </div>
                  </li>
                  <li>
                     <div>
                        <span class="iconify lucide--download size-4"></span>
                        Export
                     </div>
                  </li>
               </ul>
            </div>

         </div>

         <button type="submit" class="btn btn-outline btn-primary" style="cursor: pointer;"
            onclick="js.part({'do':'{arguments:new}',arguments:{db:'{arguments:db}'}})">Add</button>

      </div>
   </div>

   <div class="flex px-[30px]">

      <div class="  overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">

         <div
            class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">

            <div class="join border-solid border-1 border-[#008EED] rounded-md">
               <button class="btn btn-square btn-sm btn-outline border-base-300 join-item"
                  aria-label="Pagination controls" :disabled="!table.getCanPreviousPage()" @click="prevPage()">
                  <span class="iconify lucide--arrow-left"></span>
               </button>

               <input aria-label="Page number" min="1" :max="table.getPageCount()" :value="pageIndex + 1"
                  @input="setPageIndex($event.target.value - 1)"
                  class="input input-sm join-item w-10 text-center border-0" />

               <button class="btn btn-square btn-sm btn-outline border-base-300 join-item"
                  aria-label="Pagination controls" :disabled="!table.getCanNextPage()" @click="nextPage()">
                  <span class="iconify lucide--arrow-right"></span>
               </button>
            </div>

            <p class="text-base-content/70 text-sm max-md:hidden">
               <span class="text-base-content font-medium" x-text="`${start}–${end}`"></span>
               out of
               <span class="text-base-content font-medium" x-text="rowCount"></span>
            </p>

            <div class="flex items-center gap-2">
               <p class="text-base-content/70 text-sm max-md:hidden">
                  Per page
               </p>
               <select aria-label="Items per page" class="select select-sm w-16 border-solid border-1 border-[#008EED]"
                  @change="changePageSize(Number($event.target.value))">
                  <template x-for="size in pageSizes" :key="size">
                     <option :value="size" :selected="size === pageSize" x-text="size"></option>
                  </template>
               </select>
            </div>


         </div>

         <table class="table">
            <thead>
               <template x-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                  <tr>
                     <template x-for="header in headerGroup.headers" :key="header.id">
                        <th class="text-[#008EED]" , x-show="!header.isPlaceholder"
                           x-text="flexRender(header.column.columnDef.header, header.getContext())"></th>
                     </template>
                  </tr>
               </template>
            </thead>

            <tbody>
               <template x-if="!visibleRows.length">
                  <tr>
                     <td :colspan="columns.length" class="h-24 text-center">
                        <p>
                           No results.
                           <span @click="clearFilters" class="text-primary cursor-pointer hover:underline">
                              Clear filters
                           </span>
                        </p>
                     </td>
                  </tr>
               </template>
               <template x-if="visibleRows.length">
                  <template x-for="row in visibleRows" :key="row.id">
                     <tr>
                        <template x-for="cell in getVisibleCells(row)" :key="cell.id">
                           <td>
                              <template x-if="cell.column.id === 'subject'">
                                 <div class="flex items-center gap-2">
                                    <div>
                                       <p class="leading-none font-medium" x-text="cell.row.original.subject"></p>
                                       <p class="text-base-content/70 mt-0.5 text-xs/none"
                                          x-text="cell.row.original.trackerMac"></p>
                                    </div>
                                 </div>
                              </template>

                              <template x-if="cell.column.id === 'id'">
                                 <span class="text-base-content/70 font-mono text-xs uppercase"
                                    x-text="cell.row.original.id"></span>
                              </template>

                              <template x-if="cell.column.id === 'status'">
                                 <span :class="{
                                             'badge badge-success badge-sm badge-soft': cell.row.original.status === 'detected',
                                             'badge badge-info badge-sm badge-soft': cell.row.original.status === 'help',
                                             'badge badge-error badge-sm badge-soft': cell.row.original.status === 'away',
                                             'badge badge-ghost badge-sm': ['lost', null, undefined].includes(cell.row.original.status)
                                          }"
                                    x-text="cell.row.original.status.charAt(0).toUpperCase() + cell.row.original.status.slice(1)"></span>
                              </template>

                              <template x-if="cell.column.id === 'timestamp'">
                                 <p class="space-x-1 whitespace-nowrap">
                                    <span
                                       x-text="new Date(cell.row.original.timestamp).toLocaleDateString('it-IT', {day: 'numeric', month: 'short', year: '2-digit'})"></span>
                                    <span class="text-base-content/60 text-xs"
                                       x-text="new Date(cell.row.original.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'})"></span>
                                 </p>
                              </template>

                              <template x-if="cell.column.id === 'gateway'">
                                 <div class="flex items-center gap-2">
                                    <div>
                                       <p class="leading-none font-medium" x-text="cell.row.original.gatewayName"></p>
                                       <p class="text-base-content/70 mt-0.5 text-xs/none"
                                          x-text="cell.row.original.gatewayMac"></p>
                                    </div>
                                 </div>
                              </template>

                              <template x-if="cell.column.id === 'model'">
                                 <span class="text-base font-medium" x-text="cell.row.original.model"></span>
                              </template>

                              <template x-if="cell.column.id === 'signal'">
                                 <span class="text-base font-medium" x-text="cell.row.original.signal + '%'"></span>
                              </template>

                              <template x-if="cell.column.id === 'actions'">
                                 <div class="gap-2 text-right">
                                    <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
                                       @click="viewRow(cell.row)">Modify</button>
                                 </div>
                              </template>

                              <template x-if="!
['id', 'time', 'subject', 'gateway', 'status', 'signal', 'actions'].includes(cell.column.id)">
                                 <span x-html="cell.column.columnDef.cell
? cell.column.columnDef.cell(cell.getContext())
: cell.getValue()"></span>
                              </template>
                           </td>
                        </template>
                     </tr>
                  </template>
               </template>
            </tbody>
         </table>

      </div>

      <div
         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
      </div>

   </div>

</div>