drop old datatables
This commit is contained in:
		@@ -1,6 +1,5 @@
 | 
			
		||||
<script>
 | 
			
		||||
  import "toastify-js/src/toastify.css";
 | 
			
		||||
  import "gridjs/dist/theme/mermaid.css";
 | 
			
		||||
  import { Route, router } from "tinro";
 | 
			
		||||
  router.subscribe((routeInfo) => {
 | 
			
		||||
    window.scrollTo(0, 0);
 | 
			
		||||
 
 | 
			
		||||
@@ -3,7 +3,6 @@
 | 
			
		||||
  import { RunnerCardService } from "@odit/lfk-client-js";
 | 
			
		||||
  import store from "../../store";
 | 
			
		||||
  import Toastify from "toastify-js";
 | 
			
		||||
  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
 | 
			
		||||
  import CardsEmptyState from "./CardsEmptyState.svelte";
 | 
			
		||||
  import CardDetailModal from "./CardDetailModal.svelte";
 | 
			
		||||
  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
 | 
			
		||||
@@ -89,8 +88,7 @@
 | 
			
		||||
              Toastify({
 | 
			
		||||
                text: $_("cards-deleted"),
 | 
			
		||||
                duration: 3500,
 | 
			
		||||
                backgroundColor:
 | 
			
		||||
                  "linear-gradient(to right, #00b09b, #96c93d)",
 | 
			
		||||
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
 | 
			
		||||
              }).showToast();
 | 
			
		||||
              //TODO: Delete cards from table
 | 
			
		||||
            }}
 | 
			
		||||
