drop old datatables
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user