frontend/src/components/scans/ScansOverview.svelte

<script>
  import { _ } from "svelte-i18n";
  import { ScanService, TrackService } from "@odit/lfk-client-js";
  import store from "../../store";
  import {
    createSvelteTable,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    renderComponent,
  } from "@tanstack/svelte-table";
  import { onMount } from "svelte";
  import { writable } from "svelte/store";
  import Toastify from "toastify-js";
  import TableBottom from "../shared/TableBottom.svelte";
  import TableHeader from "../shared/TableHeader.svelte";
  import ScansEmptyState from "./ScansEmptyState.svelte";
  import InputElement from "../shared/InputElement.svelte";
  import TableActions from "../shared/TableActions.svelte";
  import { runnerFilter, statusFilter } from "../shared/tablefilters";
  import CardRunner from "../cards/CardRunner.svelte";
  import ScanValid from "./ScanValid.svelte";
  import DeleteScansModal from "./DeleteScansModal.svelte";

  $: selectedScans =
    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
  $: selected =
    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];

  $: delete_active = false;
  $: active_deletes = [];
  export let current_scans = [];
  const scans_promise = ScanService.scanControllerGetAll().then((val) => {
    current_scans = val;
    // handler.setRows(val);
    current_scans = val;
    options.update((options) => ({
      ...options,
      data: current_scans,
    }));
  });
  let allTracks = [];
  TrackService.trackControllerGetAll().then((val) => {
    allTracks = val;
  });
  function format_laptime(laptime) {
    if (laptime == 0 || laptime == null) {
      return $_("first-scan-of-the-day");
    }
    if (laptime < 60) {
      return `${laptime}s`;
    }
    if (laptime < 3600) {
      return `${Math.floor(laptime / 60)}min ${
        laptime - Math.floor(laptime / 60) * 60
      }s`;
    }
    return `${Math.floor(laptime / 3600)}h ${
      laptime - Math.floor(laptime / 3600) * 3600
    }min ${
      laptime -
      Math.floor(laptime / 3600) * 3600 -
      Math.floor(laptime / 60) * 60
    }`;
  }

  const columns = [
    {
      accessorKey: "id",
      header: () => "id",
      filterFn: `equalsString`,
    },
    {
      accessorKey: "runner",
      header: () => $_("runner"),
      cell: (info) => {
        return renderComponent(CardRunner, { runner: info.getValue() });
      },
      filterFn: `runner`,
    },
    {
      accessorKey: "lapTime",
      header: () => $_("laptime"),
      cell: (info) => {
        return format_laptime(info.getValue());
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "distance",
      header: () => $_("distance"),
      cell: (info) => {
        if (info.getValue() < 1000) {
          return `${info.getValue()}m`;
        }
        return `${(info.getValue() / 1000).toFixed(1)}km`;
      },
      enableColumnFilter: false,
    },
    {
      accessorKey: "track",
      header: () => $_("track"),
      cell: (info) => {
        const track = info.getValue();
        return track?.name || "?";
      },
      enableColumnFilter: true,
    },
    {
      accessorKey: "valid",
      cell: (info) => {
        return renderComponent(ScanValid, { valid: info.getValue() });
      },
      header: () => $_("status"),
      filterFn: `status`,
    },
    {
      accessorKey: "actions",
      header: () => $_("action"),
      cell: (info) => {
        return renderComponent(TableActions, {
          detailsLink: `./${info.row.original.id}`,
          deleteAction: () => {
            active_deletes = [
              current_scans[
                current_scans.findIndex((r) => r.id == info.row.original.id)
              ],
            ];
            delete_active = true;
          },
          deleteEnabled:
            store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
        });
      },
      enableColumnFilter: false,
      enableSorting: false,
    },
  ];
  const options = writable({
    data: [],
    columns: columns,
    initialState: {
      pagination: {
        pageSize: 50,
      },
    },
    filterFns: {
      runner: runnerFilter,
      status: statusFilter,
    },
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  const table = createSvelteTable(options);
  async function deleteScan(scan_id) {
    // await ScanService.scanControllerRemove(scan_id, true);
    current_scans = current_scans.filter((r) => r.id !== scan_id);
    // options.update((options) => ({
    //   ...options,
    //   data: current_scans,
    // }));
    // Toastify({
    //   text: $_("scans-deleted"),
    //   duration: 3500,
    //   backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    // }).showToast();
  }
  async function deleteScans(scan_ids) {
    scan_ids.forEach((scan_id) => {
      deleteScan(scan_id);
    });
    //   // await ScanService.scanControllerRemove(scan_id, true);
    //   current_scans = current_scans.filter((r) => r.id !== scan_id);
    //   options.update((options) => ({
    //     ...options,
    //     data: current_scans,
    //   }));
    //   Toastify({
    //     text: $_("scans-deleted"),
    //     duration: 3500,
    //     backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    //   }).showToast();
  }
</script>

<DeleteScansModal
  delete_scans={active_deletes}
  modal_open={delete_active}
  on:delete={(event) => {
    deleteScans(event.detail.scans);
  }}
/>
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
  {#await scans_promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
      role="alert"
    >
      <p class="font-bold">{$_("scans-are-being-loaded")}</p>
      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
    </div>
  {:then}
    {#if current_scans.length === 0}
      <ScansEmptyState />
    {:else}
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            {#each $table.getHeaderGroups() as headerGroup}
              <tr class="select-none">
                <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
                  <InputElement
                    type="checkbox"
                    checked={$table.getIsAllRowsSelected()}
                    indeterminate={$table.getIsSomeRowsSelected()}
                    on:change={() => $table.toggleAllRowsSelected()}
                  />
                </th>
                {#each headerGroup.headers as header}
                  <TableHeader {header} />
                {/each}
              </tr>
            {/each}
          </thead>
          <tbody>
            {#each $table.getRowModel().rows as row}
              <tr>
                <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                  <InputElement
                    type="checkbox"
                    checked={row.getIsSelected()}
                    on:change={() => row.toggleSelected()}
                  />
                </td>
                {#each row.getVisibleCells() as cell}
                  <td>
                    <svelte:component
                      this={flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    />
                  </td>
                {/each}
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
      <TableBottom {table} {selected} />
    {/if}
  {:catch error}
    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
      <span class="inline-block align-middle mr-8">
        <b class="capitalize">{$_("general_promise_error")}</b>
        {error}
      </span>
    </div>
  {/await}
{/if}