@@ -114,138 +112,131 @@
 | 
			
		||||
        {/if}
 | 
			
		||||
        <GenerateRunnerCards bind:cards_show bind:generate_cards />
 | 
			
		||||
      </div>
 | 
			
		||||
      <Datatable {handler}>
 | 
			
		||||
        <table>
 | 
			
		||||
          <thead>
 | 
			
		||||
      <table>
 | 
			
		||||
        <thead>
 | 
			
		||||
          <tr>
 | 
			
		||||
            <th style="border-bottom: 1px solid #ddd;">
 | 
			
		||||
              <input
 | 
			
		||||
                type="checkbox"
 | 
			
		||||
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
 | 
			
		||||
                checked={generate_cards.length == current_cards.length}
 | 
			
		||||
                on:click={() => {
 | 
			
		||||
                  if (generate_cards.length != current_cards.length) {
 | 
			
		||||
                    generate_cards = current_cards;
 | 
			
		||||
                  } else {
 | 
			
		||||
                    generate_cards = [];
 | 
			
		||||
                  }
 | 
			
		||||
                }}
 | 
			
		||||
              />
 | 
			
		||||
            </th>
 | 
			
		||||
            <Th {handler} orderBy="code">{$_("code")}</Th>
 | 
			
		||||
            <Th {handler} orderBy="runner">{$_("runner")}</Th>
 | 
			
		||||
            <Th {handler} orderBy="status">{$_("status")}</Th>
 | 
			
		||||
            <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
 | 
			
		||||
          </tr>
 | 
			
		||||
          <tr>
 | 
			
		||||
            <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
            <ThFilter {handler} filterBy="code" />
 | 
			
		||||
            <ThFilterRunner {handler} />
 | 
			
		||||
            <ThFilterStatus {handler} />
 | 
			
		||||
            <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
          </tr>
 | 
			
		||||
        </thead>
 | 
			
		||||
        <tbody>
 | 
			
		||||
          {#each $rows as row}
 | 
			
		||||
            <tr>
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;">
 | 
			
		||||
              <td>
 | 
			
		||||
                <input
 | 
			
		||||
                  type="checkbox"
 | 
			
		||||
                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
 | 
			
		||||
                  checked={generate_cards.length == current_cards.length}
 | 
			
		||||
                  checked={generate_cards.filter((i) => i.id == row.id).length >
 | 
			
		||||
                    0}
 | 
			
		||||
                  on:click={() => {
 | 
			
		||||
                    if (generate_cards.length != current_cards.length) {
 | 
			
		||||
                      generate_cards = current_cards;
 | 
			
		||||
                    if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
 | 
			
		||||
                      generate_cards.push(row);
 | 
			
		||||
                      generate_cards = generate_cards;
 | 
			
		||||
                    } else {
 | 
			
		||||
                      generate_cards = [];
 | 
			
		||||
                      generate_cards = generate_cards.filter(
 | 
			
		||||
                        (r) => r.id != row.id
 | 
			
		||||
                      );
 | 
			
		||||
                    }
 | 
			
		||||
                    console.log(generate_cards);
 | 
			
		||||
                  }}
 | 
			
		||||
                />
 | 
			
		||||
              </th>
 | 
			
		||||
              <Th {handler} orderBy="code">{$_("code")}</Th>
 | 
			
		||||
              <Th {handler} orderBy="runner">{$_("runner")}</Th>
 | 
			
		||||
              <Th {handler} orderBy="status">{$_("status")}</Th>
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
 | 
			
		||||
            </tr>
 | 
			
		||||
            <tr>
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
              <ThFilter {handler} filterBy="code" />
 | 
			
		||||
              <ThFilterRunner {handler} />
 | 
			
		||||
              <ThFilterStatus {handler} />
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
            </tr>
 | 
			
		||||
          </thead>
 | 
			
		||||
          <tbody>
 | 
			
		||||
            {#each $rows as row}
 | 
			
		||||
              <tr>
 | 
			
		||||
                <td>
 | 
			
		||||
                  <input
 | 
			
		||||
                    type="checkbox"
 | 
			
		||||
                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
 | 
			
		||||
                    checked={generate_cards.filter((i) => i.id == row.id)
 | 
			
		||||
                      .length > 0}
 | 
			
		||||
              </td>
 | 
			
		||||
              <td>{row.code}</td>
 | 
			
		||||
              <td>
 | 
			
		||||
                {#if row.runner}
 | 
			
		||||
                  <a
 | 
			
		||||
                    href="../runners/{row.runner.id}"
 | 
			
		||||
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                    >{row.runner.firstname}
 | 
			
		||||
                    {row.runner.middlename || ""}
 | 
			
		||||
                    {row.runner.lastname}</a
 | 
			
		||||
                  >
 | 
			
		||||
                {:else}{$_("non-blanko")}{/if}
 | 
			
		||||
              </td>
 | 
			
		||||
              <td>
 | 
			
		||||
                {#if row.enabled}
 | 
			
		||||
                  <span
 | 
			
		||||
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
 | 
			
		||||
                    >{$_("enabled")}</span
 | 
			
		||||
                  >
 | 
			
		||||
                {:else}
 | 
			
		||||
                  <span
 | 
			
		||||
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
 | 
			
		||||
                    >{$_("disabled")}</span
 | 
			
		||||
                  >
 | 
			
		||||
                {/if}
 | 
			
		||||
              </td>
 | 
			
		||||
              <td>
 | 
			
		||||
                {#if active_deletes[row.id] === true}
 | 
			
		||||
                  <button
 | 
			
		||||
                    on:click={() => {
 | 
			
		||||
                      if (
 | 
			
		||||
                        generate_cards.findIndex((i) => i.id == row.id) == -1
 | 
			
		||||
                      ) {
 | 
			
		||||
                        generate_cards.push(row);
 | 
			
		||||
                        generate_cards = generate_cards;
 | 
			
		||||
                      } else {
 | 
			
		||||
                        generate_cards = generate_cards.filter(
 | 
			
		||||
                          (r) => r.id != row.id
 | 
			
		||||
                        );
 | 
			
		||||
                      }
 | 
			
		||||
                      console.log(generate_cards);
 | 
			
		||||
                      active_deletes[row.id] = false;
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                </td>
 | 
			
		||||
                <td>{row.code}</td>
 | 
			
		||||
                <td>
 | 
			
		||||
                  {#if row.runner}
 | 
			
		||||
                    <a
 | 
			
		||||
                      href="../runners/{row.runner.id}"
 | 
			
		||||
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                      >{row.runner.firstname}
 | 
			
		||||
                      {row.runner.middlename || ""}
 | 
			
		||||
                      {row.runner.lastname}</a
 | 
			
		||||
                    >
 | 
			
		||||
                  {:else}{$_("non-blanko")}{/if}
 | 
			
		||||
                </td>
 | 
			
		||||
                <td>
 | 
			
		||||
                  {#if row.enabled}
 | 
			
		||||
                    <span
 | 
			
		||||
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
 | 
			
		||||
                      >{$_("enabled")}</span
 | 
			
		||||
                    >
 | 
			
		||||
                  {:else}
 | 
			
		||||
                    <span
 | 
			
		||||
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
 | 
			
		||||
                      >{$_("disabled")}</span
 | 
			
		||||
                    >
 | 
			
		||||
                  {/if}
 | 
			
		||||
                </td>
 | 
			
		||||
                <td>
 | 
			
		||||
                  {#if active_deletes[row.id] === true}
 | 
			
		||||
                    tabindex="0"
 | 
			
		||||
                    class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
 | 
			
		||||
                    >{$_("cancel-delete")}</button
 | 
			
		||||
                  >
 | 
			
		||||
                  <button
 | 
			
		||||
                    on:click={() => {
 | 
			
		||||
                      RunnerCardService.runnerCardControllerRemove(row.id, true)
 | 
			
		||||
                        .then((resp) => {
 | 
			
		||||
                          current_cards = current_cards.filter(
 | 
			
		||||
                            (obj) => obj.id !== row.id
 | 
			
		||||
                          );
 | 
			
		||||
                        })
 | 
			
		||||
                        .catch((err) => {});
 | 
			
		||||
                    }}
 | 
			
		||||
                    tabindex="0"
 | 
			
		||||
                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                    >{$_("confirm-delete")}</button
 | 
			
		||||
                  >
 | 
			
		||||
                {:else}
 | 
			
		||||
                  <button
 | 
			
		||||
                    on:click={() => {
 | 
			
		||||
                      open_edit_modal(row);
 | 
			
		||||
                    }}
 | 
			
		||||
                    class="text-indigo-600 hover:text-indigo-900"
 | 
			
		||||
                    >{$_("details")}</button
 | 
			
		||||
                  >
 | 
			
		||||
                  {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
 | 
			
		||||
                    <button
 | 
			
		||||
                      on:click={() => {
 | 
			
		||||
                        active_deletes[row.id] = false;
 | 
			
		||||
                      }}
 | 
			
		||||
                      tabindex="0"
 | 
			
		||||
                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
 | 
			
		||||
                      >{$_("cancel-delete")}</button
 | 
			
		||||
                    >
 | 
			
		||||
                    <button
 | 
			
		||||
                      on:click={() => {
 | 
			
		||||
                        RunnerCardService.runnerCardControllerRemove(
 | 
			
		||||
                          row.id,
 | 
			
		||||
                          true
 | 
			
		||||
                        )
 | 
			
		||||
                          .then((resp) => {
 | 
			
		||||
                            current_cards = current_cards.filter(
 | 
			
		||||
                              (obj) => obj.id !== row.id
 | 
			
		||||
                            );
 | 
			
		||||
                          })
 | 
			
		||||
                          .catch((err) => {});
 | 
			
		||||
                        active_deletes[row.id] = true;
 | 
			
		||||
                      }}
 | 
			
		||||
                      tabindex="0"
 | 
			
		||||
                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                      >{$_("confirm-delete")}</button
 | 
			
		||||
                      >{$_("delete")}</button
 | 
			
		||||
                    >
 | 
			
		||||
                  {:else}
 | 
			
		||||
                    <button
 | 
			
		||||
                      on:click={() => {
 | 
			
		||||
                        open_edit_modal(row);
 | 
			
		||||
                      }}
 | 
			
		||||
                      class="text-indigo-600 hover:text-indigo-900"
 | 
			
		||||
                      >{$_("details")}</button
 | 
			
		||||
                    >
 | 
			
		||||
                    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
 | 
			
		||||
                      <button
 | 
			
		||||
                        on:click={() => {
 | 
			
		||||
                          active_deletes[row.id] = true;
 | 
			
		||||
                        }}
 | 
			
		||||
                        tabindex="0"
 | 
			
		||||
                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                        >{$_("delete")}</button
 | 
			
		||||
                      >
 | 
			
		||||
                    {/if}
 | 
			
		||||
                  {/if}
 | 
			
		||||
                </td>
 | 
			
		||||
              </tr>
 | 
			
		||||
            {/each}
 | 
			
		||||
          </tbody>
 | 
			
		||||
        </table>
 | 
			
		||||
      </Datatable>
 | 
			
		||||
                {/if}
 | 
			
		||||
              </td>
 | 
			
		||||
            </tr>
 | 
			
		||||
          {/each}
 | 
			
		||||
        </tbody>
 | 
			
		||||
      </table>
 | 
			
		||||
    {/if}
 | 
			
		||||
  {:catch error}
 | 
			
		||||
    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
 | 
			
		||||
 
 | 
			
		||||
@@ -31,7 +31,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -49,7 +49,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -51,7 +51,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -30,7 +30,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -51,7 +51,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div class="h-12">
 | 
			
		||||
        <GenerateSponsoringContracts
 | 
			
		||||
            bind:sponsoring_contracts_show
 | 
			
		||||
 
 | 
			
		||||
@@ -1,30 +0,0 @@
 | 
			
		||||
<script>
 | 
			
		||||
  import { _, json } from "svelte-i18n";
 | 
			
		||||
  import { getlang } from "./datatable_i18n";
 | 
			
		||||
  import { Grid } from "gridjs";
 | 
			
		||||
  //
 | 
			
		||||
  let table;
 | 
			
		||||
  const datatable = new Grid({
 | 
			
		||||
    columns: ["Name", "Email", "Phone Number"],
 | 
			
		||||
    language: getlang($json("datatable")),
 | 
			
		||||
    sort: true,
 | 
			
		||||
    search: { enabled: true },
 | 
			
		||||
    data: [
 | 
			
		||||
      ["John", "john@example.com", "(353) 01 222 3333"],
 | 
			
		||||
      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
 | 
			
		||||
      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
 | 
			
		||||
      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
 | 
			
		||||
      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
 | 
			
		||||
    ],
 | 
			
		||||
    pagination: {
 | 
			
		||||
      enabled: true,
 | 
			
		||||
      limit: 2,
 | 
			
		||||
      summary: false,
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
  setTimeout(() => {
 | 
			
		||||
    datatable.render(table);
 | 
			
		||||
  }, 0);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<div bind:this={table} />
 | 
			
		||||
@@ -1,6 +1,5 @@
 | 
			
		||||
<script>
 | 
			
		||||
  import { _ } from "svelte-i18n";
 | 
			
		||||
  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
 | 
			
		||||
  import { ScanService, TrackService } from "@odit/lfk-client-js";
 | 
			
		||||
  import store from "../../store";
 | 
			
		||||
  import Toastify from "toastify-js";
 | 
			
		||||
@@ -57,169 +56,167 @@
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
 | 
			
		||||
      >
 | 
			
		||||
        <Datatable {handler}>
 | 
			
		||||
          <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
            <thead class="bg-gray-50">
 | 
			
		||||
              <tr>
 | 
			
		||||
                <Th {handler} orderBy="id">ID</Th>
 | 
			
		||||
                <Th {handler}>
 | 
			
		||||
                  {$_("runner")}
 | 
			
		||||
                </Th>
 | 
			
		||||
                <Th {handler}>
 | 
			
		||||
                  {$_("distance")}
 | 
			
		||||
                </Th>
 | 
			
		||||
                <Th {handler}>
 | 
			
		||||
                  {$_("track")}
 | 
			
		||||
                </Th>
 | 
			
		||||
                <Th {handler}>
 | 
			
		||||
                  {$_("laptime")}
 | 
			
		||||
                </Th>
 | 
			
		||||
                <Th {handler}>
 | 
			
		||||
                  {$_("status")}
 | 
			
		||||
                </Th>
 | 
			
		||||
                <th
 | 
			
		||||
                  scope="col"
 | 
			
		||||
                  class="relative px-6 py-3"
 | 
			
		||||
                  style="border-bottom: 1px solid #ddd;"
 | 
			
		||||
                >
 | 
			
		||||
                  {$_("action")}
 | 
			
		||||
                </th>
 | 
			
		||||
              </tr>
 | 
			
		||||
              <tr>
 | 
			
		||||
                <ThFilter {handler} filterBy="id" />
 | 
			
		||||
                <ThFilterRunner {handler} />
 | 
			
		||||
                <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
                <ThFilterTrack tracks={allTracks} {handler} />
 | 
			
		||||
                <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
 | 
			
		||||
                <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
                <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
                <!-- TODO: filter status -->
 | 
			
		||||
                <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
              </tr>
 | 
			
		||||
            </thead>
 | 
			
		||||
            <tbody class="divide-y divide-gray-200">
 | 
			
		||||
              {#each $rows as scan}
 | 
			
		||||
                <tr data-rowid="scan_{scan.id}">
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                    <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                      {scan.id}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap">
 | 
			
		||||
                    <div class="flex items-center">
 | 
			
		||||
                      <a
 | 
			
		||||
                        href="../runners/{scan.runner.id}"
 | 
			
		||||
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                        >{scan.runner.firstname}
 | 
			
		||||
                        {scan.runner.middlename || ""}
 | 
			
		||||
                        {scan.runner.lastname}</a
 | 
			
		||||
                      >
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                    <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                      {#if scan.distance < 1000}
 | 
			
		||||
                        {scan.distance}m
 | 
			
		||||
                      {:else}{scan.distance / 1000}km{/if}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                    <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                      {#if scan.track}
 | 
			
		||||
                        <a
 | 
			
		||||
                          href="../tracks"
 | 
			
		||||
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                          >{scan.track.name}
 | 
			
		||||
                        </a>
 | 
			
		||||
                      {/if}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                    {#if scan.responseType === "TRACKSCAN"}
 | 
			
		||||
                      <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                        {format_laptime(scan.lapTime)}
 | 
			
		||||
                      </div>
 | 
			
		||||
                    {:else}
 | 
			
		||||
                      <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                        {$_("scan-with-fixed-distance")}
 | 
			
		||||
                      </div>
 | 
			
		||||
                    {/if}
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td class="px-6 py-4 whitespace-nowrap">
 | 
			
		||||
                    <div class="flex items-center">
 | 
			
		||||
                      {#if scan.valid}
 | 
			
		||||
                        <span
 | 
			
		||||
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
 | 
			
		||||
                          >{$_("valid")}</span
 | 
			
		||||
                        >
 | 
			
		||||
                      {:else}
 | 
			
		||||
                        <span
 | 
			
		||||
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
 | 
			
		||||
                          >{$_("invalid")}</span
 | 
			
		||||
                        >
 | 
			
		||||
                      {/if}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </td>
 | 
			
		||||
 | 
			
		||||
                  {#if active_deletes[scan.id] === true}
 | 
			
		||||
                    <td
 | 
			
		||||
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
          <thead class="bg-gray-50">
 | 
			
		||||
            <tr>
 | 
			
		||||
              <Th {handler} orderBy="id">ID</Th>
 | 
			
		||||
              <Th {handler}>
 | 
			
		||||
                {$_("runner")}
 | 
			
		||||
              </Th>
 | 
			
		||||
              <Th {handler}>
 | 
			
		||||
                {$_("distance")}
 | 
			
		||||
              </Th>
 | 
			
		||||
              <Th {handler}>
 | 
			
		||||
                {$_("track")}
 | 
			
		||||
              </Th>
 | 
			
		||||
              <Th {handler}>
 | 
			
		||||
                {$_("laptime")}
 | 
			
		||||
              </Th>
 | 
			
		||||
              <Th {handler}>
 | 
			
		||||
                {$_("status")}
 | 
			
		||||
              </Th>
 | 
			
		||||
              <th
 | 
			
		||||
                scope="col"
 | 
			
		||||
                class="relative px-6 py-3"
 | 
			
		||||
                style="border-bottom: 1px solid #ddd;"
 | 
			
		||||
              >
 | 
			
		||||
                {$_("action")}
 | 
			
		||||
              </th>
 | 
			
		||||
            </tr>
 | 
			
		||||
            <tr>
 | 
			
		||||
              <ThFilter {handler} filterBy="id" />
 | 
			
		||||
              <ThFilterRunner {handler} />
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
              <ThFilterTrack tracks={allTracks} {handler} />
 | 
			
		||||
              <!-- <th style="border-bottom: 1px solid #ddd;" /> -->
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
              <!-- TODO: filter status -->
 | 
			
		||||
              <th style="border-bottom: 1px solid #ddd;" />
 | 
			
		||||
            </tr>
 | 
			
		||||
          </thead>
 | 
			
		||||
          <tbody class="divide-y divide-gray-200">
 | 
			
		||||
            {#each $rows as scan}
 | 
			
		||||
              <tr data-rowid="scan_{scan.id}">
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                  <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                    {scan.id}
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap">
 | 
			
		||||
                  <div class="flex items-center">
 | 
			
		||||
                    <a
 | 
			
		||||
                      href="../runners/{scan.runner.id}"
 | 
			
		||||
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                      >{scan.runner.firstname}
 | 
			
		||||
                      {scan.runner.middlename || ""}
 | 
			
		||||
                      {scan.runner.lastname}</a
 | 
			
		||||
                    >
 | 
			
		||||
                      <button
 | 
			
		||||
                        on:click={() => {
 | 
			
		||||
                          active_deletes[scan.id] = false;
 | 
			
		||||
                        }}
 | 
			
		||||
                        tabindex="0"
 | 
			
		||||
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
 | 
			
		||||
                        >{$_("cancel-delete")}</button
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                  <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                    {#if scan.distance < 1000}
 | 
			
		||||
                      {scan.distance}m
 | 
			
		||||
                    {:else}{scan.distance / 1000}km{/if}
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                  <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                    {#if scan.track}
 | 
			
		||||
                      <a
 | 
			
		||||
                        href="../tracks"
 | 
			
		||||
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
 | 
			
		||||
                        >{scan.track.name}
 | 
			
		||||
                      </a>
 | 
			
		||||
                    {/if}
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap text-left">
 | 
			
		||||
                  {#if scan.responseType === "TRACKSCAN"}
 | 
			
		||||
                    <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                      {format_laptime(scan.lapTime)}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  {:else}
 | 
			
		||||
                    <div class="text-sm font-medium text-gray-900">
 | 
			
		||||
                      {$_("scan-with-fixed-distance")}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  {/if}
 | 
			
		||||
                </td>
 | 
			
		||||
                <td class="px-6 py-4 whitespace-nowrap">
 | 
			
		||||
                  <div class="flex items-center">
 | 
			
		||||
                    {#if scan.valid}
 | 
			
		||||
                      <span
 | 
			
		||||
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
 | 
			
		||||
                        >{$_("valid")}</span
 | 
			
		||||
                      >
 | 
			
		||||
                    {:else}
 | 
			
		||||
                      <span
 | 
			
		||||
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
 | 
			
		||||
                        >{$_("invalid")}</span
 | 
			
		||||
                      >
 | 
			
		||||
                    {/if}
 | 
			
		||||
                  </div>
 | 
			
		||||
                </td>
 | 
			
		||||
 | 
			
		||||
                {#if active_deletes[scan.id] === true}
 | 
			
		||||
                  <td
 | 
			
		||||
                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
 | 
			
		||||
                  >
 | 
			
		||||
                    <button
 | 
			
		||||
                      on:click={() => {
 | 
			
		||||
                        active_deletes[scan.id] = false;
 | 
			
		||||
                      }}
 | 
			
		||||
                      tabindex="0"
 | 
			
		||||
                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
 | 
			
		||||
                      >{$_("cancel-delete")}</button
 | 
			
		||||
                    >
 | 
			
		||||
                    <button
 | 
			
		||||
                      on:click={() => {
 | 
			
		||||
                        ScanService.scanControllerRemove(scan.id, false).then(
 | 
			
		||||
                          (resp) => {
 | 
			
		||||
                            current_scans = current_scans.filter(
 | 
			
		||||
                              (obj) => obj.id !== scan.id
 | 
			
		||||
                            );
 | 
			
		||||
                            Toastify({
 | 
			
		||||
                              text: "Scan deleted",
 | 
			
		||||
                              duration: 500,
 | 
			
		||||
                              backgroundColor:
 | 
			
		||||
                                "linear-gradient(to right, #00b09b, #96c93d)",
 | 
			
		||||
                            }).showToast();
 | 
			
		||||
                          }
 | 
			
		||||
                        );
 | 
			
		||||
                      }}
 | 
			
		||||
                      tabindex="0"
 | 
			
		||||
                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                      >{$_("confirm-delete")}</button
 | 
			
		||||
                    >
 | 
			
		||||
                  </td>
 | 
			
		||||
                {:else}
 | 
			
		||||
                  <td
 | 
			
		||||
                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
 | 
			
		||||
                  >
 | 
			
		||||
                    <a
 | 
			
		||||
                      href="./{scan.id}"
 | 
			
		||||
                      class="text-indigo-600 hover:text-indigo-900"
 | 
			
		||||
                      >{$_("details")}</a
 | 
			
		||||
                    >
 | 
			
		||||
                    {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
 | 
			
		||||
                      <button
 | 
			
		||||
                        on:click={() => {
 | 
			
		||||
                          ScanService.scanControllerRemove(scan.id, false).then(
 | 
			
		||||
                            (resp) => {
 | 
			
		||||
                              current_scans = current_scans.filter(
 | 
			
		||||
                                (obj) => obj.id !== scan.id
 | 
			
		||||
                              );
 | 
			
		||||
                              Toastify({
 | 
			
		||||
                                text: "Scan deleted",
 | 
			
		||||
                                duration: 500,
 | 
			
		||||
                                backgroundColor:
 | 
			
		||||
                                  "linear-gradient(to right, #00b09b, #96c93d)",
 | 
			
		||||
                              }).showToast();
 | 
			
		||||
                            }
 | 
			
		||||
                          );
 | 
			
		||||
                          active_deletes[scan.id] = true;
 | 
			
		||||
                        }}
 | 
			
		||||
                        tabindex="0"
 | 
			
		||||
                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                        >{$_("confirm-delete")}</button
 | 
			
		||||
                        >{$_("delete")}</button
 | 
			
		||||
                      >
 | 
			
		||||
                    </td>
 | 
			
		||||
                  {:else}
 | 
			
		||||
                    <td
 | 
			
		||||
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
 | 
			
		||||
                    >
 | 
			
		||||
                      <a
 | 
			
		||||
                        href="./{scan.id}"
 | 
			
		||||
                        class="text-indigo-600 hover:text-indigo-900"
 | 
			
		||||
                        >{$_("details")}</a
 | 
			
		||||
                      >
 | 
			
		||||
                      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
 | 
			
		||||
                        <button
 | 
			
		||||
                          on:click={() => {
 | 
			
		||||
                            active_deletes[scan.id] = true;
 | 
			
		||||
                          }}
 | 
			
		||||
                          tabindex="0"
 | 
			
		||||
                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
 | 
			
		||||
                          >{$_("delete")}</button
 | 
			
		||||
                        >
 | 
			
		||||
                      {/if}
 | 
			
		||||
                    </td>
 | 
			
		||||
                  {/if}
 | 
			
		||||
                </tr>
 | 
			
		||||
              {/each}
 | 
			
		||||
            </tbody>
 | 
			
		||||
          </table>
 | 
			
		||||
        </Datatable>
 | 
			
		||||
                    {/if}
 | 
			
		||||
                  </td>
 | 
			
		||||
                {/if}
 | 
			
		||||
              </tr>
 | 
			
		||||
            {/each}
 | 
			
		||||
          </tbody>
 | 
			
		||||
        </table>
 | 
			
		||||
      </div>
 | 
			
		||||
    {/if}
 | 
			
		||||
  {:catch error}
 | 
			
		||||
 
 | 
			
		||||
@@ -41,7 +41,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -41,7 +41,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div
 | 
			
		||||
        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
 | 
			
		||||
        <table class="divide-y divide-gray-200 w-full">
 | 
			
		||||
 
 | 
			
		||||
@@ -57,7 +57,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <div class="h-12">
 | 
			
		||||
        <GenerateSponsoringContracts
 | 
			
		||||
          bind:sponsoring_contracts_show
 | 
			
		||||
 
 | 
			
		||||
@@ -57,9 +57,9 @@
 | 
			
		||||
            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
 | 
			
		||||
            .classList.add("hidden");
 | 
			
		||||
          //
 | 
			
		||||
          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
 | 
			
		||||
          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
 | 
			
		||||
          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
 | 
			
		||||
          elem.childNodes[0].innerHTML = `<td data-column-id="trackName">${elem.childNodes[0].childNodes[0].value}</td>`;
 | 
			
		||||
          elem.childNodes[1].innerHTML = `<td data-column-id="trackName">${elem.childNodes[1].childNodes[0].value}</td>`;
 | 
			
		||||
          elem.childNodes[2].innerHTML = `<td data-column-id="trackName">${elem.childNodes[2].childNodes[0].value}</td>`;
 | 
			
		||||
        })
 | 
			
		||||
        .catch((err) => {});
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -36,7 +36,7 @@
 | 
			
		||||
        bind:value={searchvalue}
 | 
			
		||||
        placeholder={$_('datatable.search')}
 | 
			
		||||
        aria-label={$_('datatable.search')}
 | 
			
		||||
        class="gridjs-input gridjs-search-input mb-4" />
 | 
			
		||||
        class="mb-4" />
 | 
			
		||||
      <!-- {/if} -->
 | 
			
		||||
      <!-- <button
 | 
			
		||||
        on:click={() => {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,5 @@
 | 
			
		||||
import './style.css';
 | 
			
		||||
import "toastify-js/src/toastify.css";
 | 
			
		||||
import "gridjs/dist/theme/mermaid.css";
 | 
			
		||||
import App from './App.svelte';
 | 
			
		||||
 | 
			
		||||
const app = new App({
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user