wip: ScansOverview -> new datatable
This commit is contained in:
parent
9def0b27c9
commit
c87561f63b
GPG Key ID:
3BB9ADD52DCA4314
@ -2,19 +2,42 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { ScanService, TrackService } from "@odit/lfk-client-js";
|
import { ScanService, TrackService } from "@odit/lfk-client-js";
|
||||||
import store from "../../store";
|
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 Toastify from "toastify-js";
|
||||||
|
import TableBottom from "../shared/TableBottom.svelte";
|
||||||
|
import TableHeader from "../shared/TableHeader.svelte";
|
||||||
import ScansEmptyState from "./ScansEmptyState.svelte";
|
import ScansEmptyState from "./ScansEmptyState.svelte";
|
||||||
import ThFilterRunner from "./ThFilterRunner.svelte";
|
import InputElement from "../shared/InputElement.svelte";
|
||||||
import ThFilterTrack from "./ThFilterTrack.svelte";
|
import TableActions from "../shared/TableActions.svelte";
|
||||||
|
|
||||||
|
$: selectedScans =
|
||||||
|
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||||
|
$: selected =
|
||||||
|
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||||
|
|
||||||
|
$: active_delete = undefined;
|
||||||
$: active_deletes = [];
|
$: active_deletes = [];
|
||||||
export let current_scans = [];
|
export let current_scans = [];
|
||||||
const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
|
|
||||||
const rows = handler.getRows();
|
|
||||||
const scans_promise = ScanService.scanControllerGetAll().then((val) => {
|
const scans_promise = ScanService.scanControllerGetAll().then((val) => {
|
||||||
current_scans = val;
|
current_scans = val;
|
||||||
handler.setRows(val);
|
// handler.setRows(val);
|
||||||
|
current_scans = val;
|
||||||
|
options.update((options) => ({
|
||||||
|
...options,
|
||||||
|
data: current_scans,
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
$: allTracks = [];
|
let allTracks = [];
|
||||||
TrackService.trackControllerGetAll().then((val) => {
|
TrackService.trackControllerGetAll().then((val) => {
|
||||||
allTracks = val;
|
allTracks = val;
|
||||||
});
|
});
|
||||||
@ -38,6 +61,85 @@
|
|||||||
Math.floor(laptime / 60) * 60
|
Math.floor(laptime / 60) * 60
|
||||||
}`;
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
accessorKey: "id",
|
||||||
|
header: () => "id",
|
||||||
|
filterFn: `equalsString`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "runner",
|
||||||
|
header: () => $_("runner"),
|
||||||
|
cell: (info) => {
|
||||||
|
const runner = info.getValue();
|
||||||
|
return `#${runner.id} - ${runner.firstname} ${runner.lastname}`;
|
||||||
|
},
|
||||||
|
enableColumnFilter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: "actions",
|
||||||
|
header: () => $_("action"),
|
||||||
|
cell: (info) => {
|
||||||
|
return renderComponent(TableActions, {
|
||||||
|
detailsLink: `./${info.row.original.id}`,
|
||||||
|
deleteAction: () => {
|
||||||
|
active_delete =
|
||||||
|
current_scans[
|
||||||
|
current_scans.findIndex((r) => r.id == info.row.original.id)
|
||||||
|
];
|
||||||
|
},
|
||||||
|
deleteEnabled:
|
||||||
|
store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
enableColumnFilter: false,
|
||||||
|
enableSorting: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const options = writable({
|
||||||
|
data: [],
|
||||||
|
columns: columns,
|
||||||
|
initialState: {
|
||||||
|
pagination: {
|
||||||
|
pageSize: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
});
|
||||||
|
const table = createSvelteTable(options);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
||||||
@ -53,171 +155,51 @@
|
|||||||
{#if current_scans.length === 0}
|
{#if current_scans.length === 0}
|
||||||
<ScansEmptyState />
|
<ScansEmptyState />
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div class="overflow-x-auto">
|
||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
<table class="w-full">
|
||||||
>
|
<thead>
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<thead class="bg-gray-50">
|
<tr class="select-none">
|
||||||
<tr>
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
<Th {handler} orderBy="id">ID</Th>
|
<InputElement
|
||||||
<Th {handler}>
|
type="checkbox"
|
||||||
{$_("runner")}
|
checked={$table.getIsAllRowsSelected()}
|
||||||
</Th>
|
indeterminate={$table.getIsSomeRowsSelected()}
|
||||||
<Th {handler}>
|
on:change={() => $table.toggleAllRowsSelected()}
|
||||||
{$_("distance")}
|
/>
|
||||||
</Th>
|
</th>
|
||||||
<Th {handler}>
|
{#each headerGroup.headers as header}
|
||||||
{$_("track")}
|
<TableHeader {header} />
|
||||||
</Th>
|
{/each}
|
||||||
<Th {handler}>
|
</tr>
|
||||||
{$_("laptime")}
|
{/each}
|
||||||
</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>
|
</thead>
|
||||||
<tbody class="divide-y divide-gray-200">
|
<tbody>
|
||||||
{#each $rows as scan}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr data-rowid="scan_{scan.id}">
|
<tr>
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<div class="text-sm font-medium text-gray-900">
|
<InputElement
|
||||||
{scan.id}
|
type="checkbox"
|
||||||
</div>
|
checked={row.getIsSelected()}
|
||||||
|
on:change={() => row.toggleSelected()}
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
{#each row.getVisibleCells() as cell}
|
||||||
<div class="flex items-center">
|
<td>
|
||||||
<a
|
<svelte:component
|
||||||
href="../runners/{scan.runner.id}"
|
this={flexRender(
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
cell.column.columnDef.cell,
|
||||||
>{scan.runner.firstname}
|
cell.getContext()
|
||||||
{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"
|
|
||||||
>
|
|
||||||
<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>
|
</td>
|
||||||
{:else}
|
{/each}
|
||||||
<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>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<TableBottom {table} {selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user