res_levis_frontend/assets/templates/Track.html

<div class="h-full lg:min-w-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]">{arguments:db}s</span>
      </div>


      <div role="alert" class="alert alert-info alert-soft hidden lg:flex">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0 stroke-[#008EED]">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
         </svg> 
         <span class="text-[#008EED]" js-data="texts tables info track">This is the log of the events related to trackers with their latest status</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="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)">
                              <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 w-full px-[30px]">

   <div class=" max-h-[calc(100vh-260px)] overflow-y-scroll 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 === 'time'">
                                    <p
                                          class="space-x-1 whitespace-nowrap">
                                          <span
                                             x-text="new Date(cell.row.original.time).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.time).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)"
                                          >Open</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] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden"></div>

</div>

</div>