71 lines
1.9 KiB
Svelte
71 lines
1.9 KiB
Svelte
<script>
|
|
import { _, json } from "svelte-i18n";
|
|
import TracksEmptyState from "./TracksEmptyState.svelte";
|
|
import store from "../store.js";
|
|
import { TrackService } from "@odit/lfk-client-js";
|
|
let tracks_promise = TrackService.trackControllerGetAll();
|
|
//
|
|
import { getlang } from "./datatable_i18n";
|
|
import { Grid } from "gridjs";
|
|
import "gridjs/dist/theme/mermaid.css";
|
|
//
|
|
let table;
|
|
tracks_promise.then((data) => {
|
|
let tabledata = [];
|
|
data.forEach((track) => {
|
|
tabledata.push([track.name, track.distance, "blablub"]);
|
|
});
|
|
console.log(tabledata);
|
|
// console.log(data);
|
|
const datatable = new Grid({
|
|
columns: ["Name", "Track Length in m", "Action"],
|
|
language: getlang($json("datatable")),
|
|
sort: true,
|
|
search: { enabled: true },
|
|
data: tabledata,
|
|
pagination: {
|
|
enabled: true,
|
|
limit: 25,
|
|
summary: false,
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
datatable.render(table);
|
|
}, 150);
|
|
table_visible = true;
|
|
});
|
|
let table_visible = false;
|
|
</script>
|
|
|
|
{#if table_visible}
|
|
<div bind:this={table} />
|
|
{/if}
|
|
{#await tracks_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">track data is being loaded...</p>
|
|
<p class="text-sm">This might take a moment 👀</p>
|
|
</div>
|
|
{:then tracks}
|
|
{#if tracks.length > 0}
|
|
<h4>{tracks.length}</h4>
|
|
<hr />
|
|
<ul>
|
|
{#each tracks as item}
|
|
<li>{item.name}</li>
|
|
<li>{item.distance}</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<TracksEmptyState />
|
|
{/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}
